hello everyone.
I am trying to create images with captions. I have code that works fine
except that I can find no way to centre the div within my container div.
any ideas?
div.image_plus_caption {
padding: 0;
padding-bottom: .8em;
border: 2px solid black;
margin: 0;
margin-bottom: 1em;
background-color: #3f3f3f;
}
.w480 {
width: 100%;
max-width: 400px;
}
div.image_plus_caption img{
width: 100%;
padding: 0;
border: none;
margin: 0;
}
div.image_plus_caption p {
color: #ffffff;
font-size: 80%;
line-height: 1.5em;
padding: .8em;
padding-bottom: 0;
margin: 0;
}
sample code (this div contained within the page's container divs):
<div class="w480 image_plus_caption">
<img alt="A green visitor" title="A green visitor"
src="green_visitor_480x320.jpg" width="480" height="320" border="0" />
<p>my caption text I don't know if it was the multiple flashes from the
camera as it tried to focus on the snake in the dark</p>
<p>but the snake remained fairly quiet as I photographed</p>
</div>
for the record, I also tried using a simple table instead and centering
the table within a <p> but that didn't work either because I couldn't
get the table to collapse to the width of the image while allowing the
caption text to wrap beneath. the table always expanded according to the
caption text's requirements, even with a max-width in place.
I only tested with Safari/OmniWeb/OS X's WebKit.
sincerely,
Gregory
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
