HTML5 en CSS3, de laatste loodjes

In deze vijfde post van de serie over het bouwen van een website met HTML5 en CSS3 wil ik het artikel op de indexpagina in twee kolommen splitsen. Ook wil ik een eenvoudig menu maken bovenaan de webpagina.

Daarnaast ga ik laten zien hoe je met de sidebar, die ook ronde hoeken krijgt, ook kunt werken met het zogenaamde zebra effect, om en om een witte en een oranje letterkleur per paragraaf.

Omdat ik ook nog in wil gaan op de mogelijkheden die er zijn om met tabellen in CSS, een formulier op te maken heb ik besloten om volgende week, maandag, nog een extra artikel te schrijven wat specifiek hierover gaat.

Artikel 1, artikel 2, artikel 3 en artikel 4.

Twee kolommen

Het splitsen van een artikel in twee of meer kolommen zoals dat in een krant ook wel gebeurd, was met CSS 2.1 niet erg gemakkelijk. Het ging wel, maar je moest de kolommen heel specifiek benoemen en uitwerken. Met CSS 3 gaat dat eenvoudig. Om het met huidige browsers te laten werken moeten we wel een extra div plaatsen rond de paragrafen.

Voor het gemak plaatsen we het plaatje aan het begin van de tweede paragraaf. Hier is de code voor de paragrafen. Voor de tekst maak ik nog steeds gebruik van dummy tekst, Lorem Ipsum.

<article class="artikel">
        <header>
            <h2>De titel van het artikel</h2>
            <p>Gepost op:<time datetime="2018-05-05T01:25:00+01:00">5 mei 2018</time></p>
        </header>
        <div>
        <p>
        Het artikel wordt nu met dummytekst gevuld... </p>
        <p><img src="/img/plaatje.jpg" alt="afbeelding">
		Vivamus eget tortor eros. Nunc id ante et metus vehicula lacinia...</p></div>
</article>

Column-count en column-gap

De code voor CSS bestaat voornamelijk uit deze twee regels:

.artikel div {
    column-count: 2;
    column-gap: 22px;
}

Zoals je ziet willen we twee kolommen aanmaken, met een tussenruimte van 22 pixels. Maar omdat de headertekst, de titel en de datum niet over twee kolommen verdeeld moet worden plaatsen we de volgende code bij de vorige code:

.artikel header {
        column-span: all;
    }

Firefox en Safari

Natuurlijk willen we dat het geheel werkt in alle beschikbare browsers (op Internet Explorer na, want die ondersteunt het nog niet, pas vanaf IE9). Daarvoor moeten we weer de extra code toevoegen, als volgt:

.artikel div {
    /* Column-count niet geïmplementeerd */
    -moz-column-count: 2;
    -webkit-column-count: 2;
 
    /* Column-gap niet geïmplementeerd */
    -moz-column-gap: 22px;
    -webkit-column-gap: 22px;
}

De sidebar

Omdat ik een sidebar heb gemaakt ga ik nu de code toevoegen om deze sidebar naar rechts uit te lijnen. Daarnaast wordt de achtergrondkleur zwart (#111) en de letterkleur wit #FFF. Hier de code om dat te bereiken. Let op, er wordt ook weer code gebruikt om de ronde hoeken te maken. Ook de footer krijgt wat meer kleur.

article {
	float: left;
	width: 75%;
}
 
aside {
	float: right;
	width: 20%;
	margin-top: 25px;
	padding: 5px;
	background-color: #111;
	color: #FFF;
}
 
aside {
	border-top-left-radius: .5em;
	border-top-right-radius: .5em;
	border-bottom-left-radius: .5em;
	border-bottom-right-radius: .5em;
	-webkit-border-top-left-radius: .5em;
	-webkit-border-top-right-radius: .5em;
	-webkit-border-bottom-left-radius: .5em;
	-webkit-border-bottom-right-radius: .5em;
	-moz-border-radius-topleft: .5em;
	-moz-border-radius-topright: .5em;
	-moz-border-radius-bottomleft: .5em;
	-moz-border-radius-bottomright: .5em;
}
 
footer {
	clear: both;
        background-color: #999;
	text-align: center;
}

Zebra effect

Volgende stap is om de paragrafen in het zijvlak (de sidebar) om en om een andere letterkleur te geven. Deze manier kun je echter ook toepassen wanneer je bijvoorbeeld een wisselende achtergrondkleur wilt gebruiken.

nth-child

Normaal moest je dit effect bereiken met javascript op door elke paragraaf een aparte class te geven. Door het gebruik van ‘nth-child’ in CSS3, is dit simpeler dan ooit geworden.

aside p:nth-child(even) {
	color: #F90;
}

In deze code zie je achter nth-child staan (even), daarmee worden de even paragrafen van een oranje kleur voorzien. Wanneer je (odd) zet dan worden de oneven paragrafen voorzien van de betreffende stijl.

Je kunt in plaats van (even) ook aangeven (2n+1), waarbij 2n staat voor ‘om de twee paragrafen, vanaf de eerste paragraaf. Je kan ook 3n of 4n invullen en dan krijg je dus de stijl toegepast op elke derde of elke vierde paragraaf.

Het menu

Als laatste onderdeel voor deze week en dus ook voor de indexpagina het menu.
Het menu bestaat uit drie onderdelen en deze zullen eerst horizontaal geplaatst moeten worden. Daarom eerst weer ‘bekende’ CSS code.

nav ul {
	width: 100%;
}
 
nav ul li {
  list-style-type: none;
  display: block;
  float: left;
  width: 30%;
  text-align: center;
  font-family: "Lucida Grande", sans-serif;
  height: 3em;
  background-color: #999;
}
 
nav ul li a {
  padding: .8em .5em .5em .5em;
  text-decoration: none;
  display: block;
}

first-child en last-child

We gaan nu aan de slag met de CSS3 selectors ‘first-child’ en ‘last-child’. Door deze selectors kunnen we het eerste item van de lijst en het laatste item selecteren. Deze krijgen namelijk weer een ronde hoek.
De volgende code passen we toe.

nav ul li:first-child {
  -webkit-border-top-left-radius: .5em;
  -moz-border-radius-topleft: .5em;
  border-top-left-radius: .5em;
  -webkit-border-bottom-left-radius: .5em;
  -moz-border-radius-bottomleft: .5em;
  border-bottom-left-radius: .5em;
  border-right: 1px solid #333;
}
 
nav ul li:last-child {
  -webkit-border-top-right-radius: .5em;
  -moz-border-radius-topright: .5em;
  border-top-left-radius: .5em;
  -webkit-border-bottom-right-radius: .5em;
  -moz-border-radius-bottomright: .5em;
  border-bottom-right-radius: .5em;
  border-left: 1px solid #333;
}

Al met al hebben we nu een deugdelijke layout. Natuurlijk heb ik op bepaalde onderdelen de nadruk gelegd en kan het allemaal wel wat mooier en gelikter. Het ging me er nu om de mogelijkheden te geven van HTML5 en CSS3. De manieren om in de toekomst een website te maken.

Het resultaat

Tenslotte nog de layout zoals we die nu hebben.

De definitieve versie van de website in HTML5 en CSS3