CODEWITHSUNDEEP
csshtmlweb
AndyNZ
AndyNZ

Reputation: 2263

Why am I getting white space between my HTML element?

I'm trying to design a website for my mums backpackers business. The problem that I am having is between my banner image and my navbar there is a blank white line that you can see in the image. I thought this is to do with the margin so I have set it to zero for both of the elements to no avail.

Also a second question - Why does my black border not cover the main content as well? I thought since its a body background it would go around every element in the body.

I realise there may have been similar questions but I can't find the answer anywhere. I will appreciate anyones input - this is my first post here so I'm sorry if I screwed up any formatting.

The image of my website can be found here:

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

Thanks in advance.

I currently have the following code in my index.html file:

   <!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;
}

Upvotes: 6

Views: 6625

Answers (3)

Dim_K
Dim_K

Reputation: 571

add to your css 

#banner { display: block; }

Upvotes: 3

Matteo Riva
Matteo Riva

Reputation: 25060

The problem that I am having is between my banner image and my navbar there is a blank white line that you can see in the image. I thought this is to do with the margin so I have set it to zero for both of the elements to no avail.

In HTML images are by default inline level elements so they follow text rules (and will have blank space below to keep the correct alignment with letters like "p" and such). You can either assign display: block to the header image, or define the header container to have the same exact height as the image

Also a second question - Why does my black border not cover the main content as well? I thought since its a body background it would go around every element in the body.

Because floated elements pop out of their container, you have to clear the float to extend the container with something like 

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

or use some reset/clearfix css such as the one provided by html5boilerplate.

Upvotes: 3

Paul Grime
Paul Grime

Reputation: 15104

If you remove the float property of #mainc then the border will surround all the content. By using float, you are taking the div out of the main page flow.

Upvotes: 1

Related Questions