defining hovering for different situations

Discussion in 'HTML' started by max, Nov 9, 2006.

  1. max

    max Guest

    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.
    max, Nov 9, 2006
    #1
    1. Advertising

  2. 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
    Jonathan N. Little, Nov 9, 2006
    #2
    1. Advertising

  3. max

    max Guest

    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.
    max, Nov 9, 2006
    #3
  4. max

    dorayme Guest

    In article <e1ee5$45533324$40cba7ca$>,
    "Jonathan N. Little" <> 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
    dorayme, Nov 9, 2006
    #4
  5. dorayme wrote:
    > In article <e1ee5$45533324$40cba7ca$>,
    > "Jonathan N. Little" <> 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
    Jonathan N. Little, Nov 10, 2006
    #5
  6. max

    Els Guest

    Jonathan N. Little wrote:

    > dorayme wrote:
    >> In article <e1ee5$45533324$40cba7ca$>,
    >> "Jonathan N. Little" <> 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/
    Els, Nov 10, 2006
    #6
  7. max

    dorayme Guest

    In article <12laqytbxlbtu.zambuqs25sic$>,
    Els <> wrote:

    > Jonathan N. Little wrote:
    >
    > > dorayme wrote:
    > >> In article <e1ee5$45533324$40cba7ca$>,
    > >> "Jonathan N. Little" <> 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
    dorayme, Nov 10, 2006
    #7
  8. max

    Els Guest

    dorayme wrote:

    > In article <12laqytbxlbtu.zambuqs25sic$>,
    > Els <> wrote:
    >
    >> Jonathan N. Little wrote:
    >>
    >>> dorayme wrote:
    >>>> In article <e1ee5$45533324$40cba7ca$>,
    >>>> "Jonathan N. Little" <> 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
    Els, Nov 10, 2006
    #8
  9. max

    dorayme Guest

    In article <>,
    Els <> 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
    dorayme, Nov 10, 2006
    #9
  10. 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
    Jonathan N. Little, Nov 10, 2006
    #10
  11. freemont wrote:
    > On Fri, 10 Nov 2006 16:32:24 -0500, Jonathan N. Little writ:
    >
    >> A:sucker { ... } /* for folks to do but shouldn't! */

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

    Nope, that would be

    A:screwed { ... }

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Nov 11, 2006
    #11
  12. max

    freemont Guest

    On Fri, 10 Nov 2006 16:32:24 -0500, Jonathan N. Little writ:

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


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

    --
    "Because all you of Earth are idiots!"
    ¯`·..·¯`·-> freemont© <-·¯`·..·¯
    freemont, Nov 11, 2006
    #12
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?RGFuaWVsIFdhbHplbmJhY2g=?=

    How to handle save situations in asp.net?

    =?Utf-8?B?RGFuaWVsIFdhbHplbmJhY2g=?=, Jul 21, 2004, in forum: ASP .Net
    Replies:
    12
    Views:
    940
    Steven Cheng[MSFT]
    Jul 27, 2004
  2. DigHazuse

    Validation on all PostBack situations

    DigHazuse, Nov 29, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    352
    DigHazuse
    Nov 29, 2005
  3. George2

    bad_alloc in these situations?

    George2, Feb 28, 2008, in forum: C Programming
    Replies:
    0
    Views:
    343
    George2
    Feb 28, 2008
  4. rana
    Replies:
    1
    Views:
    776
  5. apalopohapa
    Replies:
    0
    Views:
    538
    apalopohapa
    Oct 20, 2009
Loading...

Share This Page