come si fa?

Tu come mi consigli di fare?

Ho seguito la guida proposta in questo stesso sito:
http://www.giorgiotave.it/forum/css/54753-layout-izzatore.html

Mi aiuti ad applicarla per tre colonne?
Cioè invece di avere solo

• sidebar
• main
  Vorrei fare:
• menubar
• extrabar
• main
  Vanno entrambe prima di main nel codice XHTML?
  Inoltre nella guida dice che se voglio la sidebar a destra devo applicare "left-sidebar-wide160" a content, se la voglio a sinistra "left-sidebar-wide160"

E se ne voglio una a destra e una a sinistra?
Grazie per l'aiuto!

Per Extrabar cosa intendi?
Innanzitutto devi avere ben in mente cosa far contenere alla tua "scatola".

Racchiudi tutto il tuo lavoro in un div "container" , dagli una dimensione fissa o dinamica e al suo interno distribuisci tutto il resto.

Ad esempio:

[html]
<div id="container">
<div id="testa"></div>
<div id="corpo">
<div id="colonna_sinistra"></div>
<div id="contenuto"></div>
<div id="colonna_destra"
</div>
<div id="piede"></div>
</div>
[/html]

Per ExtraBar intendo la colonna di destra, quella dei contenuti extra.
Se io nella Testata, quindi div testa voglio mettere immagini sopra ad altre così com'è ora? Tipo il logo o il modulo di ricerca, come faccio?

Ponendo che nel div testa andremo a mettere loghi, moduli di ricerca, banner, elemento in flash di presentazione e quant'altro, allora dovremo semplicemente inserircelo in questo modo:

[html]
...
<div id="testa">
<a href="#"><img src="logo.jpg" alt="logo aziendale della ditta ABC" /></a>
<form method="post" id="search_module">
...
</form>
</div>
[/html]

Ma se io ho un'immagine di sfondo e voglio sovrapporre il logo e quant'altro, uso il position:absolute?

Allora ho fatto così:

Pagina XHTML:
[HTML]<div id="container" class="fixed1000">
<div id="testa"></div>
<div id="corpo">
<div id="menubar">Contenuto x MenuBar</div>
<div id="contenuto">
<div id="rivolto"></div>
Contenuto x Contenuto
</div>
<div id="extrabar">Contenuto x ExtraBar</div>
</div>
<div id="foot"></div>
</div>[/HTML]

Codice CSS:
[HTML]body { font-size: 62.5% } /* set 1em to 10px */
#container { margin: 0 auto; text-align: left;}
.fixed1000 { width: 1000px; }

#testa { width: 1000px; height: 194px; background: #ffffff url("../../images/header.jpg"); margin: 0 auto;}
#corpo { width: 1000px; background: url("../../images/body.jpg"); margin: 0px;}
#menubar { width: 151px; float: left; margin: 0px 0px 0px 52px;}
#extrabar { width: 151px; float: right; margin: 0px 52px 0px 0px;}
#contenuto { width: 570px; margin-left: 214px; position: relative;}
#rivolto { position: absolute; width: 79px; height: 64px; margin: 0px 0px 0px 501px; background: #FFFFFF url("../../images/rivolto.jpg") no-repeat;}
#foot{ width: 1000px; height: 80px; margin: 0px auto; background: url("../../images/footer.png");}[/HTML]

Però si forma uno spazio bianco tra Testa e Corpo, poi, la extrabar si posiziona sotto Contenuto

Nada?

La pazienza è la virtù dei forti
Se puoi dovresti farci vedere una versione online di ciò che stai realizzando in modo da aiutarci , così è un pò troppo impraticabile.

Eccolo online:
http:// www.catanianuoto2000 .it/fin/nuovo/

Fammi sapere...
Grazie!!!

Il Div contenuto può non avere l'attributo "relative".
Impostalo anch'esso in float:left e togligli il margine laterale.
Inoltre aggiungi nel div "contenuto" poco prima del suo tag di chiusura "</div>" questo tag:

[html]
<br class="wrapper"/>
[/html]
con css:

[html].wrapper{
clear:both;
width:100%;
}
[/html]

Ciò dovrebbe risolverti anche i problemi di visualizzazione rimasti nel div "contenuto".
Il tuo box contenitore è di 1000px ciò vuol dire che le due colonne laterali più il contenuto devono andare a formare, sommando le loro larghezze, questo valore. Ciò è da considerarsi molto importante perchè altrimenti non utilizzeresti a pieno lo spazio da te assegnato tramite il box contenitore.

• Ricordati innanzitutto che margini, padding e bordi sono da contare in tale somma.
• Al foot dagli l'attributo "clear:both" e così automaticamente si posizionerà ai piedi del contenuto precedente.

Inoltre un'altra regola: se il tuo container è grande 1000px, allora non importa ripetere questo valore anche per il foot, gli possiamo dare però "width:100%" che equivale al valore sopracitato anche se più dinamico.

Inizia a prendere forma...grazie
Ho messo il position:relative al contenuto perchè utilizzo il div rivolto con position:absolute.

Ora tutto è in linea, ma come potrete vedere, non si vede più lo sfondo del div corpo

Niente, anche con il wrapper che mi hai consigliato non si vede lo sfondo del "corpo"

Scusa mi sono sbagliato, il wrapper va al "corpo" non al contenuto.

Ah ecco...già ci siamo!!!!
Grazie!!!!
Altro problemino.
Nel link postato prima manca un pezzo di grafica, che posto sotto...
Come potrei incorporarla?
Grazie

[URL=http://img254.imageshack.us/my.php?image=headvz7.jpg]

Intanto cambia alcune cose:

• Dai delle dimensioni più logiche alle tre colonne. Attualmente non vanno a ricoprire per intero lo spazio che tu gli fornisci tramite il container principale (e cioè 1000px).
  Suggerimento:

• Cambia il margine e sostituiscilo con del padding.
• Cambia i seguenti valori width: Menubar a 152px, Extrabar a 154px, Contenuto a 570px.
• Al div contenuto aggiungi **background: url(../../images/rivolto.jpg) top right; e rimuovi il div "rivolto"
  **
• Aggiungi tale regola in modo da far si che il testo all'interno del div "contenuto" non rimanga appiccicato al bordo della parte centrale:

[html]
#contenuto p{
padding:10px;
}
[/html]

Intanto gentilissimo per gli aiuti che mi stai dando....
Allora il rivolto lì non va bene, tranne che ritaglio diversamente l'immagine, ma poi si vedrebbe l'ombra dell'immagine sottostante e non va bene...

Per quanto riguarda quel pezzo mancante che ho postato prima?
Hai idea di come potrei risolvere?
Praticamente manca l'effetto acqua sulla destra e il top della menubar,extrabar e contenuto...
Ciao
Grazi!!

Non va bene perchè non hai aggiunto al div contenuto "padding:0 10px;". Aggiungendo questo vedrai che ti sistemerà perfettamente.

Se per quanto riguarda la parte mancante parli degli schizzi d'acqua sulla destra, allora ti basterebbe secondo me fare così:

Ritagli l'immagine dell'acqua mancante e l'aggiungi a quella zona

[html]
#extrabar{
background:url(immagineacqua.jpg) no-repeat top right;
}
[/html]

Non solo gli schizzi...se tu vedi quell'immagine mancano le parti iniziali dei tre div....