No replies
jimctierney
jimctierney's picture
Offline
newbie
Last seen: 8 years 24 weeks ago
Timezone: GMT-4
Joined: 2011-08-05
Posts: 1
Points: 2

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:

...and when I add new content:

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-

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