2 replies [Last post]
Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Not so much a site check as a request for help (never quite sure where to post these sort of things): if you have a look at a site I'm doing for my local community association and try the main nav links, you'll see my problem.

I'm using CSS rollovers for the links and came across this technique whereby you can set the active link to the rollover state by assigning an ID to the body tag and setting the ID of the link relative to the body ID. It works fine for the first link in the list, but for all the others, it sets the page left and the rollovers for the others link all show the rollover for the active one.

Here's the code for the nav:

/*------------- Navigation -----------------*/
#mainnav {
height: 24px;
width: 770px;
margin: 0;
padding: 0;
background: #C0CEB9;
border-bottom: 2px #005000 solid;
}

#mainnav ul#nav {
height: 24px;
width: 770px;
margin: 0 0 0 20px;
padding: 0;
position: relative;
background: transparent url(images/nav.gif) top left no-repeat;
}

#mainnav ul#nav li {
margin: 0;
padding: 0;
position: absolute;
list-style: none;
top: 0;
}

ul#nav li, ul#nav a { height: 22px; display: block; }

#mainnav ul#nav li a { text-indent: -9999px; text-decoration: none; }

#news {left: 0; width: 75px;}
#about {left: 145px; width: 90px;}
#projects {left: 300px; width: 110px;}
#links {left: 485px; width: 65px;}
#contact {left: 635px; width: 96px;}

#news a:hover {background: transparent url(images/nav.gif) 0 -24px no-repeat; }
#about a:hover {background: transparent url(images/nav.gif) -145px -24px no-repeat;}
#projects a:hover {background: transparent url(images/nav.gif) -300px -24px no-repeat;}
#links a:hover {background: transparent url(images/nav.gif) -485px -24px no-repeat;}
#contact a:hover {background: transparent url(images/nav.gif) -635px -24px no-repeat;}

/* Active link */
body#home #news {background: transparent url(images/nav.gif) 0 -24px no-repeat; }
body#about #about {background: transparent url(images/nav.gif) -145px -24px no-repeat;}
body#projects #projects { background: transparent url(images/nav.gif) -300px -24px no-repeat;}
body#links #links {background: transparent url(images/nav.gif) -485px -24px no-repeat;}
body#contact #contact {background: transparent url(images/nav.gif) -635px -24px no-repeat;}

Any ideas what's up?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

briski
briski's picture
Offline
Elder
London
Last seen: 9 years 33 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Active link problem

You can't use the same ID twice - it must be unique.

Change your main page ID's to somethig else or use classes if you want to have the same name.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Active link problem

It's so obvious when you think about it! Thanks very much Briski. Laughing out loud

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference