Naam:  Wachtwoord:        Wachtwoord? Naam?   |   Register
Home CSS Positionering in CSS

Positionering in CSS

PDF Afdrukken E-mail
Webdesign - CSS

Positionering

Als we de berichten mogen geloven naderen we voorgoed het einde van statische webpagina's. Het toverwoord hiervoor is Dynamic HTML met als ingrediënten HTML, CSS en JavaScript. Eindelijk kunnen we dan met een druk op de knop HTML-elementen over de pagina laten zweven, verdwijnen en veranderen.

De belangrijkste voorwaarde om dit te kunnen bewerkstelligen is dat alle HTML-elementen op iedere willekeurige positie in de pagina kunnen worden geplaatst. Nu is dat niet mogelijk. Bij een afbeelding kunt u nu alleen aangeven of die links, rechts of in het midden van de pagina moet worden geplaatst. En als u tabellen kunt u hierin nog wat variatie brengen maar echt fantastisch is het allemaal niet.
Het hele positioneringsverhaal in CSS brengt hier verandering in. Nu kunnen we ieder element op de millimeter nauwkeurig en op iedere denkbare plaats op de pagina positioneren. En dat is niet alles. We kunnen ook aangeven of een element zichtbaar moet zijn of dat het verborgen moet worden en voegen we aan dit geheel tenslotte een scriptje dan leuke dynamische effecten bereiken.
Omdat de elementen door positionering los komen van de vaste plaats op het canvas, het zichtbare gedeelte in de browser, kunt u nu ook door middel van een scripttaal deze elementen verplaatsen van punt A naar punt B, waardoor het maken van animaties in HTML mogelijk wordt.
Voordat we gaan bekijken hoe het hele position verhaal werkt, willen we wel wijzen op de onoverbrugbare verschillen die er op dit moment optreden bij de verschillende browsers. We geven u twee voorbeelden. Microsoft Internet Explorer kan niet over weg met het absoluut positioneren van HTML-elementen, tenzij de division-tag wordt gebruikt. Netscape Navigator kan dit wel. Daarentegen kan Navigator niet overweg met de grafische presentatie van de division-tag. Explorer kan dit wel. Net zoals ik, zult u waarschijnlijk ook niet aan het nodige puzzelwerk ontkomen om een optimale pagina te kunnen maken.

Beide pagina's maken gebruik van dezelfde CSS-code.cursus css
















De eigenschap 'position'
Om elementen op een pagina te kunnen positioneren moet u gebruik maken van de eigenschap 'position'. Deze eigenschap kan drie waarde hebben absolute, relative en static. Met de waarde absolute kunt u de exacte positie van een element aangeven.
Deze positie word berekend vanaf de linker bovenhoek, met de coördinaten 0,0. De eerste coördinaat geeft de positie naar links (left) aan terwijl de tweede coördinaat de positie vanaf de bovenkant berekent (top). Bij het absoluut positioneren wordt er niet gekeken naar de andere elementen op de pagina. Praktisch betekent dit dat als u een kop in een paragraaf absoluut positioneert deze ergens anders op de pagina terecht komt zonder dat de paragraaf mee verhuisd.

Als u de waarde relative gebruikt dan wordt het element gepositioneerd ten opzichte van de plaats die het normaal in het document zou innemen. Relatief positioneren wordt dan ook vaak gebruikt voor om dynamisch effecten te realiseren.
De waarde static wordt standaard geselecteerd bij het positioneren. Zoals de naam al doet vermoeden kunnen statische elementen niet worden verplaatst of gepositioneerd. Dit geldt tevens voor alle kind-elementen die zij in zich dragen.
Om het één en andere te verduidelijken geven we u een aantal voorbeelden. De HTML-code van deze pagina ziet er zonder de tekst maar met de selectors er als volgt uit:

<BODY>
<P class=p1> 15 regels tekst </P>
<P class=p2> 15 regels tekst </P>
<BR><BR>
<P class=p3> 15 regels tekst </P>
</BODY>

Deze code levert het volgende beeld op:

cursus css




















We gaan nu de tweede paragraaf absoluut positioneren en om de gevolgen daarvan beter te kunnen waarnemen maken we de achtergrond geel. Met de volgende style sheet plaatsen we de tweede paragraaf 250 pixels naar links en 50 naar beneden.

<STYLE type="text/css">
<!--
.p2 { background: #FFFF00; position: absolute; left: 250px; top: 50px}
-->
</STYLE>

cursus css


U kunt zien dat de paragraaf zich niets aantrekt van de eerste paragraaf door zich er gewoon overheen te plaatsen. Dit is ook zo bepaald in de specificatie. Hoe u daar vanaf kunt wijken zullen we zo zien. Het tweede wat opvalt, is dat de paragraaf zich aanpast aan de schermresolutie. In dit geval is de hoogte van de paragraaf groter geworden. Als we nu in de style sheet 'absolute' vervangen door 'relative', dan komt de afbeelding er zo uit te zien.

cursus css




















De meest in het oog springende verschil is, dat de tweede paragraaf niet meer helemaal zichtbaar is. Met relatieve positionering moeten we dan ook heel voorzichtig zijn, zodat we niet de marges van de webpagina overschrijden. Het oorspronkelijke idee voor relatief positioneren was dat je een element kon laten bibberen of exploderen. Zo kunnen een paar woorden of letters in een alinea door een script een klein beetje worden bewogen rond hun normale positie, zonder dat de rest van de tekst daardoor van plaats verandert. Daarnaast kunt u relatief positioneren goed gebruiken voor sub- of superscript. Kijkt u maar eens.

cursus css























Zoals u heeft gezien bij het absoluut positioneren, is het mogelijk dat delen van de tekst elkaar overlappen. In het getoonde voorbeeld is dat storend omdat een deel van de tekst niet meer leesbaar is. Op andere momenten wilt u misschien juist dit effect bereiken. Bijvoorbeeld als u tekst over een plaatje wilt laten lopen. Als u dit wilt doen kunt u gebruik maken van de eigenschap z-order. Deze eigenschap bepaalt hoe de verschillende elementen worden getoond over de x-as (de diepte-as). De eigenschap heeft als standaard de waarde auto. Hiermee wordt bedoeld dat elementen in de pagina van achter naar voor verschijnen op de pagina in volgorde waarop ze in het HTML-document voorkomen. Wilt u hier verandering in brengen, dan kunt u hier een integer getal invullen (een heel getal). Een hogere integer zorgt er voor dat het element boven op een ander element wordt geplaatst.
In de style sheet,

<STYLE type="text/css">
<!--
.layer1 { font-size:36pt; font-weight: 800;"}
-->
</STYLE>

met in de body,

<BODY>
<DIV id=#division1 style="position:absolute; left:248px; top:65px; width:300px; height:187px; z-index:1">
<P class="division1">
<IMG src="/rr6.jpg" width="300" height="225">
</P>
</DIV>

<DIV id=#division2 style="position:absolute; left:439px; top:88px; width:206px; height:62px; z-index:2">
<P class="layer1">Jamaica.</P>
</DIV>
<BODY>

komt het er dan zo uit te zien.

cursus css

















Wisselen we de z-index van division 1 en 2 om dan komt de afbeelding er minder mooi uit te zien, omdat een deel van de tekst wegvalt.

cursus css
















Natuurlijk zou het veel leuker zijn als u het woord Jamaica door een druk op een knop kon laten verschijnen en verdwijnen. Om dit te kunnen bewerkstelligen moet u in eerste instantie de eigenschap Visibility toepassen. Deze eigenschap bepaalt of een element moet worden getoond of niet. Hiervoor kunt u de waarde 'visible' en 'hidden' gebruiken. U moet hier wel bij opletten dat een 'hidden' element wel dezelfde ruimte in beslag neemt als anders. Praktisch gezien kunt u natuurlijk niets met deze eigenschap alleen, want een niet getoond element hoeft ook niet te worden geplaatst. Gebruikt u echter een klein scriptje dan kunt u door middel van een knop, een dubbelklik of een andere actie het onzichtbare element laten tonen.

Bij het absoluut positioneren van elementen moeten we altijd opletten dat alles binnen de marges van de pagina blijft. Doen we dat niet dan vallen delen van de tekst weg.

cursus css

















Om dit probleem voor te zijn kunt u gebruik maken van de eigenschap overflow, dat als standaard de waarde 'visible' heeft. Deze waarde geeft aan dat alle inhoud altijd moet worden getoond. Praktisch betekent dit dat de paragraaf anders zal worden gerenderd.
Wilt u dat de afmetingen hetzelfde blijven, dan kunt u er ook voor kiezen om de waarde scroll te gebruiken. Deze waarde zorgt ervoor dat er een horizontale of verticale scroll balk wordt geplaatst.

Deel dit bericht met anderen

Submit to Delicious Submit to Digg Submit to Facebook Submit to Google Bookmarks Submit to Stumbleupon Submit to Technorati Submit to Twitter Submit to LinkedIn

Commentaar (0)add comment


Schrijf commentaar

feedToon/Verberg commentaar formulier
kleiner | groter
password
 

busy
 

Lente Actie!

Omdat het lente is, vieren we feest! We geven daarom alleen in de lente 50 euro korting op alle basistrainingen van Avid Studio, Magix Video deluxe, Sony Vegas Movie Studio en Adobe Premiere Elements.

U betaalt dus geen 149 euro per trainingsdag, maar 99 euro. Schrijf je snel in, want er zijn maar een beperkt aantal plaatsen beschikbaar!

Cursussen en trainingen

Dvscene geeft trainingen en cursussen in het trainingscentrum van Iscenes multimedia.

Er zijn verschillende cursussen per pakket voor beginners en gevorderden.  U kunt zich inschrijven voor de volgende cursussen en trainingen:

 

 

 

Dvscene.nl is onderdeel van Iscenes multimedia specialist in videomontage-, cms- en cameratrainingen. Copyright © 2012. Dvscene.nl.