CSS Image Caption

Aligning a caption under an image with CSS

[Lorel]

Hi,

I am trying to put a caption under images and allow the text to wrap around them and also make the image and text a link. I've tried this with a div but the link breaks out of the div and is positioned above the paragraph.

Is there a way to do this?

Lorel

[bunltd]

Something like this was just discussed on another thread: using a definition list [webmasterworld.com]

LisaB

[Lorel]

Hi Lisa,

That link helped, however it didn't fully apply to what I'm doing as I'm not making a gallery but trying to wrap text around an image with a caption under the image and the image and caption being a link.

I almost have this working however (on a Mac, IE 5.1) except I can't figure out how to get it to align the image with the top of the text.

Can someone tell me how to do this please?

I had to make separate code for left and right aligned images and I didn't need the dd tag and some of the other code as in the original referenced above:

CSS

dl.imageleft { width: 210px; text-align: center;
float: left; vertical-align: top;}
.imageleft dt {font-weight: bold; font-size:11px;
color: #000; vertical-align: top;}
.imageleft dt img {width: 200px;}

dl.imageright { width: 210px; text-align: center;
float: right; vertical-align: top;}
.imageright dt {font-weight: bold; font-size:11px;
color: #000; vertical-align: top;}
.imageright dt img {width: 200px;}

HTML

<dl class="imageright">
<a href="picture.html">
<dt><img src="images/picture1.jpg" align="right" width="200" height="131" border="0" alt="picture 1"></dt>
<dt>picture 1</dt></a></dl>

ALSO, I surrounded the <dt> tags with a URL as I didn't see any other way to get this to work as you can't have the beginning URL tag in one dt and the end tag in the next dt (I assume).

Can anyone see anything here that might not work in all browsers?

thanks,
Lorel

[justp380]

Hi Lorel do you have a copy of your code so I can see
what needs changed.

[Lorel]

Hi Justp

I'll send the code by sticky mail.

PS. I figured out I should only try and make a link out of the text and not both image and text.
so the link validates now.

And re the picture not vertically alinged to the text-- the page displays correctly in Netscape 4.79 on the Mac but not IE 5.01. So it might be a Net-vs IE bug.

Lorel

Lori

[ArrTu]

Im not sure, but I think this [css.maxdesign.com.au] is what you are looking for

[Lorel]

Hi Artu,

Im not sure, but I think this is what you are looking for

Thanks much. That site had a good tutorial on making an image float to the right with a caption under it. The instructions to aling image with top of text worked for the right float but not the left so I added a margin to top of image and it pushed it down to top of first line of text.

Lorel