pagina con 2 righe di 2 e di 3 colonne

**pisistrate** · 22-05-2009, 10:16

vorrei fare una pagine con i css ma non ci riesco

vorrei una pagine così

codice:

intestazione
colonna sinistra | colonna destra ----> centro
1 colonna | 2 colonna | 3 colonna ----> corpo
pie di pagina

ma il centro ed il corpo si sovrappongono

dove sbaglio

grazie

paolo

codice:

<html>
<head>
<style type="text/css"> 
body { margin:0; padding:0 } 
hr { display:none } 
body { text-align:center }  
#testa { width:760px; margin:1em auto; text-align:left; border: 1px solid; }  
#centro { position:relative; width:760px; margin:1em auto; text-align: left; }  
#centro-sinistra { position:absolute; top:0; left:0; width:300px; border: 1px solid; background-color: yellow; padding: 5px; }  
#centro-destra { position:absolute; top:0; right:0; width: 300px; border: 1px solid; background-color: orange; padding: 5px; }  
#corpo { position:relative; width:760px; margin:1em auto; text-align: left; }  
#corpo-colonna1 { position:absolute; top:0; left:0; width:140px; border: 1px solid; background-color: red; padding: 5px; }  
#corpo-colonna2 { margin:0px 160px 0px 160px; border: 1px solid; background-color: blue; padding: 5px;  } 
#corpo-colonna3 { position:absolute; top:0; right:0; width: 140px; border: 1px solid; background-color: green; padding: 5px; }  
#piedipagina { width:760px; margin:1em auto; text-align:left; border: 1px solid; }  
</style> 
</head> 
<body> 
 
<div id="testa"><h1>NomeSito </h1></div>  <hr /> 
 
<div id="centro"> 
<div id="centro-sinistra">centro-sinistra</div> <hr /> 
<div id="centro-destra">centro-destra</div>  
</div>
 
 
<div id="corpo">
<div id="corpo-colonna1">corpo-colonna1</div> <hr /> 
<div id="corpo-colonna2">corpo-colonna2</div> <hr /> 
<div id="corpo-colonna3">corpo-colonna3</div>  
</div> 
 <hr /> 
 
<div id="piedipagina">

pié di pagina</p></div> 
 
</body> 
</html>

**Mich_** · 22-05-2009, 10:33

E` moilto difficile fare quello che chiedi posizionando i blocchi con il position (in qualche caso potrebbe essere impossibile rendere la cosa cross-browser).

Devi cambiare approccio, e basarti sui float.

Quindi devi usare uno schema di questo tipo:

codice:

HTML:
<div id="testa"><h1>NomeSito </h1></div> 

<div id="centro" class="cleared"> 
  <div id="centro_sinistra">centro-sinistra</div>
  <div id="centro_destra">centro-destra</div>  
</div>

<div id="corpo" class="cleared">
  <div id="corpo_colonna1">corpo-colonna1</div> 
  <div id="corpo_colonna2">corpo-colonna2</div>
  <div id="corpo_colonna3">corpo-colonna3</div>  
</div> 

<div id="piedipagina">

pié di pagina</p></div> 


CSS:
.cleared:after {
  /*vedi [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float */
}

#testa {
  width: 760px;
  margin: 1em auto;
  text-align: left;
  border: 1px solid; 
}  

#centro {
  width:760px;
  margin:1em auto;
  text-align: left; 
}  
#centro_sinistra {
  float: left;
  width:300px;
  border: 1px solid;
  background-color: yellow;
  padding: 5px; 
}  
#centro_destra {
  float: left;
  width: 300px;
  border: 1px solid;
  background-color: orange;
  padding: 5px; 
}  

#corpo {
  width:760px;
  margin:1em auto;
  text-align: left; 
}  
#corpo_colonna1 {
  float: left;
  width:140px;
  border: 1px solid;
  background-color: red;
  padding: 5px; 
}  
#corpo_colonna2 {
  float: left;
  width: 440px;
  border: 1px solid;
  background-color: blue;
  padding: 5px;  
} 
#corpo_colonna3 {
  float: left;
  width: 140px;
  border: 1px solid;
  background-color: green;
  padding: 5px; 
}  

#piedipagina {
  width:760px;
  margin:1em auto;
  text-align:left;
  border: 1px solid; 
}

**pisistrate** · 22-05-2009, 11:31

Ti ringrazio, ma ora è il pie di pagina che si sovrappone, ma ad ogni <div> non dovrebbe corrispondere un salto di riga ?

**pisistrate** · 22-05-2009, 11:33

rettifico :

su firefox si sovrappone, mentre su explorer funziona !!!!

e per renderlo cross-browser ?

**Mich_** · 22-05-2009, 11:55

Originariamente inviato da pisistrate
Ti ringrazio, ma ora è il pie di pagina che si sovrappone, ma ad ogni <div> non dovrebbe corrispondere un salto di riga ?

Dipende.
I blocchi flotrtati escono dal flusso degli altri blocchi, per cui non vengono visti.
Per farli "rientrare" occorre usare il clear, in un blocco all'interno del contenitore prima della sua chiusura.
Nel thread linkato, c'e` una ottima soluzione che applica il clear ad un oggetto :after

Devi applicare il clear a tutti i contenitori che contengono float.

PS: IE tiene dentro anche i blocchi flottati, per cui non ha bisogno del clear (ma questo comporta problemi in altre occasioni - I browser conformi si comportano come le specifiche del W3C)

**pisistrate** · 22-05-2009, 12:14

grazie ancora, credo di aver capito ed ora funziona anche su firefox, anche se le differenze sono notevoli.

ciao

Discussione: pagina con 2 righe di 2 e di 3 colonne

Strumenti discussione

Ricerca discussione

Visualizza

pagina con 2 righe di 2 e di 3 colonne

Permessi di invio