Css pakt class niet op?
Ik zit met het volgende:
Code (php)
1
2
3
2
3
<div id="footer">
<p><span class="links">tekst</span></p>
</div>
<p><span class="links">tekst</span></p>
</div>
Nu wilde ik deze gaan stijlen door het volgende te gebruiken: #footer p span .links
alleen word dit niet opgepakt. Hoe is dit te fixen?
* update* Ariën was met net voor
Gewijzigd op 12/04/2016 15:15:23 door Jan de Laet
Bedankt voor je antwoord Jan, heb je hier toevallig meer info bij?
span . links kan wel, maar nu niet omdat?
Jan de Laet op 12/04/2016 15:13:55:
Of span of .links weglaten. Want span en .links zitten op zelfde niveau.
* update* Ariën was met net voor
* update* Ariën was met net voor
Gewijzigd op 12/04/2016 15:21:40 door Jan Graneker
Als je dit had dan kon het wel wat jij deed, want dan zit class links onder span:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<div id="footer">
<p>
<span>
<div class="links">tekst</div>
</span>
</p>
</div>
<p>
<span>
<div class="links">tekst</div>
</span>
</p>
</div>
Gewijzigd op 12/04/2016 15:29:31 door Jan de Laet
Gewijzigd op 12/04/2016 17:00:30 door Thomas van den Heuvel
Sabaton Joakim op 12/04/2016 17:18:10:
Of #footer p span.links gebruiken (span.links aan elkaar aangezien het om hetzelfde element gaat).
Is de ID footer? Ja
Gaat het om een paragraaf? Ja
Is het een span? Ja
Heeft de span de class 'links'? Ja
versus
#footer .links
Is de ID footer? Ja
Is de class 'links'? Ja
Ofwel 4 controles versus 2 controles ...
Denk dus goed na over hoe je een en ander inricht.
Gewijzigd op 12/04/2016 20:49:21 door Ozzie PHP
Wat is nou 'legit' of de 'beste' manier?
Ozzie PHP op 12/04/2016 20:23:48:
#footer p span.links
Is de ID footer? Ja
Gaat het om een paragraaf? Ja
Is het een span? Ja
Heeft de span de class 'links'? Ja
versus
#footer .links
Is de ID footer? Ja
Is de class 'links'? Ja
Ofwel 4 controles versus 2 controles ...
Denk dus goed na over hoe je een en ander inricht.
Is de ID footer? Ja
Gaat het om een paragraaf? Ja
Is het een span? Ja
Heeft de span de class 'links'? Ja
versus
#footer .links
Is de ID footer? Ja
Is de class 'links'? Ja
Ofwel 4 controles versus 2 controles ...
Denk dus goed na over hoe je een en ander inricht.
Gewijzigd op 13/04/2016 09:03:03 door Jan Graneker
Als je footer enkel/overwegend bestaat uit dit soort spans zou je best voor een minimale benadering kunnen gaan.
Wat je ook nog mee kunt nemen in je overweging is flexibiliteit: mocht je de HTML indeling nog aanpassen en je hebt hele specifieke stijlregels hiervoor opgesteld (dus je hebt het "element-pad" helemaal uitgeschreven in je CSS) dan mag je je CSS mogelijk ook opnieuw gaan schrijven.
En wanneer je alles een beetje flexibel opzet is er ook nog ruimte voor het definiëren van uitzonderingen door CSS toe te voegen die specifieker is.
Een goede "rule of thumb" is dus waarschijnlijk dat je niet op voorhand alles helemaal vastschroeft.
Aangezien je het specifiek over "links" in de footer hebt, vraag ik me daarnaast af of je dan niet beter de <a>-tags voor echte hyperlinks kunt stylen:
Code (php)
1
#footer a { ... }
Dat heeft zelfs nog een bijkomend voordeel: je kunt een hyperlink uitgebreider stylen met pseudo-klassen, bijvoorbeeld:
Code (php)
1
2
3
2
3
#footer a:link { ... }
#footer a:visited { ... }
#footer a:hover { ... }
#footer a:visited { ... }
#footer a:hover { ... }
Ik zie nu net je profielfoto. Heb je het PHP kookboek geschreven? Heb hem vorige week besteld en ga er deze week aan beginnen. Heb hem even snel doorgekeken en daar stond al super veel handige info over. Erg goed werk.
Ward van der Put op 13/04/2016 13:19:59:
Je kunt het eventueel nog beperken tot .footerlink en class="footerlink" met slechts één CSS-klasse.
Aangezien je het specifiek over "links" in de footer hebt, vraag ik me daarnaast af of je dan niet beter de <a>-tags voor echte hyperlinks kunt stylen:
Dat heeft zelfs nog een bijkomend voordeel: je kunt een hyperlink uitgebreider stylen met pseudo-klassen, bijvoorbeeld:
Aangezien je het specifiek over "links" in de footer hebt, vraag ik me daarnaast af of je dan niet beter de <a>-tags voor echte hyperlinks kunt stylen:
Code (php)
1
#footer a { ... }
Dat heeft zelfs nog een bijkomend voordeel: je kunt een hyperlink uitgebreider stylen met pseudo-klassen, bijvoorbeeld:
Code (php)
1
2
3
2
3
#footer a:link { ... }
#footer a:visited { ... }
#footer a:hover { ... }
#footer a:visited { ... }
#footer a:hover { ... }
Jan Graneker op 13/04/2016 15:36:26:
Ik zie nu net je profielfoto. Heb je het PHP kookboek geschreven? Heb hem vorige week besteld en ga er deze week aan beginnen. Heb hem even snel doorgekeken en daar stond al super veel handige info over. Erg goed werk.
Ja Jan, dat ben ik.
Bedankt voor het compliment en veel plezier met het boek!