Home

Positionering met CSS

In principe gaat het er hierbij om normale stylesheet aanwijzingen, die net als de andere stylesheets kunnen worden gebruikt in de <BODY> van de pagina's. Daartoe wordt een deel van de paginainhoud gedeclareerd met de HTML-tag <DIV> of met <SPAN>. Met het attribuut STYLE kun je dan het gehele ingesloten deel naar wens positioneren.

<div style="position:absolute; left:10px; top:208px; width:340; height:340; background-image:url(../images/rocks.jpg);">
</div>
<div style="position:absolute; left:108px; top:323px;">
<img src="../images/bulb.gif" width="133" height="179">
</div>
<div style="position:absolute; left:45px; top:376px;">
<strong>Prestatie</strong>
</div>
<div style="position:absolute; left:242px; top:349px;">
<strong>Concepten</strong>
</div>
<div style="position:absolute; left:148px; top:302px;">
<strong>Idee&euml;n</strong>
</div></td>

Prestatie
Concepten
Ideeën

Verdere mogelijkheden met CSS properties

Door aanvullend de breedte (width:) en hoogte (height:) van een CSS-layer op te geven, kun je de buitenmaten van een vlak opgeven.
Met background-image:url(../images/..jpg); voeg je een achtergrond afbeelding toe of met background-color: #99CCFF; een achtergrondkleur.
Met border:1px solid #000000; specificeer je een optionele omlijsting. Waarbij de waarde 1 de dikte in pixels is, daarna wordt bepaald hoe de omlijsting eruit moet zien (none, dotted, dashed, solid, double, groove, ridge, inset, outset) en dit wordt gevolgd door de kleur.
In principe kunnen alle CSS properties gebruikt worden.

Zie hiernaast de code met de properties die vormgeven aan dit textblok (layer).

<div style="position:absolute; left:10px; top:588px; width:340px; height:327px; background-color:#99CCFF; border:1px solid #000000;">
<p><strong>Verdere mogelijkheden met CSS properties</strong>...

...Zie hiernaast de code met de properties die vormgeven aan dit textblok (layer).</p>
</div>

Naar boven