Come realizzare un layout liquido

charly

Posted on 21/11/2009, 08:58

User deleted

colonna sinistra:180px;
colonna centrale:dimensioni variabili a seconda dello spazio disponibile;
colonna destra:180px.
Layout liquido con le Tabelle
Creiamo una pagina web e scriviamo tra <body> e </body> il seguente codice:

CODICE

<TABLE width="100%" cellspacing="0" cellpadding="10" border="0" >
<TR>

<TD width="180" valign="top">Inserire contenuto colonna sinistra</TD>

<TD valign="top" >Inserire contenuto colonna centrale</TD>

<TD width="180" valign="top" >Inserire contenuto colonna destra</TD>
</TR>
< /TABLE>

Layout liquido con i CSS
Creiamo una pagina web e definiamo tra <head> e </head> il seguente CSS:

CODICE

<STYLE type="text/css">
#sinistra { position: absolute; top: 80px; left: 20px; width: 180px; }
#destra { position: absolute; top: 80px; right: 20px; width: 180px; }
#centro { position: absolute; top: 80px; padding-left: 220px; padding-right: 220px; }
< /STYLE>

Fatto questo, tra <body> e </body> scriviamo il seguente codice:

CODICE

< DIV id="centro">Inserire contenuto colonna centrale< /DIV>
< !-- Colonna destra -->
< DIV id="destra">Inserire contenuto colonna destra< /DIV>
< !-- Colonna sinistra -->
< DIV id="sinistra">Inserire contenuto colonna sinistra< /DIV>

0 replies since 21/11/2009, 08:58 109 views