| Allegato | Dimensione |
|---|---|
 con_lo_sfondo.png | 234.51 KB |
| senza_sfondo.png | 124.72 KB |
Buongiorno a tutti!!
Mi è capitata una cosa strana. Ho un codice css (rubato in parte da artisteer) che mi imposta lo sfondo della pagina, ma quando lo inserisco nel div di page.tpl.php non mi permette di clicare su nessun link, nemmeno quelli di amministrazione.
Ora ho commentato la parte incriminata perché senza sembra funzionare ma senza lo sfondo.
Inoltre, PageBackgroundGlareImage sovrebbe rimanere "scrollare" spostando in basso la pagina, ma invece rimane fisso in cima.
Vi posto il codice css:
body{
background-color: #A3978A;
background-image: url('images/red/bg_texture.jpg');
background-repeat: repeat;
background-attachment: scroll;
background-position: top left;
min-width:750px;font-size:82%;font-family:"Trebuchet MS",Arial,Verdana,Tahoma,sans-serif;line-height:130%;color:#000;margin:0 auto;padding:0}
#page{width:95%;background:#fff;margin:0 auto;padding:3px}
.PageBackgroundGlare
{
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.PageBackgroundGlareImage
{
background-image: url('images/red/bg_glare.png');
background-repeat: no-repeat;
height: 444px;
width: 283px;
margin: 0;
}...e quello di page.tpl.php
[...]
<body<?php print phptemplate_body_class($sidebar_left, $sidebar_right); ?>>
<div class="PageBackgroundGlare">
<div class="PageBackgroundGlareImage"></div>
</div>
[...]
<div id="page">In allegato le immagini con e senza sfondo
Per chi vuole dare un'occhiata il sito è http://www.banqueting.it ( magari mi può anche dare qualche consiglio ;) )
Dove sto sbagliando?
Ciao,
.PageBackgroundGlare è posizionato in modo assoluto, quindi si posiziona sopra a tutto il fulsso nelle posizioni che gli hai indicato (left:0 top:0). Se vuoi che rimanga fisso in un punto anche quando scrolli la pagina (mi sembra di aver capito che ti interessa questo, o sbaglio) devi impostarlo come position:fixed, stando bene attendo che il position:fixed non va d'accordo con qualche versione di IE.
;)
Quello è un problema minimo.
Il problema più grande è che non si visualizzano i menu quando lo sfondo è attivo (vedi allegati)
Ah, ok... adesso ho capito il problema.
Prova ad impostare uno z-index alto a .PageBackgroundGlare, tipo z-index:9999.
Giusto per vedere se è un problema di livelli di posizionamento o altro.
;)
Non funziona...
Ho messo così, perché penso che sia l econda immagine che da problemi.
Intanto provo con lo scroll
.PageBackgroundGlare{
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.PageBackgroundGlareImage
{
background-image: url('images/red/bg_glare.png');
background-repeat: no-repeat;
height: 444px;
width: 283px;
margin: 0;
z-index:9999;
}
Come non detto
Ho messo position fixed nel css e ora sembra funzionare. Ma può dipendere solo da quello?
Dovresti metterlo sul contenitore, quindi su .PageBackgroundGlare (è questo il div che si posiziona in modo assoluto, .PageBackgroundGlareImage invece è posizionato relativamente e lo z-index non ha effetto su un div posizionato relativamente)
Attendo al position:fixed che su IE6 non viene interpretato...
Comuqnue sia, dove hai messo il position:fixed?
Aspetta, ho visto che hai fatto la modifica sul sito e adesso ho capito dove sta il problema...
Il problema è il width:100%: di norma significa "tutta la grandezza della pagina". Se lo posizioni in modo assoluto, però, possono sorgere alcuni problemi (ad esempio, credo su IE visto che con FF non dovrebbe succedere nulla). Ti consiglio quando usi dei posizionamenti assoluti di specificare sempre almeno la larghezza in px, così non si creano casini.
L'inghippo è che, essenso 100%, il div occupava l'intera grandezza della pagina e si andava a posizionare sopra al menu; per questo non riuscivi ad aprirlo, perchè c'era un div (seppur trasparente) che copriva quella parte...
Consiglio: installati Firebug per Firefox e ti accorgerai subito del problema!
;)
Penso di aver risolto.... Ho tolto il fixed. Speriamo che al cliente vada bene cosi... ;)
Come ti sembra il sito?
Con queste impostazioni sei sicuro che lo vedi su ogni browser.
Mi è venuto in mente adesso che il problema del fixed su IE 6, per un progetto, l'ho risolto con un piccolo htc da associare alla regola per IE6.
Qui trovi un esempio: http://ryanfait.com/position-fixed-ie6/
;)