 Fehlerursachen: Ränder, Abstände, Margins, Padding
Eine 100% breite Tabelle füllt nicht die gesamte Seite
Eine Grafik steht nicht am (linken) Rand der Seite
Eine Grafik läßt sich vertikal nicht mit einer Grafik im Nachbarframe ausrichten
Es wird ein (eigentlich unnötiger) horizontaler Scrollbar angezeigt
Mögliche Ursache: Fehlende Angaben für Ränder und Margins!
Fehlersuche
Als Beginner werden sie zu Anfang die größten Probleme mit ungewollten Abständen der Grafiken innerhalb von Frames, des Browserfensters und in Tabellen haben.
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: Der 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
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>
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'.
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
- für Tabellen unterschiedliche Hintergrundfarben festlegen
- transparente Test-Images mit einem Rand (border="1") einfügen
- meine Lineale als Hintergrund einbinden
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" ... >
Querverweise zum Thema:
Warum sehe ich Scrollbars?
Fenster- und Framegrößen richtig berechnen
Einführung Frames - Margins und Ränder
Erstellt: 16.05.2003
|
HOME
CSS-Notierung 
ZURÜCK