Captions for graphics using CSS

In article <bggt7v$dgb$1 (AT) forums (DOT) macromedia.com>,
"James M. Shook" <james_shook (AT) comcast (DOT) net> wrote:

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

You didn't give your floated elements a width, as the CSS
specification practically requires. Setting a temporary border for
'div.float' reveals what's happening pretty clearly. Giving them a
width should fix the problem.

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

In article <eric-FB104A.19305202082003 (AT) forums (DOT) macromedia.com> , "Eric A.
Meyer" <eric (AT) meyerweb (DOT) com> wrote:

You didn't give your floated elements a width, as the CSS
specification practically requires. Setting a temporary border for
'div.float' reveals what's happening pretty clearly. Giving them a
width should fix the problem.

I'll give that a try, but the example at alistapart.com didn't do that. So
why does my page fail and theirs work?

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

I think I got it:
http://www.jshook.com/DW_Tests/wrap_pic.html

There must be a way to use inheritence to simplify the CSS--it seems
wasteful to have to specify both a left and right float class, when all that
differs between them is their float and margins.

Also, it would be nice to be able to write a class whose width isn't tied to
the width of the image.

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

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

I think I got it:
http://www.jshook.com/DW_Tests/wrap_pic.html

There must be a way to use inheritence to simplify the CSS--it seems
wasteful to have to specify both a left and right float class, when all
that
differs between them is their float and margins.

Why not just use a myFloat class and set whatever properties you need EXCEPT
the ones that differ. Then assign those with an ID?

div.myFloat{
text-align: center;
width: 100px;
margin: 0px;
padding: 0px;
}
div.myFloat p {
margin-top: 5px;
margin-bottom: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #848484;
}
#myLeft {
float:left
margin-right: 15px;
}
#myRight {
float:right
margin-left: 15px;
}

<div id="myLeft" class="myFloat">
....
</div>

<div id="myRight" class="myFloat">
....
</div>

Note that I omitted a couple of things from the "myFloat p" class because
they should inherit from the myFloat class.

Gary