Hallo!
Ich versuche schon seit einer halben Ewigkeit an einem Layout mit folgenden Eigenschaften herum zu basteln:
Header (gesamte Bildschirmbreite) und Footer (960 Pixel zentriert) machen keine Probleme.
Probleme bereitet mir der 3-spaltige Mittelteil. Der Mittelteil soll 960 Pixel breit und zentriert sein. Die Linke hat eine fixe Breite von 170 Pixeln, die rechte 120. Bleiben noch 670 Pixel für den Inhaltsbereich.
Das ganze soll so aussehen wie in der angehängten Grafik!
Mein Problem ist jetzt, dass der Inhaltsbereich (und NUR der Inhaltsbereich scrollbar sein soll) Der Rest soll fix bleiben. Wie realisiere ich das in CSS, damit es sowohl im IE, als auch in den anderen Browsern funktioniert. Eine Lösung für Firefox habe ich! Beim IE bin ich ratlos.
Vielleicht kann mir hier jemand helfen!
Hier mein CSS-Code für den IE: Ich bekomme die Scrollleiste nicht hin!
Ich versuche schon seit einer halben Ewigkeit an einem Layout mit folgenden Eigenschaften herum zu basteln:
Header (gesamte Bildschirmbreite) und Footer (960 Pixel zentriert) machen keine Probleme.
Probleme bereitet mir der 3-spaltige Mittelteil. Der Mittelteil soll 960 Pixel breit und zentriert sein. Die Linke hat eine fixe Breite von 170 Pixeln, die rechte 120. Bleiben noch 670 Pixel für den Inhaltsbereich.
Das ganze soll so aussehen wie in der angehängten Grafik!
Mein Problem ist jetzt, dass der Inhaltsbereich (und NUR der Inhaltsbereich scrollbar sein soll) Der Rest soll fix bleiben. Wie realisiere ich das in CSS, damit es sowohl im IE, als auch in den anderen Browsern funktioniert. Eine Lösung für Firefox habe ich! Beim IE bin ich ratlos.
Vielleicht kann mir hier jemand helfen!
Hier mein CSS-Code für den IE: Ich bekomme die Scrollleiste nicht hin!
PHP:
<!-- 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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Layout 5</title>
<meta name="Author" content="Stu Nicholls" />
<style type="text/css">
/* the bit that does the work */
body {
background:#CCCCCC;
margin:0;
border:0;
padding:0;
height:100%;
max-height:100%;
overflow: hidden;
text-align:center;
}
/* for internet explorer */
* html body {
padding:130px 0 20px 0;
}
#contentcontainer {
position:fixed;
float:left;
overflow:auto;
text-align:left;
width: 670px;
background-image:url(Inhalt.jpg);
background-repeat:repeat;
background-position: -150px 0px;
background-attachment:fixed;
z-index:5;
}
* html #contentcontainer {
height:100%;
width:670px;
z-index:5;
}
#maincontainer {
position:absolute;
top:130px;
bottom:20px;
background:brown;
margin-left:-480px;
width: 960px;
z-index:3;
overflow:hidden;
}
* html #maincontainer {
height:100%;
width:960px;
z-index:3;
}
#content{
width:100%;
overflow:auto;
}
#links{
float:left;
overflow:hidden;
width:170px;
background:yellow;
z-index:3;
}
#rechts {
float:right;
overflow:hidden;
width:120px;
background:beige;
z-index:3;
}
#header {
position:absolute;
top:0;
left:0;
width:100%;
height:130px;
overflow:auto;
background:blue;
}
* html #header {height:130px;}
#footer {
position:absolute;
bottom:0;
width:960px
height:20px;
overflow:hidden;
text-align:right;
background:red;
z-index:10;
}
* html #footer {
height:20px;
width:960px;
margin-left:-480px;
}
</style>
</head>
<body>
<div id="maincontainer">
<div id="links">links</div>
<div id="contentcontainer">
<div id="content">
<p>
Inhalt: falls overflow erscheint die scrollbar jedoch nicht!
</p>
</div>
</div>
<div id="rechts">rechts</div>
</div>
<div id="header">Header</div>
<div id="footer">Footer</div>
</body>
</html>
