CSS - hoofdstuk 9

-

Positionering


In het vorige hoofdstuk werd er gebruik gemaakt van het beïnvloeden van de float. Je kunt html elementen ook op een andere manier op een bepaalde plaats neerzetten door middel van positioneren.

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.
Dit geeft 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 Kort Amerikaans 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


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!

In modern webdesign is dat een absolute doodzonde. Je website moet er op ieder beeldscherm goed uitzien.

Je moet apdivs daarom eigenlijk niet toepassen.

In toetsen is het gebruik van apdivs 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. Het uiteindelijke resultaat kan zoiets als dit zijn.

Koppel de pagina aan je website met als naam CSS9

 

©jw webdesign