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.

De titel van het artikel

Gepost op:

Het artikel wordt nu met dummytekst gevuld...

afbeelding Vivamus eget tortor eros. Nunc id ante et metus vehicula lacinia...

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 vervolg

Volgende week (maandag) hoop ik nog een artikel te schrijven over het opmaken van een webpagina met daarin een formulier. Hierbij maak ik gebruik van tabellen layout. Wellicht niet zoals je verwacht, maar hou het maar in de gaten.

Het resultaat

Tenslotte nog de layout zoals we die nu hebben, met daarbij de link naar de html-pagina en voor de goede orde ook een link naar het volledige stijlblad.

html5 website definitief

Stijlblad

20 Reacties

  1. ik kende colum gap nog niet, weer wat geleerd.

    alleen waar maak je hier zoveel code voor? :

    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;
    }

    dit geeft hetzelfde effect:

    aside {
    border-radius: .5em;
    }

    ???

    voor dit resultaat, vind ik deze 5(!!!) delige tutorial wel aan de lange kant.

    1. Je hebt helemaal gelijk dat het ook kort kan, het ging me er om dat de gebruiker ziet wat er aan code zou moeten. Ik heb dus bewust de verkorting niet gebruikt, daar kan ik in de toekomst nog een artikel over maken.
      5 delen is niet erg lang, je zou er zo 1 tutorial van kunnen maken, maar ik wilde in elk deel een onderdeel behandelen. Ik heb mijns inziens duidelijk aangegeven wat er kan met html5 en dat was het doel van deze serie, en ja, dat mag je lang vinden, maar wsl. heb je wel aardige kennis van css3 en html5, ik richt me in dit artikel meer op iemand die weinig tot geen kennis heeft.

  2. @Guido, Dan is ’t goed.. ik doe het er altijd maar voor de zekerheid bij.. Weet ik zeker dat het niet fout gaat.

    @Bjorn, Het is een prima Tutorial. Gesplitst in 5 delen met een kleine tijd ertussen lijkt mij prima, dan hoef je niet in één keer de hele lap tekst lezen.

  3. Misschien is het een idee om naar aanleiding van deze reeks tutorials een wedstrijd uit te schrijven.

    Wie maakt de mooiste/best gecodeerde website met HTML5 en CSS3?

  4. Aan HTML5 zitten wel degelijk voordelen!
    Begreep vroeger niemand een snars van jou code omdat je overal divs met vage classes en id’s had, dan begrijpen anderen die met jou codes moeten werken HTML5 veel beter.
    HTML5 beschrijft haar codes meer. Zo kun je bijvoorbeeld voor het artikel gedeelte gebruiken en voor de zijbalk .
    HTML5 is semantisch gezien dus ook veel handiger.
    Daar komt nog bij dat er een mogelijkheid is om met tekeningen te maken in JavaScript!
    Ook kun je video en audio het open formaat .ogg afspelen door de volgende code: of .

    Dan over CSS3. Persoonlijk vind ik inderdaad die ronde hoeken prachtig!
    Maar CSS3 bied ook schaduwmogelijkheden, teksteffecten, een overloop van kleuren in zowel divs als randen, 2 achtergrondafbeeldingen in 1 div en zo nog wel een hele hoop meer!

    Verdiep je er eens verder in, je zult niet meer kunnen wachten tot deze nieuwe programmeertalen de standaard zullen worden…

  5. “Begreep vroeger niemand een snars van jou code omdat je overal divs met vage classes en id’s had, dan begrijpen anderen die met jou codes moeten werken HTML5 veel beter.
    HTML5 beschrijft haar codes meer. Zo kun je bijvoorbeeld voor het artikel gedeelte gebruiken en voor de zijbalk .”

    Wat is er zo verwarrend aan:

    ?

    “Daar komt nog bij dat er een mogelijkheid is om met tekeningen te maken in JavaScript!”
    Ja, wat je in java en andere talen ook al kon doen. Erg irritant werk en vervelend om te doen. En waarom zou ik met de huidige technieken en snelheden Javascript tekeningen laten maken?
    1) Het is lelijker dan in photoshop een tekening maken
    2) Ik vraag mij dus af wat sneller laad.

    “Ook kun je video en audio het open formaat .ogg afspelen door de volgende code: of .”
    Ja, dan moet je een browser hebben die het support.
    Nog steeds is er een battle welke video en audio format er zal worden gebruikt.
    Tot 2022 zal je 2x de muziek en 2x de video bestanden moeten uploaden. Voor elke browser een apart formaat.
    Daarnaast, zoals ik al in een andere post zei, er is geen streaming, alleen progressive downloading. Er is geen fatsoenlijke fullscreen mogelijkheid. Geen (DRM) beveiliging. etc etc…

    “Dan over CSS3. Persoonlijk vind ik inderdaad die ronde hoeken prachtig!
    Maar CSS3 bied ook schaduwmogelijkheden, teksteffecten, een overloop van kleuren in zowel divs als randen, 2 achtergrondafbeeldingen in 1 div en zo nog wel een hele hoop meer!”

    Over CSS3 ben ik wat positiever. Ronde hoeken is handig. 2 achtergrondafbeeldingen is handig. afbeelding als border is handig.

    Maar dat is CSS3. Vind daarom ook dat CSS3 gewoon eerder moet worden gereleased. Dáár heeft een developper wat aan. Aan HTML5 TOTAAL niks. Echt totaal niks.

    Je kan mij niet wijsmaken dat je met html5 sneller een site maakt, of dat het sneller laadt.

    “Verdiep je er eens verder in, je zult niet meer kunnen wachten tot deze nieuwe programmeertalen de standaard zullen worden…”
    Duurt nog wel een tijdje. Heb nog 12 jaar de tijd.

  6. Oh, ik zie dat de html codes niet mogen.

    Hier nog een keer dus.

    Wat is er zo verwarrend aan:

    HTML5 doet niets meer dan dit omzetten in etc…
    En dit zijn de standaard tags.

  7. goddamn it. Waarom wordt dit nou weer geblokkeerd.
    @ADMIN, FIX HET EENS!

    again:

    {div id=”nav”}
    {div id=”header”}
    {div id=”sidebar”}
    {div id=”article”}

    Is in principe totaal hetzelfde als

    {nav}
    {header}
    {sidebar}
    {article}

    Wat is er verwarrend aan? HTML5 biedt alleen voor de standaard layout onderdelen een tag. Complexe elementen, zal je nog steeds met “vage” id’s moeten doen. Alleen is dan de vraag, doe jij het vaag, zodat een ander het niet begrijpt? Als je het gewoon een goede naam geeft, zal iedereen het begrijpen.
    En dát is een feit.

    1. Ik heb alle tags uitgezet en dan is html code wel haalbaar. Bedoel je dat?

      <div id=”nav”>
      <div id=”header”>
      <div id=”sidebar”>
      <div id=”article”>

      Is in principe totaal hetzelfde als

      <nav>
      <header>
      <sidebar>
      <article>

  8. Maar het is wel korter en dus weer wat minder ruimte nodig op je host/server.

    Daarbij is HTML5 vanuit semantisch oogpunt wel een stuk aantrekkelijker.

    Tot 2022 hoef je echt niet te wachten hoor; onze grote vriend (kuch) Microsoft heeft besloten IE9 volledige ondersteuning voor HTML5 en CSS3 te geven. Andere browsers zullen dit voorbeeld snel gaan volgen om te blijven concurreren.

  9. Tja leuk hoor, maar eerst ondersteuning door de grote browsers, anders blijf je hacken en patchen voor de verouderde browsers (nu met name IE6).

    En als naast de browserbouwers ook alle websitebouwers meer hun best zouden doen om zich ook daadwerkelijk aan de webstandaarden te houden?
    Cross-browser code lijkt soms meer geluk dan wijsheid, en validators en error-consoles lijken slechts door weinigen gebruikt te worden.

  10. @ BAZZY
    hoezo zullen de andere browsers VOLGEN ?
    voor zover ik weet loopt ie9 nog steeds achter (gebruik dan wel ff 4 ipv 3.6)

    @ DNA
    overigens heeft html5 wel degelijk zin:
    een hoop mobiele browsers ondersteunen geen flash, dus is html5 video echt nodig,
    zodra de nieuwe input elementen ook echt overal beschikbaar worden is formvalidatie een stuk minder werk.
    html5 geeft een hoop mogelijkheden voor communicatie met andere sites (bijvoorbeeld in een iframe), wat het web een stuk dynamischer zal maken

  11. Er zijn altijd mensen die ergens het nut niet van inzien. Je hoeft het ook nog niet te gebruiken. Html4 zal voorlopig nog gewoon ondersteund worden. Het enige is.. Het leven wordt steeds eenvoudiger voor een ontwikkelaar om nette code af te leveren. Persoonlijk vindt ik html5 een goede ontwikkeling.

    Bedankt voor deze post.. Heldere uitleg en goed toe te passen.

  12. @all,
    Ik ben een programmeur van de oude stempel, begonnen in assembler, fortran, Algol etc..
    Sinds kort heb ik wat tijd over en na begonnen te zijn om mijn eigen site via een tool te bouwen, ben ik eens naar de source van site's van anderen gaan kijken…
    Ik heb zelfs in mijn tijd niet zo veel zooi gezien…van de 100 sites zijn er 99 zonder enige structuur..
    In het grijze verleden heb ik zelfs bij een klant van mij programmeurs op- en begeleid om gestrutureerd te progammeren ivm de onderhoudbaarheid, meestal door deren en niet de bouwers zelf, dus mijn stokpaardje is al ruim 30 jaar: "keep it simple, but structured!!
    Ik ben dus helemaal voor standaardisatie! "

    Bjorn..wanneer komt het vervolg?? 🙂

    Groet, een Abacus-gebruiker 😉

Een reactie achterlaten

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *