Positioneren in CSS

Info 
Door: Zorzie Moeilijkheidsgraad: 2/3
Views:23.834Reacties: 5(Bekijken)
  Log in om zelf te reageren
 Waardering:6.3/10 (3 stemmen)



Ok, laten we het eens hebben over positioneren in CSS. Op zich is dit onderdeel niet zo moeilijk, mits je al een dosis CSS onder de knie hebt.Ik vertel er je alles over in de volgende tutorial.

Om te beginnen, leg ik je even uit wat je met positioning kan doen. Zoals uit de naam af te leiden valt, gaat het hier om het specifiek plaatsen van een object op je site. Je kan het doen naargelang pixels of percentagens. Men kan positioneren vanaf alle mogelijke randen. Dit zijn : top, bottom, left & right. Deze worden dan ook gebruikt als attribuut, maar daarover later meer.
Positioneren is vooral handig als men een object ergens precies in je page wil plaatsen. Bijvoorbeeld een image op 10 pixels van de rand.
Er bestaan 2 soorten positioning : absolute en relative.

Absolute
Absolute positioning is het positioneren vanaf de rand van een browser. Het object dat je postitioneert (table, div, image), moet dus berekend worden telkens vanaf de randen van de browser. Hieronder volgt een voorbeeld voor absolute positioning met pixels, maar men kan natuurlijk ook alles in procenten uitdrukken:
1.Eerst maken we een niewe class(of id) aan. Ik noem deze class gemakkelijkshalve .absolute, maar hij kan ook een andere naam hebben.

#Code
1
.absolute{}

2. In die class gaan we weergeven dat we gaan positioneren met het attribuut positioning. We geven ook meteen weer dat het om absolute positioning zal gaan.
#Code
1
.absolute{ position : absolute ; }

3. Nu gaan we aangeven waar we het object willen plaatsen, dit doen we met de attributen 'left', 'right', 'top' & 'bottom'.
#Code
1
2
3
4
5
6
.absolute {position : absolute ;
left : 100px ;
right : 200px ;
top : 50px ;
bottom : 20px ;
}

*apendix : niet alle attributen (left, right, top & bottom) moeten gebruikt worden, men kan ook maar 1 of meerdere atributen naar keuze gebruiken.

Relative
Relative postitioning is het plaatsen van een object in een bestaand object (bv. frame) en wordt dus niet berekend van de randen van de browser, maar vanaf de randen van het object waarin het zich bevindt. Ik geef hier even vlug een voorbeeld van een class met relative postitioning. De opbouw is hetzelfde als absolute positioning. Ik geef hier een voorbeeld in percentages :
#Code
1
2
3
4
5
6
.relative { position : relative ;
left : 20% ;
right : 50% ;
top : 25% ;
bottom : 30 % ;
}

*apendix 1 : ook hier moeten niet alle attributen gebruikt worden.
*apendix 2 : relative positioning werkt niet in tabellen.

De waarden in positioning kunnen ook negatief zijn, zodat een deel van het object dat gepositioneerd wordt buiten het venster of het object waarin het gepositioneerd wordt, valt.

Zo, ik hoop dat jullie alles weten over positioneren. Als er vragen zijn, kunnen die altijd in het forum gesteld worden.

Tot de volgende
Zorzie

5 reacties
GeertB Geplaatst op 11-06-2007 om 21:39
 

Regular
Hoe dan ik als volgt positioneren:
object blijft altijd onder in het browservenster, dus zit als het ware vast aan de statusbalk.
omarjuul Geplaatst op 15-01-2007 om 16:29
 

Regular
position: fixed is idd ook een handig hulpmiddel. Ik gebruik het vaak. Jammer dat !@#$%^&* Internet Explorer het niet ondersteund...
Woedi Geplaatst op 02-03-2006 om 13:42
 

Regular
Bedankt,dit heeft me veel geholpen ;)
dexus Geplaatst op 22-06-2005 om 23:22
 

Regular
fixed en static bedoel je ;)
aRAchNiON Geplaatst op 12-01-2005 om 17:05
Avatar van aRAchNiON

Moderator
waar zijn fixed & inline?

Pagina 1 

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!


Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be, uw Hosting Solution Builder