# Bild soll teilweise verdeckt werden



## fanste (29. Juni 2006)

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 (29. Juni 2006)

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 (30. Juni 2006)

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 (30. Juni 2006)

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 (30. Juni 2006)

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


----------



## fanste (30. Juni 2006)

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 (1. Juli 2006)

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 (1. Juli 2006)

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 (1. Juli 2006)

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


----------



## fanste (1. Juli 2006)

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


----------



## fanste (1. Juli 2006)

Ich bekomm das nicht so eingebaut, dass es funktioniert.
In den nicht-IE-Browsern stimmt etwas mit dem Footer nicht (Text ist nicht am linken Rand und klappt, wenn man das Fenster immer kleiner macht, nach unten weg.) und die Höhe stimmt nicht.
Im IE stimmt nur die Höhe nicht.

Habe schon rumprobiert, die Höhe anzupassen, aber sobald ich "height:1px;" in "height:100%;" ändere, gibt es wieder das "min-width" Problem im IE.

Betrachten kann man das hier: min-width in IE (<= Der Linktext stimmt nicht. Da spinnt gerade was am Forum *argh*)


----------



## Maik (1. Juli 2006)

Der Linktext wird neuerdings aus dem Seitentitel des verlinkten Dokuments generiert, das ist mir heute auch schon aufgefallen 

*back to topic*

Wie es scheint, lassen sich die min-width-Workarounds nicht in deinem Layout implementieren, denn der IE ignoriert sie einfach 

Das ist zumindest mein Resumé nach einigen Experimenten, wie beispielsweise diesem hier:


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>min-width in IE</title>

<style type="text/css">
<!--
html, body {
margin: 0px;
padding: 0px;
height: 100%;
}

div.wrapper {
width: 100%;
min-width: 814px;
min-height: 100%;
background-color:#838483;
}

* html div.wrapper { /* Für IE */
height: 100%;
}

/* the bodge for IE6 browsers */
* html .minwidth {padding-left:814px;}
* html .container {margin-left:-814px;position:relative;}

div.header {
width: 100%;
height: 191px;
position: relative;
z-index: 5;
background-color:#009999
}

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

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

div.topNavi {
width: 100%;
height: 20px;
background: #fff;
}

div.leftCol {
width: 208px;
float: left;
padding: 0;
}

div.rightCol {
width: 150px;
float: right;
padding: 0;
position:relative;
z-index:5;
}

div.centerCol {
margin: 0 150px 0 208px;
padding: 0;
z-index:5;
}

div.clear {
clear: both;
margin: 0;
padding: 0;
height: 0;
line-height: 0;
font-size: 0;
}

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

</head>
<body>

<div class="wrapper">
     <div class="minwidth">
          <div class="container">

               <img src="Bilder/trenner_rechts.gif" alt="" style="float:right;position:absolute;right:199px;" height="100%" width="9"/>
               <img src="Bilder/trenner_rechts.gif" alt="" style="float:left;position:absolute;left:199px;" height="100%" width="9"/>

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

               <div class="leftCol">leftCol</div>
               <div class="rightCol">rightCol</div>
               <div class="centerCol">centerCol</div>
               <div class="clear">&nbsp;</div>

          </div>
     </div>
</div>
<div class="footer">footer</div>

</body>
</html>
```


----------



## fanste (1. Juli 2006)

Ignorieren tut er diese nicht. Mein Beispiel, dass ich hochgeladen habe, funktioniert ja. Es stimmt nur die Höhe nicht. 

Bei deinem Code stimmt sowie so etwas nicht (hab noch nicht nachgeschaut was), aber der graue Streifen orientiert sich mit dem Rechtsabstand am Browserfenster und nicht am wrapper-Div.

EDIT:
Bei dir Ignoriert der IE es, weil du 


			
				http://www.webreference.com/programming/min-width/2.html hat gesagt.:
			
		

> This now shows the text occupying the dark red border area as well as the white area giving a total width of 50%, but if you try to resize the window you'ill see that we are back to square one with the contents again continuing to shrink past the min-width of 300 pixels.
> 
> This has happened because of an Internet Explorer rendering bug which has caused the extra divs to have their 'hasLayout' property set to false (see Microsoft hasLayout property for further information).
> Step 3
> ...


nicht beachtet hast . (weiter unten kommt noch so ein Problemchen!)
Ich suche schon eine Weile, wie man dieses Problem auch anders beheben kann, so, dass der IE es kapiert, aber die Höhe auf min 100% ist.


----------



## Maik (1. Juli 2006)

fanste hat gesagt.:
			
		

> [...] Bei deinem Code stimmt sowie so etwas nicht (hab noch nicht nachgeschaut was), aber der graue Streifen orientiert sich mit dem Rechtsabstand am Browserfenster und nicht am wrapper-Div. [...]


Das wird wohl an der fehlenden position:relative-Eigenschaft für das DIV *.wrapper* liegen, die ich vorhin im Eifer des Gefechts entfernt hatte.


----------



## fanste (1. Juli 2006)

Stimmt. Das hat gefehlt.


----------



## fanste (2. Juli 2006)

Sorry für den Doppelpost.

Habe wieder eine neue Version: Es gibt jetzt nur noch ein Problem. Ich kann im IE nicht mehr die Höhe auf 100% setzten, sonst verhaut er es wieder. Aber vielleicht findet ja ihr eine Möglichkeit.

Link: http://fadz.uttx.net/design/demo3.htm



EDIT: Wurde diese automatische "Linkbenennung" wieder deaktiviert?


----------



## Maik (2. Juli 2006)

fanste hat gesagt.:
			
		

> [...] Wurde diese automatische "Linkbenennung" wieder deaktiviert?


Nein. Das Dokument besitzt halt keinen Seitentitel, der als Linktext generiert werden könnte.

*back to topic*

Wie gestern schon angedeutet, habe ich den Verdacht, daß die IE-Workarounds für dein Layout-Konzept mit einer 100%-Höhe nicht ausgelegt sind.

Ich habe nämlich eben versucht, das Beispiel min-width in IE - demo8.html lediglich in der Vertikalen auf 100% zu strecken, doch auch hier fällt anschliessend im IE das Layout in der Breite zusammen.

Mein Fazit: solange das Layout keine 100%-Höhe besitzt, funktionieren die diversen Workarounds, um im IE eine Mindestbreite festzulegen.  Oder es verhält sich entgegengesetzt: sobald die zusätzlichen DIVs in der Vertikalen auf 100% gestreckt werden, mißachtet der IE die Mindestbreite bzw. das Layout fällt in ihm zusammen.


----------



## fanste (2. Juli 2006)

Dann muss es wohl ohne gehen.
Kann ja mit JS etwas nachhelfen. Dann sehen das halt nur die IE Benutzer, die JS aktiviert haben.

Danke für deine Hilfe.

*off topic*
Komisch, wo ist denn der Titel geblieben. Hatte das Dokument doch nur kopiert!


----------



## Maik (2. Juli 2006)

fanste hat gesagt.:
			
		

> *off topic*
> Komisch, wo ist denn der Titel geblieben. Hatte das Dokument doch nur kopiert!


Das kann ich dir auch nicht sagen, da ich nicht dabei war, als du das Dokument kopiert und überarbeitet hast


----------



## fanste (8. Juli 2006)

HI,

Hab immer noch ein Problem. Man schaue sich mal diese Seite im IE an. Wenn sich blauer und roter Bereich berühren, schrumpfen die beiden grauen balken so zusammen, dass sie unten nicht mehr bündig sind. 

Wie kann ich das verhindern? 
Das passiert mal wieder nur im IE. Firefox und Opera sind OK.


----------



## Maik (8. Juli 2006)

Eine Lösung zur Behebung des Darstellungsfehlers im IE habe ich momentan nicht parat.

Aber war die Ausgangslage gemäß dem Topic auch nicht eine andere: Header und Footer sollen eine Grafik überdecken? 

Und nun überdeckt die Grafik den Header und Footer  

Achja, bitte entferne in deinen Beiträgen die toten Links zu den ursprünglichen Testseiten.


----------



## fanste (9. Juli 2006)

Schade, dass du keine Lösung parat hast. Dass der Header und der Footer den gauen Streifen überdecken, hatte ich noch vergessen mit reinzuschreiben. Mein Problem ist aber, dass sich der Streifen an der Höhe des Fensters und nicht am wrapper-Div orientiert, was man sehen kann, wenn man das Fenster mal verkleinert.

Zu den Links: Die sind nicht tot. Es gibt zur Zeit nur ein paar Serverprobleme. Es kommt also häufig zur Nichterreichbarkeit des Servers.


----------



## Maik (9. Juli 2006)

Sorry, ich ging davon aus, daß du die Seiten vom Server genommen hättest.

Eine Alternative zu dem bisherigen Seitenkonzept wäre das zweite Lösungsbeispiel in dem CSS-Tutorial  Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken, das ich mal auf deine Seitenverhältnisse angepasst habe. Die Grafik _trenner.gif_ ist hier als Hintergrundgrafik für die beiden DIVs *#links* und *#rechts* definiert.

Vielleicht hilft dir das weiter?


```
<?xml version="1.0" encoding="iso-8859-1"?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title>CSS-Beispiel 2: position_fixed</title>

  <style type="text/css">
  html, body {
          width: 100%;
          height: 100%;
          margin: 0;
          border: 0;
          padding: 0;
  }
  body {
          background-color: #33CC99;
          overflow: hidden;
  }
  #mitte {
          position: absolute;
          top: 191px;
          left: 200px;
          bottom: 95px;
          right: 200px;
          overflow: auto;
          background: blue;
  }
  * html #mitte {
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-top-width: 191px;
          border-left-width: 200px;
          border-bottom-width: 95px;
          border-right-width: 200px;
          border-style: solid;
  }
  #mitte .inhaltDiv {
          margin: 10px;
  }
  #oben {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 191px;
          padding: 0;
          background: green;
          overflow: hidden;
          z-index: 4;
  }
  * html #oben {
          width: 100%;
          height: 191px;
  }
  #oben .inhaltDiv {
          margin: 0;
  }
  #links {
          position: absolute;
          top: 191px;
          left: 0;
          bottom: 95px;
          width: 200px;
          padding: 0;
          background: #99CC66 url(Bilder/trenner.gif) 100% 0 repeat-y;
          overflow: auto;
          z-index: 2;
  }
  * html #links {
          top: 0;
          width: 200px;
          height: 100%;
          border-top-width: 191px;
          border-left-width: 0;
          border-bottom-width: 95px;
          border-right-width: 0;
          border-style: solid;
  }
  #links .inhaltDiv {
          margin: 10px;
  }
  #unten {
          position: absolute;
          left: 0;
          bottom: 0;
          right: 0;
          height: 95px;
          padding: 0;
          background-color: red;
          overflow: hidden;
          z-index: 3;
  }
  * html #unten {
          left: 0;
          width: 100%;
          height: 95px;
          border-top-width: 0;
          border-left-width: 0;
          border-bottom-width: 0;
          border-right-width: 0;
          border-style: solid;
  }
  #unten .inhaltDiv {
          margin: 0;
  }
  #rechts {
          position: absolute;
          top: 191px;
          bottom: 95px;
          right: 0;
          width: 200px;
          padding: 0;
          background: #33CC99 url(Bilder/trenner.gif) 0 0 repeat-y;
          overflow: hidden;
          z-index: 1;
  }
  * html #rechts {
          top: 0;
          width: 200px;
          height: 100%;
          border-top-width: 191px;
          border-left-width: 0;
          border-bottom-width: 95px;
          border-right-width: 0;
          border-style: solid;
  }
  #rechts .inhaltDiv {
          margin: 10px;
  }
  </style>
  </head>

  <body>

  <div id="mitte">
       <div class="inhaltDiv">
            centerCol<br>
            centerCol<br>
            centerCol<br>
            centerCol<br>
            centerCol<br>
            centerCol<br>
            centerCol<br>
            centerCol<br>
            centerCol<br>
            centerCol<br>
       </div>
  </div>

  <div id="oben">
       <div class="inhaltDiv">
            header
       </div>
  </div>

  <div id="links">
       <div class="inhaltDiv">
            leftCol<br>
            leftCol<br>
            leftCol<br>
            leftCol<br>
            leftCol<br>
            leftCol<br>
            leftCol<br>
            leftCol<br>
            leftCol<br>
            leftCol<br>
       </div>
  </div>

  <div id="rechts">
       <div class="inhaltDiv">
            rightCol
       </div>
  </div>

  <div id="unten">
       <div class="inhaltDiv">
            footer
       </div>
  </div>

  </body>
  </html>
```


----------



## fanste (9. Juli 2006)

HI,

Du bist spitze. Danke für den Code. Mal schauen, wie ich das verarbeitet bekomme.


----------

