|
defining hovering for different situations
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. |
Re: defining hovering for different situations
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 |
Re: defining hovering for different situations
Jonathan N. Little schrieb: > 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 thanks a lot. it works! max. |
Re: defining hovering for different situations
In article <e1ee5$45533324$40cba7ca$5095@NAXS.COM>,
"Jonathan N. Little" <lws4art@centralva.net> wrote: > 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... -- dorayme |
Re: defining hovering for different situations
dorayme wrote:
> In article <e1ee5$45533324$40cba7ca$5095@NAXS.COM>, > "Jonathan N. Little" <lws4art@centralva.net> wrote: > >> 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... > 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 */ -- Take care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com |
Re: defining hovering for different situations
Jonathan N. Little wrote:
> dorayme wrote: >> In article <e1ee5$45533324$40cba7ca$5095@NAXS.COM>, >> "Jonathan N. Little" <lws4art@centralva.net> wrote: >> >>> 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... >> > 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 */ -- Els http://locusmeus.com/ accessible web design: http://locusoptimus.com/ |
Re: defining hovering for different situations
In article <12laqytbxlbtu.zambuqs25sic$.dlg@40tude.net>,
Els <els.aNOSPAM@tiscali.nl> wrote: > Jonathan N. Little wrote: > > > dorayme wrote: > >> In article <e1ee5$45533324$40cba7ca$5095@NAXS.COM>, > >> "Jonathan N. Little" <lws4art@centralva.net> wrote: > >> > >>> 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... > >> > > 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 */ 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 */ A:promising { ... } /* when it is really useful */ A:useless { ... } /* when there only because it can be */ -- dorayme |
Re: defining hovering for different situations
dorayme wrote:
> In article <12laqytbxlbtu.zambuqs25sic$.dlg@40tude.net>, > Els <els.aNOSPAM@tiscali.nl> wrote: > >> Jonathan N. Little wrote: >> >>> dorayme wrote: >>>> In article <e1ee5$45533324$40cba7ca$5095@NAXS.COM>, >>>> "Jonathan N. Little" <lws4art@centralva.net> wrote: >>>> >>>>> 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... >>>> >>> 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 */ > > 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 */ > A:promising { ... } /* 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 */ A:promising { ... } /* when it is really useful */ A:useless { ... } /* when there only because it can be */ A:forbidden { ... } /* when you really shouldn't click it */ -- Els http://locusmeus.com/ accessible web design: http://locusoptimus.com/ Now playing: Daryl Hall and John Oates - Rich Girl |
Re: defining hovering for different situations
In article <1pk63a8s34wui.1frt91ysbwmeb.dlg@40tude.net>,
Els <els.aNOSPAM@tiscali.nl> wrote: > 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 */ > A:promising { ... } /* 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! -- dorayme |
Re: defining hovering for different situations
Els wrote:
> 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 */ > A:promising { ... } /* 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 */ A:promising { ... } /* when it is really useful */ A:useless { ... } /* when there only because it can be */ A:sucker { ... } /* for folks to do but shouldn't! */ -- Take care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com |
| All times are GMT. The time now is 09:45 PM. |
Powered by vBulletin®. Copyright ©2000 - 2013, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.