Printable View
Salve, mi sto scervellando su un layout che voglio realizzare coi css. E' un'impaginazione simil-blog, dove il contenitore, posizionato centralmente, dovrebbe essere lungo quanto tutta la pagina.
Il problema è che IE me lo fa vedere bene, Firefox me lo accorcia se la pagina ha poco contenuto.
Sapete come si risolve?
Grazie
Al volo dato l'orario, penso assegnando a bottom : 0px, ah dimenticavo height: 100% e postion: absolute.
Grazie, ho provato ma non va.:cry: Adesso sono arrivata ad ottenere un risultato soddisfacente in IE, anche se la lunghezza della colonna supera quella della schermata nonostante i contenuti siano pochi. In Firefox il problema è opposto, la colonna si ferma subito sotto i contenuti invece di arrivare in fondo.
Qualcuno ha un'idea?
Questo il mio css per il layout:
E questo l'html:Codice:html, body {
min-height:100%;
width:100%;
height:100%;
margin:0;
}
html>body, html>body #container {
/*min-height:100%;*/
height:auto;
}
body {
padding:15px 0 0 0;
margin:0;
font:76% tahoma, verdana, sans-serif;
background: #000;
color:#303030;
}
/* container */
#container {
min-height:100%;
/*width:100%;*/
height:100%;
margin:0 auto 20px auto;
width:730px;
padding:5px 20px 20px 20px;
background:#ccccff;
}
#main {
width:550px;
float:left;
padding:0 15px 15px 0;
margin:0;
border-right:1px solid #d8d8d8;
background-color: #FFCC99;
position: relative;
/*min-height:98%;*/
height:100%;
}
/* intestazione */
#intestazione_altrepag {
height:49px;
color:#ffffff;
padding:0;
background:#505050 url(images/intestazione_altrepag.jpg) top left no-repeat;
clear:both;
margin:5px 0 15px 0;
border-top: 1px solid #fff;
}
#barradx {
width:150px;
float:right;
padding-top: 30px;
padding-left: 8px;
height: 100%;
background-color: #CCCC99;
}
#piede {
clear: both;
/*float: none;*/
display: block;
background: #99CC33;
padding:0;
margin-top: 8px;
border-top:1px solid #d8d8d8;
width: 730px;
/*position: relative;*/
bottom: 0;
}
.block {
background: #E1E1E1;
padding:10px;
}
.hide {
display:none;
}
Codice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="it">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="stylesheet" type="text/css" href="prova.css" media="screen,projection" title="prova (screen)" />
<title>Prova</title>
</head>
<body>
<div id="container">
<div id="logo"><h1>Titolo1</h1></div>
<div id="intestazione_altrepag">
<!-- C'è un'img di sfondo sul cui bordo superiore posizionerò un menu -->
</div>
<div id="main">
<h2>Titolo2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p class="block">Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="barradx">
<h3>Titolo3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<p>
<div class="sidelink">» <a href="newsletter.html">Newsletter</a><span class="hide"> | </span></div>
<div class="sidelink">» <a href="#">Rassegna Stampa</a><span class="hide"> | </span></div>
<div class="sidelink">» <a href="#">Altrecose</a><span class="hide"> | </span></div>
</p>
</div>
<div id="piede"><p>© <a href="index.html">Piedepiedepiede</a></p></div>
</div>
</body>
</html>
hai ottenuto un risultato soddisfacente in IE, ma intendi IE6 vero? con IE7 avrai temo gli stessi problemi di Firefox.
se ho ben capito, quello che vuoi fare tu di solito si definisce faux columns. Purtroppo via css, senza aggiungere schifezze o fissare la dimensione degli elementi, non si riesce ad ottenere di meglio.
Già... IE6.
Quindi mi tocca o rassegnarmi o usare sfondi eccetera. Grazie del link...
Significa che, per esempio, anche i blog usano questi trucchetti allora...
beh, se non ci fosse uno sfondo, non ci sarebbe il problema :mrgreen: vedi tu quali parte del tuo template vuoi abbiano un fondo diverso, e se ne vale la pena o puoi fare in modo differente. Inoltre, capisco che con poco contenuto l'allineamento vada a quel paese - ma tu conta di avere sempre tanto contenuto :wink: