Archive

Archive for the ‘CSS’ Category

CSS and round corners: Making accessible menu tabs

January 20, 2010 1 comment

The solution: CSS menu tabs

We start with a simple link:

<div id="navigation"><a href="#">Home</a></div>

We’ll assign it this CSS code:

#navigation a
{
color: #000;
background: #ffa20c;
text-decoration: none
}

Which gives us:

Home

Needs a bit of work, right?

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:

Home17

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!

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:

Home17Services17Take a tour17About us17Contact us17

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

<ul>
<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 Doors18 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 Hack19 by Sam Foster.)

The final code

The final HTML is:

<ul>
<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;
}

Categories: CSS

Dynamic Css

September 13, 2009 Leave a comment

Dynamic Css

Categories: CSS