Haftpflicht Blogger
Virtual Server von Host Europe

Linkzeile am oberen Seitenrand bündig erstellen

| 25. August 2011 | Keine Kommentare

Linkzeile am oberen SeitenrandAufgabenstellung

Erstelle eine Zeile mit Links direkt am oberen Bildschirmrand.

Problem:
Der Browser setzt die Linkzeile nicht bündig an den oberen Seitenrand.

 

Es wird immer ein zwar kleiner, aber eben doch merklicher Abstand zum oberen Bildschirmrand eingehalten.

Lösung 1 (Dirty-Fix):  Kapitulieren und das Banner tiefer setzen.

Lösung 2 (Dirty-Fix):  Kapitulieren  und das CustomNavigationsModul im Headerbereich mit einem negativen Wert nach oben verschieben

#header.mod_customnav {
float: right;
position: absolute;
top: -10px ;
width: 960px;

}

Lösung 3: Ursache verstehen und beheben.

Die Lösung des Problems ist einfach, aber es ist schwierig, die Ursache dafür zu erkennen. Man kann lange nach „margin“ oder „padding“ Einstellungen von ID’s und Selektorklassen suchen und wird nicht fündig werden.

Um es kurz zu machen:

Es liegt nicht an falschen CSS-Deklarationen, sondern an den nicht vorhandenen CSS-Einstellungen für bestimmte Blockelemente.  Viele haben es sich ja schon angewöhnt, im body-Tag die Außen- und Innenabstände auf Null zu setzen.

body {
margin: 0;
padding: 0
}

Zusätzlich hierzu sollte man in seiner CSS-Datei auch die Außen- und Innenabstände der anderen Blockelemente mit „0“ initialisieren, um die Kontrolle über die Darstellung der Seite zu behalten.  Tut man dies nicht, so setzen die Browser (Firefox, Internetexplorer, Opera, Chrome, …) eigenmächtig Defaultwerte für Margin und Padding ein und so kommt es, dass z.B. auch das Blockelement „ul“ für die Darstellung einer Liste einen vom Webdesigner/Seitenersteller ungewollten Margin-Abstand hat.

Notwendiges CSS-Statement zur Grundbelegung der Außen- und Innenabstände aller Blockelemente:

address, blockquote, center, del, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, ins, isindex, menu, noframes, noscript, ol, p, pre, table, ul {
margin: 0;
padding: 0;
}

Peter Müller empfiehlt in seinem CSS-Buch sogar, ganz am Anfang des Stylesheets (noch vor der body Definition) die Abstände aller Elemente durch den Stern Selektor auf Null zu setzen.

*  {
margin: 0;
padding: 0;
}

Nachteil: Es soll nicht verschwiegen werden, daß diese drastische Maßnahme einem zwar die volle Kontrolle über die Seitendarstellung(Browserübergreifend) gibt, auf der anderen Seite aber, das Layout zunächst einmal ziemlich zerstört.
Alle liebgewonnenen, automatischen Vorbelegungen des Browsers gehen verloren und diese sind erst wieder Selektor für Selektor zu setzen.

Fazit: Insgesamt lohnt sich die Zeit, die man für die individuellen Selektordefinitionen investieren muss, aber es ist eine Veränderung, die seine Auswirkungen hat und Arbeit bedeutet.
Wer jedoch nur eine schnelle Lösung braucht, sollte auf die Lösung 1 oder 2 zurückgreifen.

 

Anzeige
E-Shops von Host Europe

 

Siehe auch:

Selfhtml: Allgemeines zu Außenrand und Abstand

Selfhtml: Blockelemente

Litte Boxes, Peter Müller: Kalibrierung: Abstände auf null setzen

 

Stichworte: ,

Kategorie: Contao, CSS, Internet

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.