1 div über ein anderes legen ?

Status
Nicht offen für weitere Antworten.

Crazy_down

Erfahrenes Mitglied
Hi, ich habe mal eine Frage.
Ich habe einen Header der setzt sich aus 3 Divs zusammen.
Einem kleinen div ganz Oben, einem großem in der Mitte und wieder einem kleinen darunter.
Im Anhang ein Bild dazu.

Jetzt möchte das der Teil in der Mitte etwas nach oben gerückt wird. Das habe ich mit
PHP:
top:-20px;
gemacht. Dabei schiebt sich aber das Bild aus der Mitte über das darüber, es soll aber das von oben über dem der Mitte liegen.

Wenn ich das ganze mit dem unterem Teil mache, Funktioniert es.
Der HTML-Code sieht an der Stelle so aus.

HTML:
<div id="overhead">
         </div>
         <div id="header">
    </div>
    <!-- end header -->
        <div id="underhead">
           </div>
Die Hintergrundbilder bekommt er aus der CSS Datei.

HTML:
#overhead {
     border: 0px solid red;
    /*filter: alpha(opacity=90);
         opacity: 0.5;             */
         background: #314D6B url('images/zahnrad_header_oben.gif') no-repeat center top;
         width: 680px;
    height: 40px;
    margin: 0 auto;
         position:relative;


}
/* Header */


#underhead {
 background: #314D6B url('images/zahnrad_header_unten.gif') no-repeat center bottom ;
         border: 0px solid green;
         width: 680px;
    height: 40px;
    margin: 0 auto;
         position:relative;
          top:-2px
}

#header {
    background: #314D6B url('images/header.gif') no-repeat center bottom ;
     border: solid 0px;
         border-color:blue;
         position:relative;
         width: 680px;
    height: 130px;
    margin: 0 auto;
         position:relative;
    top:-20px;

Wie kann ich das Lösen, das der Mittelteil unter dem oberen liegt ?

Vielen Dank.
grüße
crazy_down
 

Anhänge

  • divs.gif
    divs.gif
    5,4 KB · Aufrufe: 205
Hi,

wenn ich dein Anliegen jetzt richtig interpretiere, dürfte dir da die z-index-Eigenschaft weiterhelfen:

Code:
#overhead {
     border: 0px solid red;
    /*filter: alpha(opacity=90);
         opacity: 0.5;             */
         background: #314D6B url('images/zahnrad_header_oben.gif') no-repeat center top;
         width: 680px;
    height: 40px;
    margin: 0 auto;
         position:relative;
         z-index:2;
}
 
Hallo,

wenn du jedem Element den entsprechenden z-index gibst, denk ich müsste das funktionieren. Aber eine negative pixel angabe ist glaub ich nicht regelkonform. Ich würd mal mit position:absolute; für den Mittelteil probieren.
 
Super, das ist es was ich gesucht habe ;)
Danke dir.
Jetzt muss ich noch ein wenig mit:
HTML:
      -moz-opacity:.25;
      filter: alpha(opacity = 25);

rum probieren damit es gut aussieht.

Vielen Dank.

Edit: mit position:absolute; ging es nicht.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück