zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 2div Boxen im Hintergrund(links/rechts) mit position:fixed

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.03.2008, 10:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.03.2008
Beiträge: 4
jakez befindet sich auf einem aufstrebenden Ast
Unglücklich 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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Dingend Hilfe benötigt bei CSS Boxen für eine Wetterseite! Web4Live CSS 2 13.07.2011 16:01
Mitwachsende Container: 4 Boxen Cu Chullain CSS 1 08.09.2010 18:57
Nebeneinanderliegende gleichhohe Boxen mantiz CSS 13 08.02.2010 00:13
Boxen beim Seitenladen zuklappen (ohne "Flackern") Plasm Javascript & Ajax 5 08.01.2010 16:42
Gleiche Abstände zwischen Boxen? Shepstar CSS 5 29.07.2006 03:37


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:52 Uhr.