problema posizionamento box

[plorenzo]

ciao a tutti. sono nuovo

non son bravo con le presentazioni, passo oltre....

avrei un problemino con un sito che sto facendo... di cui potete vedere una prova a questo indirizzo

www.canelli.it/paesi

come si vede sia su explorer che su firefox, i tre box nella parte centrale della pagina finiscono uno sopra l'altro, mentre dovrebbero essere affiancati. ho già smanettato parecchio col codice ma non riesco a venirne a capo. evidentemente non ho capito qualcosa sul posizionamento dei box...

qualcuno può darmi una mano??

vi posto il codice css completo... il problema riguarda solo il div "container" che contiene appunto "barrasx", "barradx" e "corpo"... chiaramente barrasx va a sinistra, corpo in centro e barradx a destra, affiancati...





body {
background-color: #fbeb94;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
strong {
font-weight: bold;
color: #003366;
}
strong.linkarticoli:hover {
color: #FFFFFF;
}
h3 {
font-size: 17px;
color: #003366;
display: block;
width: 100%;
line-height: 20px;
height: 20px;
position: relative;
font-weight: bold;
text-align: left;
}
h2 {
font-size: 14px;
display: block;
width: 100%;
line-height: 14px;
height: 14px;
position: relative;
font-weight: normal;
text-align: left;
bottom: -15px;
}

h1 {
font-size: 17px;
color: #003366;
display: block;
width: 100%;
margin-top: 10px;
line-height: 22px;
height: 20px;
font-weight: bold;
text-align: center;
background-color: #FBAF41;
margin-bottom: 20px;
}


.container {
background-color: #FFFFFF;
display: block;
width: 768px;
margin-left: -384px;
overflow-y: visible;
overflow-x: hidden;
position: absolute;
height: auto;
left: 50%;
background-image: url(../img/bg_container.jpg);
background-repeat: repeat-y;
clear: both;
margin-top: 20px;
}
.header {
display: block;
height: 180px;
width: 100%;
clear: both;
float: left;
background-image: url(../img/header.jpg);
}





.footer {
display: block;
height: 42px;
width: 100%;
text-align: center;
clear: both;
background-color: #FFFFFF;
background-image: url(../img/footer.jpg);
color: #FFFFFF;
padding-top: 9px;
position: relative;
}
.barralink {
display: block;
height: 39px;
width: 768px;
position: relative;
clear: both;
background-image: url(../img/bg_barralink.jpg);
}
.link:link {
color: #333333;
display: block;
float: left;
height: 30px;
width: 106px;
position: relative;
line-height: 30px;
text-decoration: none;
padding-right: 10px;
padding-left: 10px;
text-align: center;
font-weight: bold;
font-size: 12px;
background-image: url(../img/bg_bottoni.jpg);
top: 3px;
letter-spacing: 0.1em;
border: 1px solid #333333;
}
.link:hover {
color: #333333;
display: block;
float: left;
height: 30px;
width: 106px;
position: relative;
line-height: 30px;
text-decoration: none;
padding-right: 10px;
padding-left: 10px;
text-align: center;
font-weight: bold;
font-size: 12px;
background-image: url(../img/bg_bottoni_b.jpg);
top: 3px;
letter-spacing: 0.1em;
border: 1px solid #333333;
}
.link:visited {
color: #333333;
display: block;
float: left;
height: 30px;
width: 106px;
position: relative;
line-height: 30px;
text-decoration: none;
padding-right: 10px;
padding-left: 10px;
text-align: center;
font-weight: bold;
font-size: 12px;
background-image: url(../img/bg_bottoni.jpg);
top: 3px;
letter-spacing: 0.1em;
border: 1px solid #333333;
}
.barrasx {
height: 100%;
width: 126px;
}
.corpo {
height: 1825px;
width: 510px;
}
.tornasu {
height: 20px;
width: 462px;
float: left;
position: relative;
text-align: center;
line-height: 20px;
margin-left: 150px;
bottom: 20px;
color: #003366;
}
a:link {
text-decoration: none;
color: #003366;
}
a:hover {
text-decoration: underline;
color: #003366;
}




.barradx {
float: right;
height: 100%;
width: 126px;
}
.inquestonumero {
display: block;
width: 126px;
height: 79px;
float: left;
position: relative;
font-size: 16px;
font-weight: bold;
color: #FBAF41;
text-align: center;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #333333;
}

.inostripartner {
display: block;
width: 126px;
height: 79px;
float: right;
position: relative;
right: 1px;
font-size: 16px;
font-weight: bold;
color: #333333;
text-align: center;
}
.linkarticoli {
padding-left: 5px;
position: relative;
float: left;
color: #333333;
width: 116px;
padding-right: 5px;
height: 31px;
text-decoration: none;
font-size: 11px;
line-height: 13px;
display: block;
background-image: url(../img/bottoni_articoli.jpg);
padding-top: 4px;
vertical-align: middle;
font-weight: normal;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #333333;
border-left-color: #333333;
}
.linkarticoli:hover {
padding-left: 5px;
position: relative;
float: left;
color: #333333;
width: 116px;
padding-right: 5px;
height: 31px;
text-decoration: none;
font-size: 11px;
line-height: 13px;
display: block;
background-image: url(../img/bottoni_articoli_b.jpg);
padding-top: 4px;
vertical-align: middle;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #333333;
border-left-color: #333333;
}

.bannerpartner {
margin-bottom: 20px;
border: 1px solid #333333;
display: block;
float: left;
left: 6px;
position: relative;
}

.copertinahome {
overflow: visible;
float: left;
margin-right: 10px;
margin-bottom: 10px;
top: 3px;
border: 1px solid #333333;
position: relative;
display: block;
}


.immagini {
display: block;
margin-right: 10px;
top: 3px;
clip: rect(auto,auto,auto,auto);
position: relative;
float: left;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
.style1 {color: #003466}

.immaginidx {
display: block;
float: right;
position: relative;
top: 3px;
margin-left: 10px;
left: 0px;
}

.articoli {
text-align: justify;
display: block;
width: 460px;
clear: both;
position: relative;
margin-bottom: 10px;
left: 15px;
background-color: #FFFFFF;
margin-top: 20px;
border-bottom-width: 1px;
border-bottom-style: none;
border-bottom-color: #333333;
padding-bottom: 20px;
color: #333333;
}
.pubblicita {
text-align: justify;
display: block;
width: 420px;
clear: both;
position: relative;
margin-bottom: 10px;
left: 15px;
background-color: #FEDD5E;
margin-top: 20px;
padding-bottom: 20px;
color: #333333;
margin-right: 0px;
margin-left: 0px;
padding-right: 20px;
padding-left: 20px;
}
em {
font-weight: bold;
}




grazie a tutti

lorenzo

[ricman]

Per fare bene i debug devi fare una pagina nuova e vuota con il codice minimo e indispensabile per affiancare quei i tre div che preferisci.
Rischi che nessuno (io alzo la mano per primo) ti legga quella tonnellata di codice...

[Mich_]

Sei partito in modo errato.

Si tratta di un sito per un comune? Allora DEVI seguire le leggi cui devono sottostare tutti gli strumenti elettronici della Pubblica Amministrazione. In particolare la legge 4/04 con i suoi 22 requisiti.

Le cose che piu` saltano all'occhio sono:
- uso della DTD transitional
- lista realizzata senza gli appositi link
- uso di frame
- uso di attributi deprecati (vietati nella DTD Strict)

Per il layout ti conviene partire da qualcosa di gia` pronto: nei "link utili" di questo forum puoi trovare riferimenti ad alcune librerie (sia di layoput che di menu, per vedere come si realizzano).

[plorenzo]

non è il sito di un comune, è il sito di una rivista che sto realizzando...

quali sarebbero gli attributi deprecati? a me sembrava tutto diciamo aggiornato...

(ora ho visto che nel codice mancano un paio di cose essenziali, ora smanetto un attimo poi lo riposto corretto)

ecco... ora ho rimesso i float e miracolosamente è andato quasi a posto.

qualche giorno fa non aveva funzionato e chissà perchè... quindi FORSE l'ho risolta...

nel caso, scusate il falso allarme e grazie di tutto!

[Mich_]

non è il sito di un comune, è il sito di una rivista che sto realizzando...

Allora credo che non puoi usare quel dominio: se il comune si arrabbia e ti fa causa, perdi sia la causa che il dominio.

[plorenzo]

non lo sapevo, grazie della dritta.

in ogni caso lavoriamo da anni col comune di canelli e da anni usiamo quel dominio e nessuno ci ha mai detto nulla... boh, mi informerò.