Geek Answers Handbook

Why am I getting blank space between my HTML element?

I am trying to create a website for my mom tourist business. The problem I encountered is that there is an empty white line between my banner image and my navigation bar, which you can see in the image. I thought this was due to margin, so I set it to zero for both elements to no avail.

Also a second question: why does my black frame not cover the main content? I thought that since the background of his body will cover every element of the body.

I understand that there may have been similar questions, but I cannot find the answer anywhere. I would appreciate anyones input - this is my first post here, so I'm sorry if I messed up any formatting.

An image of my site can be found here:

http://postimage.org/image/20dhjcdb8/

Thanks in advance.

In my index.html file, I have the following code:

   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
        <link rel="stylesheet" type="text/css" href="swaggersstyle.css">
            <title>Oamaru Backpackers Hostel, Swaggers Backpackers - Home</title>
        </head>


        <body>
        <img src="final.jpg" id="banner"></img>
        <ul id="nav">
            <li class="links"><a href="index.html">Home</a></li>
            <li class="links"><a href="planning.html">Planning</a></li>
            <li class="links"><a href="construction.html">Construction</a></li>
            <li class="links"><a href="evaluation.html">Evaluation</a></li>
        </ul>

        <div id="mainc">
        <p>Make Yourself at Home</p>
    <p>Swaggers Backpackers is a converted old house located within walking distance of all the best parts of Oamaru. Explore the old victorian era buildings and shops of the city centre, or see the penguin colonies down the street. Swaggers is owned and operated by camp mum Agra, who makes all guests feel welcome, informed, and perhaps a bit mothered. </p>

        </div>   

    </body>
    </html>

and the following CSS code:

html{
    font-family: sans-serif;
    background-color:#464E54;
}

body{
    width: 960px;
    margin: auto;
    background-color: white;
    border: 5px solid black;
}

#banner{
    padding: 0px;
    margin: 0;
}

#nav {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    overflow: hidden;

}

#mainc {

    width: 960px;
    float: right;
    background-color: white;
    margin: 0;
}

.links {
    float: left;
    margin: 0px;
}

a:link, a:visited {

    display: block;
    width: 232px;
    font-weight: bold;
    color: grey;
    background-color: #dad8bf;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
    margin-top: 0px;
}

a:hover, a:active{

    background-color: #333333;
}
+5
source share
3 answers

The problem I encountered is that there is an empty white line between my banner image and my navigation bar, which you can see in the image. I thought this was due to margin, so I set it to zero for both elements to no avail.

HTML , ( , "p" ..). display: block ,

: ? , , .

, float, -

<div style="clear: both"></div>

reset/clearfix css, html5boilerplate.

+3

css

#banner { display: block; }
+3

If you remove the property float #mainc, the border will surround all content. Using float, you take divfrom the main page stream.

+1
source

More articles:


All Articles