nicht angemeldet
Probleme bei Positionierung
0 
Matthias Apsel
0 0 Matthias Apsel
0
Probleme bei Positionierung
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>
-
Om nah hoo pez nyeetz, Bla!
Du möchtest keine div-Suppe kochen. Verwende semantisch passende Elemente. Das von dir beobachtete Verhalten wird durch zusammenfallende Außenabstände ausgelöst.
Matthias
-
Das von dir beobachtete Verhalten wird durch zusammenfallende Außenabstände ausgelöst.
Danke zunächst für die Antwort!
Irgendwie steht ich aber am Schlauch.
Ich habe das Beispiel jetzt noch mehr vereinfacht und frage jetzt ganz konkret. Wieso hat das div#header einen 120px Abstand von oben? Welche Regel ist dafür verantwortlich?Danke!
<html> <head> <style type='text/css'> 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='header'> </div> <div id='content'> </div> </body> </html>-
Om nah hoo pez nyeetz, Bla!
Das von dir beobachtete Verhalten wird durch zusammenfallende Außenabstände ausgelöst.
Danke zunächst für die Antwort!
Irgendwie steht ich aber am Schlauch.
Ich habe das Beispiel jetzt noch mehr vereinfacht und frage jetzt ganz konkret. Wieso hat das div#header einen 120px Abstand von oben? Welche Regel ist dafür verantwortlich?Es fallen die Außenabstände von body und content zusammen. Daher kommen die 120px. header hast du zwar fixiert, aber nicht festgelegt, an welcher Stelle es fixiert werden soll. Offensichtlich orientiert sich der Browser, bei fehlenden Positionierungsangaben am Elternelement.
Matthias
-
Es fallen die Außenabstände von body und content zusammen. Daher kommen die 120px. header hast du zwar fixiert, aber nicht festgelegt, an welcher Stelle es fixiert werden soll. Offensichtlich orientiert sich der Browser, bei fehlenden Positionierungsangaben am Elternelement.
Vielen Dank! Das war jetzt wirklich erleuchtend! :-)
-
-
Hallo,
Irgendwie steht ich aber am Schlauch.
Ich habe das Beispiel jetzt noch mehr vereinfacht und frage jetzt ganz konkret. Wieso hat das div#header einen 120px Abstand von oben? Welche Regel ist dafür verantwortlich?Auf diese Frage hätte ich auch gerne eine Antwort. Als Lösung (oder Workaround) nimm noch ein
top:0dazu.Gruß
Kalk-
Om nah hoo pez nyeetz, Tabellenkalk!
Wieso hat das div#header einen 120px Abstand von oben? Welche Regel ist dafür verantwortlich?
Auf diese Frage hätte ich auch gerne eine Antwort. Als Lösung (oder Workaround) nimm noch ein
top:0dazu.Lösung.
Das Verhalten der Browser bei top: auto bzw ist beschrieben.
CSS2 10.3.7 bzw. 10.6.4
Matthias
--
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Kran und Krankenschwester.
-
-
-