Monday, November 10, 2008

Pretty sexy tabs in CSS

So, I figured out how to do some pretty sexy tabs in CSS. Works inf Firefox, dunno about anything else since no extensive research has gone into it (highly doubt it will work with IE properly).

.navbar
{
width: 1000px;
height: 20px;
text-align: center;
margin-left: auto;
margin-right: auto;
padding-left: 0.5px;
padding-right: 0.5px;
}

.navfill
{
width: 1000px;
border-bottom: solid 1px #000;
padding-bottom: 1px;
float: left;
position: absolute;
z-index: -1;
}

.navele
{
border-left: solid 1px #000;
border-right: solid 1px #000;
border-top: solid 1px #000;
padding-left: 10px;
padding-right: 10px;
height: 20px;
float: right;
margin-right: 5px;
vertical-align: bottom;
position: relative;
}

.navele_current
{
border-left: solid 1px #000;
border-right: solid 1px #000;
border-top: solid 1px #000;
padding-left: 10px;
padding-right: 10px;
height: 20px;
float: right;
margin-right: 5px;
vertical-align: bottom;
z-index: 1;
position: relative;
background-color: #fff;
}



<div class="navbar">
<div class="navele"><a href="">Misc</a></div>
<div class="navele"><a href="">Blog</a></div>
<div class="navele"><a href="">Music</a></div>
<div class="navele"><a href="">Portfolio</a></div>
<div class="navele"><a href="">Projects</a></div>
<div class="navele_current"><a href="">Home</a></div>
<div class="navfill" >&nbsp;</div>
</div>
Posted by Brandon Perry at 8:39 PM
Labels: , ,

5 comments:

  1. mmmikeMonday, November 10, 2008 9:23:00 PM

    that is a lot of unneeded HTML there.

    a simple UL element with the items as the links works fine. wrap all that in a DIV to apply more styles if needed

    ReplyDelete
  2. chipbennettMonday, November 10, 2008 9:40:00 PM

    It also requires manual changes from page to page.

    Better to use an ID on the BODY tag of each page, and then define the "current" specification in the CSS according to the navigation element/body ID cascade.

    And ditto what mmmike said; the navigation menu (whether horizontal or vertical) is an ideal use of an UL.

    ReplyDelete
  3. KillerKiwiMonday, November 10, 2008 9:59:00 PM

    .navbar
    {
    width: 1000px;
    height: 20px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.5px;
    padding-right: 0.5px;
    }

    .navfill
    {
    width: 1000px;
    border-bottom: solid 1px #000;
    padding-bottom: 1px;
    float: left;
    position: absolute;
    z-index: -1;
    }







    .navele a,
    .navele_current a{
    text-decoration: none;
    color: black;
    }
    .navele a:hover,
    .navele_current a:hover{
    color: red;
    }

    .navele,
    .navele_current {
    /* Moz and webkit round corners */
    -moz-border-radius-topleft : 5px;
    -webkit-border-top-left-radius : 5px;
    -moz-border-radius-topright : 5px;
    -webkit-border-top-right-radius : 5px;
    }


    .navele,
    .navele_current
    {
    border-left: solid 1px #000;
    border-right: solid 1px #000;
    border-top: solid 1px #000;
    padding-left: 10px;
    padding-right: 10px;
    height: 20px;
    float: right;
    margin-right: 5px;
    vertical-align: bottom;
    position: relative;
    background-color: #D9D7D7;
    }
    .navele_current
    {
    z-index: 1;
    background-color: white;
    border-bottom: solid 1px white;
    }

    ReplyDelete
  4. AnonymousTuesday, November 11, 2008 2:23:00 AM

    An example page showing off the sexiness would be nice..

    ReplyDelete
  5. chipbennettTuesday, November 11, 2008 9:41:00 AM

    @Soren:

    I use the UL/CSS combo for the navigation menus on my web site. Have a look around:

    ReplyDelete

Subscribe to: Post Comments (Atom)