homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

CSS Gallery Image Page without tables
Should you even try?

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

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.




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

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)
I'm being evil by posting a link, but it's probably as good an answer that you'll get...



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

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

>I'm being evil by posting a link

eh...? Looks good to me ;)

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



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

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)

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 {
border:1px solid black;


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



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

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">
<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; }
<dt><img width="100" height="40" src="foo" alt="foo"></dt>
<dd>foo is a graphic.</dd>
<dt><img width="100" height="40" src="bar" alt="bar"></dt>
<dd>bar is a graphic.</dd>
<dt><img width="100" height="40" src="foobar" alt="foobar"></dt>
<dd>foobar is a graphic.</dd>



Mozilla interprets this correctly.


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

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)

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)

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved