Welcome to WebmasterWorld Guest from 54.166.224.46

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Gallery Image Page without tables

Should you even try?

     
6:37 am on Mar 27, 2003 (gmt 0)

10+ Year Member



Please forgive me if this is answered elsewhere. I've been through many, many threads, and at least half the 15 pages of posts, plus the FAQ thread and haven't seen this question asked.

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?

7:22 am on Mar 27, 2003 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



There are three good ways to solve this using CSS:

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.

7:56 am on Mar 27, 2003 (gmt 0)

10+ Year Member


I'm being evil by posting a link, but it's probably as good an answer that you'll get...

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

8:54 am on Mar 27, 2003 (gmt 0)

10+ Year Member



> it's probably as good an answer that you'll get

...but it only works if your captions are shorter than the widths of the pictures.

9:03 am on Mar 27, 2003 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



>I'm being evil by posting a link

eh...? Looks good to me ;)

Hagstrom's right though, it's a bit limited.

Nick

1:00 am on Mar 28, 2003 (gmt 0)

10+ Year Member



Precisely the information I was looking for...

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.

1:25 am on Mar 28, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I've had some success with this code with thumbnails - though I'm sure there are some limitations (eg. strange layouts when sizes of images or descriptions vary hugely).


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

8:07 am on Mar 28, 2003 (gmt 0)

10+ Year Member



Markup of the natural language correctly, and decide appearance only by CSS.
DIV is an element without a meaning. Insert when determining appearance.

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.

9:56 pm on Mar 29, 2003 (gmt 0)

10+ Year Member



I'll go against the grain here and say to just use tables.

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'?

10:03 pm on Mar 29, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Should I just make this a <Table> and be done with it?

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?

10:14 pm on Mar 29, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You could also just have two DIVs, one float:left; clear:left; width:49%; and the other float:right;clear:right; width:49%. This would make two columns, and split it in the middle. The following DIVs would float right below them, ad infinitum.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month