Hintergrundbild & z-index Problem
Erhard_Rainer
- css
Hallo Fachleute.
Ich habe folgendes Problem. Offensichtlich schein ein im CSS definiertes Hintergrundbild nicht in Verbindung mit z-index zu funktionieren. Ist das schon jemanden mal aufgefallen?
Auszüge aus dem Quelltext:
<div class="center">
<div class="textfeld">
</div>
</div>
in der css-Datei ist
.center als z-index:1 und
.textfeld als z-index:2 definiert.
gem. http://de.selfhtml.org/css/eigenschaften/positionierung.htm
In beiden befindet sich ein Hintergrundbild, das aber nur vom IE
angezeigt wird. Firefox und Opera zeigen es nicht an.
Interessanterweise funktioniert aber:
<div class="center">
<div class="textfeld">
<img src="bild.jpg">
</div>
</div>
Offensichtlich scheint z-index nicht in Verbindung mit
"background-image: url(bild.jpg);"
auf zu wirken.
Die Fragen in diesem Zusammenhang sind:
1. Hat jemand Idee wie ich das Problem umschiffen könnte, da ich
sie als Textfelder brauche.
Mir würde nur folgender Ansatz einfallen, der aber nicht sonderlich schön ist.
<div class="center">
<div class="textfeld">
<img src="bild.jpg">
<div class="eigentliches_textfeld"> </div>
</div>
</div>
2. Ist der IE oder die anderen, die die Darstellung vom Background-image verweigern, standardkonform.
Hi,
in der css-Datei ist
.center als z-index:1 und
.textfeld als z-index:2 definiert.
gem. http://de.selfhtml.org/css/eigenschaften/positionierung.htm
Anstatt auf SelfHTML zu verlinken, solltest Du Deinen Quellcode verlinken.
Du hast beachtet, daß z-index nur in Verbindung mit bestimmten Werten von position definiert ist?
cu,
Andreas
Anstatt auf SelfHTML zu verlinken, solltest Du Deinen Quellcode verlinken.
Das hole ich dann jetzt nach:
html | css | html-quellcode
Hallo Erhard_Rainer,
Anstatt auf SelfHTML zu verlinken, solltest Du Deinen Quellcode verlinken.
Das hole ich dann jetzt nach:
html | css | html-quellcode
Besser mit view-source:
html | css | html-quellcode
Ich hoffe, das geht nicht nur in der Posting-Vorschau auch mit @title=.
Gruß Gernot
Hallo nochmal,
Besser mit view-source:
view-source:http://beater.freehostag.info/test/default.css
view-source:http://beater.freehostag.info/test/test.htm
Ich hoffe, das geht nicht nur in der Posting-Vorschau auch mit @title=.
Das scheint nicht der Fall zu sein, also ohne @title:
view-source:http://beater.freehostag.info/test/default.css
view-source:http://beater.freehostag.info/test/test.htm
Gruß Gernot
Und nochmal,
ich iehe meinen Vorschlag zurück. Anders als früher noch:
http://forum.de.selfhtml.org/archiv/2004/1/t68675/#m394412
scheint die Geschichte mit "view-source:" gar nicht mehr zu gehen.
Gruß Gernot
Hi,
scheint die Geschichte mit "view-source:" gar nicht mehr zu gehen.
die gab's noch nie - jedenfalls nicht als offizielles Protokoll. Das Forum scheint früher nur etwas weniger restriktiv gewesen zu sein. ;-)
freundliche Grüße
Ingo
Hallo Ingo,
scheint die Geschichte mit "view-source:" gar nicht mehr zu gehen.
die gab's noch nie - jedenfalls nicht als offizielles Protokoll. Das Forum scheint früher nur etwas weniger restriktiv gewesen zu sein. ;-)
Ja wie denn? Es wird doch sogar in den FAQs auf diese Möglichkeit verwiesen:
"Zusätzlich kann bei http-Adressen noch ein view-source: vorangestellt werden. Einige Browser unterstützen dies und zeigen dann den Quelltext des entsprechenden Dokuments an. Beispiel:
view-source:http://selfaktuell.teamone.de/."
Dies auch als Test, ob es möglicherweise jetzt wieder geht, da ich eine entsprechnede Bugtracker-Meldebestätigung so interpretiere. Möglicherweise habe ich es dort aber auch selbst nur falsch eingegeben. (! Status: Resolved)
Das Komische daran: In der Vorschau funktionierte es ja auch immer, seit ende Oktober letzten Jahres halt nur nicht mehr nachher, im eigentlichen Posting.
Gruß Gernot
你好 Gernot,
Dies auch als Test, ob es möglicherweise jetzt wieder geht, da ich eine
entsprechnede Bugtracker-Meldebestätigung so interpretiere.
Nur weil es im Source gefixed ist heisst das nicht, dass ich das neue
Release hier schon installiert habe...
再见,
CK
Hi,
Ja wie denn? Es wird doch sogar in den FAQs auf diese Möglichkeit verwiesen:
tja - da sollte entweder die FAQ aktualisiert werden oder die Prüfroutine es wieder zulassen.
freundliche Grüße
Ingo
Die Diskussion, wie man jetzt den Quellcode richtig anzeigt, ist zwar interessant, hilft mir aber bei meinem Problem nicht sonderlich weiter.
Ich will ja nicht unverschämt sein, aber was ist nun mit meinem Problem?
Hallo Erhard_Rainer,
Die Diskussion, wie man jetzt den Quellcode richtig anzeigt, ist zwar interessant, hilft mir aber bei meinem Problem nicht sonderlich weiter.
Ich will ja nicht unverschämt sein, aber was ist nun mit meinem Problem?
Tut mir Leid, dass ich deinen Thread missbraucht habe, und dein eigentliches Anliegen darüber vergessen habe.
Was mir an deinem CSS-Code auffällt ist: Was soll die Verschachtelung dieser Div-Elemente mit den Klassen "textfeld", "logo" und "navigation" innerhalb des anderen Div-Elements der Klasse "center" eigentlich bewirken, wenn all deine Divs ohnehin absolut positioniert sind? Möglicherweise liegt da ja der Hase im Pfeffer.
Gruß Gernot
Tut mir Leid, dass ich deinen Thread missbraucht habe, und dein eigentliches Anliegen darüber vergessen habe.
Eigentlich ist die Diskussion über den Quellcode nicht uninteressant gewesen, ich war nur ein kleinwenig traurig, wie ich gesehen habe, daß es soviele Antworten auf mein Problem gab, sich aber keine damit beschäftig hat.
Was mir an deinem CSS-Code auffällt ist: Was soll die Verschachtelung dieser Div-Elemente mit den Klassen "textfeld", "logo" und "navigation" innerhalb des anderen Div-Elements der Klasse "center" eigentlich bewirken, wenn all deine Divs ohnehin absolut positioniert sind? Möglicherweise liegt da ja der Hase im Pfeffer.
Leider nicht, da absolut sich nicht zwangsweise auf die ganze
Seite bezieht. Die absoluten Werte innerhalb des Haupt-DIVs ("center") beziehen sich dann auf dieses Haupt-DIV. Wenn ich sie außerhalb des Haupt-DIVs stelle, funktioniert die perfekte Darstellung nur bei einer bestimmten Auflösung, da sich das Haupt-DIV nach der genauen Mitte der Auslösung ausrichtet, die anderen DIVs dann aber nach dem Seitenrand, von dem ausgesehen ich sie absolut definiere.
Zum Beweiß http://beater.freehostag.info/test/test2-absolut.htm
Mittlerweile habe ich das Problem ein klein wenig umschifft, indem
ich 4 weitere DIVs eingefügt habe
htm http://beater.freehostag.info/test/test3.htm
Quellcode view-source:http://beater.freehostag.info/test/test3.htm
css view-source:http://beater.freehostag.info/test/default2.css
Hallo Erhard_Rainer,
Was mir an deinem CSS-Code auffällt ist: Was soll die Verschachtelung dieser Div-Elemente mit den Klassen "textfeld", "logo" und "navigation" innerhalb des anderen Div-Elements der Klasse "center" eigentlich bewirken, wenn all deine Divs ohnehin absolut positioniert sind? Möglicherweise liegt da ja der Hase im Pfeffer.
Leider nicht, da absolut sich nicht zwangsweise auf die ganze
Seite bezieht. Die absoluten Werte innerhalb des Haupt-DIVs ("center") beziehen sich dann auf dieses Haupt-DIV. Wenn ich sie außerhalb des Haupt-DIVs stelle, funktioniert die perfekte Darstellung nur bei einer bestimmten Auflösung, da sich das Haupt-DIV nach der genauen Mitte der Auslösung ausrichtet, die anderen DIVs dann aber nach dem Seitenrand, von dem ausgesehen ich sie absolut definiere.
Danke da habe ich was gelernt. Nun gut, dass "relative" relativ zu der Position bedeutete, wo es sich ohne Positionierung befände, das hatte ich begriffen. Dass aber "absolute Positionierung" auch eine Positionierung relativ zum Elternelement ist, auf diese Idee muss man erst mal kommen. Glücklicherweise ist die Unterscheidung zwischen "Relativer Pfad" und "Absoluter Pfad" da eindeutiger.
Mittlerweile habe ich das Problem ein klein wenig umschifft, indem
ich 4 weitere DIVs eingefügt habe
Trotzdem ich würde ja vielleicht eher mal schauen, ob man die Sache nicht auch schlanker machen kann. Wofür brauchst du denn dieses zentrierte Haupt-Div? Du kannst den Hintergrund doch auch dem Body zuweisen und ihn dort über background-position:center mittig platzieren. Ich glaube, dann hättest du schon mal ein z-index-Problem weniger.
Gruß Gernot
Hallo Gernot
Danke da habe ich was gelernt. Nun gut, dass "relative" relativ zu der Position bedeutete, wo es sich ohne Positionierung befände, das hatte ich begriffen. Dass aber "absolute Positionierung" auch eine Positionierung relativ zum Elternelement ist, auf diese Idee muss man erst mal kommen. Glücklicherweise ist die Unterscheidung zwischen "Relativer Pfad" und "Absoluter Pfad" da eindeutiger.
Das steht aber sogar in der Selfhtml http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position
Mittlerweile habe ich das Problem ein klein wenig umschifft, indem
ich 4 weitere DIVs eingefügt habeTrotzdem ich würde ja vielleicht eher mal schauen, ob man die Sache nicht auch schlanker machen kann. Wofür brauchst du denn dieses zentrierte Haupt-Div? Du kannst den Hintergrund doch auch dem Body zuweisen und ihn dort über background-position:center mittig platzieren. Ich glaube, dann hättest du schon mal ein z-index-Problem weniger.
Dann habe ich das Problem, daß ich die anderen DIVs nicht in Abhängigkeit des Haupt-Divs positionieren kann, sondern nur absolut vom Body, und das funktioniert eben auch nur bei bestimmten Auslösungen. Ich mache das eigentlich immer so, da mir alle anderen Varianten der horizontalen und vertikalen Positionierung nicht so elegant erscheinen. Ich werde es voraussichtlich so lassen, auch wenn es suboptimal ist. Dennoch vielen Dank für deine Anregungen.
mfg
Erhard
Hallo Erhard_Rainer,
Danke da habe ich was gelernt. Nun gut, dass "relative" relativ zu der Position bedeutete, wo es sich ohne Positionierung befände, das hatte ich begriffen. Dass aber "absolute Positionierung" auch eine Positionierung relativ zum Elternelement ist, auf diese Idee muss man erst mal kommen. Glücklicherweise ist die Unterscheidung zwischen "Relativer Pfad" und "Absoluter Pfad" da eindeutiger.
Das steht aber sogar in der Selfhtml http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position
Das ist mir auch total peinlich, aber umso besser, dass es mir endlich bewusst wurde, deshalb nochmals Dank!
Gruß Gernot