problema CSS

stedrum · 30-08-2011, 13:34

ciao a tutti, sto cercando di creare un layout a 3 colonne con header e footer.
Non riesco però a fare in modo che il contenuto non superi il footer(che è sempre in fondo alla pagina); come posso fare?

questo è il codice HTML:

Codice:

<html>
<head>
<style>
@import url(layout.css);
</style>
</head>
<body>
    <div id="container">
        <div id="header">header</div>
        <div id="sinistra">menu</div>
        <div id="destra">extra</div>
        <div id="content">contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti
<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti
<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti
<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti
<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti</div>
        <div id="footer">footer</div>
    </div>
</body>
</html>

e questo il css:

Codice:

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

div#container{
	min-height: 768px;
	min-width: 1024px;
	height: 100%;
	max-height: 100%;
	position: relative;
}

#header {
border:1px solid #000;
}

div#content {
margin: 0;
margin-left: 20%;
margin-right: 10%;
border:1px solid #000;
overflow-y: hide;
}

div#sinistra {
float: left;
width: 20%;
margin: 0;
border:1px solid #000;
}

div#destra {
float: right;
width: 10%;
margin: 0;
border:1px solid #000;
}

div#footer {
border:1px solid #000;
margin: 0;
bottom: 0;
position: absolute;
width: 100%;
}

Pompolus · 30-08-2011, 14:11

prova così:

Codice:

<html>
<head>
<style>
@import url(layout.css);
</style>
</head>
<body>
    <div id="container">
        <div id="header">header</div>
        <div id="sinistra">menu</div>
        <div id="destra">extra</div>
        <div id="content">contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti
<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti
<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti
<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti
<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti<br>contenuti</div>
    <div class="pushfooter"></div>
    <div id="footer">footer</div>
    </div>
    
</body>
</html>


<style type="text/css" media=screen>


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

div#container{
	min-height: 100%;
	min-width: 1024px;
	overflow:auto;
	position: relative;
}
.pushfooter{
height:100px; /* altezza footer */
clear:both; 
}

#header {
border:1px solid #000;
}

div#content {
margin: 0;
margin-left: 20%;
margin-right: 10%;
border:1px solid #000;
overflow-y: hide;
}


div#sinistra {
float: left;
width: 20%;
margin: 0;
border:1px solid #000;
}

div#destra {
float: right;
width: 10%;
margin: 0;
border:1px solid #000;
}

div#footer {
border:1px solid #000;
margin: 0;
bottom: 0;
position: absolute;
width: 100%;
}
</style>

ricordati di cambiare l'altezza del tuo footer in pushfooter

stedrum · 31-08-2011, 14:40

ho modificato un pò il codice che mi hai passato e ora è perfetto... grazie mille!

stedrum · 31-08-2011, 20:19

ora ho un altro problema: come fare in modo che il colore di sfondo del contenuto e delle colonne laterali si estenda fino al footer??

html:

Codice:

<html>
 <head>
  <title>prova layout</title>
  <style>@import url(layout.css);</style>
 </head>
 <body>
  <div id="wrapper">
   <div id="header"class="struttura testobianco"><h1>prova layout</h1></div>
   <div id="navigation" class="struttura">
      <ul>
       <li id="activelink"><a href="#">Home</a></li>
       <li><a href="#">link1</a></li>
       <li><a href="#">link2</a></li>
       <li><a href="#">link3</a></li>
       <li><a href="#">link4</a></li>
      </ul>
   </div>
   <div id="menu" class="struttura">menu</div>
   <div id="extra" class="struttura">extra</div>
   <div id="content" class="struttura centrato">contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti contenuti</div>
   <div id="pushfooter"></div>
  </div>
  <div id="footer" class="struttura centrato">footer</div>
 </body>
</html>

css:

Codice:

html,body{
	height:100%;
	margin: 0;
	padding: 0;
	min-width: 1024px;
	min-height: 768px;
}
#wrapper{
	min-height:100%;
	height:auto !important;
	height:100%;
	margin:0 auto -20px; /* margine negativo altezza footer */
}

#header{
	padding: 2px 2px 2px 2px;
	height: 100px;
	background-color: #000000;
}

#menu{
	float: left;
	width: 210px;
	padding: 2px 2px 2px 2px;
	border-right: 1px solid black;
}

#extra{
	float: right;
	width: 200px;
	height: auto;
	padding: 2px 2px 2px 2px;
}

#content{
	margin: 0 204px 0px 214px;
	background-color: #ccc;
	padding: 15px 4px 15px 4px;	
	/*border-left: 1px solid #787878;
	border-right: 1px solid #787878;
	border-bottom: 1px solid #787878;*/
}

#pushfooter{
	height:20px; /* altezza footer */
	clear:both;  /*clear di eventuali float se presenti nel layout */
}

#footer{
	height: 20px;
	position: relative;
	bottom: 0;
	padding: 0px 2px 0px 2px;
}

.struttura{
	border: 1px solid black;
}

.struttura.centrato{
	text-align: center;
}
 
div#navigation{
	background-color: #000000;
	border-bottom: 1px solid #787878;
	text-align: center;
	margin: 0;
	
}

div#navigation ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
	white-space: nowrap
}

div#navigation li{
	display: inline;
	margin: 0;
	padding: 0
}

div#navigation li a{
	text-decoration: none;
	border: 1px solid #787878;
	padding: 0px 0.5em;
	background: #6495ED ;
	color: #ffffff;
}

div#navigation li a:hover{
    	background-color: #1E90FF
}

div#navigation li#activelink a{
    	border-bottom: 1px solid #fff;
	background-color: #fff;
	color: #000000
}

.testobianco{
	color: #ffffff;	
}

31-08-2011, 14:40	#3
stedrum Bannato Iscritto dal: May 2010 Messaggi: 57	ho modificato un pò il codice che mi hai passato e ora è perfetto... grazie mille! Ultima modifica di stedrum : 31-08-2011 alle 14:45.

Strumenti
Mostra una versione stampabile Invia questa pagina per email