layout a due colonne con sfondi diversi

roxanna

layout a due colonne con sfondi diversi

Buongiorno a tutti.

Devo realizzare un layout con due colonne ognuna delle quali con un colore diverso (celeste la colonna di sin, arancio la colonna di destra). Le due colonne devono avere la stessa altezza, quindi estendersi entrambe fino al footer.
La tecnica che si usa in questi casi è quella di attribuire al container il colore di sfondo della colonna più corta (nel mio caso l'arancio).

Il problema è che non sempre la colonna arancione è più corta di quella celeste. Per risolvere momentaneamente il problema ho inserito dei <br> nella colonna celeste quando questa risulta più corta di quella arancione. Poiché i testi del sito possono essere modificati anke da terzi, la soluzione dei <br> non è ottimale.

Esiste un'altra tecnica x ottenere un layout a due colonne cromatiche che si estendono entrambe fino al footer?

karedas

Ciao Roxanna

Attualmente una buona tecnica è quella di creare uno sfondo ripetibile in verticale. Lo scopo è però quello di attribuire questi background ad uno o più elementi padre.

Il gioco sta in questo:

Apri un programma di grafica e crea uno o più sfondi di larghezza pari a quella di una delle tue colonne. L'altezza può essere anche di 1px poichè automaticamente, nel ripeterla verticalmente, genererà il tuo sfondo all'infinito.
Il tuo footer, ad occhio, potrebbe quindi avere tale sintassi xhtml:

[INDENT][html]
<div id="footer">
<div id="wrap">
<div id="footer_left">Testo all'interno della colonna di sinistraà del nostro footer</div>
<div id="footer_right">Testo all'interno della colonna di destra del nostro footer</div>
</div>
</div>
[/html]Css:


#footer{
background:url('cartellaimmagini/colonnaSXfooter.jpg') repeat-y top left;
}
#wrap{
overflow:hidden;
background:url('cartellaimmagini/colonnaDXfooter.jpg') repeat-y top right;
}

```Attualmente il nostro trucco è quello di sovrapporre due contenitori e fare in modo che uno (footer) ripeta la mia immagine sulla sinistra mentre il secondo (wrap) sulla destra.

Adesso il secondo obiettivo sarà dare ai contenitori delle due colonne 1) la posizione , 2) una larghezza pari a quella degli sfondi creati. Ciò che quindi faremo sarà posizionare sulla "traccia" degli sfondi le nostre due colonne.

#footer_left{
float:left;
width:200px;
}
#footer_right{
float:right;
width:200px;
}

Utilizza al posto di "200px" i valori delle tue colonne pari a loro volta alle larghezze degli sfondi creati.
L'illusione e la base di questa tecnica sta nel fatto che i nostri sfondi continueranno a ripetersi all'infinito anche se i contenitori, in relazione con i loro contenuti, non arriveranno a riempire corrispettivamente l'altezza dell'intero footer (data appunto dalla colonna più alta).
Ah, occhio semmai a spostare gli sfondi in base alla posizione delle colonne.
Se la colonna di sinistra ha ad esempio un margine sinistro pari a 10px allora dovrai operare ad esempio in questo modo:

background:url('cartellaimmagini/colonnaDXfooter.jpg') repeat-y 10px 0;

Ciao spero di essere stato esauriente!
[/INDENT]

roxanna

Grazie mille Karedas!
Il mio errore era non considerare il secondo contenitore ovvero #wrap.
Adesso tutto funziona alla perfezione.

Ciao