SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Navigation Tabs

    I'm trying to create 'upside down' rounded navigation tabs, but I have had no success.

    The default active image and hover for this page works
    tabs.007gb.com/tab.html

    which uses these images
    tabs.007gb.com/left.gif
    tabs.007gb.com/right.gif

    and these are the one i am trying to create
    tabs.007gb.com/tab2.html
    as you can see these images are like the others but are rotated
    tabs.007gb.com/left2.gif
    tabs.007gb.com/right2.gif


    Anybody have any ideas on what i should change in the css file for these images to display properly as tabs?

    Code:
    #tabs3 {
          float:left;
          width:100%;
          background:#E4E6EB;
          font-size:93%;
          line-height:normal;
          }
        #tabs3 ul {
              margin:0;
              padding:10px 10px 0 50px;
              list-style:none;
          }
        #tabs3 li {
          display:inline;
          margin:0;
          padding:0;
          }
        #tabs3 a {
          float:left;
          background:url("left2.gif") no-repeat left top;
          margin:5px;
          padding:0 0 0 4px;
          text-decoration:none;
          }
        #tabs3 a span {
          float:left;
          display:block;
          background:url("right2.gif") no-repeat right top;
          padding:5px 20px 5px 35px;
          color:#FFF;
          }
        /* Commented Backslash Hack hides rule from IE5-Mac \*/
        #tabs3 a span {float:none;}
        /* End IE5-Mac hack */
        #tabs3 a:hover span {
          color:#FFF;
          }
        #tabs3 a:hover {
          background-position:0% -42px;
          }
        #tabs3 a:hover span {
          background-position:100% -42px;
          }
    
          #tabs3 #current a {
                  background-position:0% -42px;
          }
          #tabs3 #current a span {
                  background-position:100% -42px;
          }
    Thanks

  2. #2
    SitePoint Zealot ejg's Avatar
    Join Date
    Jun 2007
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This will work if you switch the colors in left2.gif and right2.gif so the hover color is on the top.

    Code CSS:
    #tabs3 a {
    background:transparent url(left2.gif) no-repeat scroll left bottom;
    ..
    }
    #tabs3 a span {
    background:transparent url(right2.gif) no-repeat scroll right bottom;
    ..
    }
    #tabs3 a:hover {
    background-position:100% -20px;
    }
    #tabs3 a:hover span {
    background-position:100% -20px;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It worked ejg - tabs.007gb.com/tab3.html
    thanks alot.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To make the active work the same as the hover is it just a case of making new elements and rules in the stylesheet? --- like

    ul#tabs a li a:active{
    background-image: url(../images/tabs/left.gif);
    background-repeat: no-repeat;
    background-position: left bottom;
    }

    ul#tabs a span li a:active{
    background-image: url(../images/tabs/right.gif);
    background-repeat: no-repeat;
    background-position: right bottom;
    }
    or does it require more work
    Last edited by Whytey; Jul 11, 2008 at 05:56.

  5. #5
    SitePoint Zealot ejg's Avatar
    Join Date
    Jun 2007
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not sure what you are asking. Do you want it to stay the hover color when you are on the page? i.e. The Home page navigation tab is the hover color when you are on the home page.

    The active pseudo class only changes a link color when the link is actively being clicked. Here's some example code

    Code HTML4Strict:
    <html>
    <head>
    <style type="text/css">
    a:hover {
    color: #ff0;
    }
    a:active {
    color: #0f0;
    }
    </style>
    </head>
     
    <body>
    <a href="#">one</a>
    </ul>
    </body>
    </html>

    When one of the links is hovered, it turns yellow. When it is being clicked, it turns green.

    The code below will change the current page link to red. Each navigation link has an id. Each page also has a unique id on the body. This example is "page two". The navigation "two" will be red due to the #two #twoLink a in the css.
    Code HTML4Strict:
    <html>
    <head>
    <style type="text/css">
    #one #oneLink a, #two #twoLink a, #three #threeLink a { 
    color: #f00;
    }
    </style>
    </head>
     
    <body id="two">
    <ul>
    <li id="oneLink"><a href="#">one</a></li>
    <li id="twoLink"><a href="#">two</a></li>
    <li id="threeLink"><a href="#">three</a></li>
    </ul>
    </body>
    </html>


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
  •