0

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
9
Views
5 Years
Discussion Span
Last Post by Exaktor
0

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.

0

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 :)

0

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

0

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

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

Fix the height on line 38.

html

0

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.

Edited by Exaktor

Attachments layout.png 21.06 KB
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.