Regnery.net Internet

HTML CSS PHP MYSQL JQuery SEO – internetoplossingen

CSS positioneren

CSS is een zeer geschikt hulpmiddel om zaken op een bepaalde plaats te krijgen. Als je op een gegeven moment verder wil met het maken van mooi uitziende menus, dan moet je de komende pagina’s goed doornemen. Later heb je daar weer profijt van. Met CSS positioneren kun je elk onderdeel van je site op de gewenste plek krijgen.

CSS positioneren

Met behulp van position kun je een element op een bepaalde plaats krijgen. Dit kan relatief geplaatst worden of absoluut. Je moet dan bedenken dat je positioneert ten opzichte van een referentie box.

Simpel gehouden kun je stellen dat je een laag gaat plaatsen ten opzichte van de bovenkant en linkerkant van de body.

Voorbeeld:
<style type="text/css">
 .lay1 {
 width: 100px;
 height: 100px;
 background-color: #0080ff;
 position: absolute;
 top: 10px;
 left: 10px;
 }
 .lay2 {
 width: 150px;
 height: 150px;
 background-color: silver;
 position: absolute;
 top: 25px;
 left: 25px;
 }
 </style>
 <body>
 <div class="lay1">Laag 1</div>
 <div class="lay2">Laag 2</div>
 </body>

Als je het voorbeeld goed doorneemt, zul je zien dat hier twee lagen gedefinieerd worden. Een laag van 100 bij 100 pixels en een laag van 150 bij 150 pixels. Verder wordt bepaald waar de lagen moeten gezet door de browser. Laag 1 komt op 10 pixels van de bovenkant en 10 pixels van de linkerkant. Laag 2 komt op 25 pixels van de bovenkant en 25 pixels van de linkerkant.

In dit voorbeeld wordt als referentie voor het plaatsen van de lagen de body gebruikt van de pagina. Dit kan ook een table of een p zijn bijvoorbeeld. Op dit moment gaan we alleen uit van de body als referentiekader. Als we dit ter voorbereiding van JQuery gebruiken, is dit meteen van groot belang om een site flitsend te maken. In JQuery maak je namelijk onder andere gebruik van CSS om iets op het scherm te laten verdwijnen of weer te laten zien. De tool van CSS met betrekking tot positioning is dan onmisbaar.

Relatief positioneren

Bij het bepalen van de plaats op een relatieve manier, verplaats je het element relatief ten opzichte van de originele plaats. Dus een paragraaf heeft een eigen plaats op de site als je kijkt naar de opbouw van de site. Door de relatieve positioning te wijzigen, verplaats je de paragraaf ten opzichte van de eigen plaats. Dit in tegenstelling tot absoluut positioneren van elementen, waarbij je het element op precies de door jou gedefinieerde plek zet. Dan plaats je het element waar je het maar wilt hebben.

<style type="text/css">
h1.pos1{
position:relative;
left:35; }
</style>
<body>
<h1 class="pos1">Hoofdstuk 1 met relatieve position van 35 pixels naar rechts.</h1>
<h1>De eerste alinea. Als je voor 35 een min-teken zet, schuift de titel naar links op.</h1>
</body>

De eerste <h1>…</h1> tag staat 35 pixels naar rechts toe gepositioneerd. In het voorbeeld staat tevens een h1 zonder toepassen van CSS en positioneren. Deze staat op de plek waar de browser deze normaliter ook zou plaatsen. Zo krijg je een idee wat relatieve positionering kan doen voor jouw site.