SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool Raised Tab Bar...

    I have a tab bar menu mad with rounded corners and different colors for active and hover but I can't get the active tab to raise. I've tried enlarging the height and placing margins but nothing seems to work...

    Please advise?

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you show us the code you are using, along with any images you may have so we can re-create it on our end and offer a solution?

    (No, I'm not weird, I'm just speaking on the behalf of all the CSS coders here.)

    By the way, welcome to SitePoint !

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Hi there...

    Thanks for the introduction.

    I should probably clean up my code some before publishing it to the whole forum! I've been doing a lot of experimenting and I'm afraid not even I can read it.

    Please keep posted.

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's ok. Go ahead and post it. Sometimes having a seperate set of eyeballs can help improve things on your end.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the CSS:

    #tabsmenu a {
    float: left;
    background: url("images/left-tab.gif") no-repeat left top;
    margin: 0;
    padding: 0 0 0 10px;
    text-decoration: none;
    height: 25px;
    }

    #tabsmenu a span {
    float: left;
    display: block;
    background: url("images/right-tab.gif") no-repeat right top;
    padding: 3px 14px 3px 5px;
    font-weight: normal;
    color: #333;
    margin: 0 1px 0 0;
    height: 25px;
    }

    #tabsmenu a span {
    float: none;
    }

    #tabsmenu #current a {
    background: url("images/left-tab-hover.gif") left top no-repeat;
    }

    #tabsmenu #current a span {
    background: url("images/right-tab-hover.gif") right top no-repeat;
    color: #000;
    font-weight: bold;
    }

    #tabsmenu a:hover {
    background: url("images/left-tab-hover.gif") left top no-repeat;
    }

    #tabsmenu a:hover span {
    background: url("images/right-tab-hover.gif") right top no-repeat;
    color: #000;
    }
    #tabborder { height:1em; background:#FFEAB7;
    }

    ---------------------------------------------------END CSS -->

    And here is the HTML markup:

    <div id="tabsmenu">
    <ul>
    <li id="current"><a href="PROJECT.html"><span>General Information</span></a></li>
    <li><a href="sample.htm"><span>Ledger Information</span></a></li>
    <li><a href="premises.htm"><span>Premises</span></a></li>
    <li><a href="#"><span>Services</span></a></li>
    <li><a href="#"><span>Features</span></a></li>
    </ul>
    </div>

    -----------------------------END HTML-->

    And I'm not sure how I would get the images posted since they are not yet live on a server... But just to give an idea they have rounded corners and the right image is plenty long in order for expansion for longer text and such.

    Hope this helps.

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can attach them to a post .

  7. #7
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    oh!

    I didn't see that before.

    They are now posted. Also, the background color for this tab is #7F9DB9.
    Attached Images Attached Images

  8. #8
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey I just got it figured out - with some help of course!

    I found out I needed to post my link tab like so:
    background: url("images/right-tab.gif") no-repeat right 2px;

    Just wanted to thank you for your willingness to help. :-)

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    background: url("images/right-tab.gif") no-repeat right 2px;
    Hi, glad you found a solution but I should point out that you can't mix keywords and literal values like right 2px because firefox and other browsers will ignore it.

    You will need to use 100&#37; 2px instead

  10. #10
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Doesn't seem to be a problem...

    Hi Paul and thanks for the Info... But I've checked in all browsers (i.e. IE7, netscape, firefox, Oprah8, slimbrowser, and mozilla) and there doesn't seem to be a problem.

    Could you please give more information on your post?

  11. #11
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I think you'll find Paul is correct, he always is!
    My guess is your just not noticing the 2px difference.
    The two values are for the x-position and the y-position and I have heard before not to mix the types of values as well so there must be something in it.

  12. #12
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Doesn't work when I try...

    When I replace what Paul says it makes my entire tab nav shrink to almost nothing except the current tab. So it not's working for me. I have all the code and images included.

    Here is my revised CSS -- if you'd like please correct what you see wrong here and send it back to me...


    /************* TABS MENU BAR STYLES *************/

    #tabsmenu {
    float: left;
    width: 96.93%;
    font-size: 97%;
    line-height: normal;
    border-bottom: 0px solid #A3A8B2;
    margin: 10px 0px 0 10px;
    padding: 0px;
    }

    * html #tabsmenu {
    margin-bottom: 1em;
    }

    #tabsmenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }

    #tabsmenu li {
    display: inline;
    margin: 0;
    padding: 0;
    height: 25px;
    }

    #tabsmenu a {
    float: left;
    background: url("images/left-tab.gif") no-repeat left 2px;
    margin: 0;
    padding: 0 0 0 10px;
    text-decoration: none;
    height: 25px;
    }

    #tabsmenu a span {
    float: left;
    display: block;
    background: url("images/right-tab.gif") no-repeat right 2px;
    padding: 3px 14px 3px 5px;
    font-weight: normal;
    color: #333;
    margin: 0 1px 0 0;
    height: 25px;
    }

    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsmenu a span {
    float: none;
    }
    /* End IE5-Mac hack */

    #tabsmenu #current a {
    background: url("images/left-tab-hover.gif") no-repeat left top ;
    }

    #tabsmenu #current a span {
    background: url("images/right-tab-hover.gif") no-repeat right top ;
    color: #000;
    font-weight: bold;
    }

    #tabsmenu a:hover {
    background: url("images/left-tab-hover.gif") no-repeat left top ;
    }

    #tabsmenu a:hover span {
    background: url("images/right-tab-hover.gif") no-repeat right top ;
    color: #000;
    }
    #tabborder { height:1em; background:#FFEAB7;
    }

  13. #13
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    This seems to work
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    #tabsmenu {
    float: left;
    width: 96.93&#37;;
    font-size: 97%;
    margin: 10px 0 0 10px;
    padding: 0;
    }
    #tabsmenu ul {
    float: left;
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
    
    #tabsmenu li {
    float: left;
    margin: 0;
    padding: 0;
    height: 25px;
    }
    
    #tabsmenu li a {
    float: left;
    background: url(images/left-tab.gif) no-repeat top left;
    margin: 0;
    padding: 0 0 0 10px;
    text-decoration: none;
    height: 25px;
    }
    
    #tabsmenu a span {
    float: left;
    display: block;
    background: url(images/right-tab.gif) no-repeat top right;
    padding: 3px 14px 3px 5px;
    font-weight: normal;
    color: #333;
    margin: 0 1px 0 0;
    height: 25px;
    }
    
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsmenu a span {
    float: none;
    }
    /* End IE5-Mac hack */
    
    #tabsmenu #current a {
    background: url(images/left-tab-hover.gif) no-repeat top left;
    }
    
    #tabsmenu #current a span {
    background: url(images/right-tab-hover.gif) no-repeat top right;
    color: #000;
    font-weight: bold;
    }
    
    #tabsmenu a:hover {
    background: url(images/left-tab-hover.gif) no-repeat top left;
    }
    
    #tabsmenu a:hover span {
    background: url(images/right-tab-hover.gif) no-repeat top right;
    color: #000;
    }
    #tabborder { height:1em; background:#FFEAB7;
    }
    -->
    </style>
    </head>
    <body>
    <div id="tabsmenu">
      <ul>
        <li id="current"><a href="PROJECT.html"><span>General Information</span></a></li>
        <li><a href="sample.htm"><span>Ledger Information</span></a></li>
        <li><a href="premises.htm"><span>Premises</span></a></li>
        <li><a href="#"><span>Services</span></a></li>
        <li><a href="#"><span>Features</span></a></li>
      </ul>
    </div>
    </body>
    I haven't been able to test this cross browser..

    Note: I suggest you make the images larger in height than you anticipate and don't use a fixed height menu - Let all the tabs grow with the font size, just let more of the background image show through

  14. #14
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    THANKS. But what I don't understand is, what I have now is working exactly the way I want it in all browsers. When I apply your code it only raises the entire nav tabs up aligning with the current tab - which leaves a big gap between my bottom to the inactive tabs...:-(

    Any other suggestions?

  15. #15
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ps

    I also changed my non-active tabs to be smaller in height. I've attached them here... Again I want my active and hover tabs to be slightly raised above the non-active tabs.
    Attached Images Attached Images

  16. #16
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    THANKS. But what I don't understand is, what I have now is working exactly the way I want it in all browsers.
    If it's exactly how you want it then it's exactly how you want it. Well done.
    When I apply your code it only raises the entire nav tabs up aligning with the current tab - which leaves a big gap between my bottom to the inactive tabs...:-(
    I didn't know where the menu was going in the larger page. The big gap was because of the margins and heights you gave. Here it's removed and the 2px background shift on the inactive tabs.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    #tabsmenu {
    float: left;
    width: 96.93&#37;;
    font-size: 97%;
    margin: 0;
    padding: 0;
    }
    #tabsmenu ul {
    float: left;
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
    
    #tabsmenu li {
    float: left;
    margin: 0;
    padding: 0;
    }
    
    #tabsmenu li a {
    float: left;
    background: url(left-tab.gif) no-repeat 0 2px;
    margin: 0;
    padding: 0 0 0 10px;
    text-decoration: none;
    }
    
    #tabsmenu a span {
    float: left;
    display: block;
    background: url(right-tab.gif) no-repeat 100% 2px;
    padding: 3px 14px 3px 5px;
    font-weight: normal;
    color: #333;
    margin: 0 1px 0 0;
    }
    
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsmenu a span {
    float: none;
    }
    /* End IE5-Mac hack */
    
    #tabsmenu #current a {
    background: url(left-tab-hover.gif) no-repeat top left;
    }
    
    #tabsmenu #current a span {
    background: url(right-tab-hover.gif) no-repeat top right;
    color: #000;
    font-weight: bold;
    }
    
    #tabsmenu a:hover {
    background: url(left-tab-hover.gif) no-repeat 0 2px;
    }
    
    #tabsmenu a:hover span {
    background: url(right-tab-hover.gif) no-repeat 100% 2px;
    color: #000;
    }
    -->
    </style>
    </head>
    <body>
    <div id="tabsmenu">
      <ul>
        <li id="current"><a href="PROJECT.html"><span>General Information</span></a></li>
        <li><a href="sample.htm"><span>Ledger Information</span></a></li>
        <li><a href="premises.htm"><span>Premises</span></a></li>
        <li><a href="#"><span>Services</span></a></li>
        <li><a href="#"><span>Features</span></a></li>
      </ul>
    </div>
    </body>
    </html>
    You should really make your background images taller than they need to be.

  17. #17
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks for your time

    Thanks. I'll check this one out.

    Can someone please explain in a bit more detail what was wrong with my code (technically -- that is)? I really want to understand so I can continue to trouble-shoot these situations the easier way.

  18. #18
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Can someone please explain in a bit more detail what was wrong with my code (technically -- that is)? I really want to understand so I can continue to trouble-shoot these situations the easier way.
    It looked ok, as discussed I think it's best if it scales with the font-size, so heights are a no-no in my opinion. The mix of units in the background as Paul mentioned. Also you don't need to use quotes or apostraphes around your url.
    Apart from those few things it's pretty clean and works

    Also this would reduce the amount of CSS you are using
    Code:
    * {margin: 0; padding: 0;}
    Then you don't need to declare it on evry element

  19. #19
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks -- This works perfect. After I tweaked it a bit to line up within my page! I also changed some of the height paddings so problem solved.

    Thanks so much for you help. :-)

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

    Hi Paul and thanks for the Info... But I've checked in all browsers
    The newer browsers are mostly ok but earlier versions of firefox and mozilla will show no image at all if you mix the keywords with actual dimensions so its best not to do it

    The reason for this is that CSS1 states that "Keywords cannot be combined with percentage values, or length values."

    http://www.w3.org/TR/REC-CSS1#background-position

    However this was changed in css2.1:
    quote "Combinations of keyword, length and percentage values are allowed,"

    http://www.w3.org/TR/2004/CR-CSS21-2...round-position

    More info here:
    http://www.quirksmode.org/css/backgroundposition.html
    http://annevankesteren.nl/2005/01/background-position

    Suffice to say that it is not supported in all browsers so its best just not to do it as it is no hardship


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
  •