come allineare il footer in basso ed evitare che si sovrapponga agli altri div

**Ashry** · 23-11-2006, 13:45

Dovrei posizionare il footer i modo che sia o in fondo alla pagina se il testo è < della lunghezza della pagina o sotto al testo se è > ma non ci rieso.

Vi posto il codice

CSS:

/* CSS Document */
html,body{margin:0;padding:0;height:100%;min-height:100%;}

body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 72%;
color: #CCCCCC;
}
Body{
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color:#383838;
}
html>body, html>body div#container {height:auto;min-height:100%;}

/*-----------------------------------------------------------box principali--------------------------------------------------------*/
div#container{ position:absolute;
height: 100%;
width:740px;
padding-left:12px;
padding-right:12px;

left:50%;
top:0;

margin:0 0 0 -382px;

color:#212121;
background-color:transparent;
background-image:url(../images/bg.jpg);
background-repeat:repeat-y;
background-position:center top;
}

#top{text-align:right;
width:740px;
height:160px;
background-image:url(../images/top.jpg);
background-repeat:no-repeat;
background-position:center top;}

#text{ text-align:left;
width:537px;
float:left;
margin-left:12px;
}

#dx{width:203px;
height:250px;
float:right;}

#footer{
clear:both;
position:absolute;
bottom:0px;
width:740px;
height:124px;
background-image:url(../images/bottom.jpg);
background-repeat:no-repeat;
background-position:center top;
}

/*----------------------------------------------------MENU------------------------------------------*/

#immagini{width:203px;
text-align:center;
border-top:3px solid #FFFFFF;}

#linkList{width:203px;
border-bottom:6px solid #91C02D;
border-top:6px solid #91C02D;}

#linklist img{ border:0px; margin:0px; padding:0px;}

HTML

<!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>:: POLYPIU'::</title>
<style type="text/css">
@import url("../_css/style.css");
</style>
</head>
<body>
<div id="container">
<div id="top"></div>
<div id="text">
aa
</div>
<div id="dx">
<div id="linkList">
<ul>
[*]AZIENDA
[*]DOVE SIAMO
[*]PRODOTTI
[*]DEVO REALIZZARE
[*]NEWS
[*]CONTATTACI
[*]CERTIFICAZIONI
[*]GARANZIE
[/list]
</div>
<div id="immagini">a</div>
</div>
<div id="footer">Privacy</div>
</div>
</body>
</html>

Mi potreste aiutare?

**gra-fichetto** · 23-11-2006, 13:58

Nel tuo CSS, elimina position:absolute; da #footer

**Ashry** · 23-11-2006, 13:59

ma così non rimane in fondo alla pagina se il testo è scarno

**gra-fichetto** · 23-11-2006, 14:01

Prova.

**Ashry** · 23-11-2006, 14:02

l'ho già fatto e ho provato anche con il fixed

non riesco proprio a venirne a capo

**gra-fichetto** · 23-11-2006, 14:05

Scusa.
In fondo vuol dire, allineato sempre e comunque al margine inferiore dl tuo div contenitore?

**gra-fichetto** · 23-11-2006, 14:20

Originariamente inviato da gra-fichetto
Scusa.
In fondo vuol dire, allineato sempre e comunque al margine inferiore dl tuo div contenitore?

In caso positivo, sposta fuori dal contenitore il tuo footer; cioè:

La tua pagina modificata:

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>:: POLYPIU'::</title>
<style type="text/css">
@import url("style.css");
</style>
</head>
<body>
<div id="container">
	<div id="top"></div>
	<div id="text">
	aa
	</div>

	<div id="dx">
		<div id="linkList">
		<ul>
		[*]AZIENDA
		[*]DOVE SIAMO 
		[*]PRODOTTI
		[*]DEVO REALIZZARE 

		[*]NEWS
		[*]CONTATTACI
		[*]CERTIFICAZIONI
		[*]GARANZIE
		[/list]
	</div>
	<div id="immagini">a</div>

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

Il tuo CSS modificato:

codice:

html,body{
	width: 100%;
	margin: 0 auto;
	padding: 0;
	height: 100%;
	min-height: 100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 72%;
	color: #CCCCCC;
	background-color:#383838;
	}


/*
html>body, html>body div#container {height:auto;min-height:100%;}*/



/*-----------------------------------------------------------box principali--------------------------------------------------------*/
div#container{ 
margin: 0 auto;
height: 100%;
width: 740px;
padding: 0 12px 0 12px;
color: #212121;
background-color: transparent;
background-image: url(../images/bg.jpg);
background-repeat: repeat-y;
background-position: center top
}

#top{
text-align: right;
width: 740px;
height: 160px;
background-image:url(../images/top.jpg);
background-repeat:no-repeat;
background-position:center top
}

#text{
text-align: left;
width: 537px;
float: left;
margin-left: 12px;
}

#dx{
width: 203px;
height: 250px;
float: right;
}

#footer{
clear:both;
margin: 0 auto;
width:740px;
height:124px;
background-image:url(../images/bottom.jpg);
background-repeat:no-repeat;
background-position:center top;
padding: 0 12px 0 12px
}

/*----------------------------------------------------MENU------------------------------------------*/

#immagini{width:203px;
text-align:center;
border-top:3px solid #FFFFFF;}

#linkList{width:203px;
border-bottom:6px solid #91C02D;
border-top:6px solid #91C02D;}

#linklist img{ border:0px; margin:0px; padding:0px;}

**Ashry** · 23-11-2006, 15:12

Mitico

Grazie

**gra-fichetto** · 23-11-2006, 15:14

Di nulla.

**Ashry** · 24-11-2006, 10:59

Scusa ieri poi non ho avuto il tenpo di postare

Ho testato il codice diminuendo il testo e il totale della lunghezza della pagina mi risulta essere il 100% + l'altezza del footer sia in firefox che in IE, inoltre in firefox se ridimensiono la finestradel browser il mio di contenitore "scompare"

ho provato così:

CSS

/* CSS Document */

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

body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 80%;
color: #CCCCCC;
}
Body{
margin: 0px auto;
background-color:#383838;
text-align:center;
}

img{ border:0px; margin:0px;}

div {
text-align: left;
margin: 0px auto 0px auto;
}

/*-----------------------------------------------------------box principali--------------------------------------------------------*/

div#container{ position:relative;
margin: 0 auto;
border:0px;
height:100%;
width:740px;
padding: 0 12px 0 12px;
color:#212121;
background-color:transparent;
background-image:url(../images/bg.jpg);
background-repeat:repeat-y;
background-position:center top;
}

body>div#container{height:auto;min-height:100%;}

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

#top{text-align:right;
width:740px;
height:160px;
background-image:url(../images/top.jpg);
background-repeat:no-repeat;
background-position:center top;}

div#contenuto{ width:740px;padding-bottom:124px;height:auto; clear:right; margin:0 auto; display:table;}

#text{ text-align:justify;
width:497px;
float:left;
padding-left:20px;
padding-right:20px;
display:table-cell;
}

#dx{width:203px;
height:250px;
float:right;
display:table-cell;}

#footer{ position:absolute;
border:0px;
bottom:0px;
left:12;
width:720px;
padding-top:100px;
padding-right:20px;
height:24px;
background-image:url(../images/bottom.jpg);
background-repeat:no-repeat;
background-position:center bottom;
text-align:right;}
#footer a,#footer a:visited {
text-decoration:none;
border-bottom: none;
color:#FFFFFF;
font-size:90%;
}

#footer a:hover {
text-decoration:none;
color:#CCCCCC;
font-size:90%;

}
/*----------------------------------------------------MENU------------------------------------------*/

#immagini{width:203px;
text-align:center;
border-top:3px solid #FFFFFF;}

#linkList{width:203px;
border-bottom:6px solid #91C02D;
border-top:6px solid #91C02D;}

#linklist img{ border:0px; margin:0px; padding:0px;}

HTML

<!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>:: POLYPIU'::</title>
<style type="text/css">
@import url("../_css/style.css");
</style>
</head>
<body>
<div id="container">
<div id="top"></div>
<div id="contenuto">
<div id="text">Testo</div>
<div id="dx">
<div id="linkList">
<ul>
[*]AZIENDA
[*]DOVE SIAMO
[*]PRODOTTI
[*]DEVO REALIZZARE
[*]NEWS
[*]CONTATTACI
[*]CERTIFICAZIONI
[*]GARANZIE
[/list]
</div>
<div id="immagini">immagini </div>
</div>
</div>
<div id="footer">link footer<div>
</div>
</body>
</html>

funziona in IE ma in firefox il footer si sovrappone al testo :master:

Discussione: come allineare il footer in basso ed evitare che si sovrapponga agli altri div

Strumenti discussione

Ricerca discussione

Visualizza

come allineare il footer in basso ed evitare che si sovrapponga agli altri div

Permessi di invio