Hi,
I have designed an html layout which you can see in this page: Click Here.
The problem is that under the header there is a white space. I don't know where that comes from could somebody help me.
And if you see the link menu it is moved a little bit to the right how can I make so the links start from left.
Here is the code:
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout 39</title>
<meta content="text/html; charset=iso-8859-1" http-equiv="content-type">
<meta content="HAPedit 3.1" name="generator">
<link href="style.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
</div>
<div id="navigation">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">My Account</a></li>
</ul>
</div>
<div id="content">
<p><strong>1) Content here.</strong> column long long column very long fill
fill fill long text text column text silly very make long very fill silly
make make long make text fill very long text column silly silly very column
long very column filler fill long make filler long silly very long silly
silly silly long filler make column filler make silly long long fill very.
very make make fill silly long long filler column long make silly silly
column filler fill fill very filler text fill filler column make fill make
text very make make very fill fill long make very filler column very long
very filler silly very make filler silly make make column column fill long
make long text very make long fill column make text very silly column filler
silly text fill text filler filler filler make make make make text filler
fill column filler make silly make text text fill make very filler column
very column text long column make silly long text filler silly very very
very long filler fill very fill silly very make make filler text filler
text make silly text text long fill fill make text fill long text very silly
long long filler filler fill silly long make column make silly long column
long make very </p>
</div>
<div id="footer">
<p>Here it goes the footer</p>
</div>
</div>
</body>
</html>
style.css
html, body {
margin: 0;
padding: 0;
}
body {
font: 76% arial,sans-serif;
text-align: center;
}
p {
margin: 10px 10px 10px 10px;
}
a {
display: block;
color: #981793;
padding: 10px;
}
div#header h1 {
height: 80px;
line-height: 80px;
margin: 0;
padding-left: 10px;
background: #EEE;
color: #79B30B;
}
div#container {
text-align: left;
border-style:solid;
border-width: medium;
border-color: #333;
}
div#content p {
line-height: 1.4;
}
div#navigation {
background: #333;
color: #FFF;
height: 49px;
width: 100%;
}
div#footer {
background: #333;
color: #FFF;
clear: both;
width: 100%;
}
div#footer p {
margin: 0;
padding: 10px 10px;
}
div#container {
width: 900px;
margin: 0 auto;
}
// CSS Menu
#nav
{
float: left;
background-color: #333333;
}
#nav ul {
margin: 0;
padding: 0px 0px 0px 0px;
line-height: normal;
}
#nav li
{
display:inline;
}
#nav li a
{
font-family:Arial;
font-size:14px;
text-decoration: none;
float:left;
padding:16px;
background-color: #333333;
color:#ffffff;
}
#nav li a:hover
{
background-color:#9B1C26;
}
