Websites met stijl

21. Stijlregels van video, div#container, main, aside, footer

Video

We beginnen met de stijlregels voor het element video, eigenlijk maar een onbelangrijk onderdeel van de website. Maar omdat die vlag zo irritant groot wappert, gaan we die maar eerst fatsoenlijk in beeld zetten.

• Open het stijlblad terschelling.css
• Tik de regels 40 t/m 46 van figuur 1 in.
• Controleer en verbeter eventuele fouten.
• Sla het stijlblad op, maar sluit het niet.
• Bekijk de webpagina index.html in je browser. Als het goed is ziet de video er nu fatsoenlijk uit.

Toelichting

• De regels 58 t/m 60 zetten de breedte van video op 40% van de breedte van de parent (div#container) met een minimum van 150px en een maximum van 300px.
• Regel 61 maakt de boven- en ondermarge 10px, de rechter marge 40px, en de linkermarge 0.
  (De linker kantlijn van de video wordt later gezet in het element article.)
• De eigenschap float in regel 62 is de enige nieuwe eigenschap in de opmaak. Float: left zorgt ervoor dat de tekst rechts om het element video heen loopt, het element staat tegen de linker kantlijn. De margins van video zorgen ervoor dat er wat ruimte blijft tussen de video en de tekst eromheen.

  Experimentje

  • Met float: right; komt de video juist rechts te staan.
  • Probeer dit maar uit: zet op regel 62 float: right; en bekijk index.html in je browser
  • Maak regel 62 leeg en bekijk het resultaat in je browser
  • Zet tenslotte regel 62 weer terug op float: left;

Div#container

Regel 65-69 bevatten de stijlregels voor div#container.
Div#container moet ervoor zorgen dat de website op brede beeldschermen niet te breed wordt en mooi gecentreerd staat.
Het bevat de elementen main (de hoofdkolom) en aside (de kolom met de foto's.

Zet de bovenstaande stijlregels in terschelling.css en sla op. Bekijk het resultaat in de browser.

Toelichting

• Regel 66: Standaard neemt een blok-element de hele beschikbare breedte in, hier de breedte van het beeldscherm. Maar het is niet handig als de website te breed wordt, want heel brede regels lezen niet gemakkelijk. Daarom stellen we een maximale breedte van 1280px in.
  Experimentjes
  • Bekijk index.html in de browser, terwijl je het venster verbreedt en versmalt. Je ziet dan wat er gebeurt - als je monitor tenminste breder is dan ongeveer 1300px.
  • Verander 1280px in een lagere waarde, bv. 600px en bekijk index.html opnieuw in je browser
  • Wis regel 66 en controleer nu of de webpagina onder alle omstandigheden de hele vensterbreedte blijft vullen.
  • Regel 67 maakt de achtergrondkleur wit.

    Eigenlijk is dat niet nodig, de achtergrond is al wit. De regel is opgenomen om hier desgewenst een ander achtergrondkleurtje te kiezen. Dan hoef je alleen nog maar de kleur te veranderen.

  • Zet tenslotte de oorspronkelijke waarde terug: max-width: 1280px;
• Regel 68: margin: 20px auto 5% auto;.
  De marge is boven 20px, rechts auto, onder 5% (van het venster), links auto.
  Als de marge links en rechts auto is, dan wordt het element horizontaal gecentreerd.

Main, aside

We gaan nu twee kolommen maken, links de hoofdkolom main, rechts de kolom aside met de foto's. Onder beiden komt over de hele breedte van div#container het element footer.

Dat betekent dat main en aside inline-blok moeten zijn - ze staan naast elkaar en hebben een breedte. Footer moet een blok element zijn.

We maken de breedte van main 60% (60% van de breedte van de parent, dat is div#container) en de breedte van aside 39%.

Als we de breedte van aside 40% zouden maken zouden main en aside samen door afrondingen misschien net te groot kunnen zijn om nog naast elkaar te passen, daarom kiezen we de breedte van aside een procentje kleiner.
Waarom niet voor een breedte in pixels gekozen? Omdat we niet weten hoe breed div#container wordt: maximaal 1280px, maar minder als het venster smaller is.

Zet de bovenstaande stijlregels in terschelling.css en sla op. Bekijk het resultaat in de browser.

Toelichting

• De opmaak van main en aside is bijna gelijk. Alleen de breedte van beide verschilt.
• De meeste regels zijn reeds eerder besproken.
• Nieuw is vertical-align: top; (in de regels 74 en 84 ).
  Die zorgt ervoor dat de bovenkant van main en aside worden uitgelijnd.
  Zonder deze regel wordt de onderkant van main en aside uitgelijnd. Dat is de standaard uitlijning.
  Zie figuur 4.

  Meer over vertical align in de naslag.

  figuur 4 mainaside

  vertical-align: top;

  mainaside

  zonder vertical-align: top;

  Je kunt ook in de website zelf bekijken wat er gebeurt als je de regels 74 en 84 (tijdelijk) verwijdert.

  Bekijk dan polder.html, duin.html of wad.html in je browser. In index.html zijn main en aside ongeveer even hoog. Daar heeft de verticale uitlijning weinig effect.

  Breng daarna regel 74 en 84 weer in overeenstemming met figuur 4.

• Voor het waarom van de regels 75, 76, 83, 84 (margin: 0; en padding: 0;) zie Overwegingen bij het aanbrengen van margin en padding achteraan dit hoofdstuk.

Footer

• Breng in het stijlblad de regels 87 t/m 95 aan. Daarmee wordt het element footer (de voettekst) vorm gegeven.
• Sla het gewijzigde stijlblad op.
• Bekijk de webpagina's in je browser.

Toelichting

• Footer is een blok-element. Dat betekent dat het de hele breedte van div#container inneeemt. Omdat dat ook de bedoeling is, hoeven we geen display eigenschap toe te voegen zoals bij main en aside.
• Regel 88 zet een kader van 1px breed in de kleur hsl(60, 8%, 57%): 
• Regel 89 maakt de achtergrond-kleur hsl(60, 50%, 80%): 
• Regel 90 maakt de margin van footer rondom 0. Dat betekent ook dat je niet 'onder de footer' kunt scrollen.

  As je wilt dat je wel voorbij de footer kunt scrollen maak je de ondermarge bv. 100px: marge: 0 0 100px 0;. Kijk maar wat je beter vindt.

• Regel 91 zorgt ervoor dat de tekst wordt gecentreerd.
• De regels 92 en 93 maken de letters iets kleiner (90%) en cursief (italic).
• Regel 94 zet een padding van 5px rondom.

Klaar

Hiermee is de opmaak van de elementen video, div#container, main, aside en footer compleet. De website ziet er al aardig uit.

In het volgende hoofdstuk komen de opmaak van het element aside en de foto's aan de orde en nog wat kleinigheidjes. En later zullen we dan nog opmaak voor kleine schermen (tablets en smartphones) toevoegen.

Bekijk eerst nog Overwegingen bij het aanbrengen van margin en padding achteraan dit hoofdstuk. Die overwegingen bepalen de keuze van de margins en paddings in main en aside (dit hoofdstuk); en article en figure (volgende hoofdstuk).

• Controleer of je stijlblad overeenkomt met de figuur 7. Verbeter en sla op.

Het stijlblad

Aan het einde van dit hoofdstuk moet je stijlblad er als uitzien als in figuur 7.

Overwegingen bij het aanbrengen van margin en padding

Ik vind een witte div#container het mooist. Een webste met veel wit is nu trouwens in de mode. Maar stel dat je div#container een achtergrondkleur wil geven. We gaan even kijken wat er dan gebeurt.

Experimentje

Er zijn verschillende oplossingen voor het probleem.

Oplossing 1: padding in procent

• De eerste oplossing is om de padding in procenten op te geven en ervoor te zorgen dat de totale breedte van main (incl de padding) 60% blijft. Verander bijvoorbeeld regel 67 in padding: 0 0 0 4%; en regel 64: width: 56%;
• Nu moeten de aside met de figuren weer naast de tekst staat. Controleer in je browser
• Zet de regels 67 en 76 weer terug op de oude waarden resp. background‑color: white; en padding: 0;

Oplossing 2: omschakelen naar border-box

• Als met width de breedte van de inhoud, de content, wordt aangegeven dan spreekt men van de content-box.
• Als met width de breedte inclusief padding en border wordt aangegeven dan spreekt men van de border-box.
• De eigenschap box-sizing bepaalt welke methode gebruikt wordt:
  • box-sizing: border-box;stelt in op de methode border-box.
  • box-sizing: content-box; stelt in op de methode content-box.
  • Standaard (zonder declaratie) geldt de methode content-box.

    Zie de naslag box-model bij box-sizing.

Als we omschakelen naar border-box is de padding in de breedte inbegrepen en blijft main 60% groot:

• Op regel 67 staat: padding: 0;
• Maak hiervan: box-sizing: border-box; padding: 0 0 0 40px;
  (We zetten de beide declaraties op één regel om de regelnummering hetzelfde te houden.)
• Controleer in de browser dat main en aside nu naast elkaar staan.
• Zet regel 67 weer terug naar: padding: 0;

Oplossing 3: padding, border, margin op 0

Bij de derde methode laten we van een element waarvan de breedte (of hoogte) ertoe doet de padding, border, en margin op 0 staan.

Maar hoe zorgen we er dan voor dat de tekst niet tegen de rand staat? Dat doen met de elementen erbinnen! Die geven we geen breedte, maar wel een margin. Daardoor vullen ze het element waarbinnen ze staan op, maar houden door de margin afstand tot de randen.

Deze methode zullen we ook toepassen voor de website over Teschelling.

• Main en aside hebben wel een breedte, maar geen margin, border, padding.
• De elementen erbinnen, resp article en figure hebben geen breedte (ze vullen dus de breedte van main en aside op) maar wel een margin om afstand te houden tot de randen.

Precies wat we willen! Zie de schematische opbouw van de webste in figgur 6.
Voor de duidelijkheid heb ik in figuur 6 div#container een grijze achtergrond gegeven.

• De margin van article 1 en article 2 zorgt ervoor dat de tekst niet tegen de rand van main staat.
  (de rand om article 1 en article 2 is er in werkelijkheid natuurlijk niet).
• Evenzo zorgt de margin van de elementen figure in aside ervoor dat de foto's niet tegen de rand van de aside aanstaan.

Methode 3, samengevat
Gebruik in een element met een vaste width of height geen padding, maar gebruik in plaats daarvan een margin voor de ingesloten elementen.

Opmerking
Methode 3 helpt niet bij een border. Daarvoor kan je bv. methode 2 gebruiken.