Direct naar de inhoud

Handboek HTML5 en CSS3HTML en CSS van <a> tot z-index

Verbeteringen en aanvullingen

Het kan altijd beter. Hier is ruimte voor verbeteringen en aanvullingen op het Handboek HTML5 en CSS3. Ik hoor het graag als u een fout ontdekt, een opmerking kwijt wilt of een suggestie wilt doen.

STUUR EEN BERICHT
  • Onduidelijke afbeeldingen

    Enkele afbeeldingen in hoofdstuk 9 zijn als egale grijze vlakken in het boek afgedrukt, waardoor niet goed is te zien wat de bedoeling ervan is. Hieronder staan de afbeeldingen in kleur.

    Afbeelding 9.8
    Afbeelding 9.8 Blok twee is relatief gepositioneerd. De hoek linksboven is 75 pixels omhoog en naar rechts verschoven. De ruimte die het blok oorspronkelijk innam, is nog steeds bezet; blok drie schuift niet omhoog.
    Afbeelding 9.9
    Afbeelding 9.9 Het tweede blok is absoluut gepositioneerd. De hoek linksonder staat op 125 pixels rechts en 75 pixels onder de hoek linksboven van de container, in dit geval de linkerbovenhoek van blok een. De vrijgekomen ruimte is ingenomen door blok drie.
    Afbeelding 9.10
    Afbeelding 9.10 Bij absolute positionering wordt rekening gehouden met padding in de container. (Het lichtgroen aan de bovenkant.) De waarde van top is hetzelfde als in de voorgaande afbeelding.
    Afbeelding 9.11
    Afbeelding 9.11 De positionering is opnieuw absoluut, maar nu is de z-index van blok twee ingesteld op -1, waardoor het onder de andere blokken komt te liggen.
    Afbeelding 9.14
    Afbeelding 9.14 Het resultaat van de code als het scherm breder is dan 800px.
    Afbeelding 9.15
    Afbeelding 9.15 Met alleen float: left krijgen we niet het gewenste resultaat.
    Afbeelding 9.16
    Afbeelding 9.16 Met de hulpklasse clearfix op de content-wrapper komt alles op zijn plek.