Posted by Jonathan N. Little on 11/09/06 13:57

max wrote:
> hello
> how can I define hovering characteristics differently for navigation
> and plain text?
> here is my example: http://www.bep-zuerich.ch/test_div_hover.htm
>
> in the navigation I managed to distinguish two instances by defining
> class="ext" and class="int". this works. in addition the phrase
> display: block; width: 100%; height: 100%; makes the background of the
> navigation div's change correctly. this same phrase, however, prevents
> the link in the plain text to behave as expected (the display: block;
> seems to cause this).
> how can I define the hover condition for the link in the plain text
> correctly?
> thanks, max.
>

Don't make you most general rule display block
a:hover{ color: white ; ...

Define what you want most general for the whole page...

A:link { ... }
A:hover { ... }
A:link { ... }
A:hover { ... }
A:active { ... }

Then redefine for special case with a more specific selector.

#nav { ... }
#nav UL { list-style: none; ... }
#nav LI { display: inline; ... }
#nav A:link { ... }
#nav A:hover { ... }
#nav A:link { ... }
#nav A:hover { ... }
#nav A:active { ... }


<div id="nav">
<ul>
<li><a href="somewhere1.html">Somewhere 1</a></li>
<li><a href="somewhere2.html">Somewhere 2</a></li>
<li><a href="somewhere3.html">Somewhere 3</a></li>
<li><a href="somewhere4.html">Somewhere 4</a></li>
</ul>
</div>


Also

body { font-size: #12pt; ...

Bad! Points are for printing not display!

better

body { font-size: 100%; ...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Back to original message]