footer in basso in relazione a container

**enigma_79** · 01-03-2006, 18:26

Ariciao semplifico il codice che mi trovo davanti eliminando tutte le parti .NET e suddividendo per colori le varie zone che ho

footer deve essere sempre in basso in relazione a container

quindi il css di footer va modificato

codice:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>CHS</title>
<style type="text/css">
<!--
html, body {
	width: 100%;
	height:auto;
	margin: 0px;
	padding: 0px;
	background-image:url(../../Images/bg.jpg);
	background-repeat:repeat-y;
	background-position:center;
	font-family: verdana; 
    font-size:11px;
    color:#3F3F3F; 
}

.login {
	height:auto;
	margin-top:100px;
	margin-left:-150px;
	padding: 0;
	position:absolute;
	overflow: auto;
	left:50%;
}
.container {
	height: auto;
	width: 900px;
	margin-top:95px;
	margin-left:-450px;
	padding: 0;
	position:absolute;
	left:50%;
	background-color:#FF0000;
}
.footer {
	width: 900px;
	height: 20px;
	margin-left:-450px;
	padding: 0;
	position:absolute;
	left:50%;
	bottom:10px;
	background-color:#dcdcdc;
	border: 0;
}
#testata-sx {
	width: 212px;
	height: 65px;
	margin-left:-450px;
	padding: 0;
	position:absolute;
	left:50%;
	background-color:#FF0000;
	border: 0;
}
#testata-centro {
	width: 395px;
	height: 65px;
	margin-left:-238px;
	padding: 0;
	position:absolute;
	left:50%;
	background-color:#FFff00;
	background-repeat:repeat-x;
	border: 0;
}
#testata-dx {
	width: 293px;
	height: 65px;
	margin-left:156px;
	padding: 0;
	position:absolute;
	left:50%;
	background-color:#FF0000;
	border: 0;
}
#menu {
	width: 900px;
	height: 20px;
	margin-top:66px;
	margin-left:-450px;
	padding: 0;
	position:absolute;
	left:50%;
	background-color:#dcdcdc;
	border: 0;
}


-->
</style></head>

<body>
<div id="testata-centro">

</div>
<div id="testata-sx">

</div>
<div id="testata-dx">

</div>
<div id="menu">

</div>

<div class="container">

</div>

 
       <div class="footer">
       </div>
     


</body>
</html>

chi mi aiuta???

**Alberto** · 01-03-2006, 21:12

La strada che hai scelto è un po' complicata, ma questo è un mio parere.
Io farei un div contenitore impostando larghezza e posizione, poi al suo interno gli altri div.

ti posto un codice che ho usato per un layout a due colonne, il fondo è sempre attaccato e varia il posizionamento a seconda dei contenuti della pagina

#contenitore{
width:800px;
margin:0 auto;
}
#testata{
width:800px;
height:88px;
}
#menusx{
float:left;
width:190px;
}
#pagina{
float:left;
width:600px;
}
#fondo{
clear:both;
background: #333;
color: #FFF;
}

**enigma_79** · 03-03-2006, 15:48

riporto la soluzione che ho trovato dovesse servire a qualcuno

codice:

 <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>titolo</title>
<style type="text/css">
<!--
html, body {
width: 100%;
height:100%;
margin: 0px;
padding: 0px;
background-color:#ffffff;
vertical-align:bottom;
font-family: verdana; 
font-size:11px;
color:#3F3F3F; 
}

.login {
height:auto;
margin-top:100px;
padding: 0;
position:absolute;
overflow: auto;
}

#container {
width: 900px;
height:auto;
overflow:auto;
margin-top:1px;
padding: 0;
position:relative;

}
#contenitoreFooter{
width:100%;
text-align:center;
height:100%;
position:absolute;
background-image:url(img-chs/bg.jpg);
background-repeat:repeat-y;
background-position:center;
}
#footer {
width: 900px;
heigh:20px;
bottom:0;
position:absolute;
background-color:#dcdcdc;
z-index:1;
font-family: verdana; 
font-size:10px;
color:#666666; 
text-align:right;
}
.testata {
width: 900px;
height: 65px;
padding: 0;
border: 0;
}
.testata-sx {
width: 212px;
height: 65px;
padding: 0;
background-image:url(img-chs/testata-sx.jpg);
}
.testata-centro {
width: 395px;
height: 65px;
padding: 0;
background-image:url(img-chs/testata-centro.jpg);
background-repeat:repeat-x;
border: 0;
}
.testata-dx {
width: 293px;
height: 65px;
padding: 0;
background-image:url(img-chs/testata-dx.jpg);
border: 0;
}
#menu {
width: 900px;
height: 20px;
margin-top:1px;
padding: 0;
position:relative;
background-color:#dcdcdc;
border: 0;
}


-->
</style></head>

<body>
<div id="contenitoreFooter">
<div id="footer">Powered By 4ward</div>
<div class="testata">
<span class="testata-sx"></span><span class="testata-centro"></span><span class="testata-dx"></span>

</div>
<div id="menu"></div>

<div id="container">Qui tutto il contenuto</div>


</div>
</body>
</html>

ciao

Discussione: footer in basso in relazione a container

Strumenti discussione

Ricerca discussione

Visualizza

footer in basso in relazione a container

Permessi di invio