Websites met stijl

22. Het stijlblad afgemaakt

De laatste puntjes

In dit hoofdstuk maken we het stijlblad in principe af. Het betreft nog wat kleinere puntjes die weinig nieuws toevoegen.

• Tik de regels van figuur 1 in de editor in en sla het stijlblad op.

Toelichting

• Article in Main (regels 97-101) 97main article {
  98margin: 0 20px 40px 20px;
  99border-bottom: 1px solid hsl(0, 0%, 80%);
  100padding: 0;
  101}
  Regel 98 zet de margins. De linker margin zorgt ervoor dat de tekst afstand heeft tot de rand van div#container. Dat is alleen echt nodig als je een gekleurde achtergrond voor div#container kiest.
  Controleer het maar door div#container in regel 67 een achtergrondkleurtje te geven.

  Zie ook het stuk 'Overwegingen bij het aanbrengen van margin en padding, oplossing 3' in het vorige hoodstuk.

  Verder zorgt border-bottom (regel 99) voor een streep onder article.
• De h1-kop in article in main (regels 105-110) 105main article h1 {
  106border-bottom: 1px solid hsl(0, 0%, 80%);
  107padding: 5px 0 10px 0;
  108font-size: 110%;
  109margin: 0;
  110}
  Ook de h1-koppen in article (de pagina-titels) krijgen van onderen een streep (regel 106). Verder worden de lettergrootte en de margin gezet.
• De h2-kop in de article (regels 112-116) 112main article h2 {
  113font-size: 90%;
  114margin: 15px 0 -15px 0;
  115padding: 0;
  116} H2-koppen komen komen alleen voor op de bladzijde 'Duinen'. (Het zijn de koppen 'heerlijke ruimte' en 'cranberries'.)
  In de opmaak is één ding opvallend: de ondermarge is -15px (zie het derde getal in regel 114). Kennelijk mag een marge negatief zijn!
  De waarde is door experimenten vastgesteld. Bij een ondermarge van 0px stond de tekst te ver onder de kop. Ik heb toen de ondermarge kleiner gemaakt (negatief dus) net zo lang tot de afstand tusen kop en tekst goed was.

  (Ik moet bekennen dat ik niet inzie waarom de afstand tussen de kop en de tekst eronder bij een ondermarge van 0px nog zo groot is.)

• Figure (regels 118-123) 118figure {
  119margin: 0 20px 10px 40px;
  120padding: 20px 20px 0 20px;
  121background-color: hsl(60, 30%, 90%);
  122border-radius: 7px;
  123} Het element figure houdt de afbeelding en het onderschrift bij elkaar.
  • Het element heeft een brede lichtgrijze rand (regel 121) met een kleine afronding aan de hoeken (regel 122).
  • De margin in regel 119 zorgt ervoor dat figure niet tegen de rand van div#container aanstaat en afstand houdt tot de buurelementen.
• figure a:hover img (regels 132-134) 132figure a:hover img {
  133outline: hsl(50, 100%, 50%) solid 5px;
  134} Figure a:hover img is een ingewikkelde selector: het regelt de opmaak van de afbeelding (img) binnen een hyperlink die met de muis wordt aangewezen (a:hover) in een figure element.

  Het betreft de afbeeldingen in de aside op de home page. Als je zo'n afbeelding aanklikt ga je naar de pagina waar de afbeelding heen verwijst.

  De opmaak in regel 133 zorgt voor een gele outline (rand) om de afbeelding.
  Samengevat: als je zo'n afbeelding in een link aanwijst met de muis verschijnt er een gele rand om.

  Voor het waarom van het gebruik van outline in plaats van border, zie de naslag outline.

  Wil je het verschil tussen border en outline in de praktijk zien? Doe dan het volgende:

  • Kijk goed wat er gebeurt als je op de home pagina een van de afbeeldingen rechts met de muis aanwijst - er moet een gele rand om de afbeelding komen.
  • Verander dan regel 133 in border: hsl(50, 100%, 50%) solid 5px;
  • Kijk opnieuw wat er gebeurt bij aanwijzing met de muis - bij het verschijnen van de gele rand verschuift de afbeelding. Want de dikte van de border maakt de afbeelding groter.
• Naarboven" (regels 145-159) 145.naarboven {
  146text-align: right;
  147margin: 0 0 20px 0;
  148padding: 0 30px 0 0;
  149}
  159
  151.naarboven a {
  152color: hsl(40, 35%, 70%);
  153text-decoration: none;
  154}
  155
  156.naarboven a:hover {
  157color: hsl(40, 35%, 35%);
  158text-decoration: underline;
  159}
  Onderaan elke pagina staat een link met de aanduiding 'naar boven'. Bij aanklikken wordt naar de bovenzijde van de pagina gesprongen.

  Dat is geregeld in de html (zie "hoofdstuk 8)

  De opmaak wordt geregeld in 3 onderdelen:
  • .naarboven (regels 145-149) zet de opmaak van de class 'naarboven': onder meer het rechts-uitlijnen van de tekst (tekst tegen de rechter kantlijn)

    Voor text-align zie de naslag.

  • .naarboven a (regels 151-154) zet de opmaak voor de hyperlink (een andere letterkleur en het onderdrukken van de standaard onderstreping voor hyperlinks.

    Voor text-decoration zie de naslag.

  • .naarboven a:hover (regels 156-159) zet de opmaak van de link bij aanwijzing: een andere letterkleur en de onderstreping wordt weer aangezet.
• img.extra (regels 161-164) regelt de opmaak van afbeeldingen van de class 'extra': een rand en een schaduw. 161img.extra {
  162box-shadow: 6px 6px 4px #888;
  163border: 1px solid hsl(0, 0%, 40%);
  164}
• a (regel 166) tenslotte, maakt de kleur van de links wat minder fel blauw. 166a { color: hsl(225, 60%, 40%); }

Een element selecteren - op grond van de positie of met een class

In dit hoofdstuk is de opmaak besproken van aside p en img.extra. Beiden komen maar één keer voor op de website:

• aside p, een alinea binnen het element aside komt alleen voor op de home pagina, onder de afbeeldingen rechts.
• img.extra, een afbeelding van de class 'extra' komt alleen voor op de pagina polder. Het is het kaartje van Terschelling op die pagina.

Voor de opmaak van deze twee elementen is een verschillende aanpak gekozen.

• Bij aside p geeft de selector de plaats van het element binnen de website aan. (Ik noem dat maar de 'positie-methode').
• Bij img.extra wijst de selector naar een class, de class 'extra'. (Hier spreek ik van de 'class-methode'.)

Wat mij betreft heeft - als het kan - de positie-methode de voorkeur: elk element in een bepaalde positie heeft een bepaalde opmaak.
Om te kiezen moet je je afvragen: wil ik dat alle elementen in een bepaalde positie een specifeke opmaak krijgen?

• Als het antwoord op die vraag 'ja' is, verdient de positie-methode de voorkeur.
• Zo nee, kies dan de class-methode.

Voorbeeld

De afbeelding van het kaartje van Terschelling op de pagina polder moet voorzien worden van een kader en een schaduw. De positie ervan is: een afbeelding binnen het element article. We kunnen ons dan afvragen:

• Wil ik dat alle afbeeldingen binnen article voorzien worden van een kader en een schaduw?

  Er is er nu maar één van, maar wat als er meer afbeeldingen worden toegevoegd in een article (in de linker kolom)?

• Als het antwoord op die vraag 'ja' is: alle (toekomstige) plaatjes moeten een rand en een schaduw, dan kiezen we voor de positie-methode: article img {
• Is het antwoord 'nee', niet alle afbeeldingen in article krijgen op voorhand een rand en een schaduw, dan kiezen we voor de class-methode: img.extra { (of welke class-naam je wilt gebruiken).
  In de html voorzie je dan de img elementen die een kader en een schaduw moeten krijgen van de class 'extra'.

Opmerking: Ik heb voor de website niet de bovenstaande afweging gemaakt. Ik wilde gewoon beide methodes laten zien.

Klaar

De website is nu opgemaakt voor desktop computers en laptops.

In volgende hoofdstukken gaan we het stijlblad nog wat uitbreiden, om er voor te zorgen dat de website er ook goed uitziet op tablets en smartphones.