[CSS] - background diverso lato sx e dx

[ferra.s]

Ciao a tutti
Devo strutturare un template con un solo div centrato a dimensione fissa, fin qui nessun problema, uso position:relative e margin:0 auto.

Il div è 960 px, per una risoluzione dello schermo di 1024x768 e superiori, e restano quindi due colonne libere, di dimensione uguale, a dx e sx, ma non è un reale 3 colonne, non posso mettere contenuto nelle colonne esterne!
Il problema è che devo mettere due immagini di sfondo diverse, una sulla colonna dx e una sulla sx, ripetute sull'asse X, come continuazione della grafica del div centrale.

Ho usato questo codice, in pratica ho due div, left e right, che occupano ognuno il 50% della larghezza, con le relative immagini di sfondo, e il div wrapper sovrapposto (ho dato un z-index) e centrato.
Nell'html richiamo in ordine i div left,wrapper,right.

#left{
	top:250px;
	position: absolute;
	left:0;
	width:50%;
	background-image:url(../image/back_index_left.gif);
	background-repeat: repeat-x;
	height:300px;
	}
#right{
	top:250px;
	position: absolute;
	right:0;
	width:50%;
	background-image:url(../image/back_index_right.gif);
	background-repeat: repeat-x;
	height:300px;
	}
	
#wrapper{
	top:250px;
	position: relative;
	margin: 0 auto;
	width:960px;
	height:300px;
	background-color:#c00;
	background-image:url(../image/back_index.gif);
	background-repeat: repeat-x;
	z-index:90;
}

Funziona su Firefox 1.5 e 2, IE 6 e 7, Opera, ma non sui vecchi browser (provato su Firefox < 1.0 e su konqueror di kde 3.3) , volevo trovare se possibile una soluzione retro compatibile.
Nei browser vecchi il problema sembra dato dall'istruzione z-index, è come se non ci fosse, e wrapper viene coperto da left e right

[ferra.s]

Ho pensato ad una cosa

Visto che le immagini che uso a dx e sx sono 1 x 300 px, se io costruisco un'immagine 2x300, cioè fatta dalle due affiancate, non riesco a dire al browser di estenderla per tutta la larghezza?

Cioè che se si ha la 1024x768 l'immagine risulti 1024x300, dove nella metà sx è come se avessi ripetuto 512 volte l'immagine 1x300, e stessa cosa a dx?

spero di essermi spiegato...

[ferra.s]

up..

[Mich_]

I tuoi post aprono varie problematiche. Provo ad affrontarle una alla volta (se ci riesco).

Anzitutto se usi position e z-index ti metti nella "zona grigia": occorre molta esperienza e un po' di fortuna perche` funzioni in tutti i browser.
A mio parere conviene "dimenticare" l'attributo position.

Riassumendo, mi par di capire che vuoi un sito centrato; quello che "avanza" rispetto al sito (a destra e a sin) vuoi che abbia due colori diversi.
Poi aggiungi che hai fatto due immagini 1x300, ma non specifichi se sono in verticale o orizzontale (dall'ordine 1x300 direi che sono orizzontali); pero` poi vorresti espanderle facendo un 2x300 (che presupporrebbe che il 300 sia vert), ed a questo punto non ci capisco piu`.
Ma queste immagini hanno delle sfumature o sono dei colori fissi?

Se sono dei colori fissi, dimenticando quanto hai scritto (e che non ho capito), per realizzare i bordi dicolore diverso, ti basta avere una immagine alta 1 px e larga quanto vuoi (diciamo 2000px, ma puo` essere anche di piu`), con circa meta` di un colore e meta` dell'altro; la posizioni nel body, la fai ripetere in verticale e la centri in orizzontale:
background: url(duesfondi.gif) repeat-y top center;


Gli sfondi non possono venir estesi, come si fa con le immagini del tag <img>


Per centrare un oggetto nel body, occorre:

html, body {
  text-align: center;     /* per far contento IE6 */
}
#wrapper {
  text-align: left;          /* o quello che vuoi */
  margin: 0 auto;        /* per i browser standard */
  ...
}

Nota: un sito largo 960 e` molto largo: in molti browser non ci sta. Molte persone che hanno un browser largo, tengono il browser in una finestra (cosi` possono controllare altre finestre in contemporanea).
Dovresti usare un layout fluido, che si adatta alla finestra, e con un max-width di 960, se questa e` la larghezza max che ritieni adatta al tuo sito.

[ferra.s]

mi sono spiegato male, l'immagine è alta 300 px e larga 1, e devo ripeterla in orizzontale.

in poche parole, devo realizzare un template a 3 colonne, le 2 esterne fluide, fino a scomparire, e quella centrale di dimensione fissa...

[Mich_]

Nota che ti avevo proposto un template centrato, con i colori laterali messi come sfondo del <body>.
E` un approccio diverso dalla tua idea, che puo` funzionare se gli "sfondi laterali" hanno dei colori uniformi.
Altrimenti dovresti dire perche` non ti va bene.
La soluzione con gli sfondi e` sicuramente piu` leggera di quella con tre colonne, quindi piu` semplice anche da adattare per i problemi di cross-browser.


Template a tre colonne ce ne sono diversi tra i "link utili". Puoi anche fare un giro e dare un'occhiata.

[ferra.s]

volevo evitare di mettere il link del sito...
http://server.formsoft.eu/albi

se vedi adesso c'è già un div centrato, ma se metto uno sfondo omogeneo non si adatta alla grafica (che dovrebbe invece restare così)

pensavo al 3 colonne perchè potevo mettere le immagine diverse...

tra i template presenti nelle guide/articoli non ce n'è uno con le colonne laterali che scompaiono, ed è anche ovvio, perchè un eventuale contenuto messo li andrebbe a scomparire ad una bassa risoluzione

giustamente mi hai fatto notare che a 960 px se si ha la 800x600 non si vede niente, li posso tranquillamente stringerlo...

[Mich_]

Ho dato un'occhiata, ed in effetti trova conferma la mia idea: hai impostato male la suddivisione dei blocchi.

Io individuo:
- un blocco in alto con sfondo nero (1)
- un blocco centrale con la scritta ALBI e l'immagine in b/n (2)
- un blocco con i link "allestimento... design" (3)
- un blocco a sfondo rosso (sito in allestimento e indirizzo) (4)
- il resto nero. (5)

(2) il blocco centrale potrebbe essere formato da un blocco contenitore a tutta larghezza (con i bordi superiore ed inferirore bianchi) e sfondo come proponevo io, al cui interno c'e`
- un blocco centrato, che contiene le immagini ALBI e b/n.

Tu hai fatto invece un'immagine unica di: bordo sinistro rosso, ALBI, b/n, bordo destro nero. Questo ti limita il layout: da un lato ti allarga il tutto, perche` un'immagine cosi` larga potrebbe non stare dentro la finestra; dall'altro ti inserisce uno sfondo dentro il contenuto, che e` semanticamente sbagliato.

Altre considerazioni:
(1) e (5) possono essere resi con lo sfondo del body
(3) sfondo del body con una righetta meta` rossa e meta` nera da posizionare come sfondo non ripetuto in alto centrato
(4) sfondo rosso con il contenuto centrato

[ferra.s]

ciao
buona la nuova disposizione dei blocchi, a certe cose non avevo pensato

ma sbaglio o così non riesco a tenere nel blocco (2) lo sfondo rosso a sinistra e nero a destra?

il link che ho ti ho dato non è raggiungibile al momento, puoi trovare la stessa pagina su www.albisnc.com

[Mich_]

ma sbaglio o così non riesco a tenere nel blocco (2) lo sfondo rosso a sinistra e nero a destra?

Lo fai con la tecnica che ti avevo proposto ieri: metti al blocco largo 100% uno sfondo di una riga meta` rossa e meta` nera, che fai ripetere in vert e posizioni top center.

Oppure (visto che il body ha gia` sfondo nero), ti basta una riga rossa larga 500px da posizionare top left e ripetere solo vert.

Forse non sono stato chiaro con il blocco (1).
In realta` non e` un blocco, ti basta usare il margin-top al blocco (2)