DrDoc
msg:1196305 | 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.
|
borad
msg:1196306 | 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... http://www.alistapart.com/stories/practicalcss/
|
Hagstrom
msg:1196307 | 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.
|
Nick_W
msg:1196308 | 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. Nick
|
warlordbb
msg:1196309 | 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.
|
gethan
msg:1196310 | 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 {
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
|
securecat
msg:1196311 | 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">
<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.
|
kurtm
msg:1196312 | 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'?
|
bird
msg:1196313 | 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?
|
Tapolyai
msg:1196314 | 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.
|
|
