allineamento centrale con footer bottom

**Gnegno** · 27-01-2012, 23:53

Ciao,
sto cercando di disegnare un layout con un div centrato verticalmente ed orizzontalmente, e poi un footer allineato perennemente al bottom.

codice:

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}

#container{
    height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height*/
	min-height:100%; /* real browsers */
}

#content {
	width: 400px;
	height: 200px;
	background-color: #ccc;
	top: 50%;
	left:50%;
	position:fixed;
	margin: -100px 0 0 -200px;	
}

#footer {
	width:800px;
	border-top: #ccc 1px solid;
	margin: 0 auto;
	padding-top: 4px;
	padding-left: 10px;
	font-family:"Arial";
	font-size: 11px;
	color: #669999;
		bottom:0;
height: 20px;		

	position: absolute;
}

Codice PHP:


<body>

       <div id="container">

<div id=content2>prova contenuti
dfa</div>



</p>

<div id="footer">testo footer

</div>



</div>

    </body>

con questo codice ottengo perfettamente l'allineamento di cui ho bisogno, ma ho solo un problema, se ridimensiono la finestra del browser, ad un certo punto il footer si sovrappone al content.
Se imposto un min-height al body, mi aggiunge correttamente la barra di scorrimento se scendo sotto una certa altezza, ma se continuo a rimpicciolire la finestra il footer continua a sovrapporsi.

C'è un modo per non avere questa sovrapposizione?

grazie
ciao

**thecodingmonk** · 28-01-2012, 00:17

Non vorrei dire una boiata, ma se hai il #content con altezza e larghezza fisse e posizionato con fixed prima o poi se rimpicciolisci la finestra il footer si deve sovrapporre neccessariamente. Come vorresti si comportasse invece che sovrapporsi?

**Gnegno** · 28-01-2012, 12:17

forse ho trovato una soluzione con questo codice:

codice:

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	min-height: 300px;
}

#container{
	min-height:100%;
	height:auto !important;
	height:100%;
	margin:0 auto -30px;
}
.pushfooter{
	height:30px;
	clear:both; 
}

#content {
	width: 400px;
	height: 200px;
	background-color: #ccc;
	top: 50%;
	left:50%;
	position:absolute;
	margin: -100px 0 0 -200px;	
}

#footer {
	width:800px;
	border-top: #ccc 1px solid;
	padding-top: 4px;
	padding-left: 10px;
	font-family:"Arial";
	font-size: 11px;
	color: #669999;
	margin: 0 auto;
}

Codice PHP:


<div id="container">

<div id="content">content</div>

<div class="pushfooter"></div>

</div>

<div id="footer">footer

</div>

devo vedere se è cross-browser.... in particolare con ie...
comunque ho trovato un altro modo per mettere il footer in basso con una piccola ricerca in google.. poi ho aggiunto il min-height nel body. questo mi permette di avere l'effetto desiderato, almeno su firefox...

**Gnegno** · 28-01-2012, 12:19

ecco.. infatti.. già safari mi è andato un bel pezzo in tasca

Non rispetta il min-height e quindi va a sovrapporre content e footer :-\

**Prill** · 28-01-2012, 14:58

Non ho tempo per verificare col tuo codice, ma centrando verticalmente con la tecnica del display table, ottengo il risultato che puoi vedere provando e incollando il codice:

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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>titolo</title>

<style type="text/css">
<!--
* {margin:0;padding:0}
html,body{height:100%;width:100%;}

body {
background-color: #cccccc;
text-align:center;
min-height:250px;
min-width:800px; /* larghezza footer */
position:relative;
}
#outer{
height:100%;
width:100%;
display:table;
vertical-align:middle;
}
#container {
text-align: center;
position:relative;
vertical-align:middle;
display:table-cell;
width:800px;
height: 250px;
margin:0 auto;
}
#inner {
width: 400px;
height: 200px;
margin-left:auto;
margin-right:auto;
background:yellow;
padding-top:25px;
padding-bottom:25px;
}
#footer {
width:100%;
height: 20px;
border-top: 1px solid #ccc ;
padding-top: 4px;
font-family:"Arial";
font-size: 11px;
color: #669999;
position: absolute;
bottom:0;
left:0;
background:red;
}
-->
</style>

<!--[if lt IE 8]>
<style type="text/css">
#container{top:50%}
#inner{top:-50%;position:relative;}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">
#outer{
position:relative;
overflow:hidden;
}
</style>
<![endif]-->
</head>

<body>
<div id="outer">
<div id="container">
<div id="inner">
<h1 style="height:200px;background:pink">Contenuti formattati solo ai fini della visualizzazione</h1>
</div>

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

ho assegnato una altezza di 250 pixel calcolando che il footer fra altezza padding e bordo è alto 25px

Discussione: allineamento centrale con footer bottom

Strumenti discussione

Ricerca discussione

Visualizza

allineamento centrale con footer bottom

Permessi di invio