[CSS] a:active werkt niet in div

[Verwijderd]

Ik wil nu in html d.m.v. een css buttons maken. Dit heb ik opgelost door een tabel te maken met een A met een class ( die verwijst naar de stylesheet ). Ik wil de buttons opbouwen met 3 images.

1. Gewone button
2. On hover button
3. Active (onclick) button

De tabel heeft 1 rij en meerdere kolommen waar de buttons in komen. In iedere cell bevind zich de volgende code:

code:

<td style="height: 19px; width: 1px; padding-left: 10px; padding-top: 3px;">          
             <a class="MKB" href="/">
                   <div style="width: 50px; height: 25px" background="images/MKB.jpg">
                   </div>
             </a>
</td>

StyleSheet

code:

a.MKB
{
    background-image: url(/images/MKB.jpg);

    padding:0px 0px 14px 0px;
}

a.MKB:hover
{
    background-image: url(/images/hover_MKB.jpg);

    padding:0px 0px 14px 0px;
    }
    
a.MKB:active
{
    background-image: url(/images/pressed_MKB.jpg);
    padding:0px 0px 14px 0px;
    }

Nu werkt alles behalve de active. Weet iemand waar dit door komt? Ik hoop voldoende info gepost te hebben.

Ik wil dus dat er op het moment dat erop de knop geklikt wordt, deze een bepaalde image laat zien ( dus dat je kunt zien dat de knop is ingedrukt)

[ Voor 25% gewijzigd door Verwijderd op 06-07-2006 14:53 ]

[moozzuzz]

Verwijderd schreef op donderdag 06 juli 2006 @ 14:50:

HTML:

<a class="MKB" href="/">
     <div style="width: 50px; height: 25px" background="images/MKB.jpg">
     </div>
</a>

Waarom zet je een div in je anchor? Volgens mij is dit overbodig.

HTML:

<a class="MKB" href="./"></a>

Cascading Stylesheet:

a.MKB
{
    background-image: url(./images/buttons.MKB.jpg);
    width: 50px; height: 25px;
    padding:0px 0px 14px 0px;
}

a.MKB:hover
{
    background-image: url(./images/buttons.MKB.hover.jpg);
}
    
a.MKB:active
{
    background-image: url(./images/buttons.MKB.pressed.jpg);
}

offtopic:
ik start mijn relatieve url's altijd met ./url

[ Voor 82% gewijzigd door moozzuzz op 06-07-2006 15:05 ]

[Verwijderd]

De "a" is alleen zodat ik gebruik van maken van de css. Ik gebruik div ipv van een img. Dit omdat als ik image met een bepaalde grote gebruik deze in conflict komt met de css . De button wordt dan onderaan geplaatst met daarboven de image die vanuit de stylesheet gehaald wordt. (div background wordt dus naast de img geplaatst ipv eroverheen) met div heb ik dat niet want dan gebruik ik een background.

Ik zal hier wel vaag bezig zijn ofzo ?

[ Voor 21% gewijzigd door Verwijderd op 06-07-2006 15:16 ]

[Verwijderd]

nogal, gebruik elementen gewoon waarvoor ze bedoeld zijn...

[Verwijderd]

Hmmm ik ga t denk ik maar even anders doen, dit zal ook niet multi browser compatible zijn dan .

[moozzuzz]

Verwijderd schreef op donderdag 06 juli 2006 @ 15:12:
...vaag...

Ik snap er idd niet veel van... Elk element heeft toch achtergrond?

[ Voor 13% gewijzigd door moozzuzz op 06-07-2006 15:23 ]

[Verwijderd]

Klopt, ik zat een beetje te klooien omdat ik de juiste grootte etc niet kreeg . Maar heb t al opgelost met het volgende, dit is meer logisch en werkt ook meteen in alle browsers :

Hehe toch maar a en div opgemdraaid

code:

<div class="MKB" >
      <a class="MKB" style="width: 50px; height: 25px" href="#"></a>
</div>

CSS

code:

a.MKB
{
    background-image: url(/images/MKB.jpg);
        display:block;
}

a.MKB:hover
{
    background-image: url(/images/hover_MKB.jpg);
}
    
a.MKB:active
{
    background-image: url(/images/pressed_MKB.jpg);
}

Ik was eigenlijk gewoon aan het zoeken naar display:block;

[ Voor 19% gewijzigd door Verwijderd op 06-07-2006 15:30 ]

[_Thanatos_]

Maar waarom dan nog die div? En waarom de hoogte en breedte niet netjes in je stylesheet definiëren?

[DexterDee]

In mijn ervaring kunnen buttons het makkelijkst gemaakt worden door een combinatie van de <span> en <a> tag in combinatie met CSS:

Cascading Stylesheet:

.button {
   display : inline-block;
   background: url(./images/button_back.gif) repeat-x;
}

.button a { display: block; height: 21px; color: #ffffff; padding-left: 15px; padding-right: 15px;}
.button a:link { background: url(./images/button_link.gif) repeat-x; }
.button a:hover { background: url(./images/button_hover.gif) repeat-x; }
.button a:visited { background: url(./images/button_visited.gif) repeat-x; }
.button a:active { background: url(./images/button_active.gif) repeat-x; }

En dan een button maken op de volgende manier:

HTML:

<span class="button"><a href="index.php">Mijn Button</a></span>

Deze code is geheel uit losse pols ingetikt en niet geverifieerd, dus pin me er niet op vast. Ik weet wel dat ik het altijd zo doe op mijn sites en dat deze uitstekend cross-browser gerendered worden (IE, Firefox, Opera, Safari zijn mijn doelbrowsers)

/EDIT: net te laat zie ik, je hebt het zojuist zelf al gevonden Ik zou toch voor een span gaan ipv een div

[ Voor 10% gewijzigd door DexterDee op 06-07-2006 15:42 ]

[Verwijderd]

@ Thanatos_ : Je hebt gelijk

@ DexterDee : Tnx ik zal er even naar kijken!

[Verwijderd]

@DexterDee: Waarvoor dient die span dan?

[DexterDee]

Verwijderd schreef op donderdag 06 juli 2006 @ 18:38:
@DexterDee: Waarvoor dient die span dan?

Sommige CSS properties werken alleen op de inhoud van een container, niet de container zelf. Daarom kun je sommige effecten niet rechtstreeks op de <a> tag bereiken. Omdat de <a> tag zich binnen de <span> bevindt, kan bijvoorbeeld een vertical-align: middle toegepast worden. Wat ook een voordeel is, is de extra mogelijkheid om twee plaatjes op de achtergrond te laten zien. Bij afgeronde buttons bijvoorbeeld zit het plaatje (| links op de <span> en het plaatje |__________) op de <a>. Samen vormen ze dus een button: ( mijn button ). Als het tweede plaatje rechts uitgelijnd wordt en lang genoeg is kun je dus een grafische button maken met afgeronde hoeken die mee rekt met de tekst die er op staat, met 100% cross-browser CSS zonder noodzaak voor bijv. javascript.