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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Sep 2004
    Posts
    347
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Gap below Header-- How to get rid of?

    Hey guys I was working on my soccer website and I've been trying to solve a little problem. Their is a about a 15px gap below my header and above my navigation. Anyway to get rid of?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <link rel="stylesheet" type="text/css" href="navbar.css">
    </head>
    
    <body>
    
    <p><img border="0" src="logo.JPG" width="300" height="75"></p>
    
    <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href="index.htm" id="current">Home</a></li>
    <li><a href="players.htm">Players</a></li>
    <li><a href="tournaments.htm">Tournaments</a></li>
    <li><a href="schedule.htm">Schedule</a></li>
    		</ul>
    </div> 
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </body>
    
    </html>
    Code:
    #navcontainer ul
    {
    padding-left: 250px;
    margin-left: 0;
    background-color: #036;
    color: White;
    float: left;
    width: 100%;
    font-family: arial, helvetica, sans-serif;
    }
    
    #navcontainer ul li { display: inline; }
    
    #navcontainer ul li a
    {
    padding: 0.2em 1em;
    align:center
    background-color: #036;
    color: White;
    text-decoration: none;
    float: left;
    border-right: 1px solid #fff;
    }
    
    #navcontainer ul li a:hover
    {
    background-color: #369;
    color: #fff;
    }

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    set the margin of your p element to 0px;

  • #3
    Regular Coder
    Join Date
    Sep 2004
    Posts
    347
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ahh thanks Aerospace, I really should have thought of that . Updated HTML segment and CSS:
    Code:
    <div id="header"><img border="0" src="logo.JPG" width="300" height="75"></div>
    Code:
    #header
    {
    margin: 0px;
    }
    PS: 100th Post, YAY!


  •  

    Posting Permissions

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