Stephan Liebig
Erfahrenes Mitglied
Also ich wollte heute anfangen mich mit CSS-Layouts zu beschäftigen, damit ich endlich von dem Tabellendesign weg komme.
Allerdings habe ich ein kleines Problem. Meine Layer sollten untereinander erscheinen, so dass ich einen Head, eine Navi und eine Contentbox habe. Allerdings erscheinen die alle oben übereinander (FireFox) und im IE wird erst gar nichts angezeigt.
Wo liegt mein Fehler?
Bei dem CSS-Code habe ich mich mal stark an das Tutorial hier im Forum gewandt.
CSS:
HTML:
[edit]
ERLEDIGT:
Habe vergessen bei den Positionsangaben in "px" anzuhängen.
[edit2]
Im FF wird es jetzt zwar richtig dargestellt, aber im IE erscheint immer noch nichts.
Woran liegt das, womit kommt der IE noch nicht zurecht?
Allerdings habe ich ein kleines Problem. Meine Layer sollten untereinander erscheinen, so dass ich einen Head, eine Navi und eine Contentbox habe. Allerdings erscheinen die alle oben übereinander (FireFox) und im IE wird erst gar nichts angezeigt.
Wo liegt mein Fehler?
Bei dem CSS-Code habe ich mich mal stark an das Tutorial hier im Forum gewandt.
CSS:
Code:
<style type="text/css">
<!--
html, body {
width: 100%;
height: 100%;
margin: 0;
border: 0;
padding: 0;
}
body {
background-color: #fff;
overflow: hidden; /* Scrollbalken im Fenster unterbinden */
}
#oben {
position: absolute;
top: 0; /* Abstand zum oberen Fensterrand */
left: 20%; /* Abstand zum linken Fensterrand */
right: 20%; /* Abstand zum rechten Fensterrand */
height: 150px; /* Blockhöhe */
width: 768px;
padding: 0; /* Interpretation Boxmodell! */
background-color: #f9f9f9;
overflow: hidden; /* Scrollbalken unterbinden */
border: 1px solid;
}
#oben .inhaltDiv {
margin: 0px; /* Abstand des Inhalts zum Blockrand */
}
#navigate {
position: absolute;
top: 150px; /* Abstand zum oberen Fensterrand */
left: 20%; /* Abstand zum linken Fensterrand */
right: 20%; /* Abstand zum rechten Fensterrand */
height: 30px; /* Blockhöhe */
width: 768px;
padding: 0; /* Interpretation Boxmodell! */
background-color: #ededed;
overflow: hidden; /* Scrollbalken unterbinden */
border: 1px solid;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
#navigate .inhaltDiv {
margin: 2px; /* Abstand des Inhalts zum Blockrand */
}
#content {
position: absolute;
top: 180px; /* Abstand zum oberen Fensterrand */
left: 20%; /* Abstand zum linken Fensterrand */
right: 20%; /* Abstand zum rechten Fensterrand */
height: 500px; /* Blockhöhe */
width: 768px;
padding: 0; /* Interpretation Boxmodell! */
background-color: #f9f9f9;
overflow: hidden; /* Scrollbalken unterbinden */
border: 1px solid;
}
#content .inhaltDiv {
margin: 2px; /* Abstand des Inhalts zum Blockrand */
}
#bottom {
position: absolute;
top: 680px; /* Abstand zum oberen Fensterrand */
left: 20%; /* Abstand zum linken Fensterrand */
right: 20%; /* Abstand zum rechten Fensterrand */
height: 15px; /* Blockhöhe */
width: 768px;
padding: 0; /* Interpretation Boxmodell! */
background-color: #ededed;
overflow: hidden; /* Scrollbalken unterbinden */
border: 1px solid;
}
#bottom .inhaltDiv {
margin: 2px; /* Abstand des Inhalts zum Blockrand */
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
</style>HTML:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Blubb</title>
<LINK href="styles/site.css" type=text/css rel=stylesheet>
</head>
<body>
<!-- head -->
<div id="oben">
<div class="inhaltDiv">
<div align="right">
<img src="./images/head_logo.jpg" />
</div>
</div>
</div>
<!-- navigation -->
<div id="navigate">
<div class="inhaltDiv">Neuigkeiten Wir über uns Leistungen Referenzen Kontakt Impressum </div>
</div>
<!-- content -->
<div id="content">
<div class="inhaltDiv">
#content
</div>
</div>
<!-- bottom -->
<div id="bottom">
<div class="inhaltDiv">
<div align="center">
Stylish - Pixel - Inh. Stephan Liebig - Eichenstraße 28 - 64743 Beerfelden - Tel.: +49(0)6068912738 - Mobil: 01704001479
</div>
</div>
</div>
</body>
</html>[edit]
ERLEDIGT:
Habe vergessen bei den Positionsangaben in "px" anzuhängen.
[edit2]
Im FF wird es jetzt zwar richtig dargestellt, aber im IE erscheint immer noch nichts.
Woran liegt das, womit kommt der IE noch nicht zurecht?
Zuletzt bearbeitet:
