Anton: 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?

oder sollte ich

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.

Die gleiche Frage zu Überschriften: Die Überschrift h1 im Header soll beispielsweise im Header zentriert werden. Demnach braucht sie also andere margins bzw. paddings als die h1-Überschriften im Content. Wie sollte ich das bezüglich der Formatierung lösen?

2.)
Mal angenommen mein Content-Container enthält eine Überschrift h1, ein Bild und einen Absatz. Alle sollen linksbündig mit einem entsprechenden Abstand (z.B. 10px)im Content-Container ausgerichtet sein. Wie wäre denn hier das sinnvollste Vorgehen.

Variante 1:
-----------
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.

Variante 2:
-----------
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.