[css]a:active

[DNA_Saint]

ik ben een beginner met css. Tot nu gaat alles goed, maar krijg toch een probleempje.
Ik heb een rollover menu.
Daarvan wil ik dat als je op de geselecteerde pagina komt. De a:hover status active blijft.
Nu wil ik dit gewoon handmatig op elke pagina veranderd, omdat het toch maar een kleine site is.
Maar krijg het maar niet voor elkaar.

mijn css menu:

code:

#navigation {
        font-family: verdana, Helvetica, Arial, sans-serif;
        font-size: 14px;
        font-weight: normal;
        letter-spacing:6px;
        width: 304px;
        border-right: 1px solid #fff;
        border-bottom: 1px solid #fff;
        padding: 0;
        background-color: #135894;
        color: #fff;
        height:100%;
        text-align:left;
        }

#navigation ul li a {
        font-weight: normal;
        display: block;
        width: 254px;
        height:34px;
        padding: 0px 0px 0px 30px;
        border-left: 20px solid #2175BD;
        background-color: #135894;
        color: #fff;
        text-decoration: none;
        line-height: 34px;
        }
        
#navigation ul li a:hover {     
        font-weight: normal;
        border-left: 20px solid #2175BD;
        width: 272px;
        padding: 0px 0px 0px 12px;
        background-color: #2175BD;
        color: #7BBDFA;
        }

#navigation ul {
        font-weight: normal;
        list-style: none;
        margin: 0;
        padding: 0;
        }

#navigation ul li {
        font-weight: normal;
        margin: 0;
        border-top: 1px solid #fff;
        }
        
html>body #navigation ul li a {
 width: auto;
}       

a:hover, .selected a {
        font-weight: normal;
        border-left: 20px solid #2175BD;
        width: 272px;
        padding: 0px 0px 0px 12px;
        background-color: #2175BD;
        color: #7BBDFA;
        }

html:

code:

<div id="navContainer">
              <div id="navigation">
                <ul>
                  <li class="selected"><a href="index.html">Home</a></li>
                  <li><a href="a.html">a</a></li>
                  <li><a href="b.html">b</a></li>
                  <li><a href="c.html">c</a></li>
                  <li><a href="d.html">d</a></li>
                </ul>
              </div>
            </div>

blijkbaar kan je bij een list niet een class laten overrulen?

[RM-rf]

de selector #navigation ul li a heeft gewoon een hogere cascading waarde dan enkel .selected a, de eerste overrulled dus de laatste...

Bij CSS geld dat de meeste selector-definities de hoogste waarde (en hierbij overrulled een ID-seklector weer een class-selector, en die laatste weer een tag-selector)

je code functioneert als je kiest voor:

Cascading Stylesheet:

a:hover, #navigation ul li.selected a {
        font-weight: normal;
        border-left: 20px solid #2175BD;
        width: 272px;
        padding: 0px 0px 0px 12px;
        background-color: #2175BD;
        color: #7BBDFA;
}

[crisp]

persoonlijk zou ik de a:hover rule ook specifiek houden:

Cascading Stylesheet:

#navigation ul li a:hover,
#navigation ul li.selected a {
    /* properties */
}

En als je div#navigation verder niets anders dan de UL bevat zou ik de div schrappen en het ID direct op de UL zetten

[ Voor 28% gewijzigd door crisp op 05-12-2006 09:49 ]