Posizionare il div attraverso il css
Il div è un elemento utilizzato per strutturare in un modo migliore una pagina web.
In molti, a posto del div, utilizzano il tag <table> per sistemare il layout della pagina ed inscatolare il contenuto, infatti questo metodo è sbagliato perchè le table sono nate per contenere dei dati.
Come posizionare un div?
Il tag <div> ha la possibilità di essere posizionato in un dato punto della pagina attraverso il CSS.
Utilizzando il metodo normale potremmo modificare il div con il seguente codice:
<div style="position:absolute; top:200px; left:200px;"> contenuto </div> |
In questo modo avremo guarda l’esempio.
Ma qualora volessimo un giorno cambiare il suo posizionamento, dovremmo andare a modificare tutte le pagine, per evitare questo ecco che entra in gioco il css.
Prima di tutto inseriamo nella nostra pagina html questo codice all’interno dei tag <body> </body> :
<div id="benvenuto"> Ciao, benvenuto in questo sito.</div> |
successivamente inseriamo il seguente nel css:
#benvenuto { margin-top:200px; margin-left:200px; } |
margin-top è la distanza in pixel tra il div ed il bordo superiore della finestra.
margin-left è la distanza in pixel dal bordo sinistro.
Puoi vedere il risultato nel seguente link esempio.