Menu
Sorry to post so may times in one day, but its hard learning on my own.
Basically I sliced my header into 3 images, as one part I want to be a clickable logo.
So far I got the left and center images to align on the top using CSS but the third image seems to contain itself within the width of the two abover.
Here is my code
[CODE]<?xml version=”1.0″ encoding=”UTF-8″?>
<!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”
xml:lang=”en” lang=”en” />
<head>
<title>TheDj’s Net First Design Test</title>
<link rel=”stylesheet” href=”css/default.css” />
</head>
<body>
<div id=”container”>
<div id=”header”>
<img src=”images/top_left_banner.gif” alt=”TheDj’s First Design Test /> <!–left of banner–>
<div id=”centerheader”>
<img src=”images/middle_logo_banner.gif” alt=”Logo” />
<div id=”headerright”>
<img src=”images/top_right_banner.gif” alt=”top right” />
<ul id=”nav”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Members</a></li>
<li><a href=”#”>Login</a></li>
</ul>
</div> <!–end header–>
<div id=”main”>
<div id=”main_content_left”>
<img src=”images/main_content_left.gif” />
</div> <!–end main content left–>
<div id=”main_content_left_2″>
<img src=”images/main_content_left_2.gif” />
</div> <!–end main content left 2–>
<div id=”main_content_left_top_3″>
<img src =”images/main_content_left_top_3″ />
</div> <!–end main content left top 3–>
<div id=”main_content_bottom_3″>
<img src=”images/main_content_bottom_3.gif” />
</div> <!–end main content 3 bottom–>
<div id=”main_content_left_top_4″>
<img src=”images/main_content_left_top_4.gif” />
</div> <!–end main content 4 top–>
<div id=”main_content_left_bottom_4″>
<img src=”images/main_content_left_bottom_4.gif” />
</div> <!–end main content 4 bottom–>
<div id=”main_content_left_top_5″>
<img src=”images/main_content_left_to_5.gif” />
</div> <!–end main content 5 top–>
<div id=”main_content_left_bottom_5″>
<img src=”images/main_content_left_bottom_5.gif” />
</div> <!–end main content 5 bottom–>
<div id=”main_content_last_right”>
<img src=”images/main_content_left_bottom_6.gif”
</div> <!–end main–>
</div><!–end container–>
</body>
</html>
And here is my CSS
[CODE]/*RESET*/
html, body, div, span,
h1, h2, h3, h4, h5, h6, p,
a, em, font, img,
dl, dt, dd, ol, ul, li,
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
/*Main Styles*/
html {
background: url(images/bg.gif) repeat;
}
#container {
width: 800px;
height: 800px;
background: #ffffff;
margin: 3em auto;
}
#header {
overflow: hidden;
heaight: 100%; /*for IE*/
float: left;
}
#header img {
float: left;
}
#headerright ul#nav {
float: right;
}
#centerheader img {
float: left;
}
#headerright {
float: right;
}
#headerright img {
float: right;
}
#headerright ul#nav {
float: top-right;
}
/*Main Content*/
#main_content_left {
float: left;
}
With that code in place the first 2 header sections align perfectly side by side.. the thrid header section lines below and in line with the right edge of my headers center image..
Im not sure what to do to fix it, I appreciate your help.
Thanks
