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.
- Bij h1 gaat het om de opmaak van een kop met een achtergrondafbeelding en de problemen met de uitlijning die dat kan geven.
- Bij h2 gaat het om de opmaak van een kop die verticaal staat.
Kop h1
Kop h1 is als volgt vormgeven:
- Er is 10px ruimte tusen de kop en de rest van de website (de ondermargin is dus 10px)
- De letters van de koptekst zijn niet vet, zoals standaard in een h1-kop.
- De letters van de koptekst zijn wit.
- De foto van de astronauten (apollo.jpg) komt links, boven het menu.
- De titel HET APOLLO-PROJECT komt precies boven het bruine blok met de hoofdtekst en is even breed als dat blok.
- 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
- Voeg aan de stijlregels van h1 een regel font-size: 3em; toe
en kijk of de tekst hierdoor net zo breed is als het tekstblok eronder.
Dat blijkt niet het geval. De tekst is nog iets te klein.
- Experimenteer met de font-size tot de hele tekst precies even breed is als het tekstblok.
Dat is volgens mij zo bij font-size: 3.17em; .
figuur 3: na font-size: 3.17em;
Opmerkingen:
- Ik was verbaasd toen ik dit zag. Om een of andere reden past de regelhoogte zich niet aan aan de grotere letters. De letters steken nu onder en boven de regel uit.
Daar moeten we in de volgende stap wat aan doen.
- Een punt om even bij stil te staan is het lettertype. Ik gebruik een van de bekendste lettertypes, Arial. Maar het kan zijn dat Arial op een computer niet aanwezig is.
Dan kiest de browser een ander lettertype, waarvan de letters misschien wat smaller of breder zijn. Op die computers is de kop dus smaller of breder dan het tekstblok eronder..
Het was beter geweest als ik een lettertype uit Google Fonts had gebruikt. Als je dat wilt kan jij zo'n font alsnog in de website opnemen.
Kijk eventueel in hoofdstuk 15 of in de naslag bij fonts hoe dat gaat. Je zou lettertype Arimo kunnen gebruiken. De letters van Arimo hebben dezelfde afmetingen als die van Arial.
(Ik vermoed dat de naam Arimo voor Arial modified staat.)
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.
- Voeg dus voor h1 de volgende stijlregel toe: padding: 0 0 6px 0;.
Daarmee wordt de padding onder 6px; de paddings van de andere zijden blijven voorlopig 0.
figuur 4: na padding: 0 0 6px 0;
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.
- Verander de regel padding: 0 0 6px 0; die je net gemaakt hebt in
padding: 300px 0 6px 0;. Dat geeft genoeg ruimte voor de foto.
figuur 5: na padding: 300px 0 6px 0;
Dat is het resultaat zoals we het hebben willen.
Haal de bruine achtergrondkleur (het woord brown) weer weg.
De stijlregels van h1 moeten er nu uitzien als in figuur 6:
figuur 6: uiteindelijke opmaak van kop h1
h1 {
margin: 40px 0 10px 0;
font-weight: normal;
color: white;
background: url("../afbeeldingen/apollo.png") no-repeat left bottom;
text-align: right;
font-size: 3.17em;
padding: 300px 0 6px 0;
}
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) draaien 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: