3 replies [Last post]
phases
Offline
newbie
Last seen: 16 years 47 weeks ago
Joined: 2004-06-18
Posts: 3
Points: 0

here is the html

here is the css

--what should happen--
7 greyscale moons, on rollover they change color
link text is black, on rollover stays balck
when you visit a link, that text is now a color
when you leave that page, the text is now grey (#666666)

here is a picture of what i am trying to do

--what is happening--
rollovers work untill you visit a page, then the rollover no longer works for that link (i.e the moon stays grey on a visited page)

when you visit a page (page is now active) the link text is still black, it should be a color

-- any help would be wonderful!
thanks in advance

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

nav bar rollover help please

Hi phases,
It's to do with the order of the pseudo classes: Link, visited, hover, active is the correct order.

One suggestion I have apart from the above is to streamline your css by removing the repeated properties. Start by putting all the repeated styles for the links in a default rule like

#nav li a {
	text-decoration: none;
	display: block;
	float: left;
	height: 100px;
	width: 100px;
	text-align: right;
	background-repeat: no-repeat;
	background-position: right bottom;
	color: #000000;
	visibility: visible; /* this is the default anyway so can be left out */	
}
Then each of the links within #nav li will have those properties so you don't need to repeat them. All you have to do is put any differences in another style rule.
.home a:link{background-image: url(moon2.png);}
.home a:visited{background-image: url(moon2.png);} /*this is the same as for link so can be left out */
.home a:hover{background-image: url(moon1_over.png);}
.home a:active{background-image: url(moon1.png);}

You will reduce the size of the CSS file and make it simpler to maintain.

Hope that helps

phases
Offline
newbie
Last seen: 16 years 47 weeks ago
Joined: 2004-06-18
Posts: 3
Points: 0

nav bar rollover help please

that make sense..

what about the color of the text? it is not changing yet (i.e it is staying black)

and thanks for the help Smile

phases
Offline
newbie
Last seen: 16 years 47 weeks ago
Joined: 2004-06-18
Posts: 3
Points: 0

nav bar rollover help please

never mind.. i figured it out!

you said to put all of the elements that do not change in a common rule.

well the color is not consistent and was in the common rule. I removed it from the #nav li a rule and placed it in the .home a:link hove active visited rules.

thanks so much!