CSS Menu tabs

Adding the left menu tab corner

We need to make a small image with the same colour for the left rounded corner: - here's
one I made earlier. Let's call this image ‘left-tab.gif’ and place it into the background of this
link, using this CSS rule:

#navigation a
{
color: #000;
background: #ffa20c url(left-tab.gif) left top no-repeat;
text­decoration: none
} 

This new CSS rule says that the background image should be ‘left-tab.gif’, the image should be
on the left, at the top, and it shouldn't be repeated - kind of obvious really. The result?

Home

We're getting there, but we need to move that text over a bit as it's on top of the left rounded
corner. It's pretty simple to do by adding some padding to our CSS rule:

#navigation a
{
color: #000;
background: #ffa20c url(left­tab.gif) left top no­repeat;
text­decoration: none;
padding-left: 10px
} 

Home

And the right corner

We can only assign one background image to a CSS rule so we need to make a new CSS rule
and assign an image to that. We'll start by inserting a <span> tag into the HTML code:

<div id="navigation"><a href="#"><span>Home</span></a></div>
Now we'll just create a new CSS rule in which we'll assign this right menu tab (another one I
made earlier) to the <span> and we're ready to go! We'll call this image "right-tab.gif"

#navigation a span
{
background: url(right­tab.gif) right top no­repeat;
} 

This CSS rule means that every <span> tag within an <a> tag will have this image as its
background. And the final result:

Home

Perfect! So now you can... wait a minute, can you spot why it's not so perfect? That's right, we
forgot to assign some padding to that <span> tag in the CSS rule:

#navigation a span
{
background: url(right­tab.gif) right top no­repeat;
padding-right: 10px
} 

Giving us:

Home

Now that really is perfect! Resize the text again and see how it looks!

The final CSS touches

Let's assign this link a nice hover effect with some new CSS rules. We'll need a couple more

background images, like and which we'll call ‘left-tab-hover.gif’ and ‘right-tab-hover.gif’.
Then, we just insert the following CSS rules and away we go!

#navigation a:hover {
color: #fff;
background: #781351 url(left-tab-hover.gif) left top no­repeat;
padding­left: 10px
} 
 #navigation a:hover span
{
background: url(right­tab­hover.gif) right top no­repeat;
padding­right: 10px
} 

Go on, put your mouse over it:

Home

Making a tab menu

Now we've done all the hard work we can make as many of them as we want - go on
mouseover them!

• Home
• Services
• Take a tour
• About us
• Contact us

Doing it this way however does bring up a new accessibility problem, namely that this
navigation won't make sense to anyone with CSS disabled. With no CSS these links look like:

HomeServicesTake a tourAbout usContact us

Hmmm... this is a problem, me thinks. The solution? Let's put them into a list! The HTML will
therefore look like:

<ul id="navigation">
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Services</span></a></li>
<li><a href="#"><span>Take a tour</span></a></li>
<li><a href="#"><span>About us</span></a></li>
<li><a href="#"><span>Contact us</span></a></li>
</ul> 

Now let's create some CSS rules for our list items, so that the menu tabs all display next to
each other on the same line:
#navigation ul
{
list­style: none;
padding: 0;
margin: 0
}

#navigation li
{
float: left;
margin: 0;
} 

To get rid of the bullets we used the CSS command, list­style: none and to display our
menu tabs inline, so that they're all stacked next to each other, we used float: left.

(At this point some of the more expert CSS coders may question the point of keeping the
<span> tag, especially those who've read Doug Bowman's Sliding Doors article. The reason
we leave in the <span> tag is to make the entire menu tab clickable. If we were to assign one
of the corners to <li> as a background image then that corner won't be clickable.)

IE 5.x problems

Unfortunately these tabs won't work on IE 5.0 on PC (and a couple of other browsers), as the
rounded edges of the tabs don't appear. As such, each menu tab will be displayed as a
rectangle, with sharp corners. There's an easy solution to this, which is to insert display: 
block into the #navigation a and #navigation a span CSS commands.

Sounds easy, right? Unfortunately not. By inserting these commands into the CSS, IE 5 on Mac
will stack these menu items on top of each other. To make these display properly for IE 5 on
Mac we'll need to also insert the float:left command, but apply it only to this browser. But
how do we apply a CSS command to just one browser? Easy - we use the commented
backslash hack:

#navigation a, #navigation a span
{
display: block;
float: left
}

/* Hide from IE5­Mac \*/
#navigation a, #navigation a span
{
float: none
}
/* End hide */ 

The first CSS command says to float the menu tab content to the left, and the second CSS
command cancels this out for every browser except IE 5 on Mac. When two CSS commands
are specified for the same selector, the second one always takes precedence. However, IE 5
on Mac can't read the second command because of the slashes, so defaults to the first
CSS command. (If you really want to know how and why this works, read Commented
Backslash MacIE5 CSS Hack by Sam Foster.)

The final code

The final HTML is:

<ul id="navigation">
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Services</span></a></li>
<li><a href="#"><span>Take a tour</span></a></li>
<li><a href="#"><span>About us</span></a></li>
<li><a href="#"><span>Contact us</span></a></li>
</ul> 

And here's our entire CSS code:

#navigation a
{
color: #000;
background: #ffa20c url(left­tab.gif) left top no­repeat;
text­decoration: none;
padding­left: 10px
}

#navigation a span
{
background: url(right­tab.gif) right top no­repeat;
padding­right: 10px
}
#navigation a, #navigation a span
{
display: block;
float: left
}

/* Hide from IE5­Mac \*/
#navigation a, #navigation a span
{
float: none
}
/* End hide */

#navigation a:hover
{
color: #fff;
background: #781351 url(left­tab­hover.gif) left top no­repeat;
padding­left: 10px
}

#navigation a:hover span
{
background: url(right­tab­hover.gif) right top no­repeat;
padding­right: 10px
}

#navigation ul
{
list­style: none;
padding: 0;
margin: 0
}

#navigation li
{
float: left;
margin: 0;
} 
 The end product... With and without CSS

One more time then:

• Home
• Services
• Take a tour
• About us
• Contact us

Accessible Image-Tab Rollovers

A notebook entry from September 30, 2003
I recently implemented a new navigation system for Fast Company and thought it’d be
useful to document the process.

The Problem

We needed to fit more items into FC’s top navigation. We ran out of room. Previously,
this was handled by a simple, styled unordered list. But at a window resolution of
800x600 there wasn’t enough additional horizontal space to add even one more item
using the current design.

The Solution

I choose to combine and modify Pixy’s brilliant Fast Rollovers and Stuart Langridge’s
accessible image replacement technique to create accessible, Javascript free, image-tab
rollovers.

How does it work?

The XHTML: One List to Rule Them All

I wanted to continue to use a simple unordered list for the navigation in the markup.
Much has already been said about using lists for navigation, here and elsewhere. They’re
compact, lightweight and accessible to text browsers, screenreaders, PDAs, phones, etc.
Here’s what the list looked like originally (I’ve deleted some of the actual items to make
it more convenient to demonstrate):

<ul id="nav">
<li><a href="/" class="selected">Home</a></li>
<li><a href="/guides/">Guides</a></li>
<li><a href="/magazine/">Magazine</a></li>
<li><a href="/articles/">Archives</a></li>
</ul>

Nice and simple. Now let’s add a unique id to each li so that we can do some fancy
stuff with it (namely, replace the boring text with stylized tabs):

<ul id="nav">
<li id="thome"><a href="/" class="selected">Home</a></li>
<li id="tguides"><a href="/guides/">Guides</a></li>
<li id="tmag"><a href="/magazine/">Magazine</a></li>
<li id="tarchives"><a href="/articles/">Archives</a></li>
</ul>

Now we’re ready to create some tab images.

One Image, 3 States

The essence of Pixy’s Fast Rollovers involves creating one image for each navigation
item that includes normal, hover and active states stacked on top of each other. Later,
we’ll use CSS to change the background­position to reveal each state at the
appropriate time.

Figure 1.1

Figure 1.1 on the right shows an example image that I’ve created and used for Fast
Company’s new navigation. Each state is 20px tall with a total image height of 60px. The
top 20px is the normal state, the next 20px shows the hover state and final 20px shows
the active state (which is also used for the “you are here” effect). There are similar
images for each tab we’d like to use.

Using one image for each state allows us to toss out ugly Javascript and instead make use
of simple CSS rules for hover effects. This is good. It also eliminates the “flicker” effect
that other CSS methods suffer from, where separate on/off images are used. This is good.
We also don’t have to pre-load any additional images. Again… this is good.

The CSS: This is Where the Magic Happens

First we’ll set up the rules that all navigation items will need. This will save us from
writing duplicate rules for each tab. Then we’ll add a separate rule for each list item id,
giving the li it’s own background­image and width — the only two variables that
will be different for each tab.

The CSS goes something like this:

#nav {
margin: 0;
padding: 0;
height: 20px;
list­style: none;
display: inline;
overflow: hidden;
}

#nav li {
margin: 0; 
padding: 0;
        list­style: none;
display: inline;
}

#nav a {
float: left;
padding: 20px 0 0 0;
overflow: hidden;
height: 0px !important; 
height /**/:20px; /* for IE5/Win only */
 }

#nav a:hover {
background­position: 0 ­20px;
}

#nav a:active, #nav a.selected {
background­position: 0 ­40px;
}

This essentially turns off padding and list styles, makes the list horizontal and hides the
text that’s between each hyperlink in the list. Notice the :hover and :active rules.
These are generic for every a element within #nav so that we don’t have to repeat those
particular rules for each item.

I’ve also assigned a “selected” class to a tab that I wish to highlight permanently,
signifying which section of the site you are currently on. This is shared with the
:active state.

You may also notice that list­style: none; and display: inline; are

repeated in both the #nav and #nav li selectors. This was to keep IE5/Win happy. In
a perfect world, declaring this once for #nav would be perfectly sufficient. That’s not
the case, of course.

Next, we’ll add the rule for each id and assign it’s background­image and
width. Here’s an example:

#thome a  {
width: 40px;
background: url(home.gif) top left no­repeat;
}

There’s a similar declaration for each tab needed.

CSS tableless Webpage

First part: Header

Let's take a look at the layout in general.

We will try to think differently, without tables or cells but with "zones" or "blocks".

There are several blocks within this site design:

1) an area for the header

2) an area for the horizontal menu

3) an area on the left for the main menu

4) a central area for the content of the document

If this design was constructed from tables, we would need to cheat and use a lot of
colspan, rowspan, ... and columns or separations, or even worse, the infamous
transparent gifs (spacers).

In this case, we will keep the idea of Blocks, each area being placed on the page, and
each area being defined (size, internal structure, background...) on the CSS style
sheet.

NOTE: we will construct our layout with semantics like <div> tags that are
neutral tags for block containers.
Generally, <div> is assimilated with the concept of "layer", especially on htlm
editors such as Dreamweaver.
We don't have to have this position property defined, instead divs can be
placed in relation one to the other with the "margin" property.

The first advantage of CSS is easy to guess: if you want to move or interchange parts
of a website, you only need to change one or two lines in the style sheet, instead of
going and changing each cell of each page...

Let's start by looking at the Header: here is how I envision it:

The Header will be based on two container div blocks:

- "head 1" will contain a background image as will as the logo (Adminews) on the right
side.
- "head 2" will contain a background image as well as the horizontal menu.

Here is the html code, pretty easy:

<html>
<head>
<title>mon site</title>
<link href="styles.css"
rel="stylesheet"
type="text/css" />
</head>

<body>
<div id="head1">
<img src="design/logo.gif"
id="logo" alt="logo" /></div>
<div id="head2"></div>
</body>

</html>

The logo will be placed in the first block (in the div id="head1"). Don't forget the ALT
attribute that is mandatory in XHTML.
 CSS code on the style sheet (style.css) is easy as well (explanations below).

body {
margin: 0;/* without margins
the page would be stuck to the
sides*/
font-family: verdana, arial,
sans-serif; /* base font is
defined in the page */
font-size: 12px; /* size font
is defined in the page */
}
#head1 {
background-image:
url('design/head1.gif');
width: 770px;
height: 91px;
}
#head2 {
background-image:
url('design/head2.gif');
width: 770px;
height: 36px;
}
#logo {
float: right; /* to align the
logo to the right */
margin-right: 10px; /* place
the logo within its container,
head1 */
margin-top: 3px;
border: 0;
}

the page margins are eliminated so that it sticks to the sides. Both header blocks
(background image and sizes) are defined. Create a id for the logo so that it splace
within the div is set (here it is aligned to the right with a margin of 10 px to the right
and 3 px at the top). The image will have to have a border at zero because it probably
will become a clickable link. Image-links always have a border of 1 by default it needs
to be suppressed in CSS.

PS: don't forget the ";" at the end of the CSS instructions.

There, the header is done. We'll take care of the horizontal menu later.

SECOND PART: menu and central area

The menu clock is aligned to the left.

The main content container takes up all the remaining space , that is 586 pixels.
 Here is the CSS code for this part:

#left {
position: absolute;
left:0; /* the left block is placed in absolute position to the left */
background-image: url('design/menu.gif');
width: 181px;
height: 337px;
}

#center {
margin-left: 181px; /* the center block is placed according to the left
block's width */
width: 586px;
}

HTML part :

<div id="left"></div>
<div id="center"></div>

THIRD PART: left menu

LThe menu is composed of a light blue cadre with a dark blue border. The text inside
will be a list, since this tag made for this type of vieweing.

Of course, place the menu block(<ul id="menu">) inside the leftblock (<div
id="left">) or it will show up somewhere else in another block.

Here is the CSS to define all that:

.menu { /* defines container for the menu */

margin-top: 30px;
width: 160px;
border: 1px solid #060C6F;
background-color: #B7D3F0;
font-family: verdana, arial;
font-size: 110%;
text-align: center;
}

And this is the HTML part:

<ul id="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>

we'll add a ficticious content right away for the central area:
<div id="center">
<h1>My Website</h1>
<h2>How I built it in CSS and without tables </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse potenti.
Cras leo nibh, aliquet nec, interdum et, consequat sed, nulla. Praesent
nec quam quis augue auctor pulvinar. Nunc vehicula wisi et mi. Quisque
ultricies
conubia nostra, per inceptos hymenaeos.</p>
<p>Sed gravida leo sed quam. Aenean vitae pede a felis semper
vestibulum.
Mauris non ante. Pellentesque suscipit lectus at erat. Integer et risus
id tortor
tempus nec, erat</p>
</div>

Take this opportunity to define title tags in CSS code:

h1 {
font-size: 140%;
text-align: right;
}

h2 {
font-size: 100%;
text-align: right;
}

Then add the list tags that will allow us to logically create our menu:

ul,li {
list-style-type: none; /* to minimize problems */
margin: 0;
padding:0;
line-height: 30px; /* extra space */
}

LAST PART: horizontal menu

Each menu link (Home, Products, Catalog...) will be structured with the "lienhaut" id
like this: font size 16px, bold and a left margin of 20 pixels to create a space between
all elements of the menu.

Since the menu is horizontal, we can skip using a list (the elements of a list go to the
line by default) and we can use <a> tags with margins to space them.

The different links are placed within a container block that indicates the general
structure for the menu (plaed aligned to the right with amrgins).

Here is the CSS code:

#topmenu {
float: right; /* vertical menu is aligned to the right of its
container, head3 */
margin-right: 10px;
margin-top: 10px;
}

#topmenu a {
font-size: 16px;
font-weight: bold;
color: #060C6F;
text-decoration: none; /* no decoration to avoid underline showing when
hovered onto */
margin-left: 20px; /* Space between each sub-menu */
}

Here is the HTML part (place it in the right spot, that is within the DIV "head2") :

<div id="topmenu">
<a href="...">Home</a>
<a href="...">Products</a>

<a href="...">Catalog</a>
<a href="...">Forum</a>
<a href="...">Contacts</a>
</div>