[GELÖST] HTML: <div> mit <div> überlagern

[GELÖST] HTML: <div> mit <div> überlagern| Datum: 06.02.2010 - 21:02 | Author: Haruspex

Moin,

ich habe eine Tabelle, diese Tabelle befindet sich in einem div-Container.
Unter bestimmten Bedingungen soll nun die Tabelle/der Container von einer grauen Fläche überdeckt werden. Diese bestimmten Bedingungen frage ich mit php ab, alles kein Problem, den Kram lass ich deswegen nachfolgend außer Acht.

Mein Lösungansatz für das überdecken ist nun:
Ein div-Container mit einem höheren z-index (nachfolgend "Container1") liegt über dem zu überdeckenden Container (nachfolgend "Container2"). Container 1 hat nun eine graue Hintergrundfarbe. Jetzt sollte ja eigentlich Container 2 grau überdeckt werden. Das funktioniert aber nicht.

Ich sehe zwar eine graue Fläche, jedoch seh ich noch darüber die Tabelle. Es wirkt so als wäre das grau einfach Hintergrund von Container 2 - aber er soll ja über ihm liegen, nicht hinter ihm.
Ich hoffe ihr versteht was ich meine *g*

Container1:

Code


<div style="background-color:grey; z-index:2;">



Container 2:

Code


<div style="width:100%; height:200px; overflow:scroll; z-index:1;">




Hat jemand für mich eine Lösung, wie ich Container 2 grau überdecken kann?

lg & Danke im vorraus

Re: HTML: <div> mit <div> überlagern| Datum: 07.02.2010 - 02:02 | Author: Fazitas

Ich hab jetzt nicht unbedingt eine Lösung,
aber eine Idee:

Vielleicht statt der Hintergrundfarbe ein 1x1 Pixel Großes halbtransparentes PNG drüber legen,
also das Container 1 das Halbtransparentes PNG enthält und damit vll den Container 2 überdeckt.

Es ist ungetestet aber vielleicht funktion iert es :)

Edit:
Oder soll es komplett einfach überdeckt werden?
Ich hab jetzt mal nen bisschen rumexperimentiert:

Code



<div style=" background-color:#999; position:absolute; top:20px; left:20px; width:150px; height:150px; z-index:2;">
</div>

<div style="width:100%; height:200px; overflow:auto; position:absolute; top:20px; left:20px; width:150px; height:150px; z-index:1; color:#F00">
Test
</div>




so funktioniert es :)
wenn du statt der Hintergrundfarbe ein halbtransparentes png benutzt scheint die schrift auch noch durch :)

Re: HTML: <div> mit <div> überlagern| Datum: 07.02.2010 - 10:02 | Author: Anonymous

Ich glaube der z-index funktioniert nicht wenn die divs Verschachtelt sind. Sie müssen nacheinander (auf gleicher Ebene) sein und dann absolut positioniert werden, wie in Fazitas Beispiel. Falls du die Divs also Verschachtelt hattest Haruspex, dann wird das wohl das Problem gewesen sein.
Die Absolute Positionierung ist natürlich auch nocht Problematisch, wenn man die genauen Position und die Breite und Höhe nicht kennt...

mfg Balmung

Re: HTML: <div> mit <div> überlagern| Datum: 07.02.2010 - 10:02 | Author: Haruspex

Danke erstmal für die Mühen :)

Zur PNG-Lösung: Nja, das wurde mir auch schon vorgeschlagen. Werd ich nochmal drüber nachdenken, evtl. ist (halb-)transparent doch besser, mal schaun.

Zum Experiment: Genau. Das war das ursprünglich gewünschte Ergebnis. Mal sehen, ob das auch noch funktioniert, wenn ich es einbinde & umschreibe *g*

:: Bearbeitet am So 7. Feb 2010, 14:51 ::

Oh, Balmung ich hab deine Antwort ganz übersehen.
Das wirds sein, probier ich gleich mal aus, danke! :)

Die absolute Positionierung ist in der Tat etwas problematisch, da sich das der "Auftraggeber" bei sich installiert. Heißt der Bereich um mein Programm herum ist durchaus verschieben. Muss ich mal schaun, ob ich das relativ positioniert krieg.

:: Bearbeitet am So 7. Feb 2010, 15:36 ::

So, es funktioniert jetzt wie erwünscht

Code


<div style="width: 55%; height: 200px; position:absolute; background-image: url(http://'.$_SERVER[HTTP_HOST].DS.'administrator'.DS.'components'.DS.'com_pairrank'.DS.'img'.DS.'90b.png); z-index:2;"></div>



Hab jetzt auch im Hintergrund ne Grafik.

Danke für die Hilfe! :)