CODEWITHSUNDEEP
css
Jolan Goburdhun
Jolan Goburdhun

Reputation: 21

How to remove blank space between banner and top of page

HTML

<html>
    <head>
        <link rel="shortcut icon" href=".\favicon.ico">
        <title>rentPRO</title>

    </head>
    <body>
        <nav id="top_menu">
            <ul>
                <li class="current"><a href="#">Home</a></li>
                <li><a href="#">My Profile</a></li>
                <li><a href="#">The Fleet</a>
                    <ul>
                        <li><a href="#">Nissan</a></li>
                        <li><a href="#">Toyota</a></li>
                        <li><a href="#">Honda</a></li>
                        <li><a href="#">Mazda</a></li>
                    </ul>
                </li>
                <li><a href="#">Other Services</a></li>
                <li><a href="#">Terms and Conditions</a></li>
                <li><a href="#">Frequently Asked Questions</a></li>
                <li><a href="#">About Us</a></li>
            </ul>
        </nav>
        <div id="wrapper">
            <div id="header">
            </div>
            <div class="content">
            </div>
            <div id="footer">© rentPRO 2015</div>
        </div>
    </body>
</html>

CSS

#header {
    background-image: url("https://lh4.googleusercontent.com/-bBxOrYzmzQE/VM57QXCUoEI/AAAAAAAAAGg/WSUG7fe2ekE/w1024-h190-no/port-louis-capital-city-picture-courtesy-mauritius-tourism-promotion-authority_gallery_small.jpg");
    background-size: 100% 100%;
    width: 1050px;
    height: 190px;
    margin: 0 auto; 
}

#top_menu {
    display:block;
    position:relative;
    top: 200px;
    border-radius: 5px;
    border-width: 1px 1px 1px;
    border-style:solid;
    background-color: #e5e5e5;
    font: bold 16px Tahoma;
    height: 40px;
    width: 1075px;
    margin: 0 auto;
    border-color: black;
}

The height: 40px; is making the banner to come down by 40px, thus leaving a blank space between the top of the page and the banner. When I remove this line, the problem goes away but the navigation bar no more has a background. Can anybody tell me what is wrong here?

Upvotes: 1

Views: 2834

Answers (4)

showdev
showdev

Reputation: 29168

If you are able to change the order of elements in your HTML, the simplest solution is to insert #top_menu between #header and #content. This structure more accurately reflects the structure you want to display and the elements will flow naturally. You can remove height and top from #top_menu.

<div id="wrapper">
    <div id="header"></div>
    <nav id="top_menu"> ... </nav>
    <div class="content"></div>
    <div id="footer">© rentPRO 2015</div>
</div>

Example below:

html,
body {
  margin: 0;
}
#header {
  background-image: url("https://lh4.googleusercontent.com/-bBxOrYzmzQE/VM57QXCUoEI/AAAAAAAAAGg/WSUG7fe2ekE/w1024-h190-no/port-louis-capital-city-picture-courtesy-mauritius-tourism-promotion-authority_gallery_small.jpg");
  background-size: 100% 100%;
  width: 1050px;
  height: 190px;
  margin: 0 auto;
}
#top_menu {
  display: block;
  position: relative;
  border-radius: 5px;
  border-width: 1px 1px 1px;
  border-style: solid;
  background-color: #e5e5e5;
  font: bold 16px Tahoma;
  width: 1075px;
  margin: 0 auto;
  border-color: black;
}
<div id="wrapper">
  <div id="header"></div>
  <nav id="top_menu">
    <ul>
      <li class="current"><a href="#">Home</a></li>
      <li><a href="#">My Profile</a></li>
      <li><a href="#">The Fleet</a>
        <ul>
          <li><a href="#">Nissan</a></li>
          <li><a href="#">Toyota</a></li>
          <li><a href="#">Honda</a></li>
          <li><a href="#">Mazda</a></li>
        </ul>
      </li>
      <li><a href="#">Other Services</a></li>
      <li><a href="#">Terms and Conditions</a></li>
      <li><a href="#">Frequently Asked Questions</a></li>
      <li><a href="#">About Us</a></li>
    </ul>
  </nav>
  <div class="content"></div>
  <div id="footer">© rentPRO 2015</div>
</div>

Upvotes: 0

fcastillo
fcastillo

Reputation: 948

It would help you:

html, body {margin: 0; padding: 0}
#banner {
    background-image: url("https://lh4.googleusercontent.com/-bBxOrYzmzQE/VM57QXCUoEI/AAAAAAAAAGg/WSUG7fe2ekE/w1024-h190-no/port-louis-capital-city-picture-courtesy-mauritius-tourism-promotion-authority_gallery_small.jpg");
    background-size: 100% 100%;
    width: 1050px;
    height: 190px;
    margin: 0 auto; 
}
#top_menu {
    display:block;
    position:relative;
    /*top: 200px;*/
    border-radius: 5px;
    border-width: 1px 1px 1px;
    border-style:solid;
    background-color: #e5e5e5;
    font: bold 16px Tahoma;
    height: 40px;
    width: 1075px;
    margin: 0 auto;
    border-color: black;
}

And the HTML:

<header>
    <div id="banner">
    </div>
    <nav id="top_menu">
        <ul>
            <li class="current"><a href="#">Home</a></li>
            <li><a href="#">My Profile</a></li>
            <li><a href="#">The Fleet</a>
                <ul>
                    <li><a href="#">Nissan</a></li>
                    <li><a href="#">Toyota</a></li>
                    <li><a href="#">Honda</a></li>
                    <li><a href="#">Mazda</a></li>
                </ul>
            </li>
            <li><a href="#">Other Services</a></li>
            <li><a href="#">Terms and Conditions</a></li>
            <li><a href="#">Frequently Asked Questions</a></li>
            <li><a href="#">About Us</a></li>
        </ul>
    </nav>
  </header>
  <div id="wrapper">
      <div class="content">
      </div>
  </div>
  <footer>
      <div id="footer">© rentPRO 2015</div>
  </footer>

Upvotes: 0

J Prakash
J Prakash

Reputation: 1333

First thing you have to put your <nav>tag inside the div with id header. Set top: 190px; in #top_menu.

HTML : 

    <head>
        <link rel="shortcut icon" href=".\favicon.ico">
        <title>rentPRO</title>

    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <nav id="top_menu">
            <ul>
                <li class="current"><a href="#">Home</a></li>
                <li><a href="#">My Profile</a></li>
                <li><a href="#">The Fleet</a>
                    <ul>
                        <li><a href="#">Nissan</a></li>
                        <li><a href="#">Toyota</a></li>
                        <li><a href="#">Honda</a></li>
                        <li><a href="#">Mazda</a></li>
                    </ul>
                </li>
                <li><a href="#">Other Services</a></li>
                <li><a href="#">Terms and Conditions</a></li>
                <li><a href="#">Frequently Asked Questions</a></li>
                <li><a href="#">About Us</a></li>
            </ul>
        </nav>
            </div>
            <div class="content">
            </div>
            <div id="footer">© rentPRO 2015</div>
        </div>
    </body>
</html>

CSS:

#header {
    background-image: url("https://lh4.googleusercontent.com/-bBxOrYzmzQE/VM57QXCUoEI/AAAAAAAAAGg/WSUG7fe2ekE/w1024-h190-no/port-louis-capital-city-picture-courtesy-mauritius-tourism-promotion-authority_gallery_small.jpg");
    background-size: 100% 100%;
    width: 1050px;
    height: 190px;
    margin: 0 auto; 
}

#top_menu {
    display:block;
    position:relative;
    top: 190px;
    border-radius: 5px;
    border-width: 1px 1px 1px;
    border-style:solid;
    background-color: #e5e5e5;
    font: bold 16px Tahoma;
    height: 40px;
    width: 1075px;
    margin: 0 auto;
    border-color: black;
}

check fiddle

Upvotes: 1

conterio
conterio

Reputation: 1174

try this code, i moved your header tag above your menu, took away the height and changed the top menu height to 20. 

 </head>
    <body>
    <div id="header"></div>

        <nav id="top_menu">
            <ul>
                <li class="current"><a href="#">Home</a></li>
                <li><a href="#">My Profile</a></li>
                <li><a href="#">The Fleet</a>
                    <ul>
                        <li><a href="#">Nissan</a></li>
                        <li><a href="#">Toyota</a></li>
                        <li><a href="#">Honda</a></li>
                        <li><a href="#">Mazda</a></li>
                    </ul>
                </li>
                <li><a href="#">Other Services</a></li>
                <li><a href="#">Terms and Conditions</a></li>
                <li><a href="#">Frequently Asked Questions</a></li>
                <li><a href="#">About Us</a></li>
            </ul>
        </nav>
        <div id="wrapper">

            <div class="content">
            </div>
            <div id="footer">© rentPRO 2015</div>
        </div>
    </body>
</html>

#header {
    background-image: url("https://lh4.googleusercontent.com/-bBxOrYzmzQE/VM57QXCUoEI/AAAAAAAAAGg/WSUG7fe2ekE/w1024-h190-no/port-louis-capital-city-picture-courtesy-mauritius-tourism-promotion-authority_gallery_small.jpg");
    background-size: 100% 100%;
    width: 1050px;
    height: 190px;
    margin: 0 auto; 
}

#top_menu {
    display:block;
    position:relative;
    top: 20px;
    border-radius: 5px;
    border-width: 1px 1px 1px;
    border-style:solid;
    background-color: #e5e5e5;
    font: bold 16px Tahoma;

    width: 1075px;
    margin: 0 auto;
    border-color: black;
}

Upvotes: 0

Related Questions