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
    Dec 2010
    Location
    UK
    Posts
    67
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Exclamation Problem with navigation positioning

    Hi guys,

    this is driving me insane and I even had it working early this morning but now something changed and it's all over the place. I am trying to get my navigation to look like the below image...



    but what's happening is this...



    I've tried lots and lots of different things with the css but nothing seems to be working now (even when I reverted to the old code that worked this morning it still doesn't)

    I want the tabs to be fixed to the main content to the right but at the moment they are all over the place.

    Here's the html...

    <div id="container"> <div id="navigation">
    <ul class="tabs">
    <li><a class="selected" href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a hred="#">Testimonials</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </div></div>

    and here's the css..

    #container
    {
    margin: 0 auto;
    width: 914px;
    }

    #navigation
    {
    position:relative;
    top: 43px;
    right:20px;
    }


    #navigation ul, #navigation ul li {
    list-style: none;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    }

    ul.tabs {
    list-style: none;
    height: 43px; /*--Set height of tabs--*/
    width: 914px;
    overflow:hidden;
    }

    ul.tabs li {
    float: left;
    height: 42px; /*--Subtract 1px from the height of the unordered list--*/
    width:133px;
    line-height: 41px; /*--Vertically aligns the text within the tab--*/
    overflow:hidden;
    }

    ul.tabs li a {
    text-decoration: none;
    color: #ffffff;
    display: block;
    font-size: 16px;
    font-weight:300;
    text-align:center;
    width: 133px;
    height: 43px;
    background-image:url(../images/tab_a.png);
    }

    ul.tabs li a:hover {
    background-image:url(../images/tab_roll.png)
    }

    ul.tabs li a.selected {
    background-image:url(../images/tab_active.png);
    color:#000000;
    font-weight:normal;
    }

    Any and all help very much appreciated, if you need any more info let me know (site currently hosted remotely)

    Thanks!

  • #2
    New Coder
    Join Date
    Jun 2011
    Posts
    15
    Thanks
    0
    Thanked 2 Times in 2 Posts
    it might help to set the margin to 0 as well

    so:

    Code:
    #navigation ul, #navigation ul li {
    list-style: none;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    margin: 0;
    }
    Other than that, I'd have to see an online test version before I can determine what the problem might be.

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Please avoid using position unnecessarily.

    try following CSS code...

    Code:
    *{
        margin:0;
        padding:0;
    }
    #container
    {
    margin: 0 auto;
    width: 914px;
    background:#CCC;
    }
    
    #navigation
    {
        padding-left:230px;
        background:#0C9;
    }
    
    
    
    #navigation ul {
    list-style: none;
    overflow:auto;
    height:1%;
    }
    
    ul li {
    float:left;
    width:125px;
    padding:17px 0;
    overflow:auto;
    background:#39F;
    }
    
    ul li a {
    text-decoration: none;
    color: #ffffff;
    display:block;
    font:bold 16px Verdana, Geneva, sans-serif;
    text-align:center;
    background:#FC3;
    }
    
    ul li a:hover {
    background-image:url(../images/tab_roll.png)
    }
    
    ul li a.selected {
    background-image:#FC9;
    color:#000000;
    font-weight:normal;
    }

    HTML

    Code:
    <div id="container"> <div id="navigation">
      <ul>
        <li><a class="selected" href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a hred="#">Testimonials</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div></div>

    Let me know if it will work or not..

    Cheers


  •  

    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
    •