Captions for graphics using CSS

#1

I need a suggestion as to how I can place a caption below a graphic using
CSS.

Thanks very much!

Steve Griffin

#2

In article <bgc7em$1ca$1 (AT) forums (DOT) macromedia.com>,
"Steve Griffin" <stevegriffin (AT) compuserve (DOT) com> wrote:

Quote:

I need a suggestion as to how I can place a caption below a graphic using
CSS.

There are a lot of ways to do this, but it would help to know the
overall intention of the page, or at least how the picture will relate
to the rest of the content. If you have an example page, or even a
graphic mockup, that would be great.

--
Eric A. Meyer
http://www.meyerweb.com/eric/

#3

In article <bge6j5$doj$1 (AT) forums (DOT) macromedia.com>,
"Steve Griffin" <stevegriffin (AT) compuserve (DOT) com> wrote:

Quote:

The page will contain instructions on our ordering process, the first
instruction will be to "click here to view your options". clicking will
open a <div> containing four .gif images (each one is 65X65) representing
holiday themes. I'd like each of the graphics to have a caption (beneath
the .gif), say "Theme #1", "Theme #2", etc.

That does help quite a bit. However, you don't say if the images are
supposed to be in a row, stakced on top of each other, or any other
layotu considerations. None of this has to do with CSS-- if I were
advising you to use tables, I'd still need to know those things.
Nonetheless, I'll assume that you want them to be in a row, but to
"line-wrap" if the window isn't qide enough to show them all. Here's
basically how it would be done:

<div id="choices">
<div><img src="theme1.gif"> Theme #1</div>
<div><img src="theme2.gif"> Theme #2</div>
<div><img src="theme3.gif"> Theme #3</div>
<div><img src="theme4.gif"> Theme #4</div>
<div class="clearing"> </div>
</div>

Obviously, you'll need to add in 'alt' and other required information
for the images; I left that stuff out for the sake of clarity.
Now, here's how the CSS would go:

#choices img {height: 65px; width: 65px; display: block;}
#choices div {float: left; width: 75px; text-align: center;
border: 1px solid gray; margin: 5px 10px 5px 0;}
.clearing {clear: both; float: none; border: none;}

The 'clearing' element is a hack to get the #choices 'div' to stretch
around the floated 'div's, since we don't know how the floated 'div's
will wrap. If we knew they'd all be on one line, then we could drop the
clearing 'div' completely and use another approach.
If you were to use a table instead, I'd do it sommething like:

<table id="choices">
<tr>
<td><img src="theme1.gif"> Theme #1</td>
<td><img src="theme2.gif"> Theme #2</td>
</tr>
<tr>
<td><img src="theme3.gif"> Theme #3</td>
<td><img src="theme4.gif"> Theme #4</td>
</tr>
</table>

Then the CSS would be like this:

#choices img {height: 65px; width: 65px; display: block;}
#choices td {width: 75px; border: 1px solid gray; text-align: center;}

That looks simpler, and in a way it is simpler. However, we lost two
presentational abilities in using the table:

1. The separation between the choices that the floated version
permits. This can be adjusted with 'cellspacing' but it isn't quite the
same thing, because of the way cellspacing goes all the way around a
cell. You can't set cellspacing to only be on one side of table cells,
for example, or to have different cellspacing vertically than you do
horiztonally.
2. The themes are forced to be in a 2x2 grid, and changing that
requires a restructuring of the table. There's also no ability for the
table rows to change length based on the window width, which the CSS
version does very easily.

On the other hand, the table version means that:

1. You'll get a more consistent layout in browsers more than five
years old, like NN4.x, IE3, and so on.
2. You don't need the clearing hack to get the table to stretch
around its cells, since it does that automatically.

Which approach is better for you is impossible to guess. As an example,
if you don't want the choices to reflow when the browser window resizes,
then tables might be a better choice (although you can prevent reflow in
the CSS version too).
Hopefully, this presents the strengths and weaknesses of each
approach so that you can make the best choice for your project's needs.

--
Eric A. Meyer (eric (AT) meyerweb (DOT) com) http://www.meyerweb.com/eric/
Author, "Cascading Style Sheets: The Definitive Guide,"
"Eric Meyer on CSS," "CSS 2.0 Programmer's Reference," and more
http://www.meyerweb.com/eric/books/

#4

Eric ... you are very kind to have provided such an in-depth example and
explanation! I need some time to digest it, as I'm a CSS newbie. I'll let
you know something soon.

Thanks again!

Steve Griffin

"Eric A. Meyer" <eric (AT) meyerweb (DOT) com> wrote

Quote:

In article <bge6j5$doj$1 (AT) forums (DOT) macromedia.com>,
"Steve Griffin" <stevegriffin (AT) compuserve (DOT) com> wrote:

The page will contain instructions on our ordering process, the first
instruction will be to "click here to view your options". clicking will
open a <div> containing four .gif images (each one is 65X65)
representing
holiday themes. I'd like each of the graphics to have a caption
(beneath
the .gif), say "Theme #1", "Theme #2", etc.

That does help quite a bit. However, you don't say if the images are
supposed to be in a row, stakced on top of each other, or any other
layotu considerations. None of this has to do with CSS-- if I were
advising you to use tables, I'd still need to know those things.
Nonetheless, I'll assume that you want them to be in a row, but to
"line-wrap" if the window isn't qide enough to show them all. Here's
basically how it would be done:

div id="choices"
div><img src="theme1.gif"> Theme #1</div
div><img src="theme2.gif"> Theme #2</div
div><img src="theme3.gif"> Theme #3</div
div><img src="theme4.gif"> Theme #4</div
div class="clearing"> </div
/div

Obviously, you'll need to add in 'alt' and other required information
for the images; I left that stuff out for the sake of clarity.
Now, here's how the CSS would go:

#choices img {height: 65px; width: 65px; display: block;}
#choices div {float: left; width: 75px; text-align: center;
border: 1px solid gray; margin: 5px 10px 5px 0;}
.clearing {clear: both; float: none; border: none;}

The 'clearing' element is a hack to get the #choices 'div' to stretch
around the floated 'div's, since we don't know how the floated 'div's
will wrap. If we knew they'd all be on one line, then we could drop the
clearing 'div' completely and use another approach.
If you were to use a table instead, I'd do it sommething like:

table id="choices"
tr
td><img src="theme1.gif"> Theme #1</td
td><img src="theme2.gif"> Theme #2</td
/tr
tr
td><img src="theme3.gif"> Theme #3</td
td><img src="theme4.gif"> Theme #4</td
/tr
/table

Then the CSS would be like this:

#choices img {height: 65px; width: 65px; display: block;}
#choices td {width: 75px; border: 1px solid gray; text-align: center;}

That looks simpler, and in a way it is simpler. However, we lost two
presentational abilities in using the table:

1. The separation between the choices that the floated version
permits. This can be adjusted with 'cellspacing' but it isn't quite the
same thing, because of the way cellspacing goes all the way around a
cell. You can't set cellspacing to only be on one side of table cells,
for example, or to have different cellspacing vertically than you do
horiztonally.
2. The themes are forced to be in a 2x2 grid, and changing that
requires a restructuring of the table. There's also no ability for the
table rows to change length based on the window width, which the CSS
version does very easily.

On the other hand, the table version means that:

1. You'll get a more consistent layout in browsers more than five
years old, like NN4.x, IE3, and so on.
2. You don't need the clearing hack to get the table to stretch
around its cells, since it does that automatically.

Which approach is better for you is impossible to guess. As an example,
if you don't want the choices to reflow when the browser window resizes,
then tables might be a better choice (although you can prevent reflow in
the CSS version too).
Hopefully, this presents the strengths and weaknesses of each
approach so that you can make the best choice for your project's needs.

--
Eric A. Meyer (eric (AT) meyerweb (DOT) com) http://www.meyerweb.com/eric/
Author, "Cascading Style Sheets: The Definitive Guide,"
"Eric Meyer on CSS," "CSS 2.0 Programmer's Reference," and more
http://www.meyerweb.com/eric/books/

#5

In article <bgem18$buc$1 (AT) forums (DOT) macromedia.com>,
"Steve Griffin" <stevegriffin (AT) compuserve (DOT) com> wrote:

Quote:

Eric ... you are very kind to have provided such an in-depth example and
explanation! I need some time to digest it, as I'm a CSS newbie. I'll let
you know something soon.

Thanks again!

My pleasure. I may turn my response into a longer and mroe detailed
article for publication on the Web, if I can find the time.

--
Eric A. Meyer (eric (AT) meyerweb (DOT) com) http://www.meyerweb.com/eric/
Author, "Cascading Style Sheets: The Definitive Guide,"
"Eric Meyer on CSS," "CSS 2.0 Programmer's Reference," and more
http://www.meyerweb.com/eric/books/

#6

"James M. Shook" <james_shook (AT) comcast (DOT) net> wrote

Quote:

Oooh, please do. This is one of the thorniest problems I have encountered
when trying to create a CSS layout--a graphic with a caption centered
below
it, floated left or right, with text flowing around it and a margin
between
the the graphic and the text.

See http://www.alistapart.com/stories/practicalcss/

Gary

#7

In article <bggeiq$mj3$1 (AT) forums (DOT) macromedia.com> , "Gary White"
<reply (AT) newsgroup (DOT) please> wrote:

Quote:

See http://www.alistapart.com/stories/practicalcss/

My attempt to duplicate this:
http://www.jshook.com/DW_Tests/wrap_pic.html

Where did I go wrong? I'm sure there is something perfectly obvious that I'm
not seeing, but I've checked my code against that at alistapart and can't
find any differences....

-- James M. Shook
http://www.jshook.com

#8

"James M. Shook" <james_shook (AT) comcast (DOT) net> wrote

Quote:

In article <bggeiq$mj3$1 (AT) forums (DOT) macromedia.com> , "Gary White"
reply (AT) newsgroup (DOT) please> wrote:

See http://www.alistapart.com/stories/practicalcss/

My attempt to duplicate this:
http://www.jshook.com/DW_Tests/wrap_pic.html

Where did I go wrong? I'm sure there is something perfectly obvious that
I'm
not seeing, but I've checked my code against that at alistapart and can't
find any differences....

I'm not sure you did, James. The only thing I see there is that your caption
is wider than your image. Try it with slightly larger thumbnails and maybe
change your div.float p definition:

div.float p {
text-align: center;
margin: 0px;
font-size: x-small;
}

I think it's working. It's just that it doesn't show. When I played with
it, I also put a little margin in the div.float definition.

div.float {
float: left;
margin: 10px;
}

Gary

#9

In article <bgguka$f7p$1 (AT) forums (DOT) macromedia.com> , "Gary White"
<reply (AT) newsgroup (DOT) please> wrote:

Quote:

I think it's working. It's just that it doesn't show.

Here's what I see in IE5/Mac:
http://www.jshook.com/DW_Tests/images/wrap.gif

I don't think the tweaks you suggest will change this much. I must have
missed something, because the alistapart.com page *does* work.

This is why I despair of ever getting anything close to what I want in
CSS-P. And believe me, I've tried. The most recent time I gave up was trying
to do something very similar to this. Switched to tables and I was done in
five minutes.

-- James M. Shook
http://www.jshook.com