Hallo liebe MBler, ich brauche eure Hilfe.
Ich erstelle zur Zeit aus Lust am "programmieren einer Website" einen CSS-Layout und finde einfach keine Lösung für meine Probleme.
Ich möchte ein Layout, bei dem sich die Website zentretriert auf dem Bildschirm befindet und links und rechts Platz hat.
-> Container mit 800px Breite + text-align:center;
Darin befinden sich nun ein Header + eine Navigationsleiste untereinander und darunter soll Spaltenartig der inhaltsbereich hin, rechts daneben nochmal ein kleines Menu.
Ich habe also alles erstmal mit bunten farbkästchen ohne großen schnickschnack vorbereitet und stelle bei einigen Sachen fest das ich nicht weiß wie man es korrekt macht.
Folgendes: Header + Navibar werden korrekt dargestellt, aber der Inhaltsbereich und das rechte Menu schieben sich nach unten über dasContainerelement. Das liegt wohl an der height-Angabe 100%, aber ich möchte es sehr ungern in Pixeln angeben, dass ist nicht schön.
Wie schaffe ich es, dass sie 5px vom Container Rand weg sind?
ich habe eigentlich für alle Elemente im Container die richtigen margin-Werte verteilt..
Hier der Code: CSS:
Code:
body {
margin: 0;
padding: 0;
font: 100.01% arial, hevetica, sans-serif;
text-align: center;
color: #000;
background-color: #fff;
}
#container {
margin: 5px auto;
padding: 0;
height: 100%;
width: 800px;
background-color: #f00;
border: 1px solid #000;
}
#header {
margin: 5px 5px 0 5px;
height: 50px;
background-color: #f60;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
}
#menu {
margin: 0 5px 5px 5px;
height: 25px;
background-color: #fff;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}
#misc {
float: right;
margin: 0 5px 5px 0;
width: 160px;
height: 100%;
background-color: #ff0;
border: 1px solid #000;
}
#content {
float:left;
display: block;
margin: 0 0 5px 5px;
width: 627px;
height: 100%;
background-color:#0ff;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
} HTML-Code:
HTML-Code:
<html>
<head>
<title>Homepage | Home</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="menu"></div>
<div id="content"></div>
<div id="misc"></div>
</div>
</body>
</html>
CSS: Boxenlayout korrekt positionieren! 
Linear-Darstellung
