defining hovering for different situations

[max]

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.

 

[Jonathan N. Little]

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%; ...

 

[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%; ...

thanks a lot. it works! max.

 

[dorayme]

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 { ... }

I assume repeating A:link is typo...

 

[Jonathan N. Little]

I assume repeating A:link is typo...

Yep and a cut and paste error. Should be

A:link { ... } /* style your links & not anchors */
A:visited { ... } /* ones visited */
A:hover { ... } /* the hover */
A:active { ... } /* when pressed */

 

[Els]

Yep and a cut and paste error. Should be

A:link { ... } /* style your links & not anchors */
A:visited { ... } /* ones visited */

A:focus { ... } /* when tabbed to */

A:hover { ... } /* the hover */
A:active { ... } /* when pressed */

/* or when tabbed to in IE */

 

[dorayme]

A:focus { ... } /* when tabbed to */

/* or when tabbed to in IE */

Is this a cut and paste error? Should it not be:

A:link { ... } /* style your links & not anchors */
A:visited { ... } /* ones visited */
A:focus { ... } /* when tabbed to */
A:hover { ... } /* the hover */
A:active { ... } /* when pressed; or tabbed to in IE */
Aromising { ... } /* when it is really useful */
A:useless { ... } /* when there only because it can be */

 

[Els]

Is this a cut and paste error? Should it not be:

A:link { ... } /* style your links & not anchors */
A:visited { ... } /* ones visited */
A:focus { ... } /* when tabbed to */
A:hover { ... } /* the hover */
A:active { ... } /* when pressed; or tabbed to in IE */
Aromising { ... } /* when it is really useful */
A:useless { ... } /* when there only because it can be */

Nah, I think that's a copy paste error. I reckon it should be:

A:link { ... } /* style your links & not anchors */
A:visited { ... } /* ones visited */
A:focus { ... } /* when tabbed to */
A:hover { ... } /* the hover */
A:active { ... } /* when pressed; or tabbed to in IE */
Aromising { ... } /* when it is really useful */
A:useless { ... } /* when there only because it can be */
A:forbidden { ... } /* when you really shouldn't click it */

 

[dorayme]

Nah, I think that's a copy paste error. I reckon it should be:

A:link { ... } /* style your links & not anchors */
A:visited { ... } /* ones visited */
A:focus { ... } /* when tabbed to */
A:hover { ... } /* the hover */
A:active { ... } /* when pressed; or tabbed to in IE */
Aromising { ... } /* when it is really useful */
A:useless { ... } /* when there only because it can be */
A:forbidden { ... } /* when you really shouldn't click it */

Houston... we have lift off!

 

[Jonathan N. Little]

A:link { ... } /* style your links & not anchors */
A:visited { ... } /* ones visited */
A:focus { ... } /* when tabbed to */
A:hover { ... } /* the hover */
A:active { ... } /* when pressed; or tabbed to in IE */
Aromising { ... } /* when it is really useful */
A:useless { ... } /* when there only because it can be */
A:forbidden { ... } /* when you really shouldn't click it */

A:link { ... } /* style your links & not anchors */
A:visited { ... } /* ones visited */
A:focus { ... } /* when tabbed to */
A:hover { ... } /* the hover */
A:active { ... } /* when pressed; or tabbed to in IE */
Aromising { ... } /* when it is really useful */
A:useless { ... } /* when there only because it can be */
A:sucker { ... } /* for folks to do but shouldn't! */

 

[Jonathan N. Little]

Is this an IE thing? I can't get it to work in Opera.

Nope, that would be

A:screwed { ... }

 

[freemont]

A:sucker { ... } /* for folks to do but shouldn't! */

Is this an IE thing? I can't get it to work in Opera.