Like the drink, only not spelt the same...

ArcticFox

09-29-2007, 02:38 AM

You know how if you line up images side-by-side:

<img src="image.gif"><img src="image.gif"><img src="image.gif">

...when you squeeze the page, the end images will drop down to the next line? I'm wanting to do something like that, but with tables. Each table looks like this:

<table style="font-size:11px; text-align:center; background-color:#666666; margin:0px; color:#ffffff;">
<tr><td>

Mustangs

</tr></td><tr><td>

<a href="http://tinyurl.com/3aph64"><img src="http://tinyurl.com/3aph64" width="100" height="100" style="background-color:#c0c0c0; border:1px solid #000000;"></a>
</tr></td><tr><td>
<form>
<a href="javascript:void(0);" style="border:1px solid #cfcfcf; margin:0px 3px;">Add to Cart</a>
</form>

</td></tr></table>

I have about 30 of those and I'd like to just put them <center>ed on the page without having to line them up in sets of four. When the page gets wider, I'd like to see more images jump up to the top row, and the opposite when the page is squeezed down; still with all images in the rows centered.

Is this possible to do?

Thank.

Tact

09-29-2007, 04:24 AM

hmm. darn i can't remember how tables behave. when you got more than one. do they automatically go below each other? i think maybe...

if you don't mind switching over to divs, i think this is definately doable using div boxes instead of tables. i think all you have to do is float:left on all of them. and they'll adjust accordlingly just as you described.

in order to follow the format you want to accomplish, you might actually end up with 30 of these isntead.

<div class="wrapper">
<div class="title">
Mustang
</div>
<div class="img">
<insert your img url clikty thing here>
</div>
</div>

i have obviously exluded a lot of the important styling and mechanics to actually accomplish the whole idea like width's and stuff.

but for the important part of this whole thing, your styles should have the float:left style like below

.wrapper {float:left}
.title {whatever stylings you have up there like font and junk}

yah. forgive me for being a bit lazy and not giving you like exact code. but i think maybe you know how to do that alredy and don't want to take any of the fun out of it for ya. :p bad thing though now that i remember, these buggers won't center themselves cause of the float. so... you will most likely need a wrapper div holding all these things inside it. and then you can center that! and maybe if you give it width:100% then you'll still get the effect you want when the screen shrinks or grows.

gl

ps. for any real pro's out there, feel free to correct me if i'm wrong. i'm just learning too and from my experience, i think this is what i would do.

garydarling

09-29-2007, 01:15 PM

This seems to give the effect you described:

body {margin-left:10%; margin-right:10%}
table {float:left}

Gary

harbingerOTV

09-29-2007, 07:51 PM

a non table route and the images need to be the same height for the desired effect.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>art photo image visual perception</title>
<style type="text/css">
#content {
width: 80%;
margin: 0 auto;
border: 2px solid #000;
text-align: center;
}
#content a {
display: inline-block;
display: -moz-inline-grid;
_display: inline-block;
width: 150px;
height: 150px;
margin: 10px;
background: #ccc;
}
</style>
</head>
<body>
<div id="content">
<a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a>
</div>
</body>
</html>