Ho creato questo layout:
http://www.mpwebsites.it/pamparino/m..._categoria.asp
Il mio problema sta nella colonna di sinistra, cioè che contiene le 4 immagini che si espande più del dovuto. La colonna appena sotto la quarta foto dovrebbe toccare il footer e non visualizzare quel rettangolino verde chiaro.
Lo sfondo della colonna è sfumato cioè parte da un verde scuro per poi scendendo trasfornarsi in verde chiaro.
Il verde del rettangolino in eccesso è una gif "verde" a sinistra e bianca a destra alta un pixel e larga 754px, creata come rattoppo!
Di seguito ho inserito il codice della pagina e del css.
Pier
************************************************** ***************
- HTML -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout Monolitico</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.0">
<style type="text/css">
@import url("CSS/monolitico_fisso_tabella.css");
a#viewcss{color: #00f;font-weight: bold}
</style>
</head>
<body>
<div id="container">
<div id="container2">
<div id="header">
</div>
<div id="content">
<div id="colonna_sx">
</div>
<div id="table" class="cella"></div></div>
<div id="footer" class="footer_trasparenza">
</div>
</div>
</div>
</body>
</html>
- FINE- CODICE HTML-
************************************************** ***************
- CSS -
/*stili per il layout fisso*/
html,body{margin: 0;padding:0; height:100%}
body{
font-family: arial,sans-serif;
font-size: 76%;
text-align: center;
background-image:url(../img/sfondo_1x800.jpg);
background-repeat:repeat-x;
padding-top:10px;
padding-bottom:10px;
}
div#container{
width: 754px;
margin: 0 auto;
text-align: left;
background-color:#FFF;
background-image:url(../img/1/striscia_body.png);
position:relative;
height:100%;
}
body>div#container{ height:auto; min-height:100%;}
div#container2{}
div#content{
padding: 1em 0em 1em 0em;
}
/*stili generici, su header e footer*/
div#header{
height: 184px;
background-image:url(../img/1/header.png);
background-repeat:no-repeat;/*mettendo no-repeat diventa trasparente l'header!!!*/
}
div#colonna_sx{
width:200px;
margin: 184px 0px 0px 0px;
padding:10px 0px 10px 0px;
padding-left:10px;
padding-right:10px;
position: absolute;
z-index:10;
float:;
background: url(../img/1/colonna_sx.png) no-repeat #FFFFFF top left;
top:0;
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFF00;
}
div#colonna_sx_inc{
width:200px;
padding-left:10px;
}
div#extra{
background-color:;
z-index:10;
topx;
left: 0;
width: 200px;
\width:200px;
w\idth:200px;
padding: 1em 5px;
background:;
height:auto;
}
/*** STILI PER TABELLE RECORD E CELLE ***/
div#table {
background-color:#01A5D8;
margin: 0px 15px 10px 220px;
padding:0px 5px 0px 5px;
table-layout:auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color: #FFFF00;
position:;
z-index:;
border: 0 ;
border-collapse:2px;
border-spacing:2px;
}
div#footer{
text-align:center;
padding: 25px 0px 28px 0px;
background-image:url(../img/1/footer.png);
color: #fff;
position:absolute;
z-index:;/* FA PASSARE SOPRA IL FOOTER SOPRA LA PAGINA*/
bottom:0;
width:100%;
}
.cella_sopra_id{padding-left:2px;width:0px;background-color:#CCCCCC;color:#000000;font-size:12px;}
.cella_id{padding-left:2px; width:0px; font-size:12px;}
.cella_sopra_2{padding-left:2px; background-color: #CCCCCC; color:#000000; font-size:12px;}
.cella_2{padding-left:2px; font-size:12px;}
.cella_sopra_3{padding-left:2px;background-color: #CCCCCC;color:#000000;font-size:12px;}
.cella_3{padding-left:2px; font-size:12px;}
.cella_sopra_4{padding-left:2px; background-color: #CCCCCC; color:#000000; font-size:12px;}
.cella_4{padding-left:2px;font-size:12px;}
.cella_sopra_5{padding-left:2px;background-color: #CCCCCC;color:#000000;font-size:12px;}
.cella_5{padding-left:2px;font-size:12px;}
.cella_sopra_lingua{padding-left:2px;background-color: #CCCCCC;text-align:left;width:60px;color:#000000;font-size:12px;}
.cella_lingua{padding-left:2px;text-align:left;width:60px;background-color:#99CC00;font-size:12px;}
.cella_sopra_6{padding-left:2px;background-color:#CCCCCC;color:#000000;font-size:12px;}
.cella_6{padding-left:2px;font-size:12px;}
.cella_sopra_7{padding-left:2px; width:0px; font-size:12px;}
.cella_7{padding-left:2px;font-size:12px;}
h1,h2{margin: 0;padding:0}
h1{padding-left:0.5em;font: bold 2.3em/80px arial,serif}
h2{color: #999;font-size: 1.5em}
div#footer a{color: #fff;font-weight: bold;text-decoration: underline}
/*stili specifici per il layout*/
div#navigation{background-color:#9cf}
/*stili per la navigazione*/
div#navigation ul{margin: 0;padding: 0; list-style-type: none;}
div#navigation li{display: inline; margin: 0 0 0 1em;padding: 0} /*nota display: inline*/
div#navigation a{color:#369;font: normal bold 1.2em/2.5em arial,sans-serif;text-decoration: none}
div#navigation a:hover{color: #fff;text-decoration: underline}
div#navigation a#activelink{color: #033;text-decoration: none}
/*stili per la sezione extra*/
div#extra div.newsbox{font-size: 90%;margin-bottom: 2em}
div#extra div.newsbox h2{color: #999;font-size: 1.2em}
div#extra div.newsbox p{margin: 0}
- FINE - CODICE CSS-
************************************************** ***************

x;
Rispondi quotando