suit: Elemente innerhalb von CSS-Containern sinnvoll formatieren

Beitrag lesen

Morgen,

meine Webseite besteht aus mehreren Containern, die jeweils eine eigene ID besitzen. Die richtige Position der einzelnen Container habe ich bereits mit Hilfe von CSS festgelegt. Des Weiteren habe ich die Hintergrundfarbe der Container gesetzt um die richtige Positionierung und Größe besser am Browser kontrollieren zu können.

Im zweiten Schritt habe ich die Container semantisch korrekt befüllt. So enthält der Header z.B. eine h1-Überschrift, die linke Seite eine Liste die als Navigation dient und der content-Container verschiedene Komponenten wie z.B. h1- und h2-Überschriften, Fotos, Listen, Absätze usw.

Wie unschwer zu erkennen ist, kommen einige Elemente in mehreren Containern vor. Hierzu zählen z.B. die Liste. Sie kommt auf der linken Seite als Navigationsleiste und im Content als ganz normale Auszählungsliste vor. Des weiteren die Überschrift h1. Sie kommt im header der Seite als Überschrift vor und des weiteren mehrmals im Content.

In diesem Context zwei Fragen:

1.)
Nun muß die Liste die die Navigationsleiste wiederspiegelt natürlich anders formatiert werden, als die Liste die eine ganz normale Aufzählung im Content darstellt. Bei der Navigationsliste z.B. sollen die Aufzählungspunkte ausgeblendet werden. Des weiteren sollen die einzelnen Punkte durch eine horizontale Linie von einander getrennt werden. In der Liste im Content hingegen sollen die Aufzählungspunke angezeigt werden bzw. sollen keine horizontalen Trennlinien zwischen den einzelnen Menüpunkten angezeigt werden.

Wie ist denn diesbezüglich der beste Ansatz zur CSS-Formatierung. Sollte ich den kleinsten gemeinsamen Nenner der Listen suchen und zunächst eine CSS-Formatierung der Listen festlegen, die für alle Listen der Webseite gilt und im weiteren basierend auf diesen Grundformatierungen weitere Spezialformatierungen für die jeweiligen Unterlisten durchführen?

ja, und die sonderform kannst du anhand ihrer id formatieren - das ist der weg den ich üblicherweise bestreite: allgemeine formatierungen für alle möglichen textelemente (überschriften, listen, tabellen) und anschliessend erst die spezialsachen

keine allgemeingültige Grundformatierung für alle Listen einführen und statt dessen für jeden einzelnen Listentyp sofort eine eigene Formatierung umsetzen, ohne eine Grundformatierung zu nutzen die für alle Listen gilt.

das ist der weg der mit der erfahrung kommt - ggf. musst du nachher aber noch formatierung nachreichen, wenn du etwas vergessen hast

Demnach braucht sie also andere margins bzw. paddings als die h1-Überschriften im Content.

mehr als ein h1-element pro seite ist üblicherweise wenig sinnvoll, die erste gliederungsüberschrift im inhalt sollte ein h2-element sein (einerseits freut sich google scheinbar mehr darüber, andererseits wirst du bei durchschnittlichen webseiten nur ein h1-element pro dokument benötigen - ausser vielleicht bei gigantischen diplomarbeiten ;))

Zunächst würde ich den Innenabstand des Content-Containers auf 10px setzen. Anschließend würde ich margin, padding und border von h1, img und p auf 0 setzen, damit auch der 10 Pixel Abstand zur linken Kante des Content-Containers zustande kommt.

ich bevorzuge diese variante, geht einfach "schneller" - mit vernünftigem box-modell ist das auch kein problem - der ie 5.5 bleibt halt aussen vor

Alternativ könnte ich den Innenabstand des Content-Containers auf 0px setzen. Dementsprechend müßte z.B. der margin von h1, img und p auf 10px gesetzt werden.

auf padding zu verzichten würde auch browser mit defektem box-modell entsprechend einbeziehen - die frage ist nun ob das relevant ist oder nicht

alternativ kannst du natürlich um deinen inhalt noch ein weiteres element ziehen und mit margin statt padding arbeiten