Websites met stijl

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

In dit hoofdstuk:

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.

figuur 1 57video{
58width: 40%;
59max-width: 300px;
60min-width: 150px;
61margin: 10px 40px 10px 0;
62float: left;
63}
Toelichting

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.

figuur 2 65div#container{
66max-width: 1280px;
67background-color: white;
68margin: 20px auto;
69}

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

Toelichting

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 jet 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.

figuur 3 71main{
72display: inline-block;
73width: 60%;
74vertical-align: top;
75margin: 0;
76padding: 0;
77}
78
79aside{
80display: inline-block;
81width: 39%;
82vertical-align: top;
83margin: 0;
84padding: 0;
85}

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

Toelichting

Footer

figuur 5 87footer{
88border-top: 1px solid hsl(60, 8%, 57%);
89background-color: hsl(60, 50%, 80%);
90margin: 0;
91text-align: center;
92font-size: 90%;
93font-style: italic;
94padding: 5px;
95}
Toelichting

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).

Het stijlblad

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

figuur 7 1@import 'https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700|Open+Sans:400,700';
2/* Google fonts 'Open Sans Condensed' (vet) voor de kop en 'Open Sans' (normaal en vet) */
3
4body {
5margin: 0;
6font-family: 'Open Sans', sans-serif;
7font-size: 110%;
8color: hsl(0,0%,40%);
9/* zie hoofdstuk 16 - Welke achtergrond */
10/* zie hoofdstuk 16 - Welke achtergrond */
11}
12
13nav {
14background-color: hsl(52, 100%, 50%);
15margin: 0;
16padding: 4px 4px 4px 8px;
17position: fixed;
18top: 0;
19left: 0;
20width: 100%;
21z-index: 1;
22}
23
24nav a {
25background-color: hsl(0, 8%, 40%);
26color: hsl(0, 0% 100%);
27text-decoration: none;
28width: 80px;
29display: inline-block;
30text-align: center;
31}
32
33nav a:hover {background-color: hsl(0, 0%, 30%);}
34
35nav a[href=""] {color: hsl(50, 100%, 50%);}
36
37
38img {width: 100%;}
39
40header {
41position: relative;
42margin-top: 32px;
43}
44
45header h1 {
46position: absolute;
47top: 0;
48right: 1%;
49margin: 0;
50font-family: 'Open Sans Condensed';
51font-size: 2.5em;
52color: white;
53text-shadow: 1px 1px black;
54opacity: .9;
55}
56
57video{
58width: 40%;
59max-width: 300px;
60min-width: 150px;
61margin: 10px 40px 10px 0;
62float: left;
63}
64
65div#container{
66max-width: 1280px;
67background-color: white;
68margin: 20px auto;
69}
70
71main{
72display: inline-block;
73width: 60%;
74vertical-align: top;
75margin: 0;
76padding: 0;
77}
78
79aside{
80display: inline-block;
81width: 39%;
82vertical-align: top;
83margin: 0;
84padding: 0;
85}
86
87footer{
88border-top: 1px solid hsl(60, 8%, 57%);
89background-color: hsl(60, 50%, 80%);
90margin: 0;
91text-align: center;
92font-size: 90%;
93font-style: italic;
94padding: 5px;
95}

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

Maak in regel 67 de achtergrond-kleur bv. wheat (dat is heel lichtbruin, je mag ook een andere kleur kiezen: background‑color: wheat;.

Dan zie je dat de tekst pal tegen de linker kantlijn van div#container staat.

Het lijkt dus logisch om dat te veranderen. Probeer dat maar door regel 76 te veranderen in padding40px;

De kantlijn is nu aanwezig, maar waar zijn de afbeeldingen gebleven?

Die blijken niet meer naast de kolom main te passen en staan er nu onder. Hoe kan dat?

Width is de breedte van de inhoud van een blok-element of inline-blok element. Voor de totale breedte van een element moet je de padding, border en margin (links en rechts!) erbij optellen. Aanvankelijk waren padding, border en margin 0, dus de totale breedte van main was gelijk aan width: 60%. Nu is daar rechts en links een padding van 40px bijgekomen. Dan blijft er niet genoeg ruimte meer over voor de aside. Die komt dus op de volgende 'regel', onder de main.

Er zijn verschillende oplossingen voor het probleem.

Oplossing 1: padding in procent

Oplossing 2: omschakelen naar border-box

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

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.

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.

figuur 6: schematische opbouw website menu header

div#container

main article 1

xxxx xxxx xxx xxx xxxx xxxxx xxxxx xxxxxxx xxxxx xxxxxx xx xxxx xxxxxxxx xxxx xxxxx xxxxxxxx xx xxxxxx xxxxx xxxx xxxxxxxxx xxxx xxx xxxxxxx xxx xxxxx xxxx xx xxxx xxxxx xxxxx xx xxxxxx xxxx xx xxxx xx xxxx xxxx xxxx xxxxx xxxx xxxxx xxxxx xxx xxxxxxxx xxxx xxxxx xxx xxx xxxxxx xxxxx xxx xxxxx xxxx xx xxxx xxxxx xxxxx xxxxxx xxxxxx xxxxxx xx xxxx xxxxxxxx xxxx xxxxx xxx xxxxxxx xxxxx xxxxxx xxxx xxxxxx xxx xxxx xxxxxxxxxx

article 2

xxxx xxxx xxx xxx xxxx xxxxx xxxxx xxxxxxx xxxxx xxxxxx xx xxxx xx xxxx xx xxxx xxxx xxxx xxxxx xxxx xxxxx xxxxx xxx xxxxxxxx xxxx xxxxx xxx xxx xxxxxx xxxxx xxx xxxxx xxxx xx xxxx xxxxx xxxxx xxxxxx xxxxxx xxxxxx xx xxxx xxxxxxxx xxxx xxxxx xxx xxxxxxx xxxxx xxxxxx xxxx xxxxxx xxx xxxx xxxxxxxxxx xxxxxxxx xxxx xxxxx xxxxxxxx xx xxxxxx xxxxx xxxx xxxxxxxxx xxxx xxx xxxxxxx xxx xxxxx xxxx xx xxxx xxxxx xxxxx xx xxxxxx xxxx xx xxxx xx xxxx xxxx xxxx xxxxx xxxx xxxxx xxxxx xxx xxxxxxxx xxxx xxxxx xxx xxx xxxxxx xxxxx xxx xxxxx xxxx xx xxxx xxxxx xxxxx xxxxxx xxxxxx xxxxxx xx xxxx xxxxxxxx xxxx xxxxx xxx xxxxxxx xxxxx xxxxxx xxxx xxxxxx xxx xxxx xxxxxxxxxx

aside figure 1 figure 2 figure 3 figure 4 footer

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.

Samenvatting

Eigenschappen (in alfabetische volgorde)

.
box-sizingboxmodel (border-box of content-box)naslag
displayHoe een element wordt getoond (niet, inline, inline-blok of blok) naslag
display: inline-block;element wordt getoond als inline-blok element
floatLaat tekst om een element heen lopennaslag
img {float: left;}Afbeelding links uitgelijnd. Tekst loopt er rechts omheen.
img {float: right;}Afbeelding rechts uitgelijnd. Tekst loopt er links omheen.
text-alignTekst-uitlijning (horizontaal): left, right, center, justifynaslag
vertical-alignVerticale uitlijningnaslag
vertical-align: top;Bovenkant van element uitgelijnd