Il Tag DIV è molto usato per creare semplici layouts in alternativa a quelli creati con le tabelle; vediamo i suoi principali usi.
La sua principale funzione è quella di dividere il testo, o meglio assegnargli una nuova posizione ( CENTER, LEFT, RIGHT ):
| Paragraph 1 Paragraph 2 Paragraph 3 Paragraph 4 |
di codice:
| <DIV ALIGN=" right "> <P>Paragraph 1</P> <P>Paragraph 2</P> <P>Paragraph 3</P> <P>Paragraph 4</P> </DIV> |
Con il seguente codice:
| <DIV style=" Z-INDEX: 1; OVERFLOW: auto; WIDTH: 200px; COLOR: #ffffff; HEIGHT: 200px; BACKGROUND-COLOR: #000000 "> ... </DIV> |
viene inserita la seguente area scrollabile da me posizionata a centro pagina e all'interno di una tabella:
òdsafòld safòsdjlkòfjsdl kòfjsdgkjdlkgfdjslò jgfdkg jjdfògjseriop g549tèrogkglfgo go g fgopigopdi gdfop gidfopgisd ogèg igoig fdg . òdsafòld safòsdjlkòfjsdl kòfjsdgkjdlkgfdjslò jgfdkg jjdfògjseriop g549tèrogkglfgo go g fgopigopdi gdfop gidfopgisd ogèg igoig fdg . òdsafòld safòsdjlkòfjsdl kòfjsdgkjdlkgfdjslò jgfdkg jjdfògjseriop g549tèrogkglfgo go g fgopigopdi gdfop gidfopgisd ogèg igoig fdg . òdsafòld safòsdjlkòfjsdl kòfjsdgkjdlkgfdjslò jgfdkg jjdfògjseriop g549tèrogkglfgo go g fgopigopdi gdfop gidfopgisd ogèg igoig fdg . òdsafòld safòsdjlkòfjsdl kòfjsdgkjdlkgfdjslò jgfdkg jjdfògjseriop g549tèrogkglfgo go g fgopigopdi gdfop gidfopgisd ogèg igoig fdg . òdsafòld safòsdjlkòfjsdl kòfjsdgkjdlkgfdjslò jgfdkg jjdfògjseriop g549tèrogkglfgo go g fgopigopdi gdfop gidfopgisd ogèg igoig fdg . òdsafòld safòsdjlkòfjsdl kòfjsdgkjdlkgfdjslò jgfdkg jjdfògjseriop g549tèrogkglfgo go g fgopigopdi gdfop gidfopgisd ogèg igoig fdg . |
Come valori dell'attributo STYLE ci sono i soliti WIDTH ed HEIGHT per stabilire la larghezza ed altezza in pixel della zona scrollabile, il COLOR per la scelta del colore del testo ivi contenuto, il BACKGROUND-COLOR per la scelta del colore di sfondo dell'area, Z-INDEX necessario per stabilire quale layout ( nel caso ce ne siano più di uno nella stessa pagina ) deve essere messo in primo piano e quale in secondo; ad un minor numero corrisponde un layout in sottofondo.
Questo consente ad esempio di creare una cella di una tabella scrollabile: ( vedi codice )
| Questa è una normale cella senza scroll |
Questa è una cella di scorrimento. Dovrete inserire una quantità di testo sufficiente per ottenere questo effetto. Questa è una cella di scorrimento. Dovrete inserire una quantità di testo sufficiente per ottenere questo effetto. Questa è una cella di scorrimento. Dovrete inserire una quantità di testo sufficiente per ottenere questo effetto. Questa è una cella di scorrimento. Dovrete inserire una quantità di testo sufficiente per ottenere questo effetto. Questa è una cella di scorrimento. Dovrete inserire una quantità di testo sufficiente per ottenere questo effetto. |
|
òdsafòld safòsdjlkòfjsdl kòfjsdgkjdlkgfdjslò jgfdkg jjdfògjseriop g549tèrogkglfgo go g fgopigopdi gdfop gidfopgisd ogèg igoig fdg . òdsafòld safòsdjlkòfjsdl kòfjsdgkjdlkgfdjslò jgfdkg jjdfògjseriop g549tèrogkglfgo go g fgopigopdi gdfop gidfopgisd ogèg igoig fdg . òdsafòld safòsdjlkòfjsdl kòfjsdgkjdlkgfdjslò jgfdkg jjdfògjseriop g549tèrogkglfgo go g fgopigopdi gdfop gidfopgisd ogèg igoig fdg . òdsafòld safòsdjlkòfjsdl kòfjsdgkjdlkgfdjslò jgfdkg jjdfògjseriop g549tèrogkglfgo go g fgopigopdi gdfop gidfopgisd ogèg igoig fdg . |
|
òdsafòld safòsdjlkòfjsdl kòfjsdgkjdlkgfdjslò jgfdkg jjdfògjseriop g549tèrogkglfgo go g fgopigopdi gdfop gidfopgisd ogèg igoig fdg . òdsafòld safòsdjlkòfjsdl kòfjsdgkjdlkgfdjslò jgfdkg jjdfògjseriop g549tèrogkglfgo go g fgopigopdi gdfop gidfopgisd ogèg igoig fdg . òdsafòld safòsdjlkòfjsdl kòfjsdgkjdlkgfdjslò jgfdkg jjdfògjseriop g549tèrogkglfgo go g fgopigopdi gdfop gidfopgisd ogèg igoig fdg . òdsafòld safòsdjlkòfjsdl kòfjsdgkjdlkgfdjslò jgfdkg jjdfògjseriop g549tèrogkglfgo go g fgopigopdi gdfop gidfopgisd ogèg igoig fdg . òdsafòld safòsdjlkòfjsdl kòfjsdgkjdlkgfdjslò jgfdkg jjdfògjseriop g549tèrogkglfgo go g fgopigopdi gdfop gidfopgisd ogèg igoig fdg . |
Vengono qui messe a confronto due zone di testo scritte usando, rispettivamente, i seguenti codici:
| <DIV style = " position:relative; top:0; left:0; height:200; width:200; z-index:1; " > ... </DIV> |
| |
| <DIV align = " right "> ... </DIV> |
E' evidente la differenza tra i due layout ( il primo ha un aspetto più ordinato anche al variare delle dimensioni della finestra del browser ). Nel primo compare il valore POSITION:RELATIVE , quando in alternativa avrei potuto scrivere :ABSOLUTE : la differenza sta nel fatto che con il primo valore si inserisce il layout esattamente dove si è scritto, mentre con il secondo esso verrà visualizzato in una qualsiasi zona della pagina.