Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    46
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Margin/Spacing between Header and Navigation

    Hi,
    I'm creating a website and a margin/spacing has appeared between the header and the navigation bar. I've tried setting the margin to 0 and that doesn't fix it. Does anyone know how I can fix it? I want the navigation to be directly underneath the header.

    This is the HTML

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Looerro Minis Home Page</title> 
    
    <link rel="stylesheet" type="text/css" href="stylesheet.css" /> 
    </head> 
    
    <body> 
    
    <div id="wrap"> <!-- This is the div that holds everything together. The whole layout is based inside this div --> 
    
    <div id="header"> <img src="trialhorse.jpg"alt="Looerro Miniature Horses Logo- Exceeding Expectations"/> <!-- This is where the header image goes. --> 
    
    </div> <!-- This closes the header div --> 
    
    <div id="navbar"> 
    <ul> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="horses.html">Horses</a> 
    <ul> 
    <li><a href="stallions.html">Stallions</a></li> 
    <li><a href="mares.html">Mares</a></li> 
    <li><a href="geldings.html">Geldings</a></li> 
    <li><a href="foals.html">Foals</a></li> 
    </ul> 
    </li> 
    <li><a href="showteam.html">Show Team</a></li> 
    <li><a href="showresults.html">Show Results</a></li> 
    <li><a href="training.html">Training</a></li> 
    <li><a href="sales.html">Sales</a></li> 
    <li><a href="contactus.html">Contact Us</a></li> 
    
    </ul> 
    </div> 
    
    <div class="cushycms" id="maincontent"> <!-- This is the maincontent div, this is where the important information will go --> 
    <center><h2>Welcome to</h2></center> 
    <center><h2>Looerro Miniature Horses</h2></center> 
    
    <p><center>Currently Under Construction. Please come back soon</center></p> 
    
    
    
    
    </div> 
    
    
    
    
    <div id="footer"> <!-- This is the start of the footer div --> 
    <p>&copy; 2010 All Rights Reserved</p> 
    
    </div> <!-- This is the end of the footer div --> 
    
    </div> <!-- This is the end of the wrap div --> 
    
    
    </body> 
    </html>
    This is the CSS

    Code:
    @charset "utf-8"; 
    /* CSS Document */ 
    
    
    
    body, 
    html { 
    margin:0; 
    padding:0; 
    background-image:url(background.jpg); 
    font-family: Arial, Verdana, sans-serif; 
    
    } 
    
    h2 { 
    color:#FFC; 
    font-family:Verdana, Arial, sans-serif; 
    
    
    } 
    
    #wrap { 
    width:950px; /* This is the width of the wrap */ 
    margin:0 auto; /* This is set to auto so that the layout will be centered */ 
    background: #000000; /* This sets the background colour of the wrap */ 
    
    } 
    
    #header { 
    
    background:#ddd; 
    border-left:1px solid #FFF; 
    border-right:1px solid #FFF; 
    border-top:1px solid #FFF; 
    
    } 
    
    #navbar { 
    font-family: Edwardian Script ITC, Verdana, Arial, sans-serif; 
    font-size:36px; 
    width:100%; 
    margin-top:0px; 
    padding:0px; 
    height:63px; 
    background-color:#FFF; 
    } 
    
    #navbar li { 
    list-style: none; 
    float: left; 
    } 
    
    #navbar li a { 
    display: block; 
    padding: 7px 8px; 
    background-color: white; 
    color: black; 
    text-decoration: none; 
    } 
    
    #navbar li ul { 
    display: none; 
    width: 5em; /* Width to help Opera out */ 
    background-color: white;} 
    
    #navbar li:hover ul { 
    display: block; 
    position: absolute; 
    margin: 0; 
    padding: 0; } 
    #navbar li:hover li { 
    float: none; } 
    #navbar li:hover li a { 
    background-color: white; 
    border-bottom: 1px solid #000; 
    color: #000; } 
    #navbar li li a:hover { 
    background-color:#FFC; } 
    
    
    #maincontent { 
    color:#FFF; 
    float:right; /* The float left is so that the main div will float to the left. This will make the main and sidebar div 
    float side by side */ 
    padding:10px; /* This is the padding around the text so that it looks spaced out and even. */ 
    background: #000000; /* This is the background colour of the main div */ 
    border-left:1px solid #FFF; 
    border-right:1px solid #FFF; 
    border-bottom:1px solid #FFF; 
    width:930px; 
    
    
    } 
    
    p { 
    text-align:center; 
    } 
    
    
    #footer { 
    clear:both; 
    background:#000000; 
    color:#FFC; 
    }

    Any help would be appreciated!

    Thanks

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Code:
    <div id="header"> <img src="trialhorse.jpg"alt="Looerro Miniature Horses Logo- Exceeding Expectations"/> <!-- This is where the header image goes. --> 
    
    </div> <!-- This closes the header div -->
    It might be that mysterious gap! Try setting display:block; or float:left; to #header img
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •