|
|
Posted by Jonathan N. Little on 04/03/06 19:41
sorry.no.email@spamsux.com wrote:
> 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
>
> At the moment I am depending on title tags alone on the images as
> most of the methods I have tried and read about are cumbersome and
> convoluted or depend on images being all the same size on a page.
>
> A great example is:
>
> http://www.alistapart.com/articles/practicalcss/
>
> which starts simply and becomes more and more complex, leading to his
> question: 'So now we have a bunch of nested DIVs. How is this any
> better than the nested tables they replace?' Which he answers
> beautifully of course :-)
>
> Can anybody suggest a straightforward way to put captions under all
> these images using CSS?
<style type="text/css">
..pixbox{
float: left;
margin: .5em;
border: 1px solid black;
padding: .5em;
color: #000;
background-color: #ccc;
text-align: center;
}
..pixbox IMG {
display: block;
margin: 0 auto;
border: 1px solid black;
padding: 0;
}
</style>
<div class="pixbox">
<img src="image1.jpg" alt="my image 1">
My caption for image 1
</div>
<div class="pixbox">
<img src="image2.jpg" alt="my image 2">
My caption for image 2
</div>
<div class="pixbox">
<img src="image3.jpg" alt="my image 3">
My caption for image 3
</div>
...
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Navigation:
[Reply to this message]
|