div che nasconda il 100% dei contenuti

**essezeta** · 22-07-2008, 20:11

Un saluto a tutti,
chi ha cinque minuti può darmi una dritta?

Ho impostato un div (<div id="over">) che copre tutta la supeficie della mia pagina...
(il motivo è che via javascript poi lo faccio scomparire con un bell'effettino e posso visualizzare i contenuti della mia pagina: questo solo per spiegare il perché)

Riesco ad ottenere esattamente quello che voglio... ma...

solo su FF!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Invece... su IE, <div id="over"> copre il 100% dello schermo, ma poi sotto comincia il contenuto della pagina, quindi se scorri lo visualizzi anche senza applicare l'effetto...

Osservate il risultato sulla MIA PAGINA LIVE:
aprendolo con FF vedrete solo il verde di <div id="over">, mentre con IE, sotto il verde di <div id="over"> noterete il rosso dei contenuti...

Ho provato a lavorare di z-index, con altri valori di position, ecc... ma niente...
mi sapete indicare una soluzione?
Grazie in anticipo e comunque...

Semplificando, html e css sono quelli che seguono:

codice:

<html>
<head>
<style type="text/css">
#over {
position: fixed;
top:0px;
left:0px;
width:100%;
height:100%;
background:#00ff00;
}
#contenuti {
width:200px; background:#ff0000;
}
</style>

</head>
<body>

<div id="over">
contenuto che copre tutto
contenuto che copre tutto
contenuto che copre tutto 
</div>

<div id="contenuti">
testo






























testo

</div>
</body>
</html>

**Mich_** · 23-07-2008, 09:00

Io farei cosi`:

codice:

html, body {
  width: 100%;              /* necessario, altrimenti il 100% di sotto non ha significato */
}
#over {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;           /* puo` essere anche di piu` */
  background: #00ff00;
  z-index: 100;
}
#contenuti {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: #ff0000;
  z-index: 10;
}

...
<body onload="document.getElementById('over').style.zIndex='1';">

Poi tutto il resto del sito dovra` stare dentro #contenuti: ecco perche` deve essere largo 100%.
Sull'altezza di #contenuti invece non credo puoi definirla fissa: eventualmente puoi definire un'altezza diversa (maggiore) per #over, in modo che risulti sempre piu` lungo di #contenuto.

**essezeta** · 23-07-2008, 12:29

tutto quello che hai scritto è chiaro Mich e ti ringrazio...
ma il problema è un altro...
forse mi sono spiegato male...

il fatto è che il div#over io lo posiziono in modo fisso senza margini partendo da 0 e continuando per il 100% sia in larghezza che in altezza... (un po' come hai fatto anche tu... il concetto non cambia...)
Che significa? Significa che mi va ad occupare il totale dello schermo, sempre e comunque... anche se l'html contiene altra roba che magari rende la pagina più lunga dello schermo e dunque scrollabile via barra laterale... il div in questione resta sempre a coprire la superficie al 100%... come se vi galleggiasse sopra...

Infatti, con FF mi lavora così... (fino a quando poi non lo faccio collassare e allora compare il resto... ma questa è un'altra storia)
Invece in IE mi copre sì il 100% dello schermo, ma il resto dei contenuti risulta comunque visibile, anche col tuo modo, perché se la pagina è più lunga posso scrollare e div#over non rimane posizionato al 100% in assoluto, ma relativamente a tutta la pagina...
prova/te con la pagina live che ho messo on line, su FF è in un modo su IE in un altro...

Esistono combinazioni di attributi che mi constringono IE a fare il suo dovere? magari in workaround o hackettini?

**Mich_** · 23-07-2008, 13:52

E` un baco noto di IE6, che non supporta il position:fixed.
Invece dovrebbe supportarlo IE7.

Personalmente non so se c'e un metodo alternativo, salvo quello proposto.
Eventualmetne puoi cercare sui siti specializzati in hack per IE (un riferimento anche tra i "link utili").

**essezeta** · 23-07-2008, 15:42

Come sempre Mich_ hai ragione...
come sempre i tuoi consigli sono preziosi...
...come sempre grazie mille...

Ho chiesto a Google cosa mi offriva con | position fixed in IE |
...se a qualcuno dovessero fare comodo, ecco un po' di link che risolvono/aggirano il problema (consultate sopratutto il primo, è in inglese, ma è chiarissimo e molto più dettagliato anche perché motiva le soluzioni), ciao a tutti:

http://tagsoup.com/cookbook/css/fixed/

http://annevankesteren.nl/test/examp...ion-fixed.html

http://divinentd.com/experiments/emu...ion-fixed.html

http://eldalie.blogspot.com/2007/08/...ion-fixed.html

Discussione: div che nasconda il 100% dei contenuti

Strumenti discussione

Ricerca discussione

Visualizza

div che nasconda il 100% dei contenuti

Permessi di invio