Ich habe also ein Element, das direkt im Körper platziert wird:
<body>
<div id="header">Some stuff...</div>
Other stuff...
</body>
Folgendes ist das verwendete CSS:
body{
text-align:center;
}
#header{
margin:auto;
}
Das #header div ist also auf 100% width (Standard) gesetzt und zentriert. Problem ist, es gibt ein "Leerzeichen" zwischen dem Fensterrahmen und dem #Header-Element ... Wie:
| |----header----| |
^window border ^window border
Ich habe versucht, es mit Javascript anzupassen, und die Größe des Elements wurde erfolgreich auf die exakte Fensterbreite geändert. Das Leerzeichen wird jedoch nicht entfernt:
$('#header').width($(window).width());
Eine Lösung scheint zu sein, die folgenden CSS-Regeln hinzuzufügen (und das obige Javascript beizubehalten):
#header{
margin:auto;
position:relative;
top:-8px;
left:-8px;
}
In meinem Browser ist dieses "Leerzeichen" 8px - aber ich bin nicht sicher, ob das für alle Browser gleich ist. Ich verwende Firefox unter Ubuntu ...
Also, was ist der richtige Weg, um diesen Raum loszuwerden - und wenn es das ist, was ich oben verwendet habe, verhalten sich alle Browser gleich?
body
verfügt über Standardränder in allen Browsern. Sie müssen sie also nur abschneiden:
body {
margin: 0;
text-align: center;
}
Sie können dann die negativen Ränder von #header
entfernen.
Ein einfacher Weg, dieses Problem zu lösen, besteht darin, alle Ränder zu beseitigen. Und Sie können das durch den folgenden Code tun:
* {
margin:0;
}
Dies löst das Problem und gibt Ihnen die Kontrolle über die Ränder aller Elemente.
Fügen Sie diese in style
dem body
-Tag hinzu, z. B. dem folgenden:
body { margin:0px; padding:0px; }
Es hat für mich funktioniert. Viel Glück!!
Ich stellte fest, dass dieses Problem auch dann bestand, wenn die KÖRPER-MARGE auf Null gesetzt wurde.
Es stellt sich jedoch heraus, dass es eine einfache Lösung gibt. Sie müssen Ihrem HEADER-Tag lediglich eine 1px-Umrandung zuweisen und den BODY MARGIN wie unten gezeigt auf Null setzen.
body { margin:0px; }
header { border:1px black solid; }
Nicht sicher, warum das funktioniert, aber ich benutze den Chrome-Browser. Natürlich können Sie auch die Farbe des Rahmens an Ihre Kopffarbe anpassen.