Obwohl Objekt davor, zeigen FF und Opera es hinter dem Objekt an

[Marco]

Hallo miteinander,

da ich gerade ein wenig CSS austeste, ergabe sich plötzlich folgendes Problem:

Über einem Hintergrundbild lege ich ein leeres <div> Container, der durchsichtig erscheint. Soweit so gut.

Nun folgt eine Überschrift, die mittels margin-top: -25px über den <div> Container geschoben wird.
Während der Internetexporer mein gewünschtes Resultat anzeigt, verschwindet bei Firefox und Opera die Überschrift hinter dem <div>.

Ich gehe somit aus, dass da irgendwo im Quelltext ein winzig kleiner Fehler versteckt ist, den ich mir aber nicht erklären kann.

  
    div.UberschriftBild {  
      background-color: #000000;  
      -moz-opacity: 0.6;  
      -khtml-opacity: 0.6;  
      opacity: 0.6;  
      filter:alpha(opacity=60);  
  
      margin: 0;  
      margin-top: 40px;  
      padding: 0;  
      height: 20px;  
    }  
  
    h3  
    {  
       margin-top: -25px;  
       padding: 0.5em;  
       font-size: 0.9em;  
       font-weight: bold;  
       color: #FFFFFF;  
       text-align: right;  
    }  

Die Objekte sind folgendermaßen im Quelltext eingebunden:

  
  
      <div class="UberschriftBild">  
        &nbsp;  
      </div>  
  
      <h3>Text Überschrift</h3>  
  

Für Tipps bin ich dankbar.

Viele Grüße
Marco

[apsel]

Om nah hoo pez nyeetz, Marco!

ein leeres div? Verzichte drauf! Verwende das Bild als Hintergrund der Überschrift.

Matthias

[Marco]

Hallo Matthias,

wenn es denn wo einfach wäre...

In einem div habe ich ein Hintergrundbild angegeben.
Da die Überschrift bereits im Bild zu sehen sein soll, ist diese nach unten verrückt (margin-top) -> schlecht zu lesen.

Also wollte ich ein Objekt (div oder p) mit Transparenz drüber legen (mittels margin-top verschieben) und anschließend wieder die Überschrift mittels negativem margin-top drüber legen.

Grüße
Marco

[Axel Richter]

Hallo,

Über einem Hintergrundbild lege ich ein leeres <div> Container, der durchsichtig erscheint. Soweit so gut.

Nun folgt eine Überschrift, die mittels margin-top: -25px über den <div> Container geschoben wird.
Während der Internetexporer mein gewünschtes Resultat anzeigt, verschwindet bei Firefox und Opera die Überschrift hinter dem <div>.

Sie verschwindet nicht dahinter. Sie wird opaque. Aber nur solange, wie der Container position: static ist.

Gib der H3 mal position: relative.

viele Grüße

Axel

[Marco]

Hallo Axel,

vielen Dank für den Tipp.

Marco