nicht angemeldet
Hallo liebe Leute!
Ich hoffe Ihr könnt mir helfen ein Problem zu verstehen bzw. zu lösen.
Was ich machen will ist im Grunde ganz einfach.
Eine horizontal zentrierte Seite mit definierter Breite. Diese beinhaltet einen Header mit 'position:fixed' für Logo und Menü. Darunter den eigentlichen Inhalt.
Mit folgenden(aufs wesentliche reduzierte) Beispielt funktioniert das wunderbar und tut genau was es soll. Jetzt zum eigentlich Problem und meiner Frage.
Das div mit der id 'wrapper' hat nur für Testzwecke einen Rahmen. Sobald ich diesen wegnehme (z.B. mit border-width: 0px; oder mit border-type: none;) ist der Header ein ganzes Stück nach unten verschoben. Ich könnte das leicht umgehen indem ich einfach die Hintergrundfarbe für den Rahmen verwende und er somit unsichtbar ist. Allerdings verstehe ich nicht was der Rahmen mit der Positionierung zu tun hat. Hab ihr eine Idee dazu?
Danke!
<html>
<head>
<style type='text/css'>
body
{
background-color: #F0F0F0;
}
div#wrapper
{
width: 1024px;
margin: 20px auto;
border: 1px solid red;
}
div#header
{
position: fixed;
width: 1024px;
height: 100px;
border: 1px solid black;
background-color: #FFFFFF;
}
div#content
{
margin-top: 120px;
height: 800px;
border: 1px solid black;
background-color: #C4E1FF;
}
</style>
</head>
<body>
<div id='wrapper'>
<div id='header'>
</div>
<div id='content'>
</div>
</div>
</body>
</html>
Matthias Apsel