[xhtml/css]Div achter div plaatsen. - Softwareontwikkeling

zondag 4 februari 2007 14:04

Acties:

...

Topicstarter

Ik ben een site aan het maken die schematisch als volgt eruit komt te zien:
Link naar plaatje.

Het is de bedoeling dat de pagina zelf nooit scrollbalken krijgt. (Ik maak de website voor resoluties van 800x600 en hoger voor IE6, IE7, FF1 en FF2.)

De donkerblauwe div zal in hoogte moeten kunnen veranderen aan de hand van de grootte van het venster. In de breedte wordt de pagina niet gewijzigd.
In het lichtblauwe gedeelte komt de tekst te staan. In dat vlak wil dus een scrollbar hebben.

Ik heb al op http://www.cssplay.co.uk/layouts/fixit.html de mogelijkheid gevonden om scrollbalken op de juiste plaats te zetten.

De code heb ik zelf aangepast naar het volgende:

HTML:

<!-- Put IE into quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en">
<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <style type="text/css" media="all">@import "style2.css";</style>
</head>
<body>      
    <div id="achtercontainter">
    </div>  
    <div id="container">
        Tekst.....  
    </div>
</body>
</html>

Cascading Stylesheet:

/* Start scrolling */
body {
    background-color:       #FFCCCC;
    margin:                 0px;
    padding:                0px;
    border:                 0px;
    height:                 100%;
    max-height:             100%;
    overflow:               hidden;
    
    font-family:            arial;
    font-size:              12px;
    font-style:             normal;     
}

/* IE*/
* html body {
    padding:                120px 0px 50px 0px; 
}   

#container {
    margin-left:            50px;
    margin-right:           auto;
    position:               fixed; 
    top:                    120px;
    left:                   0;
    bottom:                 50px; 
    right:                  0; 
    overflow:               auto; 
    background-color:       #F9F9F9;
    padding:                20px;
    text-align:             center;
    width:                  500px;
}

/* IE*/
* html #container {
    height:                 100%; 
}

#achtercontainter {
    background-color:       #00FF00; 
    top:                    100px; 
    left:                   30px; 
    bottom:                 30px; 
    width:                  540px;    
    position:               absolute
}

Dit werkt nu in IE en in FF.
Maar ik krijg het niet voor elkaar om er een div achter de voorgaande code te zetten.

Ik heb ook al geprobeerd met frames te werken, maar dat is geen optie. Div 2 is namelijk een menu die straks half over div 5 en div 6 heen komt.

Kan iemand mij de goeie kant uitwijzen? Ik ben zelf al bijna een week aan het klooien.....

Speel ook Balls Connect en Repeat

zondag 4 februari 2007 16:18

Acties:

André

Analytics dude

Bedoel jij gewoon de z-index?

zondag 4 februari 2007 16:49

Acties:

Onbekend

...

Topicstarter

z-index heb ik geprobeerd. FF werkt goed met z-index, maar IE die accepteerd de maten van de div op de achtergrond niet.

Speel ook Balls Connect en Repeat