Creating tabbed navigation with CSS, continued from the previous page, from the book The CSS Anthology: 101 Essential Tips, Tricks & Hacks by Rachel Andrew...
Here's our page so far... displaying the navigation after styling the ul element
Now we need to style the list items
This rule uses the float property to position the list items horizontally while maintaining the block-level status of each.
We then add the first of our "sliding door" images -- the thin left-hand side of the tab -- as a background image. A single-pixel right margin on the list item creates a gap between one tab and the next.
This shows that the left-hand tab image now appears for each tab.
Styling the Links with CSS
Next, we style the links, completing the look of our tabs in their unselected state. The image that forms the right-hand side of the tab is applied to each link, completing the tab effect:
The results are shown here
If you increase the text size in the browser, you can see that the tabs neatly increase in size too. In fact, they do so without overlapping and without the text protruding out of the tab -- this is because we have used images that allow plenty of room for growth.
To complete the tab navigation, we need to highlight the tab that corresponds to the currently displayed page.
You'll recall that each list item has been assigned a unique class name. If we assign to the body element an ID that has a value equal to the value of each list item class, CSS can do the rest of the work:
Matching the Body ID
Although it looks like a lot of code, the CSS code that styles the tab matching the body ID is relatively straightforward. The images I've used are exact copies of the left and right images that we applied to the tabs, but they're a different color, which produces the effect of one tab appearing to be highlighted.
Here's the CSS:
With these rules in place, specifying an ID of recipes to our body will cause the
Recipes tab to be highlighted, specifying contact will cause the Contact Us tab to be
highlighted, and so on.
Click here to see the results
Rachel Andrew is a web developer and the director of web solutions provider . When not writing code, she writes about writing code and is the coauthor of several books promoting the practical usage of web standards alongside other everyday tools and technologies. Rachel takes a common sense, real world approach to web standards, with her writing and teaching being based on the experiences she has in her own company every day.
Check out these recommended titles:
- The CSS Anthology: 101 Essential Tips, Tricks & Hacks by Rachel Andrew (Paperback - Aug 14, 2007 - Illustrated)
- HTML Utopia: Designing Without Tables Using CSS by Rachel Andrew (Paperback - April 14, 2006- Illustrated)
- Build Your Own Standards Compliant Website Using Dreamweaver 8 (Build Your Own) by Rachel Andrew (Paperback - Aug 1, 2005 - Illustrated)
- Dreamweaver MX 2004 Design Projects by Rachel Andrew, Craig Grannell, Allan Kent, and Christopher Schmitt (Paperback - Aug 23, 2004)
©Copyright 2007, Rachel Andrew, Published with permission from Sitepoint, from the book:
The CSS Anthology: 101 Essential Tips, Tricks & Hacks by Rachel Andrew (Paperback - Aug 14, 2007, Illustrated)
A practical guide on CSS (Cascading Style Sheets) for professionals and novices, that can be used both as a tutorial and read cover-to-cover or as a handy and practical reference book to common problems, solutions and effects. The 2nd edition is now full-color throughout and is completely updated and revised with the latest tips & tricks.
The CSS Anthology: 101 Essential Tips, Tricks & Hacks is ideal for experienced Web designers who would like to add sparkle to their existing designs, as well as newcomers who want to learn Web design the right way the first time.
Participate in your Design Center
Lots of fun and information for all... don't forget, any community is only as good as the participation of its members. We invite your tips, tricks, comments, suggestions and camaraderie.
- Ask for the DT&G Monthly: to receive DT&G newsletter each month, happenings in the Design Center and regular columns like the "Mail Bag" and "Cool Sites"
- DISCUSS this : in the Designers' CAFE forums
- Link to this site, and then show us the link. We'll send you any of our current door prizes, just for your trouble.
- Design Cafe: discuss Web Design amongst your peers
- SUBMIT: a link to a Photoshop web site
- Photoshop 911 tips and tricks
- SUBMIT: a link to a Photoshop web site
- Trademarks & Legal