Deze les gaat over het weergeven van elementen. Elementen
zijn (zoals je nu eigenlijk wel moet weten) tekst, borders, plaatjes,
frames, lijnen, muziek, alles wat maar op een pagina zichtbaar is of
ingevoegd is. Alles wat je schrijft of maakt voor je website is een
element van het geheel. Hieronder een heleboel voorbeelden van hoe je
een element eruit kunt laten zien! Er valt weinig aan uit te leggen.
Zo zijn de regels. Neem deze website op in jouw favorieten zodat je
deze regels altijd nog eens na kunt kijken.
Hoe laat je een elementen zien:
Zo wordt een element niet weergegeven maar staat wel in de bron:
X {display: none}
Zo wordt een element gewoon als tekst weergegeven, zonder enters of
speciale elementen. Alleen tekst.
X {display: inline}
Beneden meer display(weergave) functies in de tabel.
Alle plaatjes tegen de rechterkant laten weergeven:
<style type="text/css">
img
{
float: right
}
</style> (Kan uiteraard ook met left, top en bottom)
Dit geeft aan de de tekst +20 van de linker kant weergegeven wordt.
position:relative;
left:20
Hoe kan het ook anders, dit geeft aan dat de tekst -20 van de linker
kant af komt. (dus half zichtbaar)
position:relative;
left:-20
Zo geef je de tekst 100 pix van links en 150 pixels van boven weer.
<style type="text/css">
h1.x
{
position:absolute;
left:100;
top:150
}
</style>
</head>
Weet je niet meer hoe je dit oproept in de body? Zo dus:
<h1 class="x">"De tekst die 100 van links en 150
pixels van boven verschijnt.</h1>
Om te zien hoe je een element als een cursor kunt veranderen
kijk je bij cursor!
Nog meer mogelijkheden om een element weer te geven:
| display:
|
Beschrijving |
| none |
Het element wordt niet weergegeven. |
| block |
Het element wordt weergegeven als een
block-level element. Met een <br> voor en na het element. |
| inline |
Het element wordt weergegeven zonder
regel afkappingen. Alles wordt achter mekaar geschreven zonder <p>
of <br>. |
| list-item |
Het element wordt weergegeven in een
lijst. |
| run-in |
Het element wordt weergegeven als een
block of een inline element. Ligt aan de inhoud. |
| compact |
Het element wordt weergegeven als een
block of een inline element. Ligt aan de inhoud |
| marker |
Het element wordt als gemarkeerd weergegeven. |
| table |
Het element wordt weergegeven als een
block tabel. Met een <br> voor
en na de tabel! |
| inline-table |
Het element wordt weergegeven als een
inline tabel. Zonder <br> voor
of achter het element. |
| table-row-group |
Het element wordt weergegeven als een
groep met één of meer rijen. (Zoals <tbody>)
|
| table-header-group |
Het element wordt weergegeven als een
groep met één of meer rijen. (Zoals <thead>) |
| table-footer-group |
Het element wordt weergegeven als een
groep met één of meer rijen. (Zoals <tfoot>) |
| table-row |
Het element wordt weergegeven als een
tabel rij. (Zoals <tr>) |
| table-column-group |
Het element wordt weergegeven als een
groep met één of meer rijen. (Zoals <colgroup>) |
| table-column |
Het element wordt weergegeven als een
kolom met cellen. (Zoals <col>) |
| table-cell |
Het element wordt weergegeven als een
tabel cel. (Zoals <td> en <th>) |
| table-caption |
Het element wordt weergegeven als een
tabel titel. (Zoals <caption>) |
