CSS - hoofdstuk 8

-

Positionering


In het vorige voorbeeld werd er gebruik gemaakt van het beïnvloeden van de float. We gaan er nu wat dieper op in.
Zonder een float op te geven, zijn er feitelijk 4 positioneringschema’s te onderscheiden:

  • Static
  • Relative
  • Absolute
  • Fixed

Static

Dit is eigenlijk gewoon de standaardwaarde (default) en dus de normale float. Je kunt dit gebruiken als je een element weer wilt terugzetten in de normale float

Relative

Bij deze techniek is er nog steeds sprake van een normale float maar heb je de mogelijkheid om elementen t.o.v. andere elementen te positioneren. Een voorbeeld maakt dit duidelijk
Open het bestand positionering_relatief.html. Je ziet in het style sheet het volgende staan:

<style type="text/css">
<!--
div {
background-color: #CC0;
width: 40%;
margin-bottom:5px;
height:70px;
}
-->
</style>

Een aardig detail is dat we voor de drie div’s zo in één keer de gemeenschappelijke kenmerken kunnen vastleggen. De div’s hebben nu even een hoogte zodat er voor het voorbeeld ook echt een blok te zien is.
We laten nu de tweede div wat inspringen naar rechts:

<style type="text/css">
<!--
div {
background-color: #CC0;
width: 40%;
margin-bottom:5px;
height:70px;
}
#tweede_div {
position: relative;
left: 10%;
}
-->
</style>

In Dreamweaver heb je daar het volgende scherm voor nodig:

Door de positionering op relative te zetten, geven we aan dat tweede_div 10% naar links gaat in vergelijking waar deze div normaal zou komen zonder ingreep; bij een normale float.
Er zijn zo veel mogelijkheden. Je kunt bijvoorbeeld de derde_div naast de tweede_div zetten:

<style type="text/css">
<!--
div {
background-color: #CC0;
width: 40%;
margin-bottom:5px;
height:70px;
}
#derde_div {
position: relative;
left: 45%;
top: -75px;
}
-->
</style>

Je krijgt zo een indeling met twee kolommen.

Fixed

Met deze instelling staat een element vast op de pagina. Een handige toepassing hiervan is het maken van een vaste achtergrond, een watermerk bijvoorbeeld. Je kunt natuurlijk ook een plaatje vast zetten.
Bedenk wel dat door deze instelling de normale float verstoord wordt.
Open het bestand fixed_position.html met een browser.
Indien je deze pagina laat scrollen zie je dat de achtergrond blijft staan. We kijken even naar het style sheet:

<style type="text/css">
<!--
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
}
#watermerk {
font-family: "Times New Roman", Times, serif;
font-size: 7em;
color: #FC3;
position: fixed;
left: 25%;
top: 25%;
z-index: -1;
}
-->
</style>

De position staat dus nu op fixed. Wat verder opvalt is het gebruik van de z-index. Door deze op -1 te zetten, dwingen we dat de inhoud van div watermerk achter de andere div’s komt. We komen op de z-index bij absolute positionering nog terug.
Instellen z-index:

 

Absolute

Bij absolute positionering zetten we de elementen zelf op het scherm, we bepalen dan eigenlijk zelf waar wat komt te staan, los van gebruikelijke positionering. De elementen worden uit hun natuurlijke float gehaald.
Open het bestand absolute_positionering. De derde div is nu naast de eerste gekomen doordat we de derde div een absolute positionering hebben meegegeven:


<style type="text/css">
<!--
div {
background-color: #CC0;
width: 40%;
margin-bottom:5px;
height:70px;
}
#derde_div {
position: absolute;
left: 42%;
top: 15px;
}
-->
</style>

 

Absolute positionering met Dreamweaver
Een handige manier is in Dreamweaver de verschillende div’s gewoon op het scherm tekenen. Zorg ervoor dat je in de Design View zit en in Layout. Kies nu voor de knop Draw AP Div (Absolute Position Division)

 

Je kunt nu met de muis de div op je scherm tekenen. Na het loslaten staat er een blauw kader op je scherm




 

In het Properties Panel zie je de eigenschappen uiteraard direct terug als de div geselecteerd wordt:



Bij een AP Div wordt altijd de z-index opgegeven. Deze waarde geeft de volgorde aan. Het kan voorkomen dat verschillende van deze div’s (gedeeltelijk) over elkaar heen vallen. Je kunt dan met de z-index aangeven welke bovenop moet komen. Hoe hoger de z-index hoe hoger “op de stapel”. Teken  je nu een tweede AP Div dan krijgt deze automatisch een z-index van 2. Je kunt de waarde uiteraard op elk gewenst moment wijzigen.

In het CSS panel zie je ook de kenmerken van deze div staan:

 

Absolute positionering is in Dreamweaver erg gemakkelijk. Je komt daarom snel in de verleiding je webpagina’s op deze manier te maken. Je moet je echter wel realiseren dat alles precies vastligt. Hierdoor ziet je webpagina er op allerlei verschillende schermresoluties zeer waarschijnlijk niet altijd goed uit. Verschillende elementen kunnen elkaar zelfs gaan overlappen! Een advies daarom is om het gebruik van abdiv's zo veel mogelijk te beperken. In toetsen is het gebruik van abdivs verboden.

Opdrachten

1. Open het bestand oefening 1

2. Maak vervolgens een indeling in drie kolommen

3. Geef iedere kolom een andere kleur

4. Geef de tweede kolom het lettertype Comic Sans MS

5. Zet een koptekst en een voettekst in het bestand

6. Geef de koptekst een plaatje als achtergrond

7. Zet in de voettekst de tekst "©jouw naam webdesign" met een plaatje

8. Geef pagina een watermerk met behulp van dit plaatje

9. Koppel de pagina aan je website met als naam CSS8

 

©jw webdesign