nicht angemeldet
Hat Opera Probleme mit dem z-index ?
Hallo Kollegen,
ich positioniere mehrere DIVs in einem übergeordneten DIV absolut und verwende dabei z-Index. IE, NC, Moz, Firefox etc. tun, was ich erwarte, Opera scheint an einer bestimmten Stelle den z-index zu ignorieren und an anderer Stelle wieder zu berücksichtigen. Kennt jemand das Phänomen? Welchen Angaben braucht Ihr noch?
Bye,
Ernesto
-
Hi,
ich positioniere mehrere DIVs in einem übergeordneten DIV absolut und verwende dabei z-Index. IE, NC, Moz, Firefox etc. tun, was ich erwarte, Opera scheint an einer bestimmten Stelle den z-index zu ignorieren und an anderer Stelle wieder zu berücksichtigen. Kennt jemand das Phänomen?
Welchen Angaben braucht Ihr noch?
Einen Link auf die kaputte Seite.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
Hi MudGuard,
Einen Link auf die kaputte Seite.
Hm, das hatte ich befürchtet. Aber die Seite ist mit diversen css-Files und PHP so überfrachtet, dass das eher verwirrt. Gib´ mir 30 Minuten, dann versuche ich das Problem in ein Mini-HTML-File zu destillieren.
Ernesto
-
Hi,
jetzt hätte ich es auf die Schnelle beinahe nicht hingekriegt. Das sieht jetzt etwas komisch aus, ist aber in aller schnelle aus verschiedenen Files zusammengebastelt und zeigt ebenfalls den genannten Fehler: Alle Browser zeigen das 3. DIV in Form eines grauen Flecks rechts neben dem Text (3. DIV) da das 2. DIV zwar 100% Breite hat, das 3. DIV aber einen höheren z-index. Nur in Opera ist kein grauer Klecks.
<div style="position:absolute; width:100px; height:100px; top:20px; left:20px; border:1px solid grey; background-color:#FFFF00;">
<div style="position:absolute; z-index:5; width:100%; position:relative; background-color:#FFDDDD;">
XxxxX
<div style="position:absolute; z-index:10; width:6px; height:100%; right:0; top:0; background-color:#999999;">
</div>
</div>
</div>Bye
Ernesto-
Korrektur, Korrektur
<div style="position:absolute; z-index:5; width:100%; position:relative; background-color:#FFDDDD;">
<div style="position:relative; z-index:5; width:100%; background-color:#FFDDDD;">
heißen.
Ernesto
-
Hi,
Hi,
jetzt hätte ich es auf die Schnelle beinahe nicht hingekriegt. Das sieht jetzt etwas komisch aus, ist aber in aller schnelle aus verschiedenen Files zusammengebastelt und zeigt ebenfalls den genannten Fehler: Alle Browser zeigen das 3. DIV in Form eines grauen Flecks rechts neben dem Text (3. DIV) da das 2. DIV zwar 100% Breite hat, das 3. DIV aber einen höheren z-index. Nur in Opera ist kein grauer Klecks.
grey ist in CSS 2 / 2.1 kein zulässiger Farbwert - im Gegensatz zu gray.
Setze ein in das div - dann wird es auch im Opera angezeigt.
Alternativ: setze dem zweiten div eine rechte border und verzichte auf das 3. div.cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
Hi MudGard,
Setze ein in das div - dann wird es auch im Opera
ja, genau das war es. Danke !
Ernesto
-
-
-
-
Hi, ho,
ich glaube, jetzt bin ich selber drauf gekommen. Kann es sein, dass Opera (im Gegensatz zu allen anderen Browser) ein DIV erst gar nicht anzeigt, wenn es keinen Inhalt hat ? Enigen DIVs verwende ich nur als Container für ein background-image (z. B. das 3. DIV). Kann es sein, das Opera das nicht mag ?
Ciao, Ernesto
-
Hallo,
ich glaube, jetzt bin ich selber drauf gekommen. Kann es sein, dass Opera (im Gegensatz zu allen anderen Browser) ein DIV erst gar nicht anzeigt, wenn es keinen Inhalt hat ? Enigen DIVs verwende ich nur als Container für ein background-image (z. B. das 3. DIV). Kann es sein, das Opera das nicht mag ?
Höchstwahrscheinlich ja. Das gleiche Malheur gab / gibt es doch auch mit Tabellenzellen (<td>) im Internet Explorer, die nicht "angezeigt" werden, wenn sie nicht wenigstens ein erzwungenes Leerzeigen enthalten ( ).
Übrigens: Kein Grund zu plenken ;-)
Gruß
Lachgas
-
-
Hallo noch mal (sorry, wenn ich nerve),
bei diesem Kontrukt:
<div style="position:absolute; width:100px; height:100px; top:20px; left:20px; border:1px solid grey; background-color:#FFFF00;">
<div style="position:relative; z-index:5; width:100%; background-color:#FFDDDD;">
xxx<br><br>xxx
<div style="position:absolute; z-index:10; width:6px; height:100%; right:0; top:0; background-image: url(BG.gif);"> </div>
</div>
</div>würde ich erwarten, dass das 2. DIV einen Rahmen aufspannt, dessen Höhe durch "xxx<br><br>xxx" definiert wird und in dem durch das 3. DIV in genau der gleichen Höhe einen rechten Rahmen zeichnet. Tatsächlich ist das 3. DIV aber nicht so groß wie das 2. DIV, sondern so groß wie eine Textzeile "xxx<br>". Dieses beobachte ich in allen Browsern, bei Opera (und nur da) habe ich auch schon beobachtet, dass das 3. Div so hoch ist wie das BG.gif (nämlich genau 1 Pixel).
Gibt es da auch eine Erklärung ?
Bye,
Ernesto-
Hallo Ernesto
Gibt es da auch eine Erklärung ?
Das 2.Div hat keine angegebene Höhe, dadurch bleibt height im 3.Div
wirkungslos. Es nimmt die Höhe seines Inhaltes an.Ich würde es so versuchen:
<div style="position:absolute; width:100px; height:100px; top:20px; left:20px; border:1px solid grey; background-color:#FFFF00;">
<div style="background-image: url(BG.gif) right;">
<div style="margin-right:6px; background-color:#FFDDDD;">
xxx<br><br>xxx
</div>
</div>
</div>Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hi Detlef,
das wird so nicht funktionieren. Der 3. DIV muss auf gleicher Ebene mit dem Content des 2. DIV sein. Der dritte DIV (ich habe hier nur exemplarisch _ein_ DIV in der 3. Ebene aufgeführt), bildet den (graphischen) Rahmen des 2. DIV. Alle DIVs der dritten Ebene werden per PHP generiert. Das 1. DIV bildet den (absolut positionierten) Raum, in dem sich alle (relativ positionierten) DIVs der 2. Ebene bewegen können.
Trotzdem Danke!
Ciao Ernesto-
Hallo Ernesto
das wird so nicht funktionieren. Der 3. DIV muss auf gleicher Ebene mit dem Content des 2. DIV sein.
Warum?
Der dritte DIV (ich habe hier nur exemplarisch _ein_ DIV in der 3. Ebene aufgeführt), bildet den (graphischen) Rahmen des 2. DIV.
Welche Ebene soll denn nun den Inhalt bzw. die Inhalte (Texte) tragen?
Welche Ebene soll einen Rahmen um bzw. an (mit angepasster Höhe) welcher
Ebene bilden?Alle DIVs der dritten Ebene werden per PHP generiert. Das 1. DIV bildet den (absolut positionierten) Raum, in dem sich alle (relativ positionierten) DIVs der 2. Ebene bewegen können.
Also, wieviele Divs der 3. und wieviele Divs der 2. Ebene wird es geben?
(nicht unbedingt absolute Zahlen, mehr 2. oder mehr 3. Ebene)Nochmal zu deinem geposteten Quelltextausschnitt:
<div style="position:absolute; width:100px; height:100px; top:20px; left:20px; border:1px solid grey; background-color:#FFFF00;">
Wie willst du hier mehrer Blöcke drin unterbringen, dessen Größe du vorher
nicht kennst? (Menge, Schriftgröße, usw.)Stell doch ein Beispiel mit mehreren Textblöcken online und dazu eventuell
eine Skizze, wie es aussehen soll.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
-
-
Hallo noch mal (sorry, wenn ich nerve),
bei diesem Kontrukt:
<div style="position:absolute; width:100px; height:100px; top:20px; left:20px; border:1px solid grey; background-color:#FFFF00;">
<div style="position:relative; z-index:5; width:100%; background-color:#FFDDDD;">
xxx<br><br>xxx
<div style="position:absolute; z-index:10; width:6px; height:100%; right:0; top:0; background-image: url(BG.gif);"> </div>
</div>
</div>Gibt es da auch eine Erklärung ?
Hi,
hab zwar jetzt keine Erklärung parat, dafür einen Denkanstoß. Was mir bei solchen Konstrukten, die sehr oft zu Fehlern führen, auffällt, ist das Verwenden von sogenannten DIV Suppen, obwohl man diese in den meisten Fällen nicht benötigt. Manchmal kommt man nicht drum herum (muss ich eingestehen) und das Beispiel oben ist noch harmlos, aber es gibt sehr oft Kreationen, die meiner Meinung nach absolut unnötig sind.
Mehr zum Thema DIV Suppe: http://css.fractatulum.net/sample/suppe/div_suppe1.htm
greetz
defender-
Hi defender
danke für den Link. Ich möchte natürlich nicht aus dem bisherigen Tabellen-Chaos direkt in die DIV-Suppe plumpsen. Das Problem ist, dass ich sehr viele relativ kurze Artikel (die von unterschiedlichen Autoren geliefert werden) in ein halbwegs einheitliches Layout bringen will. Die Artikel ändern sich häufig (täglich ?). Ich möchte das Design an zentraler Stelle verwalten und mir den Content zuliefern lassen (bzw. per PHP in eine Datenbank einpflegen lassen). Mit drei DIV-Ebenen (vielleicht kommt noch eine vierte Ebene für die Navigation dazu) komme ich schon sehr weit.
Ciao
Ernesto
-
-