Erhard_Rainer: Hintergrundbild & z-index Problem

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.

--
Mails bitte mit [Selfhtml] im Subject, ansonst werden sie vom Spamfilter rausgefiltert?
TIA Erhard
  1. 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

    --
    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.
    1. Anstatt auf SelfHTML zu verlinken, solltest Du Deinen Quellcode verlinken.

      Das hole ich dann jetzt nach:
      html | css | html-quellcode

      --
      Mails bitte mit [Selfhtml] im Subject, ansonst werden sie vom Spamfilter rausgefiltert.
      1. 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

        1. 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

          1. 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

            1. 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

              1. 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

                1. 你好 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

                  --
                  Ich bewundere wirklich den Sinn der Bienen für kollektive Verantwortung. Obwohl sich einzelne Bienen hin und wieder bekämpfen, herrscht zwischen Ihnen grundsätzlich ein starkes Gefühl für Eintracht und Zusammenarbeit. Wir Menschen gelten als sehr viel weiter entwickelt, doch mitunter rangieren wir sogar hinter kleinen Insekten.
                  http://wwwtech.de/
                2. 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

        2. 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?

          1. 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

            1. 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

              --
              Mails bitte mit [Selfhtml] im Subject, ansonst werden sie vom Spamfilter rausgefiltert.
              1. 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

                1. 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 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.

                  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

                  1. 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