Redazione
a- a+

I livelli

Con html tutti hanno usato le tabelle per realizzare l'impaginazione dei documenti, questo non era proibito, ma le tabelle erano nate per intabbellare i dati; con XHTML le tabelle devono tornare alla loro funzione originaria ed usare i livelli come contenitori dei vari elementi della pagina.

Introduciamo dunque il livello che conterrà la nostra immagine:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<style type="text/css">
h1 { color: black; background: yellow; }
#immagine{position:absolute;top:100px;right:200px;}
</style>

<html>
<head>

<title>0001: "Gol di Sergio Verdi"</title>

</head>
<body>

<h1>"Gol di Sergio Verdi"</h1>

<p>

<div id="immagine"><img src="gol.jpg" align="right" alt="Gol" /></div>

Oggi allo stadio grande esibizione<br />
del centrocampista Sergio Verdi.
</p>
<span> Marco Bianchi</span>
</body>
</html

Come si vede tra gli attributi di stile è stata aggiunta la riga:

#immagine{position:absolute;top:100px;right:200px;}

Il cancelletto è un simbolo selettore di livello, mentre il nome immagine è inventato e può essere di fantasia purchè univoco: non è possibile chiamare due livelli differenti con lo stesso nome.

Dentro le parentesi graffe abbiamo position : absolute che indica come la posizione sia da considerarsi assoluta all'interno dell'intero documento; top:100px indica che il livello è a 100 pixel dall'alto o top dello schermo ed è a 200px da destra (right); definita in questo modo la posizione, all'interno del body posso richiamare l'istruzione tramite il tag <div id="immagine"></div> dove div indica un livello mentre id è l'identificatore del livello specificatamente per il nome che lo segue dopo il simbolo uguale.



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Luca
Ti è piaciuto l'articolo?