XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   2div Boxen im Hintergrund(links/rechts) mit position:fixed (http://xhtmlforum.de/showthread.php?t=50951)

jakez 18.03.2008 11:19

2div Boxen im Hintergrund(links/rechts) mit position:fixed
 
Morgen zusammen,
da dies mein erster Forumseintrag hier ist, bitte ich um ein wenig Nachsicht ;)

Ich habe folgendes Problem: Ich möchte bei einer Seite eine Hintergrundebene erstellen (ein div Container), und diesen mit z-index hinter alles andere schieben. in diesem #backgroundLayer sollen dann 2 weitere div Boxen platziert werden, welche allerdings per
Code:

position: fixed;
nicht mitscrollen sollen.Mein CSS Sieht somit wie folgt aus:

Code:

html, body
{
  margin: 0;
  background-color: white;
}

body
{
  padding-left: 220px;
}

#mainFrame
{
  background-color: lime;
  width:400px;
  position:absolute;
  z-index: 2;
}

#backgroundLayer
{
  background-color: blue;
  width:800px;
  position:absolute;
  z-index: 1;
}

.bubblesFrame
{
  position: fixed;
  background-color: whitesmoke;
  width: 600px;
  height: 200px;
  left: 5px;
  top: 60px;
}


Und hier mein HTML Code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
  <head>
      <link href="css/basic.css" rel="stylesheet" type="text/css" >

      <!--[if lte IE 6]>
        <style type="text/css">
        /* Damit die Fixed Position auch im IE<=6 Funktioniert... */
        html, body
        {
            height: 100%;
            overflow: auto;
        }
       
        .bubblesFrame
        {
            position: absolute;
        }
       
        </style>
      <![endif]-->
 
  </head>
  <body>
      <div id='backgroundLayer'>
        <div class='bubblesFrame'>LEFT</div>
        <div class='bubblesFrame'>right</div>
      </div>
     
      <div id='mainFrame'>
        Lorem ipsum ...
      </div>
  </body>
</html>

Jetzt zu dem "Problemchen";)
Im IE (habe die Version 6 getestet) wird zwar alles in der richtigen Reihenfolge angezeigt (bubblesFrame HINTER dem eigentlichen Content), jedoch wird die Eigenschaft

Code:

        position: fixed;
des bubblesFrame komplett ignoriert (nur IE), und der div-con. scrollt mit.
wenn ich dem mainFrame die Eigenschaft
Code:

position:absolute;
auskommentiere, funktioniert das nicht-mitskrollen, allerdings ist die "Reihenfolge" nicht mehr korrekt.

Hat irgendwer eine Idee, wie ich das Problem aus der welt schaffen kann?



Liebe Grüße aus Düsseldorf
Dennis R.


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:51 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023