Help CSS Expert Needed

[Paul Waters]

I am using CSS instead of tables. So much easier, but I thing I haven't figured out how to do.

I want to have a page of thumbs, which is easy, but I want to attach a caption below the image.

Then have the next image appear to the right of the first image, and so on.

Best I can think of is two div blocks and use a z overlay, but I hope there is something more eloquent.

Thanks!

[Coyote]

Howdy Paul,

I'm no expert, but I used this method a few years ago. Obviously you'll need to modify it to fit your requirements, but it is a good starting point.

To ensure I understand your question, I'll break the problem down by steps.

You want the caption beneath the image, like so,

Image
Caption

Next, you want the resulting image/caption repeated horizontally, like so,

Image       Image
Caption     Caption     ...and so on.

Lastly, you want the image/caption pairs to wrap within a specified container, like so,

Image      Image
Caption    Caption

Image
Caption   ...and so on.

To associate centered captions beneath images, you can use this method in your css file...

div.float { float: left; }
div.float p { text-align: center; }

...and your html might be...

<div class="float">
<img tag><br />
<p>caption</p>
</div>

This method will wrap any number of image/caption pairs within the browser window.

You can also place the image/caption pairs within a container for positioning...

...add to css file...

div.container { margin: 6pt 6pt 6pt 6pt; }

Note that because the container itself will not occupy render space, you have to trick-boink it by adding a style for the actual renderable content, like so,

div.boink { clear: both; }

The resulting html might look like this...

<div class="container">

<div class="boink"> </div>

<div class="float">
<img tag><br />
<p>caption</p>
</div>
...repeat image/caption pairs.

<div class="boink">&ampnbsp;</div>

</div>

Hope this helps.

ps. sorry for havin' to trick-boink the post to get the info to display correctly.

[Paul Waters]

Originally posted by Coyote I'm no expert, ....


To associate centered captions beneath images, you can use this method in your css file...

div.float { float: left; }
div.float p { text-align: center; }

Expert or not, that is exactly what I needed! Thank you. If you ever get to Toronto, you have an open invite for a few pints!

What I hadn't tried, and don't understand why it works is the lines that are:

div.float using "div" literally, not the identifier in the div section in the html code.

That is a concept I don;t understand. Is there a simple explanation?

Again, many thanks!

[Coyote]

You're welcome. I appreciate the pints too

By definition, div.float selects any div element with a class attribute that contains the word float. It is just a means to identify multiple div tags to which you may want the sytle applied.

[Coyote]

Howdy again,

I just tried e-mailing you to the address on your site. It errors with User Unknown.

Can you please contact me, coyote at undeadclan dot com.

Thanks.