qui sotto vi mando un pagina che crea un top una parte centrale con tre colonne e un pie di pagina il problema è che sia la testa che il pie di pagina si ridimensionano a dimensione della finestra invece vorrei che rimanessero della dimensione del corpo pagina.
grazie
ciao
<!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" lang="it"><head><title>Tre colonne: Liquido con colonne a larghezza fissa</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
font:80% verdana,helvetica,sans-serif;
margin:0; padding:0
}
code { font:80% verdana,helvetica,sans-serif; display:block; margin:0 1em .5em 1em; }
hr { display:none }
/* centrare la pagina web a larghezza fissa */
body { text-align:center }
#testa { width:90%; margin:1em auto; text-align:left }
#corpo { width:90%; margin:1em auto; text-align:left }
#piedipagina { width:90%; margin:1em auto; text-align:left }
/* testa */
#testa {
background:#ccc;
border:1px solid #000;
padding:1em 0;
}
/* corpo */
#corpo {
position:relative;
background:#f0f0f0 url(sfondo_colonna1.png) repeat-y;
border:1px solid #000;
}
#corpo-colonna1 {
position:absolute; top:0; left:0;
width:160px;
padding:1em 0;
}
#corpo-colonna2 {
margin:0 200px 0 160px;
border-left:1px solid #000;
border-right:1px dotted #000;
background:#fff;
padding:1em 0;
}
#corpo-colonna3 {
position:absolute; top:0; right:0;
width:200px;
padding:1em 0;
}
/*pie' di pagina */
#piedipagina {
background:#eee;
border:1px solid #000;
padding:1em 0;
}
-->
</style></head>
<body>
<div id="testa">
<code>#testa { width:90%; margin:1em auto; text-align:left }</code>
<code>#testa {
background:#ccc;
border:1px solid #000;
padding:1em 0;
}</code>
</div>
<hr>
<div id="corpo">
<div id="corpo-colonna1">
<code>#corpo-colonna1 {
position:absolute;
top:0; left:0;
width:160px;
padding:1em 0;
}</code>
</div>
<hr>
<div id="corpo-colonna2">
<code>#corpo-colonna2 {
margin:0 200px 0 160px;
border-left:1px solid #000;
border-right:1px dotted #000;
background:#fff:
padding:1em 0;
}</code>
<code>#corpo { width:90%; margin:1em auto; text-align:left }</code>
<code>#corpo {
position:relative;
background:#f0f0f0 url(sfondo_colonna1.png) repeat-y;
border:1px solid #000;
}</code>
<code>body {
text-align:center;
font:80% verdana,helvetica,sans-serif;
margin:0; padding:0
}
code {
font:80% verdana,helvetica,sans-serif;
display:block;
margin:0 1em .5em 1em;
}
hr { display:none }</code>
</div>
<hr>
<div id="corpo-colonna3">
<code>#corpo-colonna3 {
position:absolute;
top:0; right:0;
width:200px;
padding:1em 0;
}</code>
</div>
</div>
<hr>
<div id="piedipagina">
<code>#piedipagina { width:90%; margin:1em auto; text-align:left }</code>
<code>#piedipagina {
background:#eee;
border:1px solid #000;
padding:1em 0;
}</code>
</div>
</body></html>
Rispondi quotando
