Forum Moderators: not2easy
I LOVE CSS and what it can do for my ugly massively nested <Table> pages, but...
I'm working on a Galley Image Page (boring family pics, I know what you were thinkin' ;)) and I know how I would do this using tables but it just doesn't seem as clear in CSS for me.
What I need is, in my main <DIV> (I'm using the 2 column layout from bluerobot.com) I want to be able to display like 2 across 8 down images. In other situations it may even go to 3 across and 15 down, you get the idea. Should I just make this a <Table> and be done with it? At the bottom of each image will be comments and image details so there is some text involved as well.
Ideas?
1) Create two (or three) paragraphs, four images in each. Make the first one (or two, if using three) float:left, and make sure to include a <br> after each image. This works well if your images are different sizes.
The next two work the best if all images are the exact same size.
2) Use divs instead of paragraphs. Other than that, follow the above example.
3) Give every other image (or every third) a class name, say "a" and "b". Make class a float:left and clear:both. Make class b only float:left.
Come to think of it... Why do you need tables or anything in the first place? Why not just do something like this:
<img> <img><br>
<img> <img><br>
<img> <img><br>
...
Then you can just play around with padding and stuff!
However, if you want to include text under each image, I recommend solution #1.
http://www.alistapart.com/stories/practicalcss/
...but it only works if your captions are shorter than the widths of the pictures.
eh...? Looks good to me ;)
Hagstrom's right though, it's a bit limited.
Nick
I am working on situations were DrDoc's solution will work better as well as situations were the solution mentioned by borad at ALA is perfect.
Funny thing, I thought I had looked at basically everything on ALA...
Regardless, thanks lots all.
div.gallery {
width:300px;
float:left;
border:1px solid black;
margin:5px;
padding:5px;
}.
.
.
<div class='gallery'><a href='img1.html'><img class='gallery' src='pix/img1.jpg' alt='title1'></a><h2>title1</h2>Description 1.</div>
<div class='gallery'><a href='img2.html'><img class='gallery' src='pix/img2.jpg' alt='title2'></a><h2>title2</h2>Description 2.</div>
.
.
.
<div class='gallery'><a href='imgn.html'><img class='gallery' src='pix/imgn.jpg' alt='titlen'></a><h2>titlen</h2>Description n.</div>
The footer includes clear:both to tidy things up.
HTH
For example as below:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>3 column</title>
<style type="text/css"><!--
body { display:table; border-collapse:collapse; border-spacing:0; }
div { display:table-row; }
dl { display:table-cell; empty-cells:show; padding:2px; width:120px; border-style:solid; }
dt,dd { display:block; }
dd { margin:0; }
--></style>
</head>
<body>
<div>
<dl>
<dt><img width="100" height="40" src="foo" alt="foo"></dt>
<dd>foo is a graphic.</dd>
</dl>
<dl>
<dt><img width="100" height="40" src="bar" alt="bar"></dt>
<dd>bar is a graphic.</dd>
</dl>
<dl>
<dt><img width="100" height="40" src="foobar" alt="foobar"></dt>
<dd>foobar is a graphic.</dd>
</dl>
</div>
[...]
</body>
</html>
Mozilla interprets this correctly.
I like to think that html describes content and css describes presentation. In a way, the content of your page just is a table of pictures -- certainly more than it is a page of paragraphs with breaks in-between. In this case, why not call a spade a spade and use 'table'?
Since your pictures seem to be arranged in a tabular layout, a table is the natural choice. CSS placement is not meant to replace tables in all cases. Why bother with dozens of divs with all kind of special attributes, when one simple and straightforward table will do exactly what you need?
