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

    Keeping a navigation bar in the center of the screen (horizontally) with CSS

    I'm working on a horizontal scrolling webpage, and I would like to menu to be fixed in the middle of the screen. I know you can do margin-left and stuff, but would that affect other screen resolutions? And since my page width is 15000px, If i center the bar, it would go to the middle of the page.

    Also, I'm using a simple horizontal navigation bar, and when i make the window smaller, the buttons break. what can I do to fix this?



    Thanks a lot in advance! (:

  • #2
    Regular Coder
    Join Date
    Dec 2010
    Posts
    423
    Thanks
    22
    Thanked 56 Times in 56 Posts
    margin:0 auto;

    shall center it for you

  • #3
    New Coder
    Join Date
    May 2011
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by aaronhockey_09 View Post
    margin:0 auto;

    shall center it for you
    ): It didn't do anything.
    This is the css



    ul
    {
    list-style-type:none;
    margin:0 auto;
    margin-top: 70px;
    padding:0;
    position: fixed;
    overflow:hidden;
    }
    li
    {
    float:left;

    }
    a:link,a:visited
    {
    display:block; inline;
    width:200px;
    font-family:Oswald;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#000;
    text-align:center;
    padding:20px;
    text-decoration:none;
    text-transform:uppercase;
    }
    a:hover,a:active
    {
    background-color:#7A991A;
    }

  • #4
    Regular Coder
    Join Date
    Dec 2010
    Posts
    423
    Thanks
    22
    Thanked 56 Times in 56 Posts
    Anyway you can post the HTML as well.
    You should be able to have your UL wrapped in a navigation div.

    and set a width and margin:0 auto; to that navigation div.

    eg.

    HTML
    Code:
    <div class="nav">
          <ul>
               <li><a href="#"> blah blah </a> </li>
          </ul>
    </div>
    CSS

    Code:
    .nav { width:1000px; margin:0 auto; }
    .nav ul { float:left;  }
    .nav ul li { float:left; margin:0 10px 0 10px;  }
    .nav ul li a { width:100%; height:100%; padding:10px 20px; }

  • #5
    New Coder
    Join Date
    May 2011
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    So this is my new html

    <div class="nav">
    <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
    </ul>
    </div>
    and my new CSS
    .nav { margin:0 auto; }

    .nav ul { list-style-type:none; margin:0 auto; margin-top: 70px; padding:0; position: fixed; overflow:hidden; }

    .nav li { float:left; }

    .nav a:link,a:visited { display:block; inline; width:200px; font-family:Oswald; font-weight:bold; color:#FFFFFF; background-color:#000;
    text-align:center; padding:20px; text-decoration:none; text-transform:uppercase; }

    .nav a:hover,a:active { background-color:#7A991A; }
    If I add in ".nav { width:1000px; margin:0 auto; }"

    the whole bar just disappears

  • #6
    Regular Coder
    Join Date
    Dec 2010
    Posts
    423
    Thanks
    22
    Thanked 56 Times in 56 Posts
    try this, works for me

    Code:
    .nav { margin:0 auto;  }
    
    .nav ul { list-style-type:none; margin-top: 70px; padding:0;  overflow:hidden; margin:0 auto; width:960px; }
    
    .nav li { float:left; }
    
    .nav a:link,a:visited { display:block; inline; width:200px; font-family:Oswald; font-weight:bold; color:#FFFFFF; background-color:#000;
    text-align:center; padding:20px; text-decoration:none; text-transform:uppercase; }
    
    .nav a:hover,a:active { background-color:#7A991A; }

  • #7
    New Coder
    Join Date
    May 2011
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ): And then when I try adding in position: fixed;
    it goes back to the left side. and that snippit makes the navi bar go into the middle of the 15000px width, not screen

    is it one of those impossible things to do then? ):

  • #8
    Regular Coder
    Join Date
    Dec 2010
    Posts
    423
    Thanks
    22
    Thanked 56 Times in 56 Posts
    can you center the 15000px as well ? and then it would be in the middle of the screen
    or do you not want that ?

  • #9
    New Coder
    Join Date
    May 2011
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    If I could center the 15000px, that would work also

  • #10
    Regular Coder
    Join Date
    Dec 2010
    Posts
    423
    Thanks
    22
    Thanked 56 Times in 56 Posts
    hehe, there we go
    Sorry it took so long, but glad i could help.

  • #11
    New Coder
    Join Date
    May 2011
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thank you (:


  •  

    Posting Permissions

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