Problema float layout fisso

[fabiostyle]

salve, ho seguito la guida per il layout dei siti molto attentamente, ed è una guida formidabile davvero. Una sola cosa adesso mi turba da giorni: la navigation bar e la extra bar sono impostati con il float right e left, okkei, solo che, come c'è nell'esempio dimostrativo, il box dei contenuti NON deve muoversi da là, invece si comporta come se avesse impostato un clear:both.
E se ho fatto qualcosa che la guida non dice, vi sbagliate di grosso: sto rivedendo ogni pezzetto del codice da giorni cavolo!
help me please

[leon-kennedy]

Posta il codice così magari è più facile darti una mano!

[fabiostyle]

Vabbe eccovi il template css:

html, body {
/* Bisogna eliminare i margini e i riempimenti con la finestra principale del browser */
margin-bottom:0;
margin-left:0;
margin-right:0;
margin-top:0;
padding-bottom:0;
padding-left:0;
padding-right:0;
padding-top:0;
}

body {
font-family:arial,sans-serif; /*imposta il carattere arial, altrimenti uno della famiglia sans-serif */
font-size:76%; /*è provato che la dimensione del 76% è circa 12px */
text-align:center;
background-image:url("immagini/sfondo.bmp"); /* immagine di sfondo con url nella stessa directory di index */
background-attachment:fixed;  /*fissa l'immagine dello sfondo, evitando che scrolli insieme ai contenuti */
}

div#container {
/* E' il CONTENITORE PRINCIPALE, larghezza 760px, e lo sfondo BIANCO */
/* ATTRIBUTI MARGINI*/
margin-bottom:0;
margin-left:auto; /* Il margine destro è impostato, mentre il sinistro no, così da creare l'effetto asimmetrico */
margin-right:80px;
margin-top:0;
/*ATTRIBUTI BORDI*/
border-left: 1px dashed grey; /* i bordi destro e sinistro sono tratteggiati */
border-right: 1px dashed grey;
/*ALTRI ATTRIBUTI*/
text-align:left;
line-height:140%;
font-family: Verdana, sans-serif;
background-color:#FFF; /* il colore di sfondo del box è bianco */
position:relative; /* Posiziona il box relativamente al suo contenitore principale (il browser in questo caso) */
width:760px;  /*imposta la larghezza del container principale (LAYOUT FISSO) */
-moz-box-shadow: 10px 0px 20px grey; /* crea l'effetto ombrato del contenitore */
-webkit-box-shadow: 10px 0px 20px grey;
}


div#header {
background-attachment:scroll;
background-color:transparent;
background-image:url("immagini/banner.jpg");
background-position:left top;  /* posiziona l'immagine di sfondo in alto a sinistra */
background-repeat:no-repeat;
color:#FFFF00;
height:154px;
}

h2 {
color:#6699FF;
font-size:1.5em;
text-align:center;
}

div#content {
background-color:#FFFFFF;
margin-bottom:10px;
margin-left:140px;
margin-right:200px;
margin-top:10px;
padding-bottom:1em;
padding-left:10px;
padding-right:10px;
padding-top:1em;
border-left: 1px dashed grey;
border-right: 1px dashed grey;
}

/*------SEZIONE NAVIGAZIONE-------*/

div#navigation {
padding-bottom:0;
padding-left:10px;
padding-right:0;
padding-top:1em;
float:left;
clear:none;
/*position:absolute;
top: 154px;
left:0;*/
width:130px;
text-align:left;
}

div#navigation p {
font-size:90%;
}

/*--[2]--*/

div#navigation2 {
padding-bottom:3px;
padding-left:10px;
padding-right:0px;
padding-top:5px;
margin-right:20px;
width:110px;
background-color: trasparent;
-webkit-border-radius-topright: 70px;
-moz-border-radius-topright: 70px;
border: 1px solid grey;
} 

div#navigation2 .box {
clear:both;
padding:0;
margin:0;
border-bottom:1px dashed grey;
width:100px;
} 

div#navigation2 a{
margin:0;
border-spacing:0px;
color:#336699;
font-family:arial,sans-serif;
font-size:1.2em;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:1.7em;
text-decoration:none;
}

div#navigation2 .box a:hover {
color:#003333;
text-decoration:underline;
font-weight:bold;
background-color:#6699FF;
padding-left: 12px;
font-size:1.7em;
}

/*-----SEZIONE EXTRA----*/

div#extra {
clear:none;
padding-bottom:1em;
padding-left:5px;
padding-right:5px;
padding-top:1em;
float:right;
/*position:absolute;
right:0;
top:154px;*/
width:190px;
}

div#find {
padding:10px;
margin:0;
}

div#extra cite {
display:block;
-moz-border-radius:10px;
background-color:#6699FF;
border:1px dashed white;
color:white;
padding:10px;
margin:10px;
}

div#immagini {
margin:10px;
padding:0;
border:1px dashed grey;
width:170px;
height:auto;
}

div#immagini img {
width:170px;
height:auto;
}


/*-------SEZIONE FOOTER------*/

div#footer {
clear:both;
background-color:grey;
color:#FFFFFF;
padding-bottom:5px;
padding-left:0;
padding-right:0;
padding-top:5px;
text-align:center;
}

div#footer a{
font-family:Times-new-roman;
text-decoration:none;
color:#FFFFFF
}

ovviamente la struttura html è la seguente:

<html>
<body>
<container>
<header>
<content>
<navigation float left>
<extra float right>
<footer>
</container>
</...>
</...>

[ResianTaxidrive]

Non ho capito cosa intendi, dove vorresti che andasse il box dei contenuti?

[fabiostyle]

allora, se hai capito come dovrebbe essere fatto dal punto di vista dello schema grafico, allora ti spiego meglio come è in realtà:
-header: al posto giusto
-content: al posto giusto
-navigation e extra: si trovano come se content avesse clear:both, cioè entrambi sotto, ma ai posti giusti (si trovano staccati dall'header per intenderci)
-footer:al posto giusto

spero che abbiate capito: voglio che content, extra e navigation seguano il flusso della pagina, navig. a sinistra, content al centro e extra a destra COME DOVREBBE ESSERE.

[ResianTaxidrive]

Devo ammettere che non capisco.
Io vedo navig a sx, content al centro, e extra a dx; piuttosto, seguendo il flusso della pagina dovrebbe esserci prima extra di content. E' questo che vorresti?

[fabiostyle]

Originariamente inviato da ResianTaxidrive
Devo ammettere che non capisco.
Io vedo navig a sx, content al centro, e extra a dx.

ecco! questo è il punto! neanke io riesco a capire...

[ResianTaxidrive]

cosa c'è da non capire? navig e extra hanno dei float quindi è come se si rialzassero rispetto al piano su cui invece giace content che non ha flottamenti e si posiziona quindi nel primo posto libero. Se content non avesse i margini lo vedresti partire in alto a sx e lo vedresti sotto navig (e con "sotto" intendo proprio che lo vedresti parzialmente coperto).

[fabiostyle]

tutto fatto, ma il perchè proprio non me lo riesco a spiegare:
in pratica nella guida hanno messo deliberatamente che il div content sia stato messo dopo il div navigation ed il div extra. Pensavo fosse superfluo, invece cambia radicalmente la viosione della pagina. Quindi:

...
<content>
</>
<navigation>
</>
<extra>
</>
...

NON è assolutamene uguale nella visualizzazione a:

...
<navigation>
</>
<extra>
</>
<content>
</>
...

mi sa che centra qualcosa riguardo il flusso della pagina che mi sfugge...

[ResianTaxidrive]

Se prendi l'html puro, senza stili, l'ordine con cui appaiono le cose è il flusso normale della pagina.

Questo ordine può essere sovvertito tramite gli stili.
Usando solo i float cmq un blocco non potrà mai andare più in alto di un blocco che lo precede, ci potrà andare a fianco ma mai più in alto.

Fai qualche esperimento e vedrai che capirai le cose.