Member Avatar for Exaktor

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;
}
Edited by Exaktor
  • 3 Contributors
  • 6 Replies
  • 235 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by Exaktor
Member Avatar for UltimateJacob

Have you tried removing the header from its div? It might seem a bit semantically unorthodox, but there is no negative effetcs I can think of.

Member Avatar for UltimateJacob

If you have trouble, his will help you understand what I mean:
Take this:

<div id="container">
    <div id="header">
        <h1>Header</h1>
    </div>

And remove the div "header" like so:

<div id="container">
    <h1>Header</h1>

Just adding this because sometimes I'm not very clear :)

Member Avatar for Exaktor

I want the <div id="header"> because I want to put some logos there. I don't understand where the space comes from.

Member Avatar for JorgeM

Remove line #58 from your code. (// CSS menu)

Add <div style="clear:both;"></div> on line #28

Fix the height on line 38.

html

Member Avatar for Exaktor

Thank you for the help I fixed the white space problem but know that shows up somewhere else. Check this picture here.
And how can I put the menu bar more to the left.

layout.png 21.06 KB
Edited by Exaktor
Member Avatar for Exaktor

Problem Solved
Thanks for the help

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.