# 106: Building Snippets Area, deel 3 (HTML & CSS) - CSS-trucs

Anonim

We zijn bijna klaar met het bouwen van de startpagina van het gedeelte Snippets van de site. We beginnen meteen dingen aan te passen en meer dingen in vorm te krijgen.

We hebben een rare ervaring waarbij het absoluut gepositioneerde pseudo-element niet reageerde op een negatieve linkermarge, maar prima was met een positieve rechtermarge. Wie weet.

Vervolgens maken we een “actieve” klasse voor het linkermenu met fragmentcategorieën. U bladert er slechts één tegelijk door (u ziet een lijst met gerelateerde fragmenten aan de rechterkant). Stel dat "HTML" actief is en u klikt op "CSS", een nieuwe lijst met alleen CSS-gerelateerde fragmenten verschijnt aan de rechterkant. Er moet wat styling zijn om te laten zien welke actief is. Het wijzigen van de z-index op een actieve klasse is voldoende om voor ons te werken (waardoor deze boven de schaduw zit).

Voor de lijst aan de rechterkant is het vervelend om de links weer te geven: block - maar het is bijna te veel klikbaar gebied. Het lijkt raar om dat te denken, maar ik denk dat het waar is. U wilt niet dat onbedoelde klikken erg ver van de tekst van de link zelf verwijderd zijn om die link te activeren. Het zou verrassend en raar zijn. De links zelf kunnen dus inline-block zijn, zodat ze wat opvulling kunnen hebben, maar vullen niet de volledige breedte zoals het lijstitem waarin ze zich bevinden.

Voor de links zelf besluiten we dat het kleuren van de titel van de fragmenten in de kleur van de categorie waartoe ze behoren te sterk is. In plaats daarvan zijn de links grijs, maar de rollover-kleur kan die speciale kleur aannemen.

We besluiten ook dat de lijst met één kolom naar beneden voorlopig werkt, maar als scrollen te belachelijk wordt, kunnen we op een dag misschien in twee kolommen breken en het inkorten.