-
Problem mit CSS Layout und fixierten Boxen
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!
-
Soweit ich weiß, wird position:fixed nicht vom IE unterstützt. Du solltest für position:absolute bei beiden Browsern etwa das gleiche Ergebnis kriegen. Aber fürs fixieren im IE musst Du Dir was anderes überlegen.
-
Schaust Du hier und Du hast des Rätsels Lösung.
Pingu
-
Berechtigungen
- Neue Themen erstellen: Nein
- Themen beantworten: Nein
- Anhänge hochladen: Nein
- Beiträge bearbeiten: Nein
-
Foren-Regeln
Zitieren
Lesezeichen