PDA

View Full Version : [CSS] Problemi di posizionamento, z-index e co.

albythebest
14-01-2007, 17:56
Ciao. Sono parecchi giorni che sto sbattendo la testa per fare il layout di un sito con i CSS, per evitare le tabelle.
Quello che io vorrei realizzare è un'immagine a centro pagina (logo) da cui parte, alla sua destra e sinistra, un'immagine di background repeat-x, che si adatti quindi alla dimensione della pagina. Ma non sono stato in grado di creare un'immagine in repeat che andasse da lato pagina al logo al centro; allora ho pensato di impostare i due background a lato del logo (differenti tra loro) in modo che si spartissero ciascuno il 50% della pag, e poi il logo si andasse sovrapporre a loro in primo piano a centro pagina. Per farvi capire meglio vi mostro due esempi.
http://albythebest.altervista.org/prova/prova2.html
Qua il logo è visibile e nn sovrapposto ai due backgorund laterali.
http://albythebest.altervista.org/prova/prova.html
Qua il logo è sovrapposto, il problema è che è finito dietro ai due background, e non davanti come vorrei. In teoria con z-index dovrei poterlo mettere davanti, ma nn ci riesco.. Potete darmi una mano?
Se siete in grado di fare quello che desideravo all'inizio, è anche meglio.. :)
Grazie!
albythebest
15-01-2007, 17:52
Nessun aiutino? Rischio il manicomio se non risolvo... o.o
Grazie! ;)
albythebest
16-01-2007, 19:59
Risolto!!
http://albythebest.altervista.org/prova/prova.html
MA! funziona solo su Firefox, Konqueror e Safari, non su IE6!!! :mad:
Nessuno sa come renderlo compatibile anche con quest'ultimo??
Grazie!
andbin
17-01-2007, 09:05
Risolto!!
http://albythebest.altervista.org/prova/prova.html
MA! funziona solo su Firefox, Konqueror e Safari, non su IE6!!! :mad:
Nessuno sa come renderlo compatibile anche con quest'ultimo??
Grazie!Metti questo:

div#center { z-index:3; position:absolute; top:0px; left:0px; width:100%; height:123px; background:url(center2.png) center no-repeat; }

(tutto il resto è uguale)

Così funziona, testato su IE 5.5, IE 6, FF 2, Opera 7 & 8 e Mozilla 1.7.

Però ti avverto di una cosa: l'immagine center2.png l'hai fatta a 24 bit con canale alfa ... perché hai messo delle zone in (semi)trasparenza. Se provi la pagina con IE, noterai dei problemi di colore nelle zone di (semi)trasparenza. Non è un problema della tua immagine o dei CSS .... è un baco ben noto di IE, che non ha mai gestito correttamente (almeno fino a IE 6 ... non so per IE 7) le immagini png con canale alfa. :(
albythebest
17-01-2007, 21:29
Magnifico! Ora è perfetto :) Grazie mille andbin!
Del problema della trasparenza me ne sono accorto ieri, proverò a risolvere con Gimp o PhotoShop (ora ho semplicemente usato KolourPaint di KDE).