Welcome to WebmasterWorld Guest from 107.20.75.63

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)

Junior Member

10+ Year Member

joined:Mar 6, 2003
posts:66
votes: 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.

Ideas?

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

Senior Member

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

joined:Mar 15, 2002
posts:6807
votes: 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)

New User

10+ Year Member

joined:Dec 28, 2002
posts:23
votes: 0

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)

Full Member

10+ Year Member

joined:Sept 12, 2002
posts:252
votes: 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)

Senior Member

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

joined:Feb 4, 2002
posts:5044
votes: 0


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

Junior Member

10+ Year Member

joined:Mar 6, 2003
posts:66
votes: 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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Aug 8, 2001
posts:926
votes: 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 {
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)

New User

10+ Year Member

joined:Mar 20, 2003
posts:16
votes: 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">
<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)

New User

10+ Year Member

joined:Mar 29, 2003
posts:2
votes: 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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Aug 10, 2001
posts:1550
votes: 10


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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 10, 2001
posts:731
votes: 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.