CSS navigation tabs Apr05 '05

Off with "square"

With the power of CSS, it’s possible to create visually appealing navigation tabs – with curved, smooth corners, that blend well with the entire design.

For the next version of this site, I am branching away from the "boxy," and "square" tabs that I currently have, and creating tabs with rounded corners.

"Sliding Doors" technique

In order to create these nicer tabs, I consulted the experts.

First, I fully digested Doug Bowman’s article on Sliding Doors of CSS.

I liked Doug’s approach, but I wanted to see what Eric Meyer had to say about it.

I referenced Chapter 7 of Eric’s book, More Eric Meyer on CSS.

Eric uses almost an identical approach to Doug, except that he uses one less image, in the process.

My result

Here’s a snippet of what I came out with:

The XHTML

The XHTML I used consisted of (the way it should be) – the bare minimum:

<div id="sidebar">

<ul>

<li><a href="/base/" title="Base">Base</a></li>

<li><a href="/about/" title="About Me!">About Me!</a>

</li>

<li id="current"><a href="/blog/" title="Blog">Blog</a></li>

</ul>

</div>

The CSS

The CSS was equally brief, as well:

#sidebar ul {

margin: 0;

padding: 0 0 0 22px;

width: 791px;

}


#sidebar ul li

{

background: url(images/tabs2-big.gif) 0 100% no-repeat;

float: left;

font-size: 10px;

line-height: 20px;

list-style-type: none;

margin-left: 5px;

padding-left: 16px;

white-space: nowrap;

}


#sidebar a

{

background: url(images/tabs2-big.gif) 100% 100% no-repeat;

color: #633;

display: block;

float: left;

font-size: 1.3em;

font-weight: bold;

padding: 5px 16px 5px 0;

text-decoration: none;

width: 0.1em;

}


html>body #sidebar a

{

width: auto;

}


/* IE-5 Mac Hack \*/

#sidebar a

{

float: none;

}

/* End IE-5 Mac Hack */



#sidebar a:hover

{

color: #fff;

}



#sidebar #current,

#sidebar #current a

{

background-image: url(images/tabs2-big-ct.gif);

color: #fff;

}

Categories: CSS

Add Feedback (view all)

Leave feedback

Feedback

Input format: The editor controls below will assist with Markdown syntax.

Status

Sub-status

Your info Name: Email (will not show on page):

Follow new comments via email? (You can turn this off any time)

Do you want your comments emailed to yourself?

Home Page (optional):

matthom is published and produced by Matt Thommes - an independent publishing enthusiast, mobile blogger, content creator, informative writer, web developer from a suburb of Chicago. Never one to conform, Matt intends to promote the effect the web has on our lives, in an effort to intensify, instruct, and clarify all that is happening around us.