ugrás a tartalomhoz

div transzparencia probléma

topper · 2008. Feb. 22. (P), 22.35
Kéthasábos oldal fej- és lábléce fixen a lap tetejéhez, illetve aljához tapad. A fennmaradó területen a bal oldali hasáb több részre van tagolva, fix pozícióban, a jobb oldali pedig görgethető, változó tartalmú blokk.

Az a problémám, hogy ez a jobb oldali (dinamikus) blokk alatt nem látszik át a blokkjaimat keretező div háttérszíne (a body tagé bezzeg igen! miért?).

Ezt áthidaltam azzal, hogy egy fix pozíciójú div-et beraktam a külső div-be, de ez ugye letakarja a jobb oldali divemet (mivel a fix pozíciójú blokkok mindig a relativek elé kerülnek)...

Persze ez is megkerülhető a z-index paraméterrel, ez viszont csak IE alatt működik.

Szóval a kérdés: van-e erre valami egyszerű megoldás?
‹ .png használata honlap designban Görgetősáv gondok ›
 ■
1

kiegészítés a kérdésemhez

topper · 2008. Feb. 22. (P), 23.19
Tehát, hogy érthetőbb legyen:
A "dynamic" blokk alatt szeretnék vöröset vagy zöldet látni,
és nem csak explorerben!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<style type="text/css">  
body {width: 100%; height: 100%; margin: 0px; padding: 0px;}  
.header {clear: both; position: fixed; top: 0px; height: 150px; width: 800px; background: #CCCCCC;}
.topleft {float: left; position: fixed; height: 200px; width: 200px; padding-top: 170px; background:

#DDDDDD;}
.bottomleft {float: left; position: fixed; width: 200px; height: 1000px; padding-top: 390px; background:

#AAAAAA;}
.dynamic {float: right; width: 600px; padding-top: 170px; padding-bottom: 50px; background: #EEEEEE;}
.footer {clear: both; position: fixed; bottom: 0px; height: 50px; width: 800px; background: #BBBBBB;}
.xxx {background: red; position: fixed; height: 1000px; width: 800px; z-index: -1;}
</style>
</head>

<body>
<div style="width: 800px; margin: 0 auto; background: green;">
<div class="xxx">XXX</div>
<div class="bottomleft" align="center">BOTTOMLEFT</div>
<div class="topleft" align="center">TOPLEFT</div>
<div class="header" align="center">HEADER</div>
<div class="dynamic">DYNAMIC</div>
<div class="footer" align="center">FOOTER</div>
</div>
</body>

</html>


Előre is köszi!
2

Szerintem ilyenre gondoltál

solkprog · 2008. Feb. 24. (V), 12.12
Szerintem ilyenre gondoltál:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<style type="text/css">  
body {width: 100%; height: 100%; margin: 0px; padding: 0px;}  
.header {clear: both; position: fixed; top: 0px; height: 150px; width: 800px; background: #CCCCCC; z-index:2;}
.topleft {float: left; position: fixed; height: 200px; width: 200px; padding-top: 170px; background:

#DDDDDD;}
.bottomleft {float: left; position: fixed; width: 200px; height: 1000px; padding-top: 390px; background:

#AAAAAA;}
.dynamic {float: right; position: relative; width: 600px; padding-top: 170px; padding-bottom: 50px; background: #EEEEEE; z-index:1;}
.footer {clear: both; position: fixed; bottom: 0px; height: 50px; width: 800px; background: #BBBBBB; z-index:2; }
.xxx {background: red; position: fixed; height: 1000px; width: 800px;}
</style>
</head>

<body>
<div style="position:relative;  width: 800px;  margin: 0 auto; z-index:3;">
<div class="xxx">XXX</div>
<div class="bottomleft" align="center">BOTTOMLEFT</div>
<div class="topleft" align="center">TOPLEFT</div>
<div class="header" align="center">HEADER</div>
<div class="dynamic">DYNAMIC</div>
<div class="footer" align="center">FOOTER</div>
</div>
</body>
</html>
3

kb. erre...

topper · 2008. Feb. 24. (V), 13.18
Köszi!

Kb. erre gondoltam, bár az opera a fix pozíciót máshogy értelmezi, mint a többi böngésző, így ott a vörös háttér (XXX blokk) magasságát is beleveszi a görgetésbe, ezért a dinamikus tartalmat teljesen ki lehet futtatni a képmezőből.

Viszont az tanulságos, hogy a z-indexet a gecko motor csak akkor tudja értelmezni, ha minden blokkhoz hozzá van rendelve.

Mindenesetre lehet, hogy egyszerűbb, ha a body hátteréhez rendelek kiúsztatott képet, mert az valami miatt átlátszik a keret diven, míg a keret div háttere továbbra sem, és akkor opera alatt is működni fog...
4

gecko, z-index értelmezése

solkprog · 2008. Feb. 24. (V), 14.03
"Viszont az tanulságos, hogy a z-indexet a gecko motor csak akkor tudja értelmezni, ha minden blokkhoz hozzá van rendelve."

Szerintem ez nem igaz. De visszont aláírom hogy a példámból könnyen hibásan erre a következtésre lehet jutni, mert elég pazarló/és figyelmetlen volt z-index-ekel. Próbáld ki kitörölsz minden z-index -et kivéve a legelsőt ("header"-ét). FF alatt úgyanúgy jó lesz, sőt még "z-index:1" el is müködni fog.
Opera alatt bevalom nem teszteltem se ezt se az előző kódom (IE alatt se)....