Menu
hi css people,
having trouble aligning elements horizontally,
[CODE]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Language” content=”en-us” />
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1252″ />
<style type=”text/css”>
h1 {
font-family: haettenschweiler;
color: red;
text-align: center;
font-size: 20px;
margin-top: 0;
margin-bottom: 0;
}
body {
background: #000000;
color: #ffffff;
}
a:link {
color: #ffffff;
margin-top: 0px;
}
.watch_image {
margin-top: 10px;
background-color: #FFFFFF;
z-index: 15;
}
img {
border-width: 0px;
background-color: #FFFFFF;
}
a:visited { color: #ffff00;
}
#navigation_2 {
position: relative;
width: 100px;
height: 100px;
z-index: 5;
top: 450px;
left: 0px;
text-align: center;
line-height: 24px;
float: left;
}
.image_div {
border: 7px solid #E80000;
width: 160px;
height: 212px;
z-index: 12;
text-align: center;
background-color: #FFFFFF;
margin-top: 25px;
margin-left: 5px;
margin-bottom: 0px;
margin-right: 5px;
}
.watch_details {
position: absolute; width: 107px;
height: 100px; z-index: 1;
top: -1px;
left: 120px;
}
.description {
font-family: Arial;
font-size: 10pt;
font-weight: bold;
margin-top: 10px;
margin-bottom: 0px;
height: 32px;
}
.price {
font-family: Arial;
font-size: 10pt;
font-weight: bold;
margin-top: 10px;
margin-bottom: 0px;
}
#navigation {
float: left;
width: 110px;
padding: 1px;
z-index: 3;
display: inline;
}
#container {
width: auto;
border: 1px solid red;
z-index: 1;
float: right;
display: inline;
}
#gallery_container_1 {
width: 160px;
height: 327px;
position: relative;
margin: auto;
padding: 1px;
z-index: 7;
text-align: center;
display: inline;
}
#gallery_container_2 {
width: auto;
height: 327px;
z-index: 8;
position: relative;
margin: auto;
padding: 1px;
text-align: center;
display: inline;
}
#gallery_container_3 {
width: 160px;
height: 327px;
position: relative;
margin: auto;
padding: 1px;
z-index: 8;
text-align: center;
display: inline;
}
</style>
<title>Seiko Watches Ladies at Wrist Watch World</title>
</head>
<body >
<!– trying to align everything horizontally using relative positioning –>
<div id=”navigation” >
navigation to be added</div>
<div id=”container”>
<div id=”gallery_container_1″ >
<div class=”image_div” >
<a href=”watches/seiko/SUJ629.htm”>
image 1</a></div>
<p class=”description” ><a href=”watches/seiko/SUJ629.htm”>Seiko
Lady’s<br />
Silver Tone Watch</a></p>
<p class=”price” >SUJ629
$87.50 </p>
</div>
<div id=”gallery_container_2″ >
<div class=”image_div”>
<a href=”watches/seiko/SXG768.htm”>
image 2</a></div>
<p class=”description”><a href=”watches/seiko/SXG768.htm”>Seiko
Lady’s<br />
Gold Tone Watch</a>
</p>
<p class=”price”>SXG768
$95.00
</p>
</div>
<div id=”gallery_container_3″>
<div class=”image_div”>
<a href=”watches/seiko/SXGB70.htm”>
image 3</a></div>
<p class=”description” >
<a href=”watches/seiko/SXGB70.htm” >Seiko
Lady’s<br />
Gold Tone Watch</a>
</p>
<p class=”price”>SXGB70
$88.00
</p>
</div>
</div>
</body>
</html>