|
Home -> Manuali e Tutorials -> Guida HTML -> DIV Html
Scarica Guida HTML  | Stampa Tutorial HTML  | Cerca nel sito 
Realizzare un layout con il tag DIV
Il Tag DIV è molto usato per creare semplici layouts in alternativa a quelli creati con le tabelle; vediamo i suoi principali usi.
Divisione del Testo
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> |
Zona scrollabile
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. |
Altri esempi di Layout
|
ò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.
Torna su  | Indice Guida  | Pagina << 20 >>
|
