Search |  |  | Are you a Blogger user? Download this template for free!

## Tuesday, March 18, 2008 ## Clean Tab Bar Digg-like using CSS by Antonio Lupetti 16 comments Delicious 0 Tag css design html Share this post: Design Float | StumbleUpon | Reddit Do you like Digg comments tabbed bar with sliding doors effect for each tab? This tutorial explains how to design a clean Tab Bar (Digg-like) with rounded tabs (liquid width) using CSS and just one background image to manage all status for each tab (standard, active, hover). The result is something like this: Download the source code ready to use in your projects: Download this tutorial Tab bar anatomy Before illustrating the code, a little explanation about our Tab Bar. How you can see in this image, whe have three main elements: - Active element (Home) - Standard tab (Community, Messages, Contact) - Hover element (Blog) Each element has rounded corners and adapts its width to the text conteined inside it. Ok, if this is clear how can you do it using CSS and HTML? A good way to implement it is using a <span> element within an <a> element and apply to both elements a background image with rounded corners: Take a look a this post for more infos about rounded corners in liquid elements for a better explanation about this topic. Background image with rounded corners How I said some row above, we'll use just one background image to manage active, standard, hover tab status. The image is the following: We'll use position properties for CSS background attribute to change the state of each tab (active, standard, hover) in this way: - Active, background top position: top - Standard, background top position: 30px - Hover, background top position: 60px HTML Code HTML code for each tab will be something like this: <a href="community.html"><span>Community</span></a> ... and in this specific case each tag is a <li> element of an <ul> list: <li><a href="community.html"><span>Community</span></a>>/li> How you can see, HTML is a simple list: <ul class="tab"> <li class="active"><a href="home.html"><span>Home </span></a></li> <li><a href="community.html"><span>Community </span></a></li> <li><a href="blog.html"><span>Blog </span></a></li> <li><a href="messages.html"><span>Messages </span></a></li> <li><a href="contact.html"><span>Contact </span></a></li> </ul> When you want an element set to active, you have to add the class "active" to the list element (in bold in the previous code). CSS code CSS is a little more complex respect HTML code, but no fear is not so difficult to understand: ul, li{border:0; margin:0; padding:0; list-style:none;} ul{ border-bottom:solid 1px #DEDEDE; height:29px; padding-left:20px; } li{float:left; margin-right:2px;} .tab a:link, .tab a:visited{ background:url(img/tab-round.png) right 60px; color:#666666; display:block; font-weight:bold; height:30px; line-height:30px; text-decoration:none; } .tab a span{ background:url(img/tab-round.png) left 60px; display:block; height:30px; margin-right:14px; padding-left:14px; } .tab a:hover{ background:url(img/tab-round.png) right 30px; display:block; } .tab a:hover span{ background:url(img/tab-round.png) left 30px; display:block; } /* -------------------------------- */ /* ACTIVE ELEMENTS */ .active a:link, .active a:visited, .active a:visited, .active a:hover{ background:url(img/tab-round.png) right 0 no-repeat; } .active a span, .active a:hover span{ background:url(img/tab-round.png) left 0 no-repeat; } It's all. Ready to use in your projects, if you want only changing the background image to adapt it to your custom layout. Download this tutorial Subscribe Feeds RSS in your preferred RSS reader Comments 16 comments Anonymous said... Another great post! Thanks Antonio, you are really the best! March 18, 2008 3:27 PM vike said... Thanks for tutorial. I noticed that IE6 don't render this code properly. If width of element with big background image isn't set, IE6 tries to stretch the element to size of the image. If i set width result becomes ugly - text moves from its centered position as expected. I see three workarounds: (1) use two images, short for -a- and long for -span- (element won't be stretched) and (2) use completely graphical menu like at dragoninteractive.com with all states and menu items in one picture (you control the width), and (3) using conditional comments we can send that short background image only to IE6 users. March 18, 2008 5:25 PM Luca said... I prefer using an "idied" body tag for the active tab styling. With this trick you can use the same navigation code in each page, without setting up a specific .active class. For example, in the home page this is the HTML for the home page: <body id="inHome"> <ul id="navList"> <li id="home"> <a href="index.html">Home</a> </li> <li id="blog">... </li> </ul> ... </body> Then this is the CSS: #inHome li#home a { [CSS for the Active styling] } #inBlog li#blog a { ... } March 19, 2008 8:16 AM Antonio said... @Luca: thanks for your tips! March 19, 2008 8:17 AM FreelancerFire said... Nice post Antonio, I love your site and quality content. I made a few modifications of my own and made a post about them on my new site. I added transparency and scalability to my menu and came up with this post. Keep up the fantastic work! March 19, 2008 7:37 PM Cezary Tomczyk said... For li I would add display:inline to fix IE Doubled Float-Margin bug. March 21, 2008 9:43 AM David said... Ciao Antonio, really great and useful tutorial. I also use the body id for the active tab. Mille grazie April 2, 2008 11:55 AM Ralph said... Thank you for this tutorial and i use to my own webproject, perhaps ;) April 19, 2008 1:07 PM Sujito said... Looks awesome on FF, but I am having trouble with IE6. I am a beginner and don't really get to understand Vike's suggestion, and inline does not work either. I would appreciate if anyone could provide some additional clarity here. Thanks! May 13, 2008 4:48 AM Nick said... This is brilliant; just the sort of thing I was looking for! Many thanks. May 14, 2008 1:09 AM Anonymous said... Thanks. Vike, how did you clean up the mess ie6 does to this navigation? i tried your methods 1 and 3, and they didn't work. If i set a fixed width for each -li- element, it works, but then again, i want them to have different lengths according to their content... if you have any solution to this problem, i'd be thankful to hear it. regards, chris June 2, 2008 2:42 PM Sergio said... A very useful tutorial. Thank you very much! July 8, 2008 12:53 AM Harpal Singh said... For IE6 issue, just give float:left; to a and span, it will solve the issue. The problem is coming because there is a float:left assigned to li and display:block assigned to a and span. IE6 isn't making child a block by default, if parent has a float. July 25, 2008 4:19 AM vicpoke said... Hello! It's a nice and useful post, Thanks a lot! I'm using this tabs for my site, but I found the same problem for IE6, and solved it partially with the float left for span and a elements. But the bottom border is not displayed!! How can I solve it? Please I need it!!! August 9, 2008 11:21 AM Anonymous said... Harpal you're the man! September 15, 2008 2:39 AM ryopi-fansu said... thanks for this nice tutorial! you make css looks so clean & simple :) thanks to you and harpal October 8, 2008 9:41 PM Newer Post | Older Post | Home |
### My Facebook Profile Feeds rss About Me ##### Antonio Lupetti Engineer, Pro Blogger, Mac user, Musician, Web Addicted. ROME - ITALY antonio.lupetti@gmail.com ### Subscribe feeds rss Feed Rss Subscribe my feeds via e-mail
Subscribe in your preferred RSS reader ### Subscribe feeds rss Recent Entries ### Advertise on this site Sponsored links
Photoshop Lady | Web Appers
Studio7Designs | Sendloop
VPSmedia! | Walyou
ajax (39) API (2) apple (3) blogger (16) coldfusion (16) css (58) database (13) design (43) fonts (1) freebies (9) general (43) google (12) html (50) icons (1) inspiration (21) javascript (31) Joomla (1) jquery (1) mootools (21) OpenOffice 3.0 (1) PHP (29) project management (8) prototype.js (2) scriptaculous (12) showcases (3) site review (19) software (1) spreadsheets (11) templates (1) test drive (1) tutorials (7) ### Sponsored Links ### My Twitter Profile Twitter ### Are you looking for a job? Post a job and reach web professionals everywhere. ### My Photos on flickr ### Subscribe feeds rss Recent Comments ### Technorati ##### Technorati Woork authority on technorati Add this blog to your faves