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 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2011
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation Help, border making nav go weird....

    Hey guys, i have a nav that has a 1px solid border on while developing so i can trouble shoot easier if anything goes wrong, however when i remove this border the nav drops by around 50pixels, i have images of this... dont know how to upload on here, does anyone have skype or anything to speak to help me solve this problem out? Thanks guys, ive attached the code below....



    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>
     <title>BigLampPhotography.co.uk</title>
     <link rel="stylesheet" type="text/css" href="main.css" />
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>
    <body>
     <div id="Navcontainer">
     <div id="Nav">
    <ul>
    <li><a href="#"><img src="images/navhome.png" alt=""/></a></li>
    <li><a href="#"><img src="images/navportraits.png" alt=""/></a></li>
    <li><a href="#"><img src="images/navgallery.png" alt=""/></a></li>
    <li><a href="#"><img src="images/navcrazy.png" alt=""/></a></li>
    <li><a href="#"><img src="images/navcontactus.png" alt=""/></a></li>
    <li><a href="#"><img src="images/navsales.png" alt=""/></a></li>
    </ul>
     </div><!-- end of #Nav -->
     </div><!-- end of #Navcontainer -->
    CSS
    Code:
    * {
     margin:0;
     padding:0;
    }
    
    img {
    border:none;
    }
    
    body {
    }
    
    ul{
    list-style-type:none;
    font-size: 0px;
    }
    
    /***** NAVBAR STYLES *****/
    
    #Navcontainer{
    background-image: url("images/navbg.png");
    background-repeat: repeat-x;
    height: 69px;
    text-align:center;
    vertical-align: middle;
    border: 1px solid red;
    }
    
    #Nav {
    width: 902px;
    margin: 29px auto;
    text-align: center;
    }
    
    #Nav ul {
    list-style-type: none;
    }
    
    #Nav li {
    display:inline;
    margin-right: 40px;
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    It's due to collapsing margins. Either set overflow:auto/hidden to #Navcontainer or change margin-top from #Nav and set padding-top to #Navcontainer.

    PS: Got some divitis?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Mar 2011
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts
    PS: Got some divitis?
    I think i may have....I just love using them!

    Thanks for the help, it worked great!

  • #4
    Regular Coder oVTech's Avatar
    Join Date
    Nov 2010
    Location
    USA
    Posts
    296
    Thanks
    4
    Thanked 54 Times in 52 Posts
    Maybe this will help you:
    Code:
    <html>
    <head>
    <style type="text/css">
    body {
      background-color:#d0e4fe;
      margin:0;
      padding:0;
    }
    ul{ border: 1px solid green;
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    
    
    #Nav { border: 1px solid red;
      width: 902px;
      height: 64px;
      margin: 0 auto;
      background-color:#c0d4dc;
    }
    #Nav ul {
      font-size: 22px;
      margin: 4px;
      padding: 14px;
    }
    #Nav li {border: 1px solid yellow;
      display:inline;
      margin: 12px;
      padding: 2px;
    }
    </style>
    </head>
    
    <body>
    
    
    <div id="Nav">
    <ul>
    <li><a href="#"><img src="images/navhome.png" alt=""/>one</a></li>
    <li><a href="#"><img src="images/navportraits.png" alt=""/>two</a></li>
    <li><a href="#"><img src="images/navgallery.png" alt=""/>three</a></li>
    <li><a href="#"><img src="images/navcrazy.png" alt=""/>four</a></li>
    <li><a href="#"><img src="images/navcontactus.png" alt=""/>five</a></li>
    <li><a href="#"><img src="images/navsales.png" alt=""/>six</a></li>
    </ul>
    </div><!-- end of #Nav -->
    
    <p>This is a paragraph.</p>
    </body>
    </html>




    I don't know, I don't care, and it doesn't make any difference!
    -Albert Einstein-





  •  

    Tags for this Thread

    Posting Permissions

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