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.
codice:
#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