Image Caption using CSS

@WebJoelAug 20.2007 — #Here is a little thing I made a long time ago, -sort of like what you are showing:
<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title> New Document </title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta name="Generator" content="" />

<meta name="Author" content="" />

<meta name="Keywords" content="" />

<meta name="Description" content="" />

<style type="text/css">

* {margin:0; padding:0; border:0;} /* Re-sets IE to "zero" for these values */

body {min-height:100%; height:100%;

font:x-small Arial, Verdana, sans-serif;

voice-family: ""}"";voice-family:inherit;

font-size:small;/*for IE 5.5 */

} html>body {font-size:small;}

/*font-size: small; voice-family: ""}"";

voice-family: inherit; font-size: medium;*/} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size: 90%; line-height:1.2em; margin-top:6px;}

h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif;

font-style:normal; font-variant:normal; font-weight:normal; margin:11px 0 0 10px;}

h1{font-size: 1.93em; margin-top:12px;}

h2{font-size: 1.72em; margin-top:12px;}

h3{font-size: 1.52em; margin-top:12px;}

h4{font-size: 1.42em; margin-top:12px;}

h5{font-size: 1.32em; margin-top:12px;}

h6{font-size: 1.21em; margin-top:12px;}

ul#photobook {position:relative; width:650px; height:410px; margin:70px auto; list-style-type:none;

font-family:arial, verdana, serif; border:5px double silver;}

ul#photobook h1 {position:absolute; left:105px; top:-55px; width:450px; margin:20px auto; text-align:center; border:3px double silver; border-bottom: 0 none;}

ul#photobook li {float:left; margin:7px;}

ul#photobook li img {border:1px solid blue; height:80px; width:144px; display:block;}

ul#photobook li p {text-align:center; margin:5px 0; width:140px; height:30px;}

.clear {clear:all;}

</style>

</head>

<body>

<ul id="photobook">

<li><img src="#" alt="this is a picture"/>L. Ips. Dolar</li>

<li><img src="#" alt="this is a picture" />Lorem Ipsum Dolar your visible descriptive text</li>

<li><img src="#" alt="this is a picture" />Lorem Ipsum Dolar </li>

<li><img src="#" alt="this is a picture" />Lorem Ipsum Dolar your descriptive text</li>

<li><img src="#" alt="this is a picture" />Lorem Ipsum Dolar your visible descriptive text</li>

<li><img src="#" alt="this is a picture" />Lorem Ipsum Dolar your descriptive text</li>

<li><img src="#" alt="this is a picture" />Lorem Ipsum Dolar </li>

<li><img src="#" alt="this is a picture" />Lorem Ipsum Dolar</li>

<li><img src="#" alt="this is a picture" />Lorem Ipsum text</li>

<li><img src="#" alt="this is a picture" />Lorem Ipsum Dolar your descriptive text</li>

<li><img src="#" alt="this is a picture" />Lorem Ipsum text</li>

<li><img src="#" alt="this is a picture" />Lorem Ipsum Dolar your descriptive text</li>

<li><h1>An all-CSS image-ready photobook</h1></li>

</ul>

</body>

</html>[/QUOTE] The image you showed looks like a javascript thing I think I saw over on dynamicdrive.com, -a 'polaroid image viewer script' I think it was called(??). You set up the script and a 'class' is given to any number of images, and there are a few others steps to do but basically, the image is given a bottom 'padding' that allows you to enter a line or two of text...

Image Caption using CSS

2 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Image Caption using CSS

2 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #CSS _↴