Layout float fisso 3 false colonne

neohtml

Layout float fisso 3 false colonne

Saluto tutti ragazzi..sono nuovo, è la prima volta che scrivo un post qui..un sito splendido dove si trova tutto, spero di non far arrabbiare ponendo un quesito già postato che non sono riuscito a leggere in questo "oceano di informazioni".
Passo al punto: sto imparando da solo html e css e stavo facendo una sorta di "basi di layout" dai quali partire per sviluppare i miei siti (float 2 colonne,float 3 colonne..fissi, fluidi ecc).
Volevo fare mente locale una volta per tutte, la situazione è questa: layout fisso con float a 3 colonne (sx per il menu, centrale per i contenuti e dx per gli extra); le varianti possono essere false colonne che si estendono fino al footer o solo una di queste.
In rete ho trovato i layout gala oppure la guida di html.it: io li ho mischiati insieme, non so se ho fatto una porcata!!:o
Ho preso dei Gala la possibilità di mettere nell'html i contenuti centrali prima delle colonne (cosa che html.it non faceva) e invece di html.it ho preso il secondo contenitore per l'immagine di background dell'altra falsa colonna.
Spiego meglio scrivendo il codice:

     HTML <!--tralascio html, body, head ecc ecc-->

<div id="container">
<div id="container2">
<div id="header"><h1>TITOLO SITO</h1></div>
<div id="wrapper">
<div id="contenuti">..Qui tutti i contenuti centrali..</div>
</div> 
<div id="colsx">..menu e tutto quello che sta nella colonna sinistra</div>
<div id="coldx">..tutti gli extra della colonna di destra..</div>
<div id="footer>..Qui ci va il footer</div>
</div> 
</div>

CSS

html, body{
margin: 0 auto; padding: 0; background: #000; text-align: center; /IE/}
#container{ width: 960px; border: 1px solid #282c2e;
background: #151618 url(coldx.gif) repeat-y right;
padding: 0; margin: 0 auto; font-family: Verdana, Arial, sans-serif;}
#container2{ background: url(colsx.gif) repeat-y left;
text-align: left;/ripristina allinemamento/}
#wrapper{ float: left; width: 100%;}
#contenuti{ margin: 0 188px 0 148px;}
#colsx{ float: left; width: 148px; margin-left: -960px;}
#coldx{ float: left; width: 188px; margin-left: -188px;}
#footer{ clear: left; height: 40px; background: #909;}

Che dite ragazzi? C'è effettivamente un contenitore in piu', ma facendo varie prove avevo problemi se una delle colonne per caso erano piu' lunghe dei contenuti..spero di non aver fatto un intervento inutile o ripetitivo.

Una variante al caso sopra potrebbe essere non usare il container2 nel caso non voglia che una delle due colonne si estenda fino al footer: non avrei bisogno dell'immagine di background che si ripete e perciò nemmeno del secondo contenitore che la ospita.
Al codice sopra descritto perciò toglierei da html e css.
Può essere una tecnica accettabile?

Ultima cosa che volevo chiedere (non mi sparate vi prego!!): ho visto una tecnica che "taglia la testa al toro" diciamo..:) Un'unica immagine di background larga tutta la larghezza del sito (esempio 960px) già suddivisa cromaticamente tra colonne e contenuti centrali da applicare al ripetuta nell'asse y. In questo caso non sarebbe necessario il container2 e le colonne si estenderebbero fino al footer lo stesso.
Pensate sia una cosa corretta? Se dovessi convertire da pixel in em in un eventuale layout elastico avrei problemi nell'arrotondare i pixel in em per l'immagine di background?

Per concludere: questi sono "deliri" e ansie di un poveretto che studia da poco html e css da solo, perciò sto cercando di fare "ordine" diciamo tra tutto ciò raccolto in giro.
Questo sito è davvero una "manna dal cielo", con moderatori preparati e disponibili..spero di non aver postato un dubbio già descritto da qualcun'altro.
Un grazie a chiunque abbia voglia di confermare o smentire se le tecniche da me soprascritte possano essere accettabili oppure no..
Ciao a tutti! Francesco

neohtml

Ragazzi, c'è nessuno che potrebbe aiutarmi?

karedas

ciao neohtml e scusa per l'assenza,
non ho capito bene il tuo problema ma intanto ti chiederei una risorsa online se ce l'hai in modo da poter vedere in maniera più visibile cosa ti serve.

neohtml

Ciao Karedas..figurati sei gentilissimo già a rispondermi.
Una risorsa online per il momento non ce l'ho, potrei fare una paginetta web...
Nel frattempo magari mi puoi dire se come base per un layout a 3 colonne float il codice che ho messo nel post potrebbe

andare bene?

CSS
html, body{
margin: 0 auto; padding: 0; background: #000; text-align: center; /IE/}

#container{ width: 960px; border: 1px solid #282c2e;
background: #151618 url(coldx.gif) repeat-y right;
padding: 0; margin: 0 auto; font-family: Verdana, Arial, sans-serif;}

#container2{ background: url(colsx.gif) repeat-y left;
text-align: left;/ripristina allinemamento/}

#wrapper{ float: left; width: 100%;}

#contenuti{ margin: 0 188px 0 148px;}

#colsx{ float: left; width: 148px; margin-left: -960px;}

#coldx{ float: left; width: 188px; margin-left: -188px;}

#footer{ clear: left; height: 40px; background: #909;}

HTML 
<div id="container">
<div id="container2">
<div id="header"><h1>TITOLO SITO</h1></div>
<div id="wrapper">
<div id="contenuti">..Qui tutti i contenuti centrali..</div>
</div> 
<div id="colsx">..menu e tutto quello che sta nella colonna sinistra
</div>
<div id="coldx">..tutti gli extra della colonna di destra..</div>
<div id="footer>..Qui ci va il footer</div>
</div> 
</div>

In pratica vorrei sapere se questo codice potrebbe andar bene per un layout fisso 3 false colonne float, oppure se

semanticamente non è corretto. Come puoi notare ho utilizzato un secondo (#container2) per inserire il background

dell'altra falsa colonna.
Siccome è la prima volta che faccio un layout a 3 false colonne magari se leggi il codice qui sopra e puoi dirmi se per te

può essere corretto oppure faresti in un altro modo.
Grazie infinte per la disponibilità e scusa per la mia ignoranza!!
Ciao

neohtml

C'è piu' nessuno?

neohtml

Non c'è piu' nessuno.. vabbè