Image With Caption, stylized

[aqualizard]

I have made and image with a caption using CSS, but I am hoping someone
can show me how to do it better. By better I mean less HTML, and
hopefully have it work with any sized image where I do not have to hard
code the width of the container that holds the image.

Here is a description:
I want to have an image with a caption underneath, aligned on the left.
There should be a black keyline around the image, and the caption
underneath, and the caption needs a grey background color with white
text. Furthermore, the object (image and caption together) needs to
have a margin on the top, right, and bottom so the body text can wrap
around it.

Here is my current HTML:

<div style="float: left; width: 436px;"><!-- width=image width(414)
+ right-margin(20)
+ img border(1+1) = 436
-->
<div class="image_left"><img src="../images/some_pic.jpg"
width="414"></div>
<div class="caption_left"><b>image caption</b> - Blah, blah,
blah...</div>
</div>

Here is my external stylesheet:

DIV.image_left
{ BORDER: 1px solid #000000;
MARGIN-TOP: 10px;
MARGIN-RIGHT: 20px; }

DIV.caption_left
{ BORDER-TOP: 0px;
BORDER-LEFT: 1px solid #000000;
BORDER-RIGHT: 1px solid #000000;
BORDER-BOTTOM: 1px solid #000000;
MARGIN-RIGHT: 20px;
MARGIN-BOTTOM: 5px;
PADDING: 3px;
BACKGROUND-COLOR: #666666;
COLOR: #ffffff;
FONT-SIZE:80%;
WHITE-SPACE: wrap; }

It all works and look ok, but like I said, I hate having to hard code
the main DIV ("width: 436px"). Is there a way to get it to work
without this hard-coding, based on the width of the image (which is
dynamically pulled from a database.) And can someone do it so there is
less HTML (CSS size does not matter)?

Thanks! I am an ASP/PHP programmer, and my CSS knowledge is not my
strength...

aqualizard

[Haines Brown]

aq********@gmail.com writes:

I have made and image with a caption using CSS, but I am hoping someone
can show me how to do it better. By better I mean less HTML, and
hopefully have it work with any sized image where I do not have to hard
code the width of the container that holds the image.

I'm not sure if this is what you want. I use an external style sheet
for generic definitions, and the local style for the image width and
height (indicated below as "XXX") because these tend to be unique to
each page, and use the page body for the caption text:
In the style sheet (I leave in some irrelevant petty details):

div.image-container {
margin-top: 0.3em;
margin-left: 0.3em;
float: right;
}
div.image-container img {
background-color: transparent;
}
div.image-container div {
text-align: center;
margin-top: 0.3em;
line-height: 9pt;
}
div.image-container span {
font-size: smaller;
font-family: sans-serif;
}

You have to specify the width and height of the image, so I assume
that information does not fall under you "hand coding." Since this
information, and the float definition, tends to be different on each
page, I leave that style definition for in the document head::

div.image-container { width: XXXpx; }
#image-name { width: XXXpx; height: XXXpx; }
div.image-container {float: right;}
And in the body itself:

<div class="image-container">
<img id="image-name" src="image.png" alt="[image identifier]" />
<div>
<span>
Caption text
</span>
</div>
</div>

--

Haines Brown
KB1GRM

[aqualizard]

Thanks for the response, Haines.

That is an interesting approach, the way you have an external sheet
for most of the stuff, and then add a couple properties to its styles
in the HEAD section. Gave me a couple new ideas for other stuff!

BUT...

I really am hoping I can get the effect I have above, but without
having to hard-code the image or div widths. So the EXACT same HTML
and style will work for my "Image/Caption" Objects with various-sized
images that "adapt" on the fly to fit the image. I want to avoid
writing any widths altogether...

Thanks,
aqualizard