Lexi
26-07-2006, 10:17
Ich habe folgendes Problem mit der Gestaltung einer neuen Seite. Ich möchte ein 2-spaltiges CSS Layout mit Kopfzeile wenden. Die 3 Boxen die ich zur Gestaltung nutze sollen folgende Eigenschaften haben.
Kopfzeile:
fixiert
linke Navigation:
fixiert
Inhaltsbereich:
vertikal scrollend
Das ganze Layout soll horrizontal zentriert sein.
Mit dem Firefox funktioniert das genauso, wie ich es haben will. Aber mit dem Internet Explorer schaffe ich es nicht die Bereiche zu fixieren und zu zentrieren.
Link zur Testseite:
Testseite CSS Boxenmodell
Auszug aus dem Quelltext:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html>
<head>
<title>Sandras Shop</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="format.css" />
.
.
.
</head>
<body>
<div id="container">
<div id="kopf"><h1>Platz für ein Logo</h1></div>
<div id="navigation">
<h1>Navigation</h1>
<ul>
<li>Ein Menüpunkt</li>
.
.
.
</ul>
</div>
<div id="inhalt">
<h1>Lorem ipsum dolor</h1>
<p>Lorem ipsum ...
... </p>
</div>
</div>
</body>
CSS Datei:
CODE
/* <![CDATA[ */
body, html, #navigation, #container, #inhalt {
margin:0;
padding:0;
}
body {
font: 100.01% sans-serif;
background-color: #D6DAEB;
text-align: center;
}
#container {
width: 50em;
text-align: left;
margin: 0 auto;
}
#kopf {
background-color: #3054BF;
color: #E6DCCF;
border-top: 1em solid #D6DAEB;
border-bottom: 1em solid #D6DAEB;
padding: 1em;
width: 48em;
height: 4em;
text-align: center;
position: fixed;
top: 0;
}
#navigation {
width: 13em;
float: left;
background-color: #8794C5;
color: #2A3356;
border: 0.05em solid #303B64;
position: fixed;
top: 8em;
height: 100%;
}
#inhalt {
background-color: #fff;
color: #806640;
border: 0.05em solid #303B64;
margin-left: 14em;
margin-top: 8em;
}
p {
margin: 25px 25px 0 25px;
}
h1 {
margin: 0 25px;
padding:25px 0;
font-size: 1.3em;
}
/* ]]> */
Ich hoffe jemand kann mir helfen, weil ich beiße mir da die Zähne dran aus!
Kopfzeile:
fixiert
linke Navigation:
fixiert
Inhaltsbereich:
vertikal scrollend
Das ganze Layout soll horrizontal zentriert sein.
Mit dem Firefox funktioniert das genauso, wie ich es haben will. Aber mit dem Internet Explorer schaffe ich es nicht die Bereiche zu fixieren und zu zentrieren.
Link zur Testseite:
Testseite CSS Boxenmodell
Auszug aus dem Quelltext:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html>
<head>
<title>Sandras Shop</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="format.css" />
.
.
.
</head>
<body>
<div id="container">
<div id="kopf"><h1>Platz für ein Logo</h1></div>
<div id="navigation">
<h1>Navigation</h1>
<ul>
<li>Ein Menüpunkt</li>
.
.
.
</ul>
</div>
<div id="inhalt">
<h1>Lorem ipsum dolor</h1>
<p>Lorem ipsum ...
... </p>
</div>
</div>
</body>
CSS Datei:
CODE
/* <![CDATA[ */
body, html, #navigation, #container, #inhalt {
margin:0;
padding:0;
}
body {
font: 100.01% sans-serif;
background-color: #D6DAEB;
text-align: center;
}
#container {
width: 50em;
text-align: left;
margin: 0 auto;
}
#kopf {
background-color: #3054BF;
color: #E6DCCF;
border-top: 1em solid #D6DAEB;
border-bottom: 1em solid #D6DAEB;
padding: 1em;
width: 48em;
height: 4em;
text-align: center;
position: fixed;
top: 0;
}
#navigation {
width: 13em;
float: left;
background-color: #8794C5;
color: #2A3356;
border: 0.05em solid #303B64;
position: fixed;
top: 8em;
height: 100%;
}
#inhalt {
background-color: #fff;
color: #806640;
border: 0.05em solid #303B64;
margin-left: 14em;
margin-top: 8em;
}
p {
margin: 25px 25px 0 25px;
}
h1 {
margin: 0 25px;
padding:25px 0;
font-size: 1.3em;
}
/* ]]> */
Ich hoffe jemand kann mir helfen, weil ich beiße mir da die Zähne dran aus!