Log in

View Full Version : Centered, wrapping grid - help


jimctierney
08-05-2011, 02:46 PM
Hello,

I know basic css and html, but not much more than that. However, the site I am attempting to build is very simple, so hopefully someone here can help me stumble my way through the process.

Here is an example of what I want:
http://jimtierneyart.com/grid1.jpg

...and when I add new content:
http://jimtierneyart.com/grid2.jpg

I want a css grid of identical square containers, with a thumbnail in each one. The tricky part is getting the differently-sized thumbnails to be vertically centered in the containers without having to set each one by hand.

This is where I have gotten so far-
http://jimtierneyart.com/test/test.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<style type="text/css">

body {
margin : auto;
}

.wrapper {
width: 900px;
border: 1px solid #bbbbbb;
margin: 50 auto;
}

.item {

line-height: 223;
text-align: center;
float: left;
width: 223px;
height: 223px;
border: 1px solid #dddddd;
background: #EBEBEB;
}

img.a {
margin: auto;
max-width:120px;
border:0;
max-height:175px;
}



</style>




</head>

<body>
<div class="wrapper">

header

<BR>
<BR>




<div class="item">
<img class="a" src="image.gif">
</div>

<div class="item">
<img class="a" src="image.gif">
</div>

<div class="item">
<img class="a" src="image.gif">
</div>

<div class="item">
<img class="a" src="image.gif">
</div>

<div class="item">
<img class="a" src="image.gif">
</div>

<div class="item">
<img class="a" src="image.gif">
</div>

<div class="item">
<img class="a" src="image.gif">
</div>

<div class="item">
<img class="a" src="image.gif">
</div>

<div class="item">
<img class="a" src="image.gif">
</div>

<div class="item">
<img class="a" src="image.gif">
</div>


</div>
</body>
</html>

I need 2 things to happen:

1. The parent container must be centered on the page (this worked fine until I added the Doctype tags.
2. the thumbnails must be vertically centered within the child containers.

Can anyone point me in the right direction?
I would really appreciate some help.