Bild soll teilweise verdeckt werden

[fanste]

Hi,

Ich habe da ein kleines Ausrichtungsproblem von DIVs und einem Bildchen.

Erstmal der Link: http://fadz.uttx.net/design/demo.htm

Man sieht rechts einen gelben Streifen. Dieser soll jedoch vom Header und vom Footer verdeckt werden, so dass also nur der mittlere Bereich sichtbar ist. Ich habe schon mit z-index rumprobiert, dass hat allerdings nicht geklappt. Das Bild ist immer komplett verschwunden.

Könnt ihr mir da etwas behilflich sein? Danke schonmal.

 

[DJTrancelight]

Hallo,

ich hatte mal ein ähnliches Problem und konnte es lösen, indem ich die div-Reihenfolge im HTML-Gerüst verändert habe.
Hast du es schon damit probiert?

Schöne Grüße
DJ Trancelight

 

[Maik]

So sollte die Grafik vom Header und Footer überdeckt werden:

div.header {
width: 100%;
height: 191px;
background-image: url(Bilder/header.jpg);
position: relative;
z-index: 5;
}

div.footer {
width: 100%;
margin: -20px auto 0 auto;
padding: 0;
height: 20px;
background: red;
position: relative;
z-index: 5;
}

 

[fanste]

Hey,

Danke, klappt 1A.

Nur noch eine kleine Verbesserung:
Bei "div.rightCol" muss ebenfalls noch

position:relative;
z-index:5;

eingefügt werden. Sonst wird der Inhalt überdeckt.

 

[Maik]

Hm, so genau habe ich mir das heute Morgen (während dem ersten Kaffee) nicht angeschaut

 

[fanste]

Wann frühstückst du denn? Erst um 13:22? Du Langschläfer

Aber immerhin hast du ja die Lösung für mein Problem gefunden. Danke nochmal.


EDIT:

Neues Problem: Schau dir den Link mal an, dann weißt du, was ich meine. Warum setzt es mit den rechten Div in die Zeile darunter? Habe den CSS Code von den 3 Contentboxen genommen. Dort klappt es ja auch.

 

[Maik]

Du mußt im HTML-Quelltext die Reihenfolge der DIVs ändern:

<!-- aus -->
<div class="header">
          <div class="HeaderleftCol">z</div>
          <div class="HeadercenterCol">z</div>
          <div class="HeaderrightCol">z</div>
</div>

<!-- wird -->
<div class="header">
          <div class="HeaderleftCol">z</div>
          <div class="HeaderrightCol">z</div>
          <div class="HeadercenterCol">z</div>
</div>

Außerdem benötigst du noch eine Korrektur für den IE und seinen 3px-Bug bei floatenden Boxen mit Höhenangabe:

div.HeaderleftCol {
width: 342px;
float: left;
padding: 0;
height:100%;
background-image:url(Bilder/cool_design3_01.jpg);
margin-right: 0 !important; /* Für nicht-IE-Browser */
margin-right: -3px; /* Für IE */
}

div.HeaderrightCol {
width: 472px;
float: right;
padding: 0;
height:100%;
background-image:url(Bilder/cool_design3_1_03.jpg);
margin-left: 0 !important; /* Für nicht-IE-Browser */
margin-left: -3px; /* Für IE */
}

div.HeadercenterCol {
margin: 0 472px 0 342px !important; /* Für nicht-IE-Browser */
margin: 0 469px 0 339px; /* Für IE */
padding: 0;
height:100%;
background-image:url(Bilder/cool_design3_1_02.jpg);
}

P.S. Ich gehöre zur Fraktion der Frühaufsteher und gefrühstückt wird im Office, so gegen 9:45

 

[fanste]

Danke für den kompletten Code.

Den IE Bug hatte ich auch schon gemerkt. Dem wollte ich mich nach dem Div Problem annehmen.


Und zum Schluss, nur noch eine Kleinigkeit, die mich beim IE aufregt. Der kennt ja kein "min-width". Kann ich es im IE dennoch irgendwie realisieren, dass der wrapper-Div von der Breite her nicht kleiner als 800px wird? Sonst setzt es mir die die 3er-Gruppen-Divs, die in der Reihe stehen, untereinander. was ziemlich unschön aussieht.

 

[Maik]

Vielleicht helfen dir da Stu Nicholls' Lösungsansätze weiter -> stu nicholls | CSS PLaY | min-width for IE?

 

[fanste]

Danke. Das wird nun ein bisschen dauern, bis ich da durch bin.