SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    May 2012
    Location
    Bangkok, Thailand, Thailand
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help with really annoying Nav bar!!!!!

    Hi there guys! ok so i've been playing around with my nav bar for HOURS! cant get the tabs to spread evenly (too many letters could be why) Also, the drop down boxes dont match the same width as the main nav bar tab.....its for my blog www.theninjatravels.com but im practicing on another site: http://dinthairesa.blogspot.com/

    the CSS im playing with is:
    #suckerfishnav {
    background:#f3f3f3 repeat-x;
    font-size:12px;
    font-family:verdana,sans-serif;
    font-weight:bold;
    width:890px;
    border:1px solid #cc0000;




    }
    #suckerfishnav, #suckerfishnav ul {
    float:left;
    line-height:35px;
    padding:0;
    border:1px solid #cc0000;
    margin:0;
    width:890px;




    }
    #suckerfishnav a {
    display:block;
    color:#cc0000;
    text-decoration:none;
    padding:0px 11px ;


    }
    #suckerfishnav li {
    float:left;

    padding: 0px 5px;
    margin-right: 2px;
    }
    #suckerfishnav ul {
    position:absolute;z-index:100;
    left:-999em;
    height:auto;
    width:108px;
    font-weight:normal;
    margin:0;
    line-height:1;
    border:0;
    border-top:1px solid #cc0000;

    }
    #suckerfishnav li li {
    width:108px;
    border-bottom:1px solid #cc0000;
    border-left:1px solid #cc0000;
    border-right:1px solid #cc0000;
    font-weight:bold;
    font-family:verdana,sans-serif;

    }
    #suckerfishnav li li a {
    padding:4px 4x;
    width:auto;
    font-size:11px;
    color:#cc0000;

    }
    #suckerfishnav li ul ul {
    width:108px;
    margin:-21px 0 0 100px;

    }

    #suckerfishnav li li:hover {
    width:108px;
    background:#294962;

    }
    #suckerfishnav li:hover, #suckerfishnav li.hover {
    width:autopx;
    position:left;
    left: 0;

    }
    #suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {

    color:#ff9900;
    }
    #suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
    color:#ff9900;
    }
    #suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {
    color:#cc0000;
    }
    #suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {
    left:auto;
    }
    #suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {
    left:auto;
    background:#f3f3f3;
    }
    #suckerfishnav li:hover, #suckerfishnav li.sfhover {
    background:#294962;
    }

    any help would be much appreciated!

    :-)

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Hi theninjatravels. Welcome to the forums.

    First thing I'd suggest is to remove the margin and padding from the LIs:

    Code:
    #suckerfishnav li {
        float: left;
        margin-right: 2px;
        padding: 0 5px;
    }
    Then maybe increase the padding on the As themselves:

    Code:
    #suckerfishnav a {
        color: #CC0000;
        display: block;
        padding: 0 15px;
        text-decoration: none;
    }
    That will align your sub menus to the left of your main links. Then you can just choose a width for your drop menus:

    Code:
    #suckerfishnav ul {
        -moz-border-bottom-colors: none;
        -moz-border-image: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        border-color: #CC0000 -moz-use-text-color -moz-use-text-color;
        border-right: 0 none;
        border-style: solid none none;
        border-width: 1px 0 0;
        font-weight: normal;
        height: auto;
        left: -999em;
        line-height: 1;
        margin: 0;
        position: absolute;
        width: 108px;
        z-index: 100;
    }
    and here

    Code:
    #suckerfishnav li li {
        border-bottom: 1px solid #CC0000;
        border-left: 1px solid #CC0000;
        border-right: 1px solid #CC0000;
        font-family: verdana,sans-serif;
        font-weight: bold;
        width: 108px;
    }

  3. #3
    SitePoint Member
    Join Date
    May 2012
    Location
    Bangkok, Thailand, Thailand
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph thanks so much for your suggestions. ive made the changes u mentioned however the top tabs in the nav bar still dont display at the same width and the drop down bars still dont match the width of the top nav bar tabs. if u take a look at http://dinthairesa.blogspot.com/ you'll see what i mean when you hover over.

    thanks again for your help. :-)







    Quote Originally Posted by ralph.m View Post
    Hi theninjatravels. Welcome to the forums.

    First thing I'd suggest is to remove the margin and padding from the LIs:

    Code:
    #suckerfishnav li {
        float: left;
        margin-right: 2px;
        padding: 0 5px;
    }
    Then maybe increase the padding on the As themselves:

    Code:
    #suckerfishnav a {
        color: #CC0000;
        display: block;
        padding: 0 15px;
        text-decoration: none;
    }
    That will align your sub menus to the left of your main links. Then you can just choose a width for your drop menus:

    Code:
    #suckerfishnav ul {
        -moz-border-bottom-colors: none;
        -moz-border-image: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        border-color: #CC0000 -moz-use-text-color -moz-use-text-color;
        border-right: 0 none;
        border-style: solid none none;
        border-width: 1px 0 0;
        font-weight: normal;
        height: auto;
        left: -999em;
        line-height: 1;
        margin: 0;
        position: absolute;
        width: 108px;
        z-index: 100;
    }
    and here

    Code:
    #suckerfishnav li li {
        border-bottom: 1px solid #CC0000;
        border-left: 1px solid #CC0000;
        border-right: 1px solid #CC0000;
        font-family: verdana,sans-serif;
        font-weight: bold;
        width: 108px;
    }

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by theninjatravels View Post
    the top tabs in the nav bar still dont display at the same width
    You want them all at the same width? In that case, set all the LIs to about width: 110px, remove the padding of the <a>s and sent them to text-align: center. Then sut the width of the sub ULs to width: 110px as well.

    However, I don't know that it will look so good. Some of the top LIs will look cramped, other will have a lot of space around them. That's why I think it's better to have the same padding around the text of each top link.


Tags for this Thread

Bookmarks

Posting Permissions

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