ciao floyd46,
grazie per la mano...digito il codice che ho fatto finora, è provvisorio...non badare hai nomi di classe e id.
il problema come puoi vedere riguarda i box grigi che non avranno mai contenuto!! questi due box vorrei che rimanessero agganciati al piede quando il contenuto centrale si espande o si contrae.
Con firefox ho provato le %, ma come tu sai, il problema è la differenza tra i browser. E poi non va bene come soluzione...
Pensavo anche a un contenitore con sfondo grigio, ma volvo provare prima per questa strada.
se riesci a darmi qualche suggerimento, sei il benvenuto
grazie
<html>
<head>
<title>prlllllllll</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="contenitore">
<div id="content">
<div id="testata">prlllllllll
</div>
<div id="sinistra">
<div id="sinistraarancione">prllllllll
</div>
<div id="sinistrablu1">
prllllllllll
</div>
<div id="sinistrablu2">
prllllllllll
</div>
<div id="sinistragrigio">
prllllllll
</div>
</div>
<div id="destra">
<div id="destraarancione">
prlllllllllll
</div>
<div id="destrablu">
prllllllllllll
</div>
<div id="destragrigio">
prllllllllllllll
</div>
</div>
<div id="centrale">
<div id="centro">
testo</p>
testo</p>
testo</p>
testo</p>
testo</p>
testo</p>
testo</p>
testo</p>
testo</p>
testo</p>
testo</p>
testo</p>
testo</p>
testo</p>
testo</p>
testo</p>
testo</p>
testo</p>
testo</p>
testo</p>
testo</p>
testo</p>
testo</p>
testo</p>
</div>
</div>
<div id="piede">
<div id="piedearancione">prllllll
</div>
<div id="piedeblu">prllllll
</div>
</div>
</div>
</div>
</body>
</html>
body {
font-family:valore;
font-size:100%;
color:#000;
background:#fff;
margin:0;
padding:0;
text-align:center;
}
h1, h2, h3, h4, h5, h6 {
font-family:valore;
font-weight:valore;
margin:0;
padding:0;
}
h1 {
font-size:valore;
}
h2 {
font-size:valore;
}
h3 {
font-size:valore;
}
h4 {
font-size:valore;
}
h5 {
font-size:valore;
}
h6 {
font-size:valore;
}
p {
font-family:valore;
font-size:100%;
font-weight:400;
color:valore;
background:valore;
margin:0;
padding:0;
}
a {
color:valore;
background:valore;
text-decoration:valore;
}
a:visited {
color:valore;
background:valore;
text-decoration:valore;
}
a:hover {
color:valore;
background:valore;
text-decoration:valore;
}
ul {
list-style-positionutside;
list-style-image:url(../immagini/nomedellimmagine.png);
margin:0;
padding:0;
}
ol {
list-style-position
list-style-type:upper-roman;
margin:0;
padding:0;
}
div#content{
width:740px;
background:#fff;
}
div#contenitore{
width:740px;
padding-bottom:.5em;
margin-top:10px;
margin-left: auto;
margin-right: auto;
}
/*box alto sinistra*/
div#sinistraarancione{
width:140px;
height:140px;
margin-top:0px;
margin-bottom:10px;
background-color:#ffd300;
}
div#testata{
width:590px;
float:right;
height:140px;
background-color:#ffd300;
}
div#sinistra{
width:140px;
float:left;
margin-top:0px;
margin-bottom:10px;
border-top:0px solid #fff;
}
/*box medio a sinistra*/
div#sinistrablu1{
width:140px;
height:140px;
background-color:#ffd300;
margin-top:0px;
}
div#centrale{
width:440px;
text-align:left;
float:left;
margin-top:0px;
margin-left:0px;
margin-bottom:0px;
}
div#centro{
width:440px;
margin-left:10px;
margin-top:10px;
margin-bottom:0px;
background-color:#ccc;
}
div#destra{
width:140px;
margin-top:0px;
float:right;
}
div#destraarancione{
width:140px;
height:140px;
margin-top:10px;
background-color:#ffd300;
}
div#destrablu{
width:140px;
height:140px;
margin-top:10px;
margin-bottom:0px;
background-color:#ffd300;
}
div#destragrigio {
width:140px;
height:25%;/*da modificare a mano funziona solo con firefox*/
margin-top:10px;
margin-bottom:0px;
background:#ccc;
}
/*box medio a sinistra*/
div#sinistrablu2{clear:both;
width:140px;
height:140px;
background-color:#ffd300;
margin-top:10px;
}
/*box grigio*/
div#sinistragrigio{clear:left;
width:140px;
height:25%;/*da modificare a mano funziona solo con firefox*/
background:#ccc;
margin-top:10px;
margin-bottom:0px
}
div#piede{
width:740px;
margin:0px;
padding:0px;
}
div#piedearancione{
width:140px;
height:30px;
background:#ffd300;
float:left;
margin-top:0px;
clear:both;
margin-top:10px;
}
div#piedeblu{
width:590px;
height:30px;
background:#ffd300;
float:right;
margin-top:0px;
margin-top:10px;
}
Rispondi quotando
