Jump to content

How do I add captions to images?


harambeegirl
 Share

Recommended Posts

I want to add captions under the images in a horizontal <div>. I know about the caption-side property, but W3C says that IE6 does not support that property. I tried it and, sure enough, it does not work. I wonder if it matters that I am not using tables and if that could be why it does not work. Is there another way to add a caption to an image that is supported in all (Opera, Firefox, and Explorer) browsers?

Link to comment
Share on other sites

How about using a table?
<table border="0" cellpadding="0" cellspacing="0">	<tr>		<td><img src="images/picture.jpg"></td>	</tr>	<tr>		<td>My caption</td>	</tr></table>

You can then use CSS styles to set the font, line things up and so forth.

For this design, I have been avoiding using tables by using <div> On my first design, I did use tables and my site was not cross-browser compatible. Now all of my images are in a <div>According to the developers at the Microsoft Expression Web Designer forum, if I decide to use <div>, then I should be consistent and use <div> all the way through the site.So, I am rather confused. When is it best to use tables and when is it best to use <div>? Is it good practice to mix the two and put a table inside a <div>?
Link to comment
Share on other sites

I recomend using divs, there no difference except tables clutter alot, and if the site is decently big it can be hard to navigate through. Also tables have a few more features, like borders and cells and such so they can be easier to use for the "newb" but for most professionals they prefer to use divs cause they got l33t skeelz and can do stuff like that anyways :).If you want a caption under an image just put the div and image in their own div, then after the image put a <br /> tag. like so:

<div>stuff...stuff...stuff...stuff...stuff...<div style="width: 200px; height: 200px;"><img src="url" alt="image!!" /><br />Hello, this is an awesome caption isnt it :)</div>stuff...stuff...stuff...stuff...stuff...</div>

Link to comment
Share on other sites

I resolved this by adding a <span> tag before the caption text, inserting an embedded style with wide left/right margins and placing this code below the images.

img.hspace1 {	padding: 0px 30px;	border: none;	margin: 7.5px 0px;}.caption {	margin: 0px 20px;	color: #00CC00;	font-size: small;	font-weight: lighter;}<div id="navmenu" style="visibility: visible"><a href="xxx.htm"><img class="hspace1" src="image1.gif"/></a><a href="xxx.htm"><img class="hspace1" src="image2.gif"/></a><a href="xxx.htm"><img class="hspace1" src="image3.gif"/></a><a href="xxx.htm"><img class="hspace1" src="image4.gif" /></a><a href="xxx.htm"><img class="hspace1" src="image5.gif"/></a><a href="xxx.htm"><img class="hspace1" src="image6.gif"/></a><a href="xxx.htm"><img class="hspace1" src="image7.gif"/></a><span class="caption">TextA</span><span class="caption">TextB</span><span class="caption">TextC</span><span class="caption">TextD</span><span class="caption">TextE</span><span class="caption">TextF</span><span class="caption">TextG</span></div>

Link to comment
Share on other sites

Looks like a pretty good approach to me. (Seem to need a BR before the span though?? What browser are you using?)You could also consider whether it would help in this case to make the styles less dependent on the image/caption sizes. For instance:

img.hspace1 {	padding: 0px 30px; 	border: none; 	width: 100px;}.caption { 		padding: 0px 30px; 	color: #00CC00; 	font-size: small; 	font-weight: lighter;	text-align: center;	width: 100px;}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...