SitePoint.com

ArticleBot · Sep 4, 2004, 01:07

This is an article discussion thread for discussing the SitePoint article, "CSS and Round Corners: Build Accessible Menu Tabs"

Sergeant · Sep 4, 2004, 14:18

and so we were just sitting and waiting there, just for those nice little images... how exciting!

pikapp · Sep 4, 2004, 15:39

The images are uploaded its the path in the stylesheet that is wrong. Check this out:

http://www.sitepoint.com/graphics/tab-orange-left2.gif

If you save a copy of the page to your local machine and add "http://www.sitepoint.com/graphics/" before each of the background URL calls you can see the desired effect.

M36Teen · Sep 4, 2004, 16:20

Wow, I can't believe there are so many comments on this one thing!! lol

Hierophant · Sep 4, 2004, 17:14

Here is another examples of doing this that has been around for awhile.

http://www.alistapart.com/articles/slidingdoors/
http://www.alistapart.com/articles/slidingdoors2/

awasson · Sep 4, 2004, 23:47

Nice work Trenton and a unique way of dealing with different widths while still maintaining correct padding and space between buttons. Nice!

I do a similar treatment but keep my button/tab image the same width on all links. I'm going to try your way. It will provide some flexibility for sure.

Cheers,
Andrew

Paul O'B · Sep 5, 2004, 05:49

Hi,

If you don't mind adding a hack then theres no reason why ie5 can't join the party too

You just need to give ie a height of 1% for the anchor and span and then it will ie5 will apply the padding and the images will show.

Heres the code with the fixes added (I hope the author doesn't mind but I don't think and code that excludes ie5 will be appreciated.)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Example 3 - CSS and round corners</title>
<style type="text/css"><!--
.navigation a {text-decoration:none}
.navigation a:link, .navigation a:visited, .navigation a:active {color: #000; background: #fb0 url("http://www.sitepoint.com//graphics/tab-orange-left2.gif") left top no-repeat; font-weight:bold; padding-left: 10px}
.navigation a:link span, .navigation a:visited span, .navigation a:active span {background: #fb0 url("http://www.sitepoint.com//graphics/t...nge-right2.gif") right top no-repeat; padding-right: 10px}
.navigation a:hover {color: #fff; background: #26a url("http://www.sitepoint.com//graphics/tab-blue-left2.gif") left top no-repeat; font-weight:bold; padding-left: 10px; position:relative;}
.navigation a:hover span {background: #26a url("http://www.sitepoint.com//graphics/tab-blue-right2.gif") right top no-repeat; padding-right: 10px}
ul.navigation {list-style:none; padding:0; margin:0}
.navigation li {float:left; display:block; margin:0; padding:0}
#border {height:1em; background:#26a;clear:both;overflow:hidden;}
/* commented backslash hack v2 \*/ 
* html .navigation a span, * html .navigation a {height:1%}
* html .navigation li {display:inline;float:none;fl\oat:left;}
/* end hack */ 
 
//--></style>
</head>
<body>
<ul class="navigation">
<li><a href="#" onclick="return false" onkeypress="return false"><span>Home </span></a></li
><li><a href="#" onclick="return false" onkeypress="return false"><span>Services </span></a></li
><li><a href="#" onclick="return false" onkeypress="return false"><span>Take a tour </span></a></li
><li><a href="#" onclick="return false" onkeypress="return false"><span>About us </span></a></li
><li><a href="#" onclick="return false" onkeypress="return false"><span>Contact us </span></a></li>
</ul>
<div id="border"></div>
</body>
</html>

Hope that helps.

Paul.

Paul O'B · Sep 8, 2004, 03:56

Quote:

Originally Posted by sojan80

Okay, this ia all well and good, but how exactly do you get the tab for the respective section it respresents to show "active" or hovered so as to point out "this is where you are"? To illustrate my point, your colors are #fbo (normal)and #26a (hover) so when the user is in the Services section the Services tab always has the hovered tab up as a means of indicating where in the website you are?

Without wishing to be drawn into the discussions that are following this article I will offer some code to do what sojan80 has been asking for.

One way to make an active link is to use an id in the body tag and make it unique for each page and in this way the page becomes active automatically when the following code is used. There is no need to change any of the html on the relevant pages just name the body id uniquely and the code is referenced through that id.

Heres the code (amended to work in ie5), I haven't spent too much time on tidying it upas I wanted to leave it like the author intended.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Example 3 - CSS and round corners</title>
<style type="text/css"><!--
.navigation a {text-decoration:none}
.navigation a{color: #000; background: #fb0 url(http://www.sitepoint.com/graphics/tab-orange-left2.gif) left top no-repeat; font-weight:bold; padding-left: 10px}
.navigation a span {background: #fb0 url(http://www.sitepoint.com/graphics/tab-orange-right2.gif) right top no-repeat; padding-right: 10px}
.navigation a:hover {color: #fff; background: #26a url(http://www.sitepoint.com/graphics/tab-blue-left2.gif) left top no-repeat; font-weight:bold; padding-left: 10px; position:relative;}
.navigation a:hover span {background: #26a url(http://www.sitepoint.com/graphics/tab-blue-right2.gif) right top no-repeat; padding-right: 10px}
ul.navigation {list-style:none; padding:0; margin:0}
.navigation li {float:left; display:block; margin:0; padding:0}
#border {height:1em; background:#26a;clear:both;overflow:hidden;}
/* commented backslash hack v2 \*/ 
* html .navigation a span, * html .navigation a {height:1%}
* html .navigation li {display:inline;float:none;fl\oat:left;}
/* end hack */ 
body#home .navigation li#homelink  a ,
body#service .navigation li#servicelink  a ,
body#tour .navigation li#tourlink  a ,
body#about .navigation li#aboutlink  a ,
body#contact .navigation li#contactlink  a 
{color: #fff; background: #26a url(http://www.sitepoint.com/graphics/tab-blue-left2.gif) left top no-repeat; font-weight:bold; padding-left: 10px; position:relative;} 
body#home .navigation li#homelink  a span,
body#service .navigation li#servicelink  a span,
body#tour .navigation li#tourlink  a span,
body#about .navigation li#aboutlink  a span,
body#contact .navigation li#contactlink  a span 
{background: #26a url(http://www.sitepoint.com/graphics/tab-blue-right2.gif) right top no-repeat; padding-right: 10px} 
 
 
 
//--></style>
</head>
<body id="home">
<ul class="navigation">
<li id="homelink"><a href="#"><span>Home </span></a></li>
<li id="servicelink"><a href="#"><span>Services </span></a></li>
<li id="tourlink"><a href="#"><span>Take a tour </span></a></li>
<li id="aboutlink"><a href="#"><span>About us </span></a></li>
<li id="contactlink"><a href="#"><span>Contact us </span></a></li>
</ul>
<div id="border"></div>
</body>
</html>

While this method of making an active link does incur more overheads in the css it has the benefit of leaving the html unchanged save for the body id.

Codepoet makes a good point about not using colour alone to display information which is why I always use a breadcrumb trail (you are here etc) as well as the standard navigation.

Hope that helps and keeps me clear of any arguments going on above

Paul

Paul O'B · Sep 9, 2004, 17:00

Quote:

Originally Posted by fremelica

Hover over the tab in IE6 (WinXP SP2) and the hover state is a rectangle

Did you wait for the image to load? Hover a bit longer - this is a slight drawback of using this method.

Paul O'B · Sep 13, 2004, 17:43

Quote:

Couldn't you do the right image on the LI, and the left on the A? Saves the span tag..

How would he swap it on hover then ?

Someone else mentioned this earlier but I don't think they thought it through. You need to swap 2 separate images on hover and you can only do this within an anchor (in ie) which is why the extra span is needed for this example

.

Paul

someonewhois · Sep 13, 2004, 17:53

Hmm, I guess Sitepoint.com doesn't show the rest of the comments, only saw 3 and then read the other ones.. I'll get back to you

Edit: Well then, I must be incompetent at CSS, as I can't even get the right tab to work on the LI

Paul O'B · Sep 13, 2004, 18:07

Quote:

Well then, I must be incompetent at CSS

It does work - I've tested it myself lol

vek · Sep 14, 2004, 08:12

Is there anyway to get rid of the 1px line between the tabs and the border in mozilla?

Paul O'B · Sep 14, 2004, 17:04

Quote:

Is there anyway to get rid of the 1px line between the tabs and the border in mozilla?

Yes

Code:

.navigation a { text-decoration: none;display:block }

Paul

stfarm · Feb 4, 2005, 10:25

Quote:

Originally Posted by Paul O'B

Yes

Code:

.navigation a { text-decoration: none;display:block }

Paul

Paul, this doesn't work for me. When I add this, FireFox looks good, but IE displays the links all vertical then.

This is is the right link this time:

http://www.shopherenow.net/rss/default.aspx

Paul O'B · Sep 20, 2004, 04:46

Hi,

Quote:

Originally Posted by david

but when I mouseover the text in the ahref/span, the cursor changes to the text input cursor

Have you got an example of the code you are using?

You could always force the cursor to diaply by adding this to the offending style but does depend in what you have doen with your code of course.

Code:

cursor:pointer

Paul

scattermachine · Oct 14, 2004, 19:13

OK.

So I'm a newbie at CSS and at Sitepoint (you can tell by the number of posts I've made). I think both are great for what they offer to those who are willing to invest a little time.

I'd like to say that I found the article interesting and informative. Even if there are other examples out there (ALA, Google, etc...) it's still nice to see that someone has taken the time to share their knowledge with something that people have an interest in.

I was surprised to see that some replys contained what can only be described as attacks on the author. Especially when there was no constructive criticism.

Paul, as usual, has offered some interesting enhancements to the original idea. But where are the enhancements from the people who only took the time to post negative reactions - those who wanted to show that they are smarter or better than the author?

Please remember that there are people of all skill levels who can learn from examples like this. Sometimes just reading valid CSS is a learning experience.

Since when did a piece of software have to be everything for everybody? In a few years, it won't matter anyway. There will probably be something better that comes along... There are many ways to accomplish things on the Web.

And the problem with standards is that there are sooo many of them. One for each browser it seems! ;-)

Anyway, get over it.

The article is an eye opener for people who haven't seen ALA (and who didn't think it was even possible), including myself. Even after, it's still nice to see the technique to help it sink in.

I look foward to seeing more articles like this - to help me get to the point where I can publicly diss people who sincerely want to help others. Maybe I can go down to the local kindergarden class and prove that I'm better than the teacher...

Paul O'B · Oct 21, 2004, 06:12

Hi Julia,

Quote:

Only thing missing from this tutorial is how to display the current, selected tab, which from a usability perspective is absolutely essential.

See post 34 in this thread for a possible solution

Paul

stfarm · Feb 3, 2005, 13:24

Hi,

I am new to CSS, and I like to get into it. I think this menu is way cool!

I am trying to implement the code that is supposely going to change the default color depending on the active page.
I am using this code in a usercontrol in ASP.NET, in case that's important.
The menu works great, besides the color staying blue on active page.
Could you please look at my styles and see where I am off? That would be great. Thank You,

Steve Farmer
http://www.shopherenow.net

Quote:

.navigation a {text-decoration:none}
.navigation a{color: #000; background: #fb0 url(/images/tab-orange-left2.gif) left top no-repeat; font-weight:bold; padding-left: 10px}
.navigation a span {background: #fb0 url(/images/tab-orange-right2.gif) right top no-repeat; padding-right: 10px}
.navigation a:hover {color: #fff; background: #26a url(http://www.sitepoint.com/graphics/tab-blue-left2.gif) left top no-repeat; font-weight:bold; padding-left: 10px; position:relative;}
.navigation a:hover span {background: #26a url(http://www.sitepoint.com/graphics/tab-blue-right2.gif) right top no-repeat; padding-right: 10px}
ul.navigation {list-style:none; padding:0; margin:0}
.navigation li {float:left; display:block; margin:0; padding:0}
#border {height:1em; background:#26a;clear:both;overflow:hidden;}
/* commented backslash hack v2 \*/
* html .navigation a span, * html .navigation a {height:1%}
* html .navigation li {display:inline;float:none;float:left;}
/* end hack */
body#default .navigation li#homelink a ,
body#service .navigation li#servicelink a ,
body#tour .navigation li#tourlink a ,
body#about .navigation li#aboutlink a ,
body#contact .navigation li#contactlink a
{color: #fff; background: #26a url(/images/tab-blue-left2.gif") left top no-repeat; font-weight:bold; padding-left: 10px; position:relative;} <------ASP.NET does not like this end tag too much
body#default .navigation li#homelink a span,
body#service .navigation li#servicelink a span,
body#tour .navigation li#tourlink a span,
body#about .navigation li#aboutlink a span,
body#contact .navigation li#contactlink a span
{background: #26a url(/images/tab-blue-right2.gif") right top no-repeat; padding-right: 10px} <------ASP.NET does not like this end tag too much

#navigation a
{
color: #000;
background: #fb0 url("/images/tab-orange-left2.gif") left top no-repeat;
text-decoration: none;
padding-left: 10px
}

#navigation a span
{
background: url("/images/tab-orange-right2.gif") right top no-repeat;
padding-right: 10px
}

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

/* Commented backslash hack hides rule from IE5-Mac \*/
#navigation a, #navigation a span
{
float: none
}
/* End IE5-Mac hack */

#navigation a:hover
{
color: #fff;
background: #26a url("/images/tab-blue-left2.gif") left top no-repeat;
text-decoration: none;
padding-left: 10px
}

#navigation a:hover span
{
background: url("/images/tab-blue-right2.gif") right top no-repeat;
padding-right: 10px
}

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

#navigation li
{
float: left;
display: block;
margin: 0;
padding: 0
}
BODY
{
color: navy;
font-family: Arial;
background-color: aliceblue;
}

Paul O'B · Feb 3, 2005, 13:56

Hi,

Was that link supposed to be a link to the problem page as i couldn't see the styles applied there?

Without seeing the html as well its hard to say whats wrong. Did you add the relevant id in the body tag of each appropriate page?

Paul

stfarm · Feb 3, 2005, 15:28

Sorry Paul, I pasted the wrong link, but I figured it out. Works great. Thank you for this great post.

Steve

stfarm · Feb 4, 2005, 08:59

I hope somebody could please help me.
I would like to display some text inside the blue bar underneath the menu, which I use a table row, when you hover over the links (tabs).
I have been trying to implement some examples I found, but it never worked. Any ideas?

Thank You.

Steve

Paul O'B · Feb 4, 2005, 17:50

Hi,

You will need to float the anchor as well.

Code:

.navigation a 
{
text-decoration: none;display:block ;float:left;
}

I believe that fix was only needed for moz anyway.

Quote:

I would like to display some text inside the blue bar underneath the menu

If you want to display a submenu then you would need some js as in the suckerfish menus. If you just want a message then that can be done with css alone.

Heres how i adapted the suckerfish menu to a horizontal drop down.:

http://www.pmob.co.uk/temp/horizontal-menu-hozsub.htm

They can be very tricky to implement even when you kknow what you are doing.

Paul

stfarm · Feb 4, 2005, 18:36

Thank you Paul, that was very helpful. All I like to do is have some text show up when the user hovers over the links. No need for dropdown links yet.

Thank you for those articles, they have helped me understand CSS like never before.

Paul O'B · Feb 4, 2005, 18:57

HI,

All I like to do is have some text show up when the user hovers over the links.

Well you can do something like this which should show the technique.

http://www.pmob.co.uk/temp/popupmessagecss3.htm

Paul

Sep 4, 2004, 01:07	#1
ArticleBot SitePoint Articles Join Date: Apr 2001 Posts: 0	Article Discussion This is an article discussion thread for discussing the SitePoint article, "CSS and Round Corners: Build Accessible Menu Tabs"

Sep 4, 2004, 23:47	#6
awasson SitePoint Wizard Join Date: Oct 2001 Location: Vancouver BC Canada Posts: 1,186	Nice work Trenton and a unique way of dealing with different widths while still maintaining correct padding and space between buttons. Nice! I do a similar treatment but keep my button/tab image the same width on all links. I'm going to try your way. It will provide some flexibility for sure. Cheers, Andrew Last edited by awasson; Sep 7, 2004 at 13:18.

Thread Tools
Show Printable Version Email this Page
Display Modes
Switch to Linear Mode Hybrid Mode Switch to Threaded Mode

Sep 4, 2004, 14:18	#2
Sergeant SitePoint Addict Join Date: Feb 2004 Location: Netherlands Posts: 370	and so we were just sitting and waiting there, just for those nice little images... how exciting!

Sep 4, 2004, 15:39	#3
pikapp SitePoint Member Join Date: Jul 2003 Location: Nantucket Posts: 8	The images are uploaded its the path in the stylesheet that is wrong. Check this out: http://www.sitepoint.com/graphics/tab-orange-left2.gif If you save a copy of the page to your local machine and add "http://www.sitepoint.com/graphics/" before each of the background URL calls you can see the desired effect.

Sep 4, 2004, 16:20	#4
M36Teen SitePoint Enthusiast Join Date: Aug 2004 Location: OK Posts: 99	Wow, I can't believe there are so many comments on this one thing!! lol

Sep 4, 2004, 17:14	#5
Hierophant Your Lord and Master, Foamy Join Date: Aug 1999 Location: Lancaster, Ca. USA Posts: 12,732	Here is another examples of doing this that has been around for awhile. http://www.alistapart.com/articles/slidingdoors/ http://www.alistapart.com/articles/slidingdoors2/

Sep 13, 2004, 17:53	#11
someonewhois SitePoint Wizard Join Date: Jan 2002 Location: Canada Posts: 7,385	Hmm, I guess Sitepoint.com doesn't show the rest of the comments, only saw 3 and then read the other ones.. I'll get back to you Edit: Well then, I must be incompetent at CSS, as I can't even get the right tab to work on the LI

Sep 14, 2004, 08:12	#13
vek SitePoint Enthusiast Join Date: Jun 2004 Location: Florence, KY Posts: 77	Is there anyway to get rid of the 1px line between the tabs and the border in mozilla?

Oct 14, 2004, 19:13	#17
scattermachine SitePoint Enthusiast Join Date: Sep 2004 Location: USA Posts: 52	OK. So I'm a newbie at CSS and at Sitepoint (you can tell by the number of posts I've made). I think both are great for what they offer to those who are willing to invest a little time. I'd like to say that I found the article interesting and informative. Even if there are other examples out there (ALA, Google, etc...) it's still nice to see that someone has taken the time to share their knowledge with something that people have an interest in. I was surprised to see that some replys contained what can only be described as attacks on the author. Especially when there was no constructive criticism. Paul, as usual, has offered some interesting enhancements to the original idea. But where are the enhancements from the people who only took the time to post negative reactions - those who wanted to show that they are smarter or better than the author? Please remember that there are people of all skill levels who can learn from examples like this. Sometimes just reading valid CSS is a learning experience. Since when did a piece of software have to be everything for everybody? In a few years, it won't matter anyway. There will probably be something better that comes along... There are many ways to accomplish things on the Web. And the problem with standards is that there are sooo many of them. One for each browser it seems! ;-) Anyway, get over it. The article is an eye opener for people who haven't seen ALA (and who didn't think it was even possible), including myself. Even after, it's still nice to see the technique to help it sink in. I look foward to seeing more articles like this - to help me get to the point where I can publicly diss people who sincerely want to help others. Maybe I can go down to the local kindergarden class and prove that I'm better than the teacher...

Feb 3, 2005, 13:56	#20
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 26,615	Hi, Was that link supposed to be a link to the problem page as i couldn't see the styles applied there? Without seeing the html as well its hard to say whats wrong. Did you add the relevant id in the body tag of each appropriate page? Paul

Feb 3, 2005, 15:28	#21
stfarm SitePoint Member Join Date: Feb 2005 Location: Roswell, GA Posts: 18	Sorry Paul, I pasted the wrong link, but I figured it out. Works great. Thank you for this great post. Steve

Feb 4, 2005, 08:59	#22
stfarm SitePoint Member Join Date: Feb 2005 Location: Roswell, GA Posts: 18	I hope somebody could please help me. I would like to display some text inside the blue bar underneath the menu, which I use a table row, when you hover over the links (tabs). I have been trying to implement some examples I found, but it never worked. Any ideas? Thank You. Steve

Feb 4, 2005, 18:36	#24
stfarm SitePoint Member Join Date: Feb 2005 Location: Roswell, GA Posts: 18	Thank you Paul, that was very helpful. All I like to do is have some text show up when the user hovers over the links. No need for dropdown links yet. Thank you for those articles, they have helped me understand CSS like never before.

Feb 4, 2005, 18:57	#25
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 26,615	HI, All I like to do is have some text show up when the user hovers over the links. Well you can do something like this which should show the technique. http://www.pmob.co.uk/temp/popupmessagecss3.htm Paul