CSS - hoofdstuk 8

-

De float van een element

Met de float van een element wordt de natuurlijke “uitrol” over de pagina bedoeld. In principe is het zo dat de elementen door de browser volgens precies vastgestelde regels op de pagina worden gezet. Hiervoor wordt het style sheet van de browser gebruikt.

De twee basis regels zijn als volgt:

  • Block level elementen komen achter elkaar op de pagina, gewoon onder elkaar in de volgorde waarin ze in de HTML-code voorkomen.
  • Inline elementen komen naast elkaar op de pagina, gewoon van links naar rechts over de pagina.
  • De belangrijkste block level elementen zijn: <h1>…<h6>, <p>, <blockquote>, <ol>, <ul>, <li>, <dl>, <dt>, <dd>, <hr> en <div>.
    Deze elementen beginnen meestal op een nieuwe regel.
  • De belangrijkste inline elementen zijn:<a>, <b>, <br>, <em>, <font>, <i>, <img>, <span>, <strong> en <u>.
    Inline elementen bevatten over het algemeen tekst, afgezien van <img>. Inline elementen kunnen eigenlijk alleen andere inline elementen bevatten. Ze hoeven niet op een nieuwe regel te beginnen.

Op http://www.cs.sfu.ca/CC/165/sbrown1/wdgxhtml10/inline.html zie je een volledig overzicht.

Een belangrijke conclusie die we nu al kunnen trekken is dat block level elementen dus inline elementen kunnen bevatten, een div bijvoorbeeld kan tekst bevatten met weer <i>, <b>, <em> etc.

We kunnen met behulp van CSS de natuurlijke float beïnvloeden. Sommige webdesigners zeggen dan dat de elementen gaan zweven, ze verdwijnen uit de normale bezetting op de pagina (een van de vertalingen van float in het Nederlands is namelijk zweven).

Een zeer belangrijke regel bij het beïnvloeden van de float:
Door de float te beïnvloeden, haal je de elementen als het ware uit de normale bezetting. Voor de andere elementen op de pagina bestaat het element niet meer en nemen de vrijgekomen ruimte in.

We demonstreren wat er kan gebeuren als je de float gaat instellen.
Open de pagina float_demo1.html. Dit is een pagina met drie div’s die voor de demonstratie een vaste breedte en hoogte hebben gekregen. Ze worden verpakt door een container met een achtergrondkleur, die ook een vaste breedte heeft. Zoals je mag verwachten van block level elementen, komen ze keurig onder elkaar.
Open nu float_demo2.html. In deze pagina hebben de drie div’s allemaal een float naar links gekregen en komen dus nu naast elkaar omdat ze elkaar niet zien. Div 2 denk dat div 1 weg is en schuift nu naar boven, div3 denkt dat div2 weg is en schuift dus nu ook naar boven. Je ziet echter ook dat de achtergrond van de container weg is! De container ziet nu geen inhoud meer daar de drie div’s een float hebben en dus geen deel meer uit maken van de normale pagina bezetting! De container heeft dus geen afmetingen meer nodig, hoeft niets meer te verpakken.

Hoe gebruiken we nu het beïnvloeden van de float in een webpagina?

Opdracht

1. Open het bestand float.html.


In deze pagina komen de elementen (allemaal Block level) keurig in volgorde achterelkaar op het scherm. Dat willen we niet. We willen de navigatie aan de linkerkant met daarnaast de hoofdtekst en daaronder de voettekst. We gaan nu met behulp van CSS de natuurlijke float beïnvloeden.
We beginnen met div navigatie, deze moet naar links en smaller. Indien je de float gaan beïnvloeden dan MOET je in ieder geval de breedte van het element aangeven.

2. Maak een nieuwe style regel aan met behulp van het CSS-panel:


en:

We hebben de div navigatie nu een float naar links gegeven (zweeft naar links) en de breedte mag maar 20% zijn van de totale breedte. (We hebben dus 2 stijlregels ingevoerd) Je mag ook een breedte in een andere eenheid opgeven. Het voordeel van procenten is weer dat het een relatieve maat is, waardoor verhoudingen tussen de verschillende elementen op je pagina goed behouden blijven.

Je hebt het volgende beeld gekregen (in Design View):


De navigatie zit nu op de gewenste plaats.

Doordat er nu aan de rechterkant ruimte is gekomen op de pagina (div navigatie is immers “weg”), komt de div met de hoofdinhoud naast de div met de navigatie! Precies wat we wilden bereiken. De inhoud van de div hoofdinhoud loopt dus rond de navigatie div.

Omdat we graag willen dat de pagina op ieder formaat beeldscherm goed weergegeven wordt, werken we met relatieve maten en overschrijden we nooit de 100%. Als we de div navigatie dus op 20 % zetten, blijft er voor de hoofdtekst 80 % over. Omdat de div hoofdtekst onder de div navigatie zit moeten we ook de hoofdtekst een float naar links geven om hem op zijn plaats te krijgen.

3. De div footer, de voettekst loopt echter ook rond de div navigatie. Dat willen we niet! We kunnen dat verhelpen door er voor te zorgen dat de voettekst niet meer rond de div navigatie uitrolt. Voor de voettekst moet de div navigatie weer te zien zijn, zodat deze weer gewoon onder de div navigatie komt. In CSS hebben we de mogelijkheid om de float te “clearen”. We lossen dat als volgt op:

#footer {
clear: left;
}

Let goed op het principe! Het ongedaan maken van een float, ingesteld bij een ander element maak je pas ongedaan bij dat element dat niet meer gevoelig moet zijn voor die float.

We maken nu een nieuwe stijlregel voor de div footer aan:

Nu start de div footer keurig onder de div navigatie. Indien je meer inhoud toevoegt aan de div navigatie schuift de voettekst keurig verder naar onderen. Met behulp van clear float stop je dus de float. Je moet wel steeds aangeven welke float (left, right en both) er “gecleared” moet worden.

4. Het is overigens handig om in je style sheet een klasse clearfloat aan te maken. Je kunt dan op elke gewenst moment een float stoppen:

.clearfloat {
margin: 0px;
clear: both;
height: 0px;
}

 
dus:
We zetten de marge (margin) en de hoogte op nul zodat we er zeker van zijn deze klasse alleen de float beëindigt en geen ongewenste veranderingen in de lay-out aanbrengt doordat de browser deze klasse afmetingen gaat geven.

5. Een andere tekortkoming in deze lay-out is dat de tekst erg dicht tegen de randen van de div aanzit. Je kunt de oplossen door de padding van de div in te stellen.

!! Let er wel op dat het toevoegen van een padding de div groter maakt!

Je hebt nu een eerste vorm van een webpagina zoals veel gebruikt.

Met CSS kun je elk element op een webpagina heel precies plaatsen.

6. Geef iedere div een andere kleur

7. Geef de body een achtergrond

8. Aanschouw het uiteindelijke resultaat

9. Koppel deze webpagina aan je index-pagina met als naam "CSS8"

 

 

 

 

 


 

 

 

©jw webdesign