homepage Welcome to WebmasterWorld Guest from 54.167.174.90
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
tabbed menu
want tab color to reflect which page we're on
HelenDev

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4162 posted 3:04 pm on Jul 21, 2004 (gmt 0)

I've just created an accessible tabbed menu with css using a tutorial. The tabs have curved edges and change color when hovered over. I want the hover color to stay if the tab is selected (this loads a new page). What is the best way to do this? I can post the code if necessary.

Cheers,
Helen

 

HiHo

10+ Year Member



 
Msg#: 4162 posted 3:06 pm on Jul 21, 2004 (gmt 0)

hi helen.... perhaps posting the code may help us! if you have followed the "scrolling doors in css" tutorial, you need to move the id selector

BlobFisk

WebmasterWorld Senior Member blobfisk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4162 posted 3:10 pm on Jul 21, 2004 (gmt 0)

Hi HelenDev,

An easy way of doing this is to add an ID to you body tag.

Then in your CSS you can create a new rule that makes the tab for the current page a different style.

For example:

a.tab1 { color: #fff }

#tab1Page a.tab { color: #000; }

HTH

HelenDev

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4162 posted 3:18 pm on Jul 21, 2004 (gmt 0)

Cheers guys. Here is my code:

<html>
<a class="nav" href="index.php"><span>home</span></a>
<a class="nav" href="posters.php"><span>posters</span></a>
<a class="nav" href="pressbooks.php"><span>pressbooks &amp; synopses</span></a>
<a class="nav" href="#"><span>stills &amp; lobby cards</span></a>
<a class="nav" href="#"><span>books</span></a>
<a class="nav" href="comics.php"><span>comics</span></a>
<a class="nav" href="#"><span>magazines</span></a>
<a class="nav" href="#"><span>other collectables</span></a>
</html>

...and here is the css...

A.nav:link{
color: #000000;
background: #cccccc url("/images/left-menu-tab.gif") left top no-repeat;
text-decoration: none;
font-size:10pt;
padding-left: 10px;
font-weight:bold;
}

A.nav:visited{
color: #000000;
background: #cccccc url("/images/left-menu-tab.gif") left top no-repeat;
text-decoration: none;
font-size:10pt;
padding-left: 10px;
font-weight:bold;
}

A.nav:hover{
color: #000000;
background: #00CCFF url("/images/left-tab-hover.gif") left top no-repeat;
text-decoration: none;
font-size:10pt;
padding-left: 10px;
font-weight:bold;
}

A.nav:active{
color: #000000;
background: #00CCFF url("/images/left-tab-hover.gif") left top no-repeat;
text-decoration: none;
font-size:10pt;
padding-left: 10px;
font-weight:bold;
}

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

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

I like the sound of the body id thing blobfisk. How exactly would I make it work with the code above?

createErrorMsg

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4162 posted 3:33 pm on Jul 21, 2004 (gmt 0)

I believe BlobFIsk's solution involves giving both the body taga unique id and each of the 'tabs' a unique id. Then in the css you list a rule that singles out each body id and it's matching li id...

body#PageID1 li#TabId1 a, body#PageID2 li#TabId2 a, etc {
settings: for current page;
}

The page will apply those rules only when it matches all the criteria, i.e., when there is a body tag with an id="PageID1" and a list item with an id="TabId1" it applies the rules to the link tag.

If there's a way to do this without having to explicitly set that whole list of combinations, I'd love to see it, but even having to list it in the CSS is WAY better than having to update an id="current" on every page...

HelenDev

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4162 posted 3:48 pm on Jul 21, 2004 (gmt 0)

each of the 'tabs' a unique id

I'm not sure I understand this part. My tabs are not <li>s - should they be?

BlobFisk

WebmasterWorld Senior Member blobfisk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4162 posted 5:02 pm on Jul 21, 2004 (gmt 0)

createErrorMsg is correct, you need to assign a unique ID to each nav element. Let's say you wrap them in a span:

<html>
<span id="home"><a class="nav" href="index.php">home</a></span>
...
<span id="other"><a class="nav" href="#">other collectables</a></span>
</html>

Then in your CSS:

#homeID #home a.nav:link{
... Active Page Rules...
}

HTH

HelenDev

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4162 posted 11:49 am on Jul 22, 2004 (gmt 0)

Hurrah! it works. I did as blobfisk suggested above and then added this to my css for each page:

#homephp #homelink a.nav:visited{
color: #000000;
background: #00CCFF url("http://mydomain/images/left-tab-hover.gif") left top no-repeat;
text-decoration: none;
font-size:10pt;
padding-left: 10px;
font-weight:bold;
}

#homephp #homelink a span{
background: url("http://mydomain/images/right-tab-hover.gif") right top no-repeat;
padding-right: 10px;
}

Now I figured I only need to do this for the visited link, as it will be visited because they have just clicked on it. If anyone can foresee a problem with this please let me know.

This has delved me into more advanced css than I am used to but I think I get the idea. Can anyone point me to a good tutorial or reference for this kind of more complicated css?

createErrorMsg

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4162 posted 11:59 am on Jul 22, 2004 (gmt 0)

The :visited pseudo class applies to links that have already been visited. This may not work since the css will look for links that have been visited to apply the rules to. Furthermore, it MAY apply the current tab to any page that has been visited, resulting in multiple current tabs. I use just a plain vanilla a as in...

body#PageOne li#LinkOne a {
blah blah
}

...this way it's not contingent upon any pseudo classes.

Check out Listamatic and several articles on A List Apart (Taming Lists and Suckerfish Dropdowns come to mind) for more advanced list/menu manipulation.

HelenDev

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4162 posted 12:32 pm on Jul 22, 2004 (gmt 0)

I use just a plain vanilla a

Ah, I see. I'll do that :)

Cheers for all your help. I can see now that css can do all kinds of intersting things which I haven't yet explored.

BlobFisk

WebmasterWorld Senior Member blobfisk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4162 posted 2:50 pm on Jul 22, 2004 (gmt 0)


I can see now that css can do all kinds of intersting things which I haven't yet explored.

You have no idea! ;)

drbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4162 posted 2:55 pm on Jul 22, 2004 (gmt 0)

No need to wrap, an element can have both an id and a class.

<a id="home" class="nav" href="/home">Home</a>

And you can push the class="nav" up one level too, and cut out 12 characters per tab:

<div id="nav">
<a id="home" href="/home">Home</a>
...
</div>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved