Archief - Underline vraagje

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
X

X1RON

Legacy Member
Hallo!
Ik zou graag mijn links in mn navigation bar enkel onderlijnen bij een mouseover, maar de links in de rest van mijn webpagina zou ik willen dat de onderlijning juist weg gaat bij een mouseover.
Iemand een idee hoe ik dit het best aanpak?
Ik dacht dit te doen door 2 classes te gebruiken, maar hij reageert precies alleen maar als ik mijn a-tag aanpas in CSS, wat dan weer geldt voor zowel de navigation-bar als de rest van de pagina..

Thx in advance!
m

mpolo

Legacy Member
Voor de menu links een class="menu"
.menu:hover{
text-decoration:underline;
}

voor gewone links
a{
text-decoration:underline;
}
a:hover{
text-decoration:none;
}
X

Xavez

Legacy Member
Je moet eigenlijk geen klassen gebruiken, je kan dat perfect met descendant selectors doen. Ik ga er dan wel vanuit dat je je document semantisch hebt opgebouwd en je de secties van je website behoorlijk hebt ingedeeld...

Code: 
#navbar a {text-decoration: none}
#navbar a:hover {border-bottom: 1px solid #kleurtje}

#content a {text-decoration: none; border-bottom: 1px solid #kleurtje;}
#content a:hover {border-bottom: none;}

De reden waarom ik borders gebruik in plaats van text-decoration, is dat een border niet de staarten van je letters doorstreept... Kwestie van de typografie een beetje in orde te houden ;).
X

X1RON

Legacy Member
mpolo zei:
Voor de menu links een class="menu"
.menu:hover{
text-decoration:underline;
}
Klik om te vergroten...

Dit werkt niet. Die links blijven gewoon onderlijnt, en als je er met je muis overgaat worden ze onderlijnt in 1 stuk. Iemand een idee hoe ik die weg doe?

@Xavez
ik denk niet dat onze leerkracht wil dat we met Descendant selectors werken, toch bedankt.
X

Xavez

Legacy Member
_-X!rOn-_ zei:
@Xavez
ik denk niet dat onze leerkracht wil dat we met Descendant selectors werken, toch bedankt.
Klik om te vergroten...

Wel ok, zolang je maar onthoudt dat die methode in dit geval gewoon beter is dan aan elke link een klasse toe te voegen :).
X

X1RON

Legacy Member
Het is gelukt door een nieuwe class aan te maken, en toe te passen op alle a-tags. Hierin staat text-decoration op none.

Ik vraag me wel af hoe het komt dat dit niet gewoon werkt op de overheersende navbar-class, aangezien je, als je super veel links zou hebben, enorm veel werk zou hebben!

En Xavez, ook bedankt voor de tip om een border te gebruiken ipv underline!
a

adrianhates

Legacy Member
Xavez zei:
#navbar a {text-decoration: none}
#navbar a:hover {border-bottom: 1px solid #kleurtje}

#content a {text-decoration: none; border-bottom: 1px solid #kleurtje;}
#content a:hover {border-bottom: none;}
Klik om te vergroten...

Xavez zei:
Wel ok, zolang je maar onthoudt dat die methode in dit geval gewoon beter is dan aan elke link een klasse toe te voegen :).
Klik om te vergroten...

je kan het beter ineens tegoei doen zoals Xavez hierboven zegt
G

Gurdt

Legacy Member
ik weet dat da de juiste manier is, nuja juist, conventioneel gewoon
maar ik deed het omdat de TS zei dat het op die manier niet ging...
m

mpolo

Legacy Member
adrianhates zei:
je kan het beter ineens tegoei doen zoals Xavez hierboven zegt
Klik om te vergroten...

Je wou een antwoord je kreeg er een van mij en het werkte voor wat het moest dienen.

Wil je professioneel design, laat het dan maar door een ander doen als je dit nog niet kan als ik je de code in handen geef.
Maar ja dat is mijn mening...
a

adrianhates

Legacy Member
mpolo zei:
Je wou een antwoord je kreeg er een van mij en het werkte voor wat het moest dienen.

Wil je professioneel design, laat het dan maar door een ander doen als je dit nog niet kan als ik je de code in handen geef.
Maar ja dat is mijn mening...
Klik om te vergroten...

ik wou helemaal geen antwoord.. Ik weet het beter :D
Xavez zijn oplossing is gewoon semantisch correcter en dat geeft je geen onnodige class aan al die elementen te hangen
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan