Elemente innerhalb von CSS-Containern sinnvoll formatieren

[Anton]

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.

[suit]

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

[Anton]

Erstmal vielen Dank für dein Info

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 ;))

Diesbezüglich hast du micht jetzt etwas verwirrt. Mir ist zwar klar, dass falls ich nur im header h1 verwende das Problem mit den unterschiedlichen Formatierungen nichtmehr habe. Ich verstehe allerdings nicht, warum ich nur ein h1-Element pro Seite verwenden soll bzw. warum ich im Content mit h2 und nicht mit h1 anfange. Semantisch ist das doch eigentlich falsch. Semantisch handelt es sich bei der ersten Überschirft in meinem Content doch eigentlich um ein h1-Element?

Du sagst, dass es vorteilhaft für die Google-Indexierung ist, wenn ich im Inhalt mit h2 statt mit h1 Elemementen anfange. Kannst du mir sagen woher du das weißt bzw. wie es dir aufgefallen ist

Du hast nicht zufällig ein Dokument bezüglich der Suchmaschinenoptimierung (im speziellen Google) parat, was du mir empfehlen kannst?

[Der Martin]

Hallo,

mehr als ein h1-element pro seite ist üblicherweise wenig sinnvoll
Ich verstehe allerdings nicht, warum ich nur ein h1-Element pro Seite verwenden soll bzw. warum ich im Content mit h2 und nicht mit h1 anfange. Semantisch ist das doch eigentlich falsch. Semantisch handelt es sich bei der ersten Überschirft in meinem Content doch eigentlich um ein h1-Element?

nein, semantisch betrachtet stellt die gesamte Seite *ein* Dokument dar. Und *ein* Dokument hat üblicherweise auch genau *eine* Hauptüberschrift.
Bei vielen Webseiten wird diese eine Hauptüberschrift nun durch einen graphisch aufbereiteten Header repräsentiert, es bleibt aber von der Semantik her *die* Überschrift des Dokuments. Alles weitere ordnet sich dieser Überschrift unter.

So long,
 Martin

[Anton]

Du hast geschrieben:

"Bei vielen Webseiten wird diese eine Hauptüberschrift nun durch einen graphisch aufbereiteten Header repräsentiert"

im meinem Markup steht dann z.B.

<h1>
Ich bin die Hauptüberschrift und soll nur angezeigt werden, wenn die Hintergrundgrafik nicht geladen werden kann
</h1>

Wie mache ich das eigentlich, dass die Hauptüberschrift nur dann angezeigt wird, wenn die Hintergrundgrafik nicht geladen werden kann?

[suit]

Wie mache ich das eigentlich, dass die Hauptüberschrift nur dann angezeigt wird, wenn die Hintergrundgrafik nicht geladen werden kann?

ich bevorzuge dafür die gilder-levin-methode

[MudGuard]

Hi,

nein, semantisch betrachtet stellt die gesamte Seite *ein* Dokument dar. Und *ein* Dokument hat üblicherweise auch genau *eine* Hauptüberschrift.

und die steht im title ;-)

cu,
Andreas

[Der Martin]

Hallo,

semantisch betrachtet stellt die gesamte Seite *ein* Dokument dar. Und *ein* Dokument hat üblicherweise auch genau *eine* Hauptüberschrift.
und die steht im title ;-)

so kann man es auch sehen, und es klingt verdammt vernünftig - die Erfahrung zeigt aber, dass die Titelleiste des Fensters (wo der Inhalt des title-Elements typischerweise angezeigt wird) zu den am häufigsten übersehenen Informationen gehört, wahrscheinlich sogar häufiger als die Statusleiste.

Deswegen habe ich mir angewöhnt, im title-Element nur den Inhalt der Hauptüberschrift (h1) zu duplizieren, mehr nicht.

Ciao,
 Martin

[MudGuard]

Hi,

semantisch betrachtet stellt die gesamte Seite *ein* Dokument dar. Und *ein* Dokument hat üblicherweise auch genau *eine* Hauptüberschrift.
und die steht im title ;-)
so kann man es auch sehen, und es klingt verdammt vernünftig - die Erfahrung zeigt aber, dass die Titelleiste des Fensters (wo der Inhalt des title-Elements typischerweise angezeigt wird) zu den am häufigsten übersehenen Informationen gehört, wahrscheinlich sogar häufiger als die Statusleiste.

Was hält Dich davon ab [1], den title im Webseitenfenster zu präsentieren?

  
head       { display:block; } /* head anzeigen*/  
head *     { display:none;  } /* alles im head verstecken (link, meta, script, style, ...) */  
head title { display:block; } /* aber den Title doch anzeigen */  

[1] außer der Unfähigkeit des IE

cu,
Andreas

[suit]

Deswegen habe ich mir angewöhnt, im title-Element nur den Inhalt der Hauptüberschrift (h1) zu duplizieren, mehr nicht.

ich hab im title-element eine kombination aus h1 und h2 drinnen stehen - eine vollständige redundanz halte ich für unsinnig

  
<title>unterseite xyz - example.com comany</title>  
<h1>example.com</h1>  
<h2>unterseite xyz</h2>  
  
<title>unterseite abc - example.com comany</title>  
<h1>example.com</h1>  
<h2>unterseite abc</h2>