HTML Help

thesun · Joined: 07 Sep 2008 Posts: 16

I've discovered that my styles on my general links (as in the ul for the main navigation of my page) are also applying to other places as well.

My site is www dot OnsenJapan dot net, and if you click on Shirahama (in the sidebar) you'll see the problem: the linked image (of the onsen bath and ocean) has a dark line beneath it when you hover the mouse. Other linked images on the History page have this same problem.

I've figured out that by changing the:

a:hover {background: #333300;}

to

a:hover {background: transparent;}

this problem goes away. However this makes the navigation bar at the top also lose its nice dark background.

I need to set my linked images separate from my general links and I've played around trying to do that and failed.

Anyone know the syntax for doing this? It can't possibly be that difficult...or...is it?

thesun · Joined: 07 Sep 2008 Posts: 16

Fixed it!!! Finally!!!

I'd love suggestions as to whether this is the "right" way to do this, but I made an ID for the header nav links (pagelinks) and then styled those separately from the main links. So my css page reads:

a:link {
color : white;
text-decoration : none;
}
a:visited {
color : white;
text-decoration : none;
}
a:active {
background : #333300;
text-decoration : none;
}
a:hover {
background : transparent;
color : white;
text-decoration : none;
}

#pagelinks a:link {
color : white;
text-decoration : none;
}
#pagelinks a:visited {
color : white;
text-decoration : none;
}
#pagelinks a:active {
background : #333300;
text-decoration : none;
}
#pagelinks a:hover {
background : #333300;
color : white;
text-decoration : none;
}

It seems to be solved now! Whew!

sticks464 · Joined: 31 Dec 2006 Posts: 1283

Very good! Each menu of a page should have it's own styling to avoid conflicts.