Websites met stijl

27. Apollo: de koppen h1 en h2

In dit hoofdstuk

Inleiding

In dit hoofdstuk komt de opmaak van de koppen h1 en h2van de Apollo-website aan de orde.

Kop h1

Kop h1 is als volgt vormgeven:

  1. Er is 10px ruimte tusen de kop en de rest van de website (de ondermargin is dus 10px)
  2. De letters van de koptekst zijn niet vet, zoals standaard in een h1-kop.
  3. De letters van de koptekst zijn wit.
  4. De foto van de astronauten (apollo.jpg) komt links, boven het menu.
  5. De titel HET APOLLO-PROJECT komt precies boven het bruine blok met de hoofdtekst en is even breed als dat blok.
  6. De onderkanten van de foto en de koptekst moeten moeten samenvallen. (In andere woorden, de eerste letters van de kop moeten 'op de onderkant van de foto' staan).

In principe lijkt dit niet zo moeilijk te verwezenlijken, maar in de praktijk was het een heel gedoe. We gaan de stijlregels voor h1 stap voor stap opbouwen.

Stap 1

Stap 2: De tekstgrootte aanpassen

Opmerkingen:

Stap 3: De onderkant van de letters uitlijnen.

Hoe kunnen we ervoor zorgen dat de onderkant van de letters precies is uitgelijnd met de onderkant van h1?
Dat kan door aan de onderkant een padding toe te voegen.
Na wat experimenteren bleek dat de kop precies goed staat bij een padding van 6px.

Stap 4: de kop aan de bovenkant groter maken, zodat de hele foto van de astronauten zichtbaar is.

Hoe maken we de kop aan de bovenkant groter? Dat is simpel: met de padding aan de bovenkant.

Kop h2

Kop h2 bevat de tekst bestemming maan. Deze kop is een kwartslag gedraaid. In vorige versies van css was het niet mogelijk om een element te draaien.

Wilde je een gedraaide tekst hebben, dan moest je een afbeelding maken met een gedraaide tekst.

Sinds css 3.0 is er de eigenschap transform die tal van draaiingen om allerlei assen mogelijk maakt.

Figuur 7 toont hoe je een tekst (bv)30 graden (met de klok mee) kan laten draaien: figuur 7: rotatie (draaiing) van 30 graden rechtsom. transform: rotate(30deg); Hierbij draait het element om zijn middelpunt.

Een element (tekst, afbeedling) draien is dus eigenlijk simpel. Toch vraagt het draaien en positioneren van de titel nogal wat extra maatregelen: figuur 8: Opmaak van kop h2 h2 { position: absolute;
width: 900px;
height: 20px;
margin: 0;
padding: 0;
color: hsl(28, 10%, 25%);
font-size: 3.75em;
font-weight: normal;
text-align: right;
transform: rotate(270deg);
-ms-transform: rotate(270deg); /* IE 9 */
-webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
top: 775px;
left: -160px;
}
Toelichting: