|
Plaatsing op de pagina
Deze les gaat over het plaatsen van elementen op een pagina. Er zijn
verschillende mogelijkheden om elementen op een pagina te plaatsen.
Plaats dit bijvoorbeeld in de <head>:
X
{
position: absolute;
top: 100px;
left: 100px
}
X is het element dat 100 pixels van de boven en de linker zijkant geplaatst
wordt.
Nu andersom:
X
{
position: absolute;
bottom: 30px;
right: 40px
}
Nu wordt element X 100 pixels van de onder en rechter zijkant geplaatst.
Een i-frame in CSS:
X
{
background-color:#X;
width:150;
height:150;
overflow: scroll
}
Een i-frame 150 hoog en 150 breed. Met de achtergrondkleur: X
Een plaatje achter de tekst plaatsen:
img.X
{
position:absolute;
left:0;
top:0;
z-index:-1
}
Als je bij z-index:-1 de min(-) weghaalt dan wordt het plaatje weer over
de tekst heen geplaatst. Het plaatje wordt nu helemaal in de linker boven
hoek geplaatst (left:0 en top:0)!
Zo roep je het plaatje op: <img class="X"
src="">
Zo laat je bijvoorbeeld alle plaatje aan de linker wand verschijnen:
img
{
float: left
}
Dit kan ook lelijk uitpakken dus pas dit alleen toe als je niet anders
kunt!
Dit zijn de functies voor het plaatsen van elementen op een pagina.
Je hebt geleerd:
- Dat je plaatjes achter een tekst kunt plaatsen
- Hoe je een soort i-frame kunt maken met CSS. Het is nou geen pagina
in het frame maar de inhoud die jij aangeeft!
- Hoe je een element met maten van een zijkant/bovenkant/onderkant plaatst.
- Hoe je een soort i-frame een achtergrondkleur geeft.
- Hoe je alle dezelfde elementen tegen een wand van de browser laat
weergeven.
Op deze pagina zijn
een paar werkende voorbeelden zichtbaar, bekijk de bron voor de codes.
Verder zijn er weinig andere plaatsingsmogelijkheden. Er zijn ook weinig
andere wensen denkbaar dus hier moet het mee lukken denk ik.
|
