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

    Question HEALP! Vertically center my nav!

    Hey guys,

    I have a nav which is contained inside of a containing DIV that stretches across 100% of the page with a background. The nav is inside of a div that is inside of the container, the nav DIV will not move with padding/margin, its aligned centeral in the middle but yet wont move vertically....

    HTML and CSS below, i just need the NavContainer to be vertically centered inside of the Navcontainer.....

    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 {
    border: 1px solid red;
    width: 902px;
    height: 12px;
    margin: 0 auto;
    text-align: center;
    }
    
    #Nav ul {
    list-style-type: none;
    }
    
    #Nav li {
    display:inline;
    margin-right: 25px;
    }

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Code:
    #Nav {
        border: 1px solid red;
        height: 12px;
        margin: 28px auto 0;
        text-align: center;
        width: 902px;
    }
    If both #Nav and #Navcontainer have fixed heights this should work fine,

  • Users who have thanked SB65 for this post:

    Samuel235 (03-27-2011)

  • #3
    New Coder
    Join Date
    Mar 2011
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for that Works a charm!


  •  

    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
    •