HEADER e FOOTER di forma irregolare rivelano lo sfondo delle FALSE COLONNE

**LuCaS666** · 25-02-2009, 18:02

Salve a tutti.

Ho un layout a due colonne. con header e footer, che usa sia la tecnica "footer at bottom" (per mantenere il footer sempre a fondo pagina anche in caso di contenuti di lunghezza limitata impostando posizionamente relativo per il page_container e assoluto per il footer) che la tecnica delle false colonne per prolungare visivamente lo sfondo sotto le due colonne centrali.

Questa tipologia di layout la uso ormai da anni e con qualche ritocco, con hack o css dedicati, per ie6 e altri browser meno usati ha sempre funzionato egregiamente.

Ora vi illustro il problema: la tecnica delle false colonne prevede di impostare uno sfondo che si ripete nel "box" che contiene fisicamente le due colonne che non si allungano, per dare la parvenza che coprano effettivamente tutta la superficie dello stesso. Questo, almeno nel mio caso data la tecnica del "footer at bottom", significa che sotto all'header e al footer c'è lo sfondo usato per la illusione delle false colonne: nel caso di layout rettangolari (header e footer con dimensione tale da sovrapporsi allo sfondo delle false colonne) o in caso di sfondi a tinta unita non ci sono problemi ma nel momento in cui si decide, come nel mio caso, di utilizzare sfondi a pattern o gradiente i problemi sono evidenti.

Il problema degli sfondi a pattern (con un motivo) o a gradiente è che, in caso di box con angoli arrotondati o comunque con forma diversa da quella rettangolare, bisogna sapere a priori quale colore di gradiente o quale motivo del pattern sarà presente sotto un determinato box, ma purtroppo, se il layout si allunga a seconda dei contenuti, è impossibile predire il colore di sfondo in un determinato punto della pagina. L'unica soluzione per un pattern o un "gradiente a tutta pagina" è quella di utilizzare dei box (header, footer) a sfondo trasparente in modo che mostrino lo sfondo sottostante ma, nel mio caso specifico, essendoci lo sfondo ripetuto utilizzato per le false colonne, il risultato di un header trasparente sarebbe quello di rendere visibile non lo sfondo a gradiente ma lo sfondo usato per le false colonne.

LINK AGLI SCREENSHOTS

Dummy Layout
Dummy Layout - I container (box, divs)
Dummy Layout - Suddivisione sfondi
Dummy Layout - Problema con box trasparenti e sfondo per false colonne

CODICE HTML [index.html]

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Dummy Layout</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link href="./css/style.css" media="screen" rel="Stylesheet" type="text/css" />
		<!--[if lte IE 6]>
			<link href="./css/styleIE.css" rel="stylesheet" type="text/css" />
		<![endif]--> 
	</head>
	<body>
		<div id="page_container">
			<div id="header"> </div> 
			<div id="center_container">
				<div id="side_container"> </div> 
				<div id="content_container"> </div> 
			</div> 
			<div id="footer"> </div> 
		</div> 
	</body>
</html>

CODICE CSS [style.css]

codice:

html, body{
	height:100%;
	padding: 0;
	margin: 0;
	color: #615c58;
	font: 11px/1.6em Verdana, Helvetica, Arial, sans-serif;
	background:url("../images/page_bg.png") top left repeat-y;
}

#page_container{
	position:relative;
	min-height:100%; /* allunga il container di pagina e il relativo sfondo per rendere l'effetto false colonne */
	width: 996px;  
	margin: 0 auto; 
	text-align: left; /* sostituisce l'impostazione text-align: center nell'elemento body. */
	background:url("../images/center_bg.png") 0 0 repeat-y;
}

#header{
	height: 173px;
	padding: 0;
	margin:0;
	background: url("../images/header_bg.png") 0 0 no-repeat;
}

#center_container {
	padding:0;
	padding-bottom:90px;	/* Compensa l'altezza del footer: >= altezza footer */
	margin:0;
	overflow:auto;
	clear:both; /* elimina l'effetto float delle due colonne per il flusso successivo */
	background:url("../images/centerTop_bg.png") 0 0 no-repeat;
}

#side_container{
	float:left;
	width: 204px;
	padding:0;
	margin-top:50px;
}

#content_container{
	float:right;
	width: 712px;
	padding:0;
	margin-top:50px;
}

#footer{
	position:absolute;
	bottom:0;
	width:100%;
	height: 58px;
	background: url("../images/footer_bg.png") 0 0 no-repeat;
}

POSSIBILE SOLUZIONE:

Una soluzione al problema potrebbe essere quella di inserire lo sfondo "center_bg.png" nel box "center_container" invece che nel "page container", in questo modo lo sfondo si ripeterebbe solo nella parte centrale del layout sotto alle due colonne permettendo così all'header e al footer di avere il fondo trasparente per mostrare lo sfondo a gradiente o a pattern.
Fatto questo si dovrebbe spezzare in due lo sfondo "centerTop_bg.png" che rappresenta la parte curva/irregolare del container centrale e mettere la parte destra come sfondo per la colonna "side_container" e la parte sinistra come sfondo per la colonna sinistra "content_container"...

Io prima di postare qui ci ho provato ma non sono riuscito a far allungare il "center_container" in modo che andasse a toccare il footer per poterlo così utilizzare come box per l'effetto delle false colonne: forse dipende dal fatto che il "page_container" ha posizionamento relativo o dal footer che ha posizionamento assoluto oppure da un mio approccio sbagliato.

Qualcuno è in grado di implementare la mia soluzione o di propormene un'altra che risolva il problema? Quello che a me interessa è mantenere il footer a fine pagina e poter impostare sfondo trasparente nei box in modo da poter visualizzare uno sfondo a gradiente o a pattern senza dovermi preoccupare dell'altezza dei contenuti e soprattutto senza vedere lo sfondo delle false colonne.

Grazie

**Mich_** · 25-02-2009, 18:21

Mi par di capire che e` sempre il solito: TI MANCA IL CLEAR.

Devi mettere un blocco con il clear DOPO le due colonne e PRIMA della fine del contenitore; oppure usare la tecnica proposta da fcaldera in [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float

**LuCaS666** · 25-02-2009, 18:24

Originariamente inviato da Mich_
Mi par di capire che e` sempre il solito: TI MANCA IL CLEAR.

Devi mettere un blocco con il clear DOPO le due colonne e PRIMA della fine del contenitore; oppure usare la tecnica proposta da fcaldera in [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float

Mi sembrava di avere fatto anche quella prova sia con un :after che con span, comunque ci do un occhio ed eventualmente posto il codice perchè magari c'è altro che non va...

Ammesso che riesca a mettere in pratica la mia soluzione pensi che sia valida o hai qualche altra idea per implementare un layout di questo tipo anche rifacendolo da zero intendo...

**LuCaS666** · 25-02-2009, 20:33

Grazie per la risposta solerte, ho riprovato a fare il float clearing in entrambe i modi, ma non ha sortito alcun effetto: Permane il problema del container che non si allunga quando nelle colonne flottate c'è poco testo, quando ci sono molte righe lo sfondo del container raggiunge correttamente il footer e rende l'effetto delle false colonne

Ho eliminato tutte le immagini e impostato dei colori di sfondo nei div in modo da semplificare la lettura e le prove pratiche di chi avrà voglia di darmi una mano a risolvere questo problema.

CODICE HTML -> index.html

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Tecnosolution Marketing - Homeepage</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link href="./test.css" media="screen" rel="Stylesheet" type="text/css" />
		<!--[if lte IE 6]>
			<link href="./css/styleIE.css" rel="stylesheet" type="text/css" />
		<![endif]--> 
	</head>
	<body>
		<div id="page_container">
			<div id="header">
				
 
 

 Header </p>
			</div> 
			<div id="center_container" class="cleared">
				<div id="side_container">
					

 

 Side </p> 


				</div> 
				<div id="content_container">
				

 

 Content </p> 


        </div> 
			</div> 
			<div id="footer">
				

 Footer </p>
    	</div>
		</div> 
	</body>
</html>

CODICE CSS -> test.css

codice:

html, body{
	height:100%;
	padding: 0;
	margin: 0;
	color: #615c58;
	font: 11px/1.6em Verdana, Helvetica, Arial, sans-serif;
	background-color:black;
}

#page_container{
	position:relative;
	min-height:100%; /* allunga il container di pagina e il relativo sfondo per rendere l'effetto false colonne */
	width: 996px;  
	margin: 0 auto; 
	text-align: left; /* sostituisce l'impostazione text-align: center nell'elemento body. */
	background-color:red;
	
}

#header{
	height: 173px;
	width:95%; /* impostato a 95% per tenere sotto controllo lo sfondo rosso applicato al page_container */
	padding: 0;
	margin:0 auto;
	background-color:blue;
}

#center_container {
	min-height:100%;
	padding:0;
	padding-bottom:90px;	/* Compensa l'altezza del footer: >= altezza footer */
	margin:0;
	overflow:auto;
	background-color:green;
}

#content_container{
	float:left;
	width: 725px;
	padding:0;
	margin-top:50px;
	background-color:purple;
}

#side_container{
	float:right;
	width: 245px;
	padding:0;
	margin-top:50px;
	background-color:dodgerblue;
}

#footer{
	position:absolute;
	bottom:0;
	width:100%;
	height: 58px;
	background-color:orange;
}

p{ 
	margin:0;
	padding:0;
	text-align:center;
	font-size:16px;
	color:black;
	font-weight:bold;
}

.cleared:after {
	display: block; 
	visibility: hidden;
	content: "."; 
	height: 0; 
	clear: both;
}
            
.cleared {
	clear: both; /* per Gecko */
	height: 1%; /* per IE */
}

Non credo che il problema dipenda dai float, penso sia proprio legato agli attributi di uno o più div contenitori (posizionamento relativo o assoluto, overflow, min-height, etc).

Si dovrebbe vedere così: Box center_container verde esteso fino al footer

Ma sia su ie7 che FF si vede così: Box center_container verde non si allunga

Grazie per l'aiuto.

**Mich_** · 26-02-2009, 10:30

La cosa e` piu` complessa di quanto avevo capito ...

Dovresti posizionare anche il content_container, lasciando margini per header e footer (i tuoi hanno altezza fissa, per cui la cosa e` possibile).

Pero` ...
Il problema potrebbe poi sorgere quando il contenuto fa aumentare la lunghezza delle colonne.
Non devi usare height, ma solo min-height.
Non sono pero` sicuro che la cosa funzionera` in tutti i browser: credo che dovrai giocare un po' con i commenti condizionali (piu` di quanto fai ora).

Un aiuto te lo possono dare servizi tipo http://browsershots.org/ oppure http://www.browsercam.com/

Discussione: HEADER e FOOTER di forma irregolare rivelano lo sfondo delle FALSE COLONNE

Strumenti discussione

Ricerca discussione

Visualizza

HEADER e FOOTER di forma irregolare rivelano lo sfondo delle FALSE COLONNE

Permessi di invio