Div's/Css Layout Help

rocket3609 · 10-27-2009, 12:10 AM

First off Id like to explain that I'm fairly new to working with div's and css I have a good understanding of how things work though. I was looking to see if someone can give me an example of how to write the code required to produce this simple example using div's with css. Its just 4 images lined up hortizonally and by clicking the image or bottom text it takes you to the linked page. The total width is like 720px. I view there source and see there using a table with <td>'s but I want to produce something similar using div's with css. I would appricated any and all help!

Brian
page example is: http://www.justjen.com/shop/rhinestone-clothing.htm

Excavator · 10-27-2009, 01:13 AM

Hello rocket3609,
Check this out for a start -

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
	font: 14px "Comic Sans MS";
	background: #FC6;
}
* {
	margin: 0;
	padding: 0;
	border: none;
}
#container {
	width: 720px;
	margin: 30px auto;
	padding: 10px 20px 10px 0;
	background: #999;
	text-align: center;
	overflow: auto;
}
.subnavItem {
	width: 160px;
	float: left;
	margin: 0 0 0 20px;
	text-decoration: none;
}
</style>
</head>
<body>
<div id="container">
<a href="http://www.justjen.com/shop/bridal.htm" class="subnavItem"><img src="http://www.justjen.com/image/bride-clothing.jpg" alt="Bridal" /> Bridal</a>
<a href="http://www.justjen.com/shop/custom-tshirts.htm" class="subnavItem"><img src="http://www.justjen.com/graphic/custom-clothing.jpg" alt="Custom" /> Custom</a>
<a href="http://www.justjen.com/shop/womens-tshirts.htm" class="subnavItem"><img src="http://www.justjen.com/image/womens-clothing.jpg" alt="Womens" /> Womens</a>
<a href="http://www.justjen.com/shop/girls-tshirts.htm" class="subnavItem"><img src="http://www.justjen.com/image/girls-clothing.jpg" alt="Girls" /> Girls</a>
<!--end container--></div>
</body>
</html>