Home/ Questions/Q 6591313
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T17:24:30+00:00

I’m trying to design a website for my mums backpackers business. The problem that

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0