Bild soll teilweise verdeckt werden

Status
Nicht offen für weitere Antworten.
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 :confused:

Achja, bitte entferne in deinen Beiträgen die toten Links zu den ursprünglichen Testseiten.
 
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.
 
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?

HTML: 
<?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>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück