SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Guru Rebirth Studios's Avatar
    Join Date
    Mar 2003
    Posts
    621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal Menu issue

    I have a top menu system, which is contained in #nav div. #nav div has a background image and then I'm trying to call another background image tab graphic with the class .on per each link. So if you're on the page, the tab shows up.

    The class .on is causing the link its styling to wrap below the inline listing of the rest of the nav.

    How do I get the image to behave in an inline presentation without throwing everything off?

    Code:
    #nav {
        width: 770px;
        height: 28px;
        padding: 7px 0 0 30px;
        text-align: left;
        background: url(../images/bg-nav.gif) no-repeat;
    }
    #nav a,#nav a:visited {
        font: bold 12px Arial, Helvetica, sans-serif;
        color: #15567c;
        padding: 0 1px;
    }
    #nav a:active {
        color: #993333;
    }
    #nav a:hover {
        color: #000;
        text-decoration: none;    
    }
    #nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #nav ul li {
        display: inline;
    }
    #nav li a.on {
        width: 130px;
        height: 35px;
        display: block;
        background: url(../images/nav-button.gif) no-repeat;
    }
    HTML Code:
    <div id="nav">
    <ul>
        <li><a href="index.shtml">Overview</a> | </li>
        <li><a href="events.shtml">Events</a> | </li>
        <li><a href="news.shtml">News</a> | </li>
        <li><a href="images.shtml">Images</a></li>
        <li class="on"><a class="on" href="to-do.shtml">Things To Do</a></li>
    </ul>
    </div>

  2. #2
    SitePoint Zealot
    Join Date
    Jun 2006
    Location
    London, UK
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Post a link please!

  3. #3
    SitePoint Guru Rebirth Studios's Avatar
    Join Date
    Mar 2003
    Posts
    621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a screenshot...

    You can see the button in the Things to Do link, but you also see how it wraps.
    Attached Images Attached Images

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,275
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    You'd need to float the elements if you want to apply a dimension to them.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style>
    #nav {
        width: 770px;
        height: 28px;
        padding: 7px 0 0 30px;
        text-align: left;
        background: url(../images/bg-nav.gif) no-repeat;
    }
    #nav a,#nav a:visited {
        font: bold 12px Arial, Helvetica, sans-serif;
        color: #15567c;
        padding: 0 1px;
    }
    #nav a:active {
        color: #993333;
    }
    #nav a:hover {
        color: #000;
        text-decoration: none;    
    }
    #nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #nav ul li {
        display: inline;
                    float:left;
        height: 35px;
    }
    #nav li.on {
        width: 130px;
        background: url(../images/nav-button.gif) no-repeat;
    }
    </style>
    </head>
    
    <body>
    <div id="nav">
    <ul>
        <li><a href="index.shtml">Overview</a> | </li>
        <li><a href="events.shtml">Events</a> | </li>
        <li><a href="news.shtml">News</a> | </li>
        <li><a href="images.shtml">Images</a></li>
        <li class="on"><a  href="to-do.shtml">Things To Do</a></li>
    </ul>
    </div>
    </body>
    </html>
    Something like that

  5. #5
    SitePoint Guru Rebirth Studios's Avatar
    Join Date
    Mar 2003
    Posts
    621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I totally reworked my nav to do a few things differently...

    I setup the CSS to show the active button state on a per page basis.

    I'm still having spacing trouble in IE though (see image), and I'm not sure of the best way to get rid of the surrounding pipes for each active/on state tab.

    Here's the Code:
    Code:
    #nav {
        float: left;
        width: 785px;
        height: 35px;
        padding: 0;
        margin: 0 0 0 15px;
        list-style: none;
        background: #fffef7 url(../images/bg-nav.gif) no-repeat;
    }
    #nav li {
        float: left;
        white-space: nowrap;
        margin: 0;
        padding: 10px 3px 0 3px;
        font: bold 12px Arial, Helvetica, sans-serif;
    }
    #nav li a {
        color: #15567c;
        text-decoration: none;
        float: left;
        clear: both;
    }
    #nav li a:hover {
        color: #000;
    }
    #nav li#active strong, #nav li a {
        display: block;
    }
    #overview li#nav-overview,
    #events li#nav-events,
    #news li#nav-news,
    #maps li#nav-maps,
    #images li#nav-images,
    #to-do li#nav-to-do,
    #meetings li#nav-meetings,
    #promos li#nav-promos,
    #trans li#nav-trans {
        text-align: center;
        width: 105px;
        height: 25px;
        padding: 10px 0 0 0;
        color: #fff;
        background: url(../images/nav-button.gif) no-repeat;
    }
    #overview li#nav-overview a,
    #events li#nav-events a,
    #news li#nav-news a,
    #maps li#nav-maps a,
    #images li#nav-images a,
    #to-do li#nav-to-do a,
    #meetings li#nav-meetings a,
    #promos li#nav-promos a,
    #trans li#nav-trans a {
        color: #fff;
    }
    HTML Code:
    <body id="promos">
    <ul id="nav">
        <li id="nav-overview"><a href="index.shtml" title="Overview">Overview</a></li>
        <li>|</li>
        <li id="nav-events"><a href="events.shtml" title="Events">Events</a></li>
        <li>|</li>
        <li id="nav-news"><a href="news.shtml" title="News">News</a></li>
        <li>|</li>
        <li id="nav-maps"><a href="maps.shtml" title="Maps">Maps</a></li>
        <li>|</li>
        <li id="nav-images"><a href="images.shtml" title="Image Gallery">Images</a></li>
        <li>|</li>
        <li id="nav-to-do"><a href="to-do.shtml" title="Things To Do">Things To Do</a></li>
        <li>|</li>
        <li id="nav-meetings"><a href="meetings.shtml" title="Meetings">Meetings</a></li>
        <li>|</li>
        <li id="nav-promos"><a href="promotions.shtml" title="Promotions">Promotions</a></li>
        <li>|</li>
        <li id="nav-trans"><a href="transportation.shtml" title="Transportation">Transportation</a></li>
    </ul>
    Attached Images Attached Images

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,275
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The gap on the left in IE is the double margin bug and you need to add this:

    Code:
    #nav {
        float: left;
        width: 785px;
        height: 35px;
        padding: 0;
        margin: 0 0 0 15px;
        display:inline;
        list-style: none;
        background: url(../images/bg-nav.gif) no-repeat;
    }
    See the faq on floats for the explanation

    For the pipes you could either use a border left and right and then just turn them off for the current tab or if you want to use pipes then place them in the list inside a span which you can set to display:none on the current tab.

    Code:
    #overview li#nav-overview span,
    #events li#nav-events span{display:none}
    etc................
    Code:
        <li id="nav-overview"><a href="index.shtml" title="Overview">Overview</a><span>|</span></li>
        <li id="nav-events"><a href="events.shtml" title="Events">Events</a><span>|</span></li>
    You can add padding to the anchor to tweak the spacing.

    Code:
    #nav li a {
        color: #15567c;
        text-decoration: none;
        float: left;
        clear: both;
        padding: 0 3px 0 3px;
    }
    Something like that will work although it will probably need tweaking

  7. #7
    SitePoint Guru Rebirth Studios's Avatar
    Join Date
    Mar 2003
    Posts
    621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still a couple things...

    My active/on state text is not centering??

    Also, I've set this up as an include to avoid having to make nav's for each page. Paul, your <span> thing works on the end tabs, but not the interior ones--these have pipes on either side. See Picture.

    Code:
    #nav {
        display: inline;
        float: left;
        width: 785px;
        height: 35px;
        padding: 0;
        margin: 0 0 0 15px;
        list-style: none;
        background: #fffef7 url(../images/bg-nav.gif) no-repeat;
    }
    #nav li {
        float: left;
        white-space: nowrap;
        margin: 0;
        padding: 10px 3px 0 3px;
        font: bold 12px Arial, Helvetica, sans-serif;
    }
    #nav li a {
        float: left;
        clear: both;
        color: #15567c;
        text-decoration: none;
        padding: 0 3px;
    }
    #nav li a:hover {
        color: #000;
    }
    #nav li#active strong, #nav li a {
        display: block;
    }
    #overview li#nav-overview,
    #events li#nav-events,
    #news li#nav-news,
    #maps li#nav-maps,
    #images li#nav-images,
    #to-do li#nav-to-do,
    #meetings li#nav-meetings,
    #promos li#nav-promos,
    #trans li#nav-trans {
        text-align: center;
        width: 105px;
        height: 25px;
        padding: 10px 0 0 0;
        color: #fff;
        background: url(../images/nav-button.gif) no-repeat;
    }
    #overview li#nav-overview a,
    #events li#nav-events a,
    #news li#nav-news a,
    #maps li#nav-maps a,
    #images li#nav-images a,
    #to-do li#nav-to-do a,
    #meetings li#nav-meetings a,
    #promos li#nav-promos a,
    #trans li#nav-trans a {
        color: #fff;
    }
    #overview li#nav-overview span,
    #events li#nav-events span,
    #news li#nav-news span,
    #maps li#nav-maps span,
    #images li#nav-images span,
    #to-do li#nav-to-do span,
    #meetings li#nav-meetings span,
    #promos li#nav-promos span,
    #trans li#nav-trans span {
        display: none;
    }
    HTML Code:
    <ul id="nav">
        <li id="nav-overview"><a href="index.shtml" title="Overview">Overview</a><span>|</span></li>
        <li id="nav-events"><a href="events.shtml" title="Events">Events</a><span>|</span></li>
        <li id="nav-news"><a href="news.shtml" title="News">News</a><span>|</span></li>
        <li id="nav-maps"><a href="maps.shtml" title="Maps">Maps</a><span>|</span></li>
        <li id="nav-images"><a href="images.shtml" title="Image Gallery">Images</a><span>|</span></li>
        <li id="nav-to-do"><a href="to-do.shtml" title="Things To Do">Things To Do</a><span>|</span></li>
        <li id="nav-meetings"><a href="meetings.shtml" title="Meetings">Meetings</a><span>|</span></li>
        <li id="nav-promos"><a href="promotions.shtml" title="Promotions">Promotions</a><span>|</span></li>
        <li id="nav-trans"><a href="transportation.shtml" title="Transportation">Transportation</a></li>
    </ul>
    Attached Images Attached Images

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,275
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    To centre the text on the active tab you will need to give the anchor a width because it is floated and is shrunkwrap (new word).

    Code:
    #overview li#nav-overview a,
    #events li#nav-events a,
    #news li#nav-news a,
    #maps li#nav-maps a,
    #images li#nav-images a,
    #to-do li#nav-to-do a,
    #meetings li#nav-meetings a,
    #promos li#nav-promos a,
    #trans li#nav-trans a {
        color:#fff;width:105px
    }

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,275
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    To get rid of both pipes just set up the body ID to clear the pipe in the link before as well.

    e.g.
    Code:
    #news li#nav-events span,
    #news li#nav-news span {display:none}
    Do that for each link.

  10. #10
    SitePoint Guru Rebirth Studios's Avatar
    Join Date
    Mar 2003
    Posts
    621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The power of CSS, that's pretty cool, thanks!!

  11. #11
    [Biped] LJK's Avatar
    Join Date
    Jun 2004
    Location
    In My Jammies
    Posts
    761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    The Power of Paul !


    ;-)
    F-Fox 2.0 :: WIN :: el design :: US


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
  •