Captions under images

S

sorry.no.email

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?

Thanks for your trouble,

Andrew.

PS I have an unkind thought that this could actually be done fairly
easily using tables :). Hmmmmm.....
 
N

Neredbojias

To further the education of mankind, (e-mail address removed) declaimed:
Can anybody suggest a straightforward way to put captions under all
these images using CSS?

Considering browser vagaries/differences and positioning, there is none.
The best pragmatic way I've found for image-captions is inline tables.
Typically, however, there is an issue with inline vs. inline-block and
Opera vs. other browsers.
 
B

BootNic

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>
 
J

Jonathan N. Little

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>
...
 
J

Jukka K. Korpela

Can anybody suggest a straightforward way to put captions under all
these images using CSS?

There are several straightforward ways, with or without CSS. None of them is
the correct one, since there is no markup designed for image captions, sadly
enough. It's up to your taste and style as well as the context.

For example, you could put each image in a single-cell table with a <caption>
element and use an HTML attribute and/or some CSS to make the caption appear
under the cell. This would work both for isolated images and (using
<table align="left"> or <table align="right">) for floated images. More info:
http://www.cs.tut.fi/~jkorpela/www/captions.html
 
M

mbstevens

'So now we have a bunch of nested DIVs. How is this any
better than the nested tables they replace?'

If there are multiple image-caption pairs
they _do_ qualify as tabular data -- so long as you
keep all the images in one row/col, and all the captions
in another row/col. This is not so good if there are enough
images with captions _under_ them to wrap or cause
horizontal scrolling. That's a reason to put the captions
in one column _beside_ the images in a second column,
if you are using a table.

But if the captions must be under the images
and there are enough to wrap or cause horizontal
scrolling, then I would
agree that the data should be represented in divs.

Here's a good article on div representation:
http://realworldstyle.com/thumb_float.html
 
J

Jose

If there are multiple image-caption pairs
they _do_ qualify as tabular data -- so long as you
keep all the images in one row/col, and all the captions
in another row/col.

How about putting the image and caption in the same cell, separated by a
carriage return (or paragraph delimiter)? This should have the effect
of keeping the two together, while putting the caption below the
picture. Some may argue that it's not really a "table" with just one
column; but I'd say it's a degenerate table and if that's what must be
done to get around the lack of a caption element, so be it.

Jose
 
M

mbstevens

Jose said:
How about putting the image and caption in the same cell, separated by a
carriage return (or paragraph delimiter)?

In that case, there is no association of data down rows or across
columns. You no longer have semantic markup. I would just use a div,
which is _made_ for use as a kind of bag into which associated data
can be placed.
 
D

dorayme

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/

Well, there are complex issues here. For a start, this reference
uses pics all the same size and so will be no help on this
particular variable. But it is a nice example of some things, one
of them being that it does separate style from content which
should by now obviously be a good thing (whether over-riding is
another matter).

And it has the nice advantage of wrap. This is a very great
advantage for a page chock full of thumbnails. You won't get this
in tables, you will get scrollbars!

As for tables being easier to write up, yes, probably. But only
if you are judging crude looks. More subtle ones to accomodate
different sized thumbnails to line up nicely in some way and it
gets trickier even in tables.
Can anybody suggest a straightforward way to put captions under all
these images using CSS?

Well, he did! It was simple enough? You break, you text-align and
that is that. By the way, if you don't like the large space
between the pic and the caption, add a zero or smaller
line-height (assuming the caption is _not_ going to go on and on
to wrap)

If you are just captioning larger pictures, instead of your <p
class="centre"><img src="images/headstone.jpg" title="Headstone
of Joseph Strong" alt="Headstone of Joseph Strong" width="510"
height="283" /></p> use a div, style it to centre and so on. (i
am surprised, given you are using a centered p, that you did not
just go on and simply use a break and caption text in the p?
 
N

nice.guy.nige

While the city slept, (e-mail address removed)
([email protected]) feverishly typed...

Hello again,

So, you are still subjecting the legitimate owners of spamsux.com to ironic
spam, despite my previous message (backed up by others on the group)

Again, I ask, are you the legitimate owner of spamsux.com, or have they
allowed you to use the domain as a reply-to address? The domain is
registered, so if you are using it without their permission, they may have
reasonable grounds to be rather annoyed -- especially if your posts to
usenet are causing more spam to arrive on their servers.

Cheers,
Nige
 
S

sorry.no.email

Hi Stan,

Thanks for your reply:

sorry.no.email@post_NG.com wrote in


Now would you change your top posting behavior to in-line?

Should I also change my will to include you :)

Andrew.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top