Jan Erik Moström wrote:
> Another basic CSS question. What I would like to do is to create a part of
> page
> that contains a photo with a caption that is centered on the page, something
> like this:
>
> -------------------------------------------
> | some other part of the page |
> -------------------------------------------
> | |
> | --------------------------- |
> | | | |
> | | | |
> | | picture | |
> | | | |
> | --------------------------- |
> | Caption line 1 |
> | Caption line 2 |
> | |
> -------------------------------------------
> | some other part of the page |
> -------------------------------------------
>
> After some experimenting and checking the web I've come up with the following
> HTML
>
> <div id="pagecontent">
> <div id="picture">
> <img src="port.jpg" alt="" width="480" height="640" /><br />
> <p>Ett litet test</p>
> </div>
> </div>
>
> and the CSS
>
> #pagecontent
> {
> width: 480px;
> margin: 0 auto;
> }
>
> #picture img
> {
> padding: 6px;
> margin: 0px;
> border: 1px solid #555;
> }
>
> #picture p
> {
> padding: 0px;
> text-align: center;
> }
>
> while this works it requires that I adjust the width of pagecount. My problem
> is
> that I want to generate these pages automatically, and while the program I use
> generate height and width tags that I can use I can't do math. Which means
> that
> if I want to have the border around the picture the centering will be slightly
> off.
>
> So I start to wonder if there is some better way of doing this that doesn't
> require me to know the picture size.
>
> jem
>
>
>
Hello,
Are all the images of varying widths and heights?
Perhaps you could try margin : 0 auto ; on the img itself and lose the
fixed width on the container?
Or you can set the width of the image in the CSS and set the height to
auto. As far as I know it overrides the width and height associated with
the image tag in the html. The first option may work better though and
avoids getting the browser to re-size images.
hth,
Rob.
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
