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

    Centering a navigation bar

    Hi,
    I'm having trouble centering a navigation pane on this page. The CSS looks like this:

    body{
    background-color:black;
    margin:150px 300px;
    border-style:groove;
    border-width:5px;
    border-color:white;
    width:900px;
    height:700px;
    }
    .title{
    margin-left:auto;
    margin-right:auto;
    width:55%
    }
    ul
    {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    }
    li
    {
    float:left;
    }
    a:link,a:visited
    {
    display:block;
    width:120px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
    }
    a:hover,a:active
    {
    background-color:#7A991A;
    }


    And the HTML looks like this:
    <body>
    <div class="title">
    <img src="Title Bar - New Guard Logo.png" alt="Title Heading" width="500" height="150"/>
    </div>

    <ul>
    <li><a href="#index">The Mission</a></li>
    <li><a href="#work">The Work</a></li>
    <li><a href="#people">The People</a></li>
    <li><a href="#contact">The Contact</a></li>
    </ul>

    </body>
    </html>

    I've tried a bunch of ways to center it, but I know there is something simple I'm missing. Can anyone help me out?

    Thanks!

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,606
    Thanks
    24
    Thanked 647 Times in 646 Posts
    Your menu should be in a div like your Title Heading. You can make a seperate div for it or just move the </div> tag for the title class down to include them. But the class title width has to be extended to 57%.

    But why body{margin:150px 300px;}?

  • #3
    New Coder
    Join Date
    Sep 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you, that was helpful. It's taking me a bit of time to get back into web programming. You don't like the margin sizes? It's what the designer wants, not me.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,606
    Thanks
    24
    Thanked 647 Times in 646 Posts
    The margin is an area outside the div. Your margins force the body down and to the right. Most pages like to have they're top-left corner at the top and left of the browser window not half way down the screen.

  • #5
    New Coder
    Join Date
    Sep 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yeah, I'm aware. And the body is definitely not half way down the screen haha.

  • #6
    New Coder
    Join Date
    Sep 2011
    Posts
    40
    Thanks
    4
    Thanked 1 Time in 1 Post
    I've been playing with your provided code, and it's really weird. I put it in it's own div and "margin:0 auto"-d the div, and it didn't center it. I think it might have to do with you having it in a list OR the fact that they're all displayed as blocks. I'll keep messing around, tell you if I find something.

  • #7
    New Coder
    Join Date
    Sep 2011
    Posts
    40
    Thanks
    4
    Thanked 1 Time in 1 Post
    ok, i figured it out.

    what you want to do, instead of making a list, is just use regular <a> links, unlisted, but give them all a class, like menu or something:


    <a href="#index" class="menu">The Mission</a>
    <a href="#work" class="menu">The Work</a>
    <a href="#people" class="menu">The People</a>
    <a href="#contact" class="menu">The Contact</a>

    put them in a div, and in the div, have the text center-aligned.

    now, in the css, you can set the background with a.menu {background-color:} and a.menu:hover {background-color:}

    the one thing that will have to be different is that, now that they're not "display:block"s anymore, you can't have a set width of 120px. I don't know how to make inline elements have a set width -- and you DO want to keep it inline. What you can do, of course, is just increase the left and right padding in a.menu

    --------------------------

    OR you can do this cheat: put the whole menu in a div, figure out the exact width of your menu (in photoshop or something) and make that the width of the div, and in the div, do margin:0 auto;

    BUT in the case that you want to change one of your Menu link titles, you'll have to go back again and figure out the width.


  •  

    Posting Permissions

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