CSS tip to add a caption or title to an image on your website. Easy to follow example. Test it out and play with the settings to create your own look.
Adding a Caption to an Image with CSS
By Linda Chadbourne | March 17th, 2008 |
Want an easy way to add a caption to an image like this?
HTML
<div class="imagecaption">
<img src="your-image-here.jpg">
<alt="Stacked" width="150" height"100" /><p>Orange Pyramid</p> </div>
CSS
.imagecaption {
width: 200px;
border: 1px solid #999999;
padding: .5em;
}
p {
font: small Verdana, Arial, Helvetica, sans-serif;
text-align: center;
}
About The Author
Article By: Linda Chadbourne
Linda Chadbourne has been a web designer since 1998. A large portion of her day also involves graphic and logo design for Maine-ly Web Design which she owns and operates. Linda is also one of the co-founders of The Web Squeeze which is a Web Design and Development Help Forum. In her free time she is an avid family person, horseback rider and reader.
You can view other posts by Linda Chadbourne. Or you can visit Linda's website at: http://www.maine-lyweb.com/
Loading ...
July 17th, 2008 at 4:43 am
This isn’t really valid code, is it?
That should be a single line:
Oh, and I’ve noticed that leaving out the px in height and width sometimes screwes up things.
July 17th, 2008 at 8:24 am
Hmmm… why is it not valid code? And what should be in one line?
Units are very important, you should never leave them out … never. Unless of course you have a value of 0. Then 0px or 0em or 0% it’s all the same. It’s still 0.