Margins / Ränder
 HomeFehlersuche • Abstände + Zwischenräume CSS-Notierung 

Fehlerursachen: Ränder, Abstände, Margins, Padding

Als Beginner werden Sie zu Anfang die größten Probleme mit ungewollten Abständen der Grafiken innerhalb von Frames, Browserfenster und in Tabellen haben. Zumindest dann, wenn es ihr Ziel ist Objekte punktgenau zu platzieren.
html fehler abstand padding body table frames

ungewollte Abstände und Zwischenräume

Siehe auch: Punktgenaue Größe für Div-Poxen (margin, padding, border)


  • Eine 100% breite Tabelle füllt nicht die gesamte Seite

  • Eine Grafik steht nicht am (linken) Rand der Seite

  • Eine Grafik läßt sich nicht ausrichten

  • Es wird ein (unnötiger) horizontaler Scrollbar angezeigt

Mögliche Ursache: Fehlende Angaben für Ränder und Abstände!

   Fehlersuche

Der Grundsatz heißt: Wenn Sie dem Browser nichts über Abstände und Zwischenräume (margin, padding, cellspacing und cellpadding) mitteilen, macht er das was er für angemessen hält: Er setzt Default-Werte ein und die sind übrigens bei jedem Browser unterschiedlich und nicht Null (0).

Das gilt auch für Tabellen! Tragen Sie im <table>-Tag keine Attribute für cellspacing, cellpadding und border ein, bedeutet das nicht, dass diese Werte zwangsläufig Null (0) sind.

<table cellspacing="0" cellpadding="0" border="0" ... >



   Aktionen

1  In HTML-Dokumenten

Die Standard-Ränder einer HTML-Seite sind nicht in jedem Browser gleich! Werden keine Angaben gemacht, benutzt der Browser die Default-Werte. Also am Besten erst einmal für den Body diese Werte auf Null setzen (vorzugsweise mit CSS).

a)  Veraltet: Mit HTML-Anweisungen (Attribute im Body-Tag)

Im Body-Tag die Einstellungen für Margins (Ränder) festlegen / auf Null setzen. Einige davon sind nicht überall dokumentiert!

<body topmargin="0" ... >
topmargin="0"   bottommargin="0"   leftmargin="0"   rightmargin="0"
marginwidth="0"   marginheight="0"


b)  Besser: Mit CSS-Angaben im Body-Tag

<body style="margin:0px; padding:0px;" ... >

c)  Vorzugsweise: mit CSS-Angaben im Head-Bereich des Dokuments:

<style type="text/css">
<!--

body {
margin: 0px;
padding: 0px;
}

-->
</style>



2  in Tabellen

Sie haben zur Positionierung der Seiteninhalte eine Tabelle eingesetzt. Die Tabellenbreite soll der Seitenbreite entsprechen:

<table border="0" cellspacing="0" cellpadding="0" width="100%">
Legen Sie unbedingt die Werte der Attribute 'cellpadding', 'cellspacing' und 'border' entsprechend fest! Keine Angaben bedeutet: Der Browser nimmt seine vorgegebenen (unterschiedlichen) Werte für 'cellpadding', 'cellspacing' und 'border'.



3  in Frames / Framesets

Die Einstellung für Ränder und Margins in der Frameset-Deklaration!

Für alle Browser soll die Seite schließlich gleich aussehen. Die unten rot eingetragenen Attribute entsprechen nicht unbedight den Richtlinien für richtiges HTML! Es mag sein, dass der HTML-Validator mosert, aber es funktioniert.
<frameset rows="xx,*" border="0" frameborder="0" framespacing="0">
  <frame frameborder="0" marginwidth="0" marginheight="0" name="oben" ... >
  <frame frameborder="0" marginheight="0" marginwidth="0" name="nav" ... >

<noframes>
Ihr Browser unterstützt keine Frames!
</noframes>

</frameset>





   Zur Praxis der Fehlersuche

Sie könnten beim Testen


Lineal-Grafik als Background-Image

Zur exakten Überprüfung von Elementbreiten könnte man mit CSS-Angaben eines meiner Lineale als Hintergrundgrafik für diese Bereiche einbinden. Wie das in der Paxis aussieht, lesen Sie weiter unten. Lineale zum Download finden Sie auf meiner Downloadseite:

Download Lineale


Lineale als GIF-Datei in unterschiedlichen Breiten. Beispiel: Lineal 500 Pixel Breite



Die Lineale haben eine 5 Pixel-Maßeinteilung. Die größeren Lineale haben zusätzlich rote Markierungen für 800 / 1024 Pixel.



Im HEAD-Bereich notieren Sie diese CSS-Anweisungen:
<style type="text/css">
<!--

.lineal{
margin: 0px;
padding: 0px;
background: url(lineal-500.gif) #FFFFFF ;
background-position: top left;
background-attachment: fixed;
background-repeat: no-repeat;
}

-->
</style>
Nun steht ihnen die Möglichkeit offen, nötigenfalls in mehreren HTML-Elementen das Lineal anzeigen zu lassen. Fügen Sie dazu einfach das class-Attribut ein:
<HTML-Tag class="lineal" ... >










margin, padding, border: Punktgenaue Größe für Div-Poxen

Warum sehe ich Scrollbars?

Fenster- und Framegrößen richtig berechnen

Einführung Frames - Margins und Ränder