homepage Welcome to WebmasterWorld Guest from 54.197.94.241
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




msg:1191622
 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




msg:1191623
 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




msg:1191624
 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




msg:1191625
 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




msg:1191626
 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




msg:1191627
 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




msg:1191628
 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




msg:1191629
 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




msg:1191630
 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




msg:1191631
 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




msg:1191632
 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




msg:1191633
 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