PDA

View Full Version : [CSS] Disperazione, mi mette le 3 colonne in fondo e non sò come risolvere


abc84XXX
04-05-2008, 13:06
Ragazzi,
ho un bel problema (anche perchè ho tempi abbastanza stretti per finire questo lavoro e non ne riesco ad uscire).

Il template incriminato in questione è questo: http://www.siatec.net/andrea/archivio/template/template.html

Potete vedere l'erore...per farvi capire vi allego anche una jpg di come dovrà essere approssimativamente il risultato finale:

http://www.siatec.net/andrea/archivio/template/img/TemplateFinal.jpg

Come potete vedere l'header, la sezione per il menu e la sottostante sezione orizzontale per gli spazzi pubblicitari sono ben posizionati...si incasina sull 3 colonne.

Ho provato a togliere il valore: height: 1345px; dai settggi css del div con id="corpo", a questo punto le visualizza correttamente le 3 colonne ma non ho più lo sfondo del corpo ed è un altro disastro.

Vi allego il codice HTML e CSS...vi prego datemi una mano.

HTML:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<link rel="stylesheet" href="default.css" type="text/css" />
</head>

<body>

<div id="centrato">
<div id="intestazione">
<div id= "logo"></div>
<div id="spot1"></div>
</div>

<div id="mainmenu"></div>

<div id="corpo">

<div="upperbox">
<div id="recefoto"></div>
<div id="spot2"></div>
</div>

<div id="colonna-1">
<div id="recensione_modelli"></div>
</div>


<div id="colonna-2">...</div>
<div id="colonna-3">...</div>

</div>

</div>

</body>
</html>


CSS:

body{
margin: 0;
padding: 0;
text-align: center; /* Per IE5.X/Win */
background-image: url(img/sfondobody.jpg);
background-repeat:repeat-x;
height: 1658px;
padding-top: 120px;
}

#centrato{
width: 957px;

margin:auto;
text-align:left; /* Per IE5.X/Win */
}

#intestazione{
background-image: url(img/header.jpg);
width: 957px;
min-height: 133px;
}

#logo{
float: left;
background-image:url(img/logo.jpg);
background-repeat:no-repeat;
width: 190px;
min-height: 82px;
margin-left: 22px;
margin-top: 22px;
}

#spot1{
float: left;
background-image:url(img/publiheader.jpg);
width: 732px;
min-height: 94px;
margin-left: 5px;
margin-top: 15px;
}

#mainmenu{
background-image:url(img/sfondomenu.jpg);
background-repeat: repeat-x;
min-height: 42px;
}

#corpo{
background-image: url(img/sfondocorpo.jpg);
background-repeat: repeat-y;
/* min-height: 1345px; */
height: 1345px;
}

#upperbox{
min-height: 261px;
}

#recefoto{
float: left;
background-image: url(img/recefoto.jpg);
background-repeat: no-repeat;
width: 530px;
min-height: 243px;
margin-left: 22px;
margin-top: 16px;
}

#spot2{
float: left;
background-image: url(img/spot2.jpg);
background-repeat: no-repeat;
width: 355px;
min-height: 243px;
margin-left: 22px;
margin-top: 16px;
}

#colonna-1{
float: left;
width: 230px;
background: transparent;
}

#colonna-2{
float: left;
width: 530px;
background: transparent;
}

#colonna-3{
float: left;
width: 197px;
background: transparent;
}


/* Contenuto Colonna-1 */

#recensione_modelli{
background-image: url(img/box_recensionemodelli.jpg);
width: 209px;
min-height: 258px;
}


Grazie
abc

Ajanty
04-05-2008, 17:08
Sinceramente non ho VISTO il tuo problema ... quindi se vuoi/puoi esser piu preciso sarebbe meglio ... pero' credo di aver intuito che ti mancano 2 float:left; nelle prime due colonne :P