Index  HTML  CSS  ASP  PHP  VBScript
 Javascript  SQL  Links  Contact  Gastboek  

  CSS
  Groeperen
  Pseudo-Class
  Font
  Tekst
  Background
  Button
  Formulier
  Cursor
  Positie
  Z-index
  Visibility


Positie

Css is een zeer geschikt hulpmiddel om zaken op een bepaalde plaats te krijgen. Als je op een gegeven moment verder wil met dhtml om mooi uitziende menus te gaan maken, dan moet je de komende pagina's goed doornemen. Later heb je daar weer profijt van.

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 opzicht 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>

Klik hier... Voorbeeld

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 dhtml gebruiken, is dit ook het meest logisch. In andere gevallen zul je het niet zo snel nodig hebben.

Relatief positioneren

Bij het bepalen van de plaats op een relatieve manier, verplaats je het element relatief ten opzichte van de originele plaats. Dit in tegenstelling tot absoluut positioneren van elementen. Dan plaats je het element waar je het maar wilt.

<style type="text/css">
h1.pos1{
position:relative;
left:35; }
</style>

<body>
<h1 class="pos1">Hoofdstuk 1</h1>
<p>De eerste alinea. Als je voor 35 een min-teken zet, schuift de titel naar links op.</p>
</body>

Klik hier... Voorbeeld

In het voorbeeld staat tevens een h1 zonder toepassen van CSS en positioneren.