Results 1 to 5 of 5

Thread: CSS tab menu help for a noob please!

  1. #1
    Join Date
    May 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS tab menu help for a noob please!

    Hi everyone,
    I'm making a website and am trying to use a bit of css, rather than just tables which i'm used to! My problem is this, i have made a css tab menu, but don't know how to get the "tab" for the "current" page to show up different, so that you know what tab you are currently on, if that makes sense!

    Here is the code i'm using :

    <style type="text/css">
    body {
    margin:0;
    padding:0;
    font: bold 11px/1.5em Verdana;
    }

    h2 {
    font: bold 14px Verdana, Arial, Helvetica, sans-serif;
    color: #000;
    margin: 0px;
    padding: 0px 0px 0px 15px;
    }
    /*- Menu Tabs D--------------------------- */

    #tabsD {
    float:left;
    width:100%;
    background:#;
    font-size:93%;
    font-weight:;
    line-height:normal;
    border-bottom:0px solid #999999;
    }
    #tabsD ul {
    margin:0;
    padding:5px 5px 0 0px;
    list-style:none;
    }
    #tabsD li {
    display:inline;
    margin:0;
    padding:0;
    }
    #tabsD a {
    float:left;
    background: url(../../tableftD.gif) no-repeat left top;
    margin:0;
    padding:0 0 0 4px;
    text-decoration:none;
    }
    #tabsD a span {
    float:left;
    display:block;
    background: url(../../tabrightD.gif) no-repeat right top;
    padding:4px 15px 3px 6px;
    color:#ffffff;
    }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsD a span {float:none;}
    /* End IE5-Mac hack */
    #tabsD a:hover span {
    color:#000000;
    }
    #tabsD a:hover {
    background-position:0% -42px;
    }
    #tabsD a:hover span {
    background-position:100% -42px;
    }
    </style>

    </head>

    <body text="#000000" leftmargin=0 topmargin=0 bottommargin=0 bgcolor="#FFFFFF">
    <div id="container">

    <div id="tabsD">
    <ul>
    <li><a href="index.htm"><span>Main</span></a></li>
    <li><a href="filmog.htm"><span>You know her from...</span></a></li>
    <li><a href="wp.htm"><span>Wallpapers</span></a></li>
    <li id="current"><a href="avatars.htm"><span>Avatars</span></a></li>
    <li><a href="myspace.htm"><span>Myspace Graphics</span></a></li>
    <li><a href="links.htm"><span>Links</span></a></li>
    </ul>
    </div>


    Is there anyone who can help me?
    Jessica

  2. #2
    Join Date
    Mar 2006
    Location
    Cleveland, Ohio
    Posts
    574
    Thanks
    6
    Thanked 5 Times in 5 Posts

    Default

    apply a class called .current or something and add that to the current tab.
    Thou com'st in such a questionable shape
    Hamlet, Act 1, Scene 4

  3. #3
    Join Date
    May 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hey thanks for replying!
    As i admitted, I'm a noob,so.. i don't know what adding a class .current means or likes like.

    I know i should go and learn css properly. @_@

  4. #4
    Join Date
    Mar 2006
    Location
    Cleveland, Ohio
    Posts
    574
    Thanks
    6
    Thanked 5 Times in 5 Posts

    Default

    Haha, well there's two types of things you can actually name yourself in css, ids and classes. ID's you should use only once in the document, classes can be used multiple times. You name it whatever you like and give it its own properties...

    For example, the .current I gave you:

    Code:
    .current{
    // SPECIFICATIONS FOR THE CURRENT PAGE TAB HERE
    }
    then, in the html, give the current page's tab that class (by doing class="current")
    Thou com'st in such a questionable shape
    Hamlet, Act 1, Scene 4

  5. #5
    Join Date
    May 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks very much for your advice, much appreciated! I've finally got it working

    Jessica

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
  •