Les 2: position in CSS

In deze lesbrief behandelen we een aantal belangrijke technieken dat je nodig hebt voor het maken van een website.

Positionering in CSS

Je kunt op vier verschillende manieren de positie van een HTML-element op een pagina bepalen:

• position: static

• position: absolute

• position: relative

• position: fixed

• position: sticky -> een combinatie van relative en fixed

Static

Positioneren met static, daar hoef je niets speciaal voor te doen. Alle elementen zijn namelijk standaard static gepositioneerd. Static betekent dat het element op de plek terecht komt in de volgorde zoals jij dat hebt aangegeven in de HTML. Men zegt wel: according to the normal flow of the page. Hieronder is dat ook te zien. De <p> komt na de <img> En de <img> komt na de <h1>.

Relative

Met relative kun je je element ten opzichte van zijn normale positie, naar links, rechts, boven en/of beneden plaatsen. Je geeft op de verticale as met top of bottom een afstand op. En op de horizontale as met left of right.

Absolute

Met absolute kun je eigenlijk hetzelfde doen, maar dan ten opzichte van de bovenkant van de pagina. Je haalt het element zelfs helemaal uit de flow, waardoor de <p> ook naar boven opschuift. Zie hieronder.

Fixed

Fixed lijkt weer heel erg op absolute. Maar er is een groot verschil: Als je iets met fixed positioneert, dan blijft het daar. Zelfs als je naar beneden gaat scrollen!

Opdracht

Maak een pagina waarmee je wat speelt met alle positioneringsopties. Misschien dat je het menu van de pagina die je in de vorige lesbrief had gemaakt fixed kunt maken?

Verschillende lagen en z-index

Als je een element met absolute, relative of fixed gaat positioneren, dan kan het zo zijn dat meerdere elementen bovenop elkaar worden geplaatst. Maar hoe zorg je ervoor dat de ene laag op of onder de andere laag terechtkomt? Dit regelen we met een ander CSS-property genaamd z-index. Voor de z-index kun je een getal opgeven. Hoe lager het getal, hoe meer hij naar achteren wordt geplaatst. Je kunt zelfs negatieve getallen opgeven! Zie het onderstaande voorbeeld met kaarten en hun bijbehorende z-index.

Je hoeft de lagen overigens niet per se van 1 tot 5 te nummeren (in stapjes van 1). Je mag ook sprongen maken. Als je maar weet dat de lagen van klein naar groot worden opgestapeld. Zie bijvoorbeeld het volgende plaatje:

Opdracht

Maak het volgende plaatje na. Hij bestaat uit 5 div'jes.

Floating

Vaak als je een stuk tekst voor op je website schrijft, dan wil je daar plaatjes bij. En dat ziet er dan standaard zo uit:

Terwijl je eigenlijk het plaatje met de tekst zou willen omringen, zie je hierboven dat er veel witruimte is. Je browser beschouwt het plaatje als een letter en zet hem in de zin. Ook als je het plaatje uit de <p> haalt, dan behoud je de witruimte. Dit gaat we nu oplossen met floating.

Door het plaatje float: left of float: right mee te geven krijg je het volgende effect:

Floating kan ook erg handig zijn als je een layout structuur voor je webpagina wilt maken waarbij je blokelementen naast elkaar wilt zetten. Neem als voorbeeld de volgende twee layouts:

LAYOUT 1

<header>
<nav>	<section>
<footer>

LAYOUT 2

<header>
<nav>	<section>	<aside>
<footer>

De vraag is: Hoe maak je dit soort layouts? Je ziet in de eerste layout <nav> en <section> naast elkaar en in de tweede layout komt daar zelfs een <aside>-element bij. Ook dit doe je met floating. Hoe dat werkt wordt in de volgende video uitgelegd:

Opdracht

Maak een van de bovenstre twee layouts met behulpd van floating.

Kleurentheorie

Web-design is een vak apart en de theorie over kleurgebruik is daarin een belangrijk onderdeel. Het internet staat vol met websites die niet aantrekkelijk zijn vanwege hun lay-out. Neem nou eens de volgende oerlelijke websites: http://www.waterequipment.com.au/ of http://www.pennyjuice.com/htmlversion/whoispj.htm

Inderdaad! Ouch!!! … het doet zeer aan je ogen ;)

De theorie over kleuren is een van de belangrijkste onderwerpen voor web designers. Een website waarbij kleurgebruik goed wordt toegepast ziet er natuurlijk beter uit. Maar kleuren kunnen ook een psychologisch effect hebben. Met de verkeerde kleuren kun je het verkeerde gevoel bij je bezoekers achterlaten. Dan vinden ze je ineens onbetrouwbaar of nemen ze je niet serieus.

Design is een onderwerp waar we nu maar heel kort bij stil zullen staan. We kunnen je al wel verklappen dat hier ook modules en badges voor zullen komen. Voor nu moet je het doen met dit kleine hoofdstukje ....

Een handige tool om je te helpen bij de keuze van een harmonieus kleurenpalet voor je website is het kleurenwiel. Het kleurenwiel helpt je de relaties die kleuren met elkaar hebben te visualiseren. De meest gebruikte versie van het kleurenwiel is gebaseerd op het wiel dat Sir Isaac Newton heeft ontdekt. Zijn kleurenwiel gebruikt drie primaire kleuren: rood, geel en blauw. Wanneer je die kleuren met elkaar mixt krijg je een volledig kleurenwiel.

Kleurenwiel van Newton: Hoe meer naar binnen, hoe meer wit aan de kleur is toegevoegd. Hoe meer naar buiten, hoe meer zwart is toegevoegd. De echte kleuren bevinden zich in de middelste concentrische cirkel van het wiel.

In het creëren van een aangenaam kleurenpalet zit een beetje wetenschap. Daar gaat we het hieronder over hebben.

Verschillende kleurenschema's

Monochromatisch: Wanneer je variaties van dezelfde kleur gebruikt kan dat een prachtig effect geven, maar je bent bijna verplicht diverse accenten van wit en zwart toe te voegen. Kies daarom een kleur die je de mogelijkheid geeft genoeg contrast toe te voegen.

Analoog: Wanneer je kleuren selecteert die elkaar raken in het kleurenwiel krijg je een harmonieus kleurenschema. Net zoals monochromatische kleuren kunnen zij een warm of een koel gevoel geven, afhankelijk van hun plaats in het kleurenwiel.

Complementair: Kleuren van tegenovergestelde eindes van het kleurenwiel geven het meeste contrast. Als je de verleiding kan weerstaan van meer kleuren toe te voegen, beperk je dan tot twee kleuren om een krachtige look te creëren. Maar gebruik ze wijs, zodat ze niet vloeken.

Split Complementair: Deze variatie van het complementaire schema gebruikt twee kleuren aan beide zijden van een direct complementaire kleur. Deze kleuren hebben een hoog visueel contrast maar met minder spanning dan puur complementaire kleuren.

Triadisch: Drie kleuren gelijkwaardig gespreid over het kleurenwiel creëren een levendige visuele interesse. Sommige paletten zijn stevig, terwijl andere meer verfijnd zijn. Je kan wijzigingen aanbrengen door een lichtere tint of wat schaduw aan één van de drie kleuren toe te voegen in plaats van bij de echte kleur te blijven.

Tetradisch: Dit is een populair schema omdat het sterk visueel contrast biedt terwijl het toch harmonieus blijft. Het gebruikt twee paren van complementaire kleuren. Het is moeilijk dit schema harmonisch te maken wanneer je telkens evenveel licht of schaduw gebruikt, dus een beetje creativiteit is vereist. Gebruik een dominante kleur voor je design en gebruik de anderen om de hoofdkleur te ondersteunen.

Op http://www.paletton.com kun je op een vrij eenvoudige manier kleurenpaletten genereren met behulp van het kleurenwiel. Zie het plaatje hieronder voor een beschrijving van de belangrijkste onderdelen van deze website.

Opdracht

Genereer met de website http://paletton.com/ per techniek een aangenaam kleurenpalet. Het is aan te raden om met het knopje EXAMPLES (rechts onderin) te kijken naar een voorbeeld website met het kleurenpalet dat je hebt gegenereerd.