|
Posted by BootNic on 04/03/06 18:04
> "sorry.no.email@spamsux.com" <sorry.no.email@spamsux.com> wrote:
> news:efv132pbb7d52ohssjl0mvpiifg0167ai8@4ax.com....
>
> Hi,
>
> I am preparing a family history site with a fair few images and
> have tried several methods of using CSS to get a caption under
> images. These are images floated left and right as well as images
> centred by enclosing them in p tags. A typical page is:
>
> http://people.aapt.net.au/~adjlstrong/strongs/chapter_5.html
[snip]
>
> Can anybody suggest a straightforward way to put captions under all
> these images using CSS?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content=
"text/html; charset=windows-1252">
<style type="text/css">
..img{
border:solid brown 0.1em;
margin: 5px 0 5px 0;
padding: 1px;
}
..img p{
text-align:center;
color:#008000;
background-color:#FFFFE0;
margin:1px 0 0 0;
}
..img span{
text-align:left;
display:table;
margin:auto;
}
</style>
<!--[if IE]>
<style type="text/css">
..img span{
display:inline-block;
}
</style>
<![endif]-->
<title></title>
</head>
<body>
<div class="img" style="width:100px">
<img src="image1.gif" style="width:100px;height:100px;" alt=
"image 1"><br>
<p><span>caption 1</span></p>
</div>
<div class="img" style="width:150px">
<img src="image2.gif" style="width:150px;height:100px;" alt=
"image 2"><br>
<p><span>caption 2</span></p>
<p><span>A second paragraph.</span></p>
</div>
<div class="img" style="width:200px">
<img src="image3.gif" style="width:200px;height:100px;" alt=
"image 3"><br>
<p><span>caption 3 with a longer caption that may
wrap.</span></p>
</div>
</body>
</html>
--
BootNic Monday, April 03, 2006 11:00 AM
There is no such thing as an underestimate of average intelligence.
*Henry Adams*
Navigation:
[Reply to this message]
|