PDA

View Full Version : 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:

<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:

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ì:


<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:

<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:

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;
}