[CSS]Hover werkt maar 1 keer

Door Fireplace op 11-07-2005 23:31

905 views

Als ik met de muis over een link ga wordt hij netjes rood zoals ik wil. Maar zodra de pagina bezocht is werkt de hover niet meer. Hoe kan dit?

En vraag twee is, kan ik dit ook nog korter opschrijven:


a:link
{
color: blue;
font-size: smaller
}
a:hover
{
color: red;
font-size: smaller
}
a:visited
{
color: blue;
font-size: smaller
}
a:active
{
color:green;
font-size: smaller
}

W Winston Smith

11-07-2005 23:51

Dat je hover maar één keer werkt ligt aan de volgorde. Probeer eens om hover als laatste neer te zetten.

Ik geloof dat ik laatst gelezen heb dat je het kleiner kan maken door
a:link, visited {
color: blue;
font-size: smaller
}
te gebruiken, maar dat scheelt maar een paar bytes.

F Fireplace

12-07-2005 00:00

Ja, het werkt nu idd. Ik wist niet dat die volgorde zo belangrijk was, beetje irritant, of zou het een nuttige functie hebben.

Die kortere schrijfwijze helpt niet, maar das op zich ook niet zo erg. Het enige waarom ik het korter wou schrijven is om meer overzicht in mijn CSS te krijgen.

Bedankt iig!

W Winston Smith

12-07-2005 00:16

Fireplace schreef op 12.07.2005 00:00
Ja, het werkt nu idd. Ik wist niet dat die volgorde zo belangrijk was, beetje irritant, of zou het een nuttige functie hebben.

Echt een nuttige functie heeft het niet, maar het is wel vrij logisch dat die volgorde belangrijk is vind ik zelf. Alleen de exacte redenering erachter weet ik niet echt meer :P

Jelmer -

12-07-2005 08:56

Je kan eerst een algemeen geval defineren, en dan later een onderdeel ervan veranderen. Voorbeeld:

div{
border: 2px solid #CCC;
background: url('phphulp.gif');
}
div.speciaal{
border: 5px dotted red;
}

Alle divs krijgen een grijze rand en een phphulp logo erin. Behalve dan de divs met class="speciaal", die krijgen een rode rand en phphulp erin. Zo kan je van steeds algemener naar steets preciezer, en hoef je niet alles opnieuw te defineren.

F Fireplace

12-07-2005 18:01

En hoe zit het dan met uitlijnen, want ik wil een image centreren en de tekst links uitlijnen.
text-align: center werkt prima onder td, maar niet onder p of img, terwijl dat wel zou moeten werken.

dit werkt:


td.middle
{
width: 80%;
background-color: lightgrey;
text-align: center
}
p.text
{
font-family: Helvetica; 
font-size: smaller
}
img
{
border: 0px
}

En zoiets niet:


td.middle
{
width: 80%;
background-color: lightgrey
}
p.text
{
font-family: Helvetica; 
font-size: smaller;
text-align: right   <---doet niets
}
img
{
text-align: center; <---doet niets
border: 0px
}

Hoe krijg ik het mooi voor elkaar in mijn css dat de images gecentreerd worden uitgelijnd en de teksten links?

Jelmer -

12-07-2005 18:10

misschien:
img{
margin: auto;
}
soms werkt dat, maar alleen onder bepaalde omstandigheden, en die heb ik nog niet ontdekt.

En voor je tekst, probeer eens float: right; ipv text-align. Alleen voor zover ik weeet kom je tekst dan niet naast maar onder het plaajte (wel rechts).

F Fireplace

12-07-2005 18:55

Ik heb nu het volgende ontdekt, zodra ik met de selector class werk dan werkt de uitlijning niet meer.

Dus dit werkt:


p
{
text-align: center
}

Dit niet:


p.text
{
text-align: center
}

Blijkbaar is text een gereserveerd woord, want zodra ik hier tekst van maak dan werkt het.

als ik text-align: center in de td plaats dan wordt alles gecentreerd. Onder p geeft ik aan: text-align:right.
Dit overruled wat ik onder td zet waardoor ik dus mijn zin krijg. Alle plaatjes worden gecentreerd, alle tekst wordt nu links geplaatst. Niet een mooie oplossing helaas, maar het werkt nu wel geheel vanuit de stylesheet.

Reageren

Inloggen om te reageren