Listen Lösung - in Ordnung?

[retrax]

Bisher hatte ich es im HTML Quellcode so stehen:

<td class="NaviLR">
<ul>
<li><a class="NaviAbs">About Me</a></li>
<li><a href="http://www.retrax.de/Steckbrief.html">Steckbrief</a></li>
<li><a href="http://www.retrax.de/Lebenslauf.html">Lebenslauf</a></li>
<li><a href="http://www.retrax.de/Bilder/Wohnung/Wohnung.html">Wohnung</a></li>
<li><a href="http://www.retrax.de/Bilder/Familie/Familie.html">Familie</a></li>
<li><a href="http://www.retrax.de/Bilder/Freunde/Freunde.html">Freunde</a></li>
<li><a href="http://www.retrax.de/Bilder/Schnuffi/Schnuffi.html">Schnuffi</a></li>
</ul>

Folgende Fehler liegen hier für mich nach der Diskussion hier vor:

• Kategorieüberschrift "About Me" hat innerhalb der Liste nichts zu suchen, da es sich um keinen Listeneintrag handelt.
• wenn ich "About Me" mit <hx> aus der Liste herausholen würde, wäre es auch nicht zufriedenstellend, da via CSS die Schriftgrösse kleiner formatiert werden müsste, damit es ins Design passt.

Meine Lösung schaut jetzt folgendermassen aus: Ich entferne die <ul> Liste und nehme stattdessen eine Definitionsliste, da eine solche mir die Möglichkeit der Kategorienüberschriften bietet:

also:

<td class="NaviLR">
<dl>
<dt>About Me</dt>
<dd><a href="http://www.retrax.de/Steckbrief.html">Steckbrief</a></dd>
<dd><a href="http://www.retrax.de/Lebenslauf.html">Lebenslauf</a></dd>
<dd><a href="http://www.retrax.de/Bilder/Wohnung/Wohnung.html">Wohnung</a></dd>
<dd><a href="http://www.retrax.de/Bilder/Familie/Familie.html">Familie</a></dd>
<dd><a href="http://www.retrax.de/Bilder/Freunde/Freunde.html">Freunde</a></dd>
<dd><a href="http://www.retrax.de/Bilder/Schnuffi/Schnuffi.html">Schnuffi</a></dd>
</dl>

Damit wäre ich aus dem Schneider, da ich <dt> wunderschön per CSS formatieren kann ohne <hx> in die Quere zu kommen.

Ich möchte jetzt gerne eine Rückmeldung von den Profis hier, ob ich das so machen darf mit einer Definitionsliste. Mir ist bekannt dass im obigen Beispiel noch zwei Sachen verbessert werden könnten. Zum einen weg mit den absoluten Links und zum zweiten eine Verschachtelung.

Aber ist das jetzt so wie ich das geplant habe syntaktisch, semantisch,... vollkommen in Ordnung?

Danke!

[Kurt D.]

Hi retrax,

Auf deinen speziellen Fall zugeschnitten, halte ich eine Definitionsliste als einzig richtige und semantisch korrekte Lösung.

Kurt

[Geistiger Hohlraum]

Meine Lösung schaut jetzt folgendermassen aus: Ich entferne die <ul> Liste und nehme stattdessen eine Definitionsliste, da eine solche mir die Möglichkeit der Kategorienüberschriften bietet:

<td class="NaviLR">
<dl>
<dt>About Me</dt>
<dd><a href="http://www.retrax.de/Steckbrief.html">Steckbrief</a></dd>
<dd><a href="http://www.retrax.de/Lebenslauf.html">Lebenslauf</a></dd>

Da Du ja sicher noch mehr Menüpunkte in der Navigation als nur "About me" hast, wäre natürlich auch eine verschachtelte Liste anwendbar:

<ul><li>Über mich
        <ul><li>Steckbrief</li>
            <li>Lebenslauf</li>
            <li>...</li>
        </ul>
    </li>
    <li>Rezepte</li>
        <ul><li>Backen</li>
            <li>Kochen</li>
            <li>Braten</li>
       </ul>
    </li>
    <li>Bierdeckelsammlung</li>
        <ul><li>Große Deckel</li>
            <li>Kleine Deckel</li>
            <li>Verbogene Deckel</li>
        </ul>
    </li>
    <li>Fünf tolle Adressen</li>
    <li>Kontakt</li>
</ul>

PS: Bleibe doch bitte in Zukunft Deinem/in diesem Thread, dies ist wahrscheinlich schon der fünfte zum selben Problem.
PPS: Es ist ja schön, dass Du Dir Gedanken machst, aber momentan machst Du Dir zu viele Gedanken.

[Geistiger Hohlraum]

Sorry:

<ul><li>Über mich
    </li>
    <li>Rezepte</li>

------------------^^^^^ gehört da nicht hin

<ul><li>Backen</li>
            <li>Kochen</li>
            <li>Braten</li>
       </ul>
    </li>
    <li>Bierdeckelsammlung</li>

-----------------------------^^^^^ gehört da nicht hin

<ul><li>Große Deckel</li>
            <li>Kleine Deckel</li>

[Mirko42]

Hallo,

ich muss sagen, den Vorschlag mit verschachtelten Listen halte ich nach Überlegung doch für am besten (und möchte gleichzeitig meine Einbindung der hX's in die Liste hinten anstellen, auch wenn sie syntaktisch korrekt ist, und ich sie für semantisch nicht wirklich falsch halte, aber eben nicht am sinnvollsten).

Es gibt, wie Geistiger Hohlraum richtig festgestellt hat, sicher mehrere Haupt-Menüpunkte, also kann man diese auch als Listenpunkte betrachten. Die Untermenüpunkte sind wiederum Listenpunkte einer niedrigeren Ebene, also ist das Verschachteln eine sinvolle Lösung.

Man kann das ganze dann auch ganz prima stylen:

ul li {
// Definition für Haupt-Menüpunkte
}

ul ul li {
// Definition für Sub-Menüpunkte
}

Mirko42

[Struppi]

Man kann das ganze dann auch ganz prima stylen:

ul li {
// Definition für Haupt-Menüpunkte
}

ul ul li {
// Definition für Sub-Menüpunkte
}

Das Problem ist, er hat keine submenüpunkte.

Er hat ein Menü, in dem mehere Listen mit Überschriften vorhanden sind.

Dazu reichen diese CSS Definitionen:
#menu {  }
#menu h1 { }
#menu ul { }
#menu li { }
#menu li a{ }

Struppi.

[Mirko42]

Hallo,

habe eben mal folgendes probiert...

<ul>
<li><h1>Good sites</h1></li>
<li><a href="http://www.google.de/">Google</a></li>
<li><a href="http://de.wikipedia.org/">Wikipedia</a></li>
</ul>

... und erfolgreich validiert (auf http://validator.w3.org).

Du kannst also für Deine Listen am besten eine spezielle hX-CSS-Definition anlegen, also:

hX {
// hier Deine bereits existente Definition; unberührt
}

ul hX {
// hier eine an das Aussehen Deiner Liste angepasste Definition
}

Ich halte das für semantisch korrekt, allerdings solltest Du anhand Deiner Seite noch entscheiden, welches X in hX für Deine Überschriften geeignet ist (wahrscheinlich nicht wie in meinem Beispiel h1 ;).

Mirko42

[retrax]

habe eben mal folgendes probiert...

<ul>
<li><h1>Good sites</h1></li>
<li><a href="http://www.google.de/">Google</a></li>
<li><a href="http://de.wikipedia.org/">Wikipedia</a></li>
</ul>
Mirko42

ist das wirklich semantisch in Ordnung? "Good Sites" ist eine Kategorienüberschrift und kein Listeneintrag. Bei deinem Beispiel ist das aber ein Listeneintrag wie jeder andere auch nur halt noch grössenformatiert...

[Struppi]

Mirko42

ist das wirklich semantisch in Ordnung? "Good Sites" ist eine Kategorienüberschrift und kein Listeneintrag. Bei deinem Beispiel ist das aber ein Listeneintrag wie jeder andere auch nur halt noch grössenformatiert...

eben, du hast eine Überschrift und dann eine Liste und dann eine Überschrift und dann eine Liste und diese gehören zu dem Bereich Menü. was ist da denn so schwierig?

Struppi.

[Struppi]

Folgende Fehler liegen hier für mich nach der Diskussion hier vor:

• Kategorieüberschrift "About Me" hat innerhalb der Liste nichts zu suchen, da es sich um keinen Listeneintrag handelt.
• wenn ich "About Me" mit <hx> aus der Liste herausholen würde, wäre es auch nicht zufriedenstellend, da via CSS die Schriftgrösse kleiner formatiert werden müsste, damit es ins Design passt.

Das ist doch auch kein Problem. Du hast innerhalb des Menüblocks eine Überschrift und diese kannst du innerhab des Blocks so gross machen wie du willst.

Insofern ging deine Frage [pref:t=86198&m=509541] ja von einer völlig falschen Situation aus, denn in dem Menüblock gibt es nur eine Überschrift und wenn diese kleiner ist als z.b. H2 im textblock ist das egal, da sie für eine Überschrift in einem bestimmten Bereich und nicht für eine im kompletten Dokument steht.

Meine Lösung schaut jetzt folgendermassen aus: Ich entferne die <ul> Liste und nehme stattdessen eine Definitionsliste, da eine solche mir die Möglichkeit der Kategorienüberschriften bietet:

Ist zwar auch ein Möglichkeit halte ich aber nicht für so gut, da eine Linkliste ja nur eine Liste ist.

Dein Struktur ist folgende:

[Menü]

* Überschrift
* Linkliste

* Überschrift
* Linkliste

[Text]
* Überschrift
* Textblock

ich seh da kein Problem, wenn die Überschrift im Menü kleiner ist als im Textabschnitt

Struppi.

[Mirko42]

Hallo,

wie stellst Du Dir die Auszeichnung (/Kennzeichnung) der verschiedenen Bereiche als solche in Deinem Schema konkret vor? Mit span? Mit div?

[Menü]

* Überschrift
* Linkliste

* Überschrift
* Linkliste

[Text]
* Überschrift
* Textblock

Ich denke, die Hx's in die Listen hineinzupacken (aber zusätzlich auch in <li>, etwas anderes ist innerhalb einer ul nicht valide) ist sinnvoller. Und auch ohne Probleme (s. mein obiger Post) stylebar.

Mirko42

[Struppi]

wie stellst Du Dir die Auszeichnung (/Kennzeichnung) der verschiedenen Bereiche als solche in Deinem Schema konkret vor? Mit span? Mit div?

[Menü]

* Überschrift
* Linkliste

* Überschrift
* Linkliste

[Text]
* Überschrift
* Textblock

Ich denke, die Hx's in die Listen hineinzupacken (aber zusätzlich auch in <li>, etwas anderes ist innerhalb einer ul nicht valide) ist sinnvoller. Und auch ohne Probleme (s. mein obiger Post) stylebar.

Ein Überschrift hat in meinem Augen nichts in einer Liste zu suchen. sie überschreibt eine Liste, d.h. es gibt mehrere Listen.

Das obige Schema sieht ungefähr so aus:

<div id="menu">

<h1>Rubrik 1 </h1>
<ul>
<li> <a href="...">ein link</A> </li>
<li> <a href="...">ein link</A> </li>
<li> <a href="...">ein link</A> </li>
...

</ul>

<h1>Rubrik 2 </h1>
<ul>
<li> <a href="...">ein link</A> </li>
<li> <a href="...">ein link</A> </li>
<li> <a href="...">ein link</A> </li>
...

</ul>

</div>

<div id="text">
<h1> Überschrift </h1>

<p> Text......

</div>

Einfach und logisch.
Struppi.

[retrax]

<div id="menu">
</div>
Einfach und logisch.
Struppi.

schon, nur dass ich mir damit wieder eine <div>-Suppe einhandel und dann jaulen die Puristen aus de.comm.infosystems.www.authoring.misc...

Außerdem müsste ich dann das <h1> in deinem Beispiel CSS mässig auf 100% setzen damit es die gleiche Grösse wie die Listeneinträge hat und somit ins Design passt.

Und da <h1> dann kleiner als <h2> wäre ist das doch unlogisch...

[Struppi]

Hallo retrax

<div id="menu">
</div>
Einfach und logisch.
Struppi.

schon, nur dass ich mir damit wieder eine <div>-Suppe einhandel und dann jaulen die Puristen aus de.comm.infosystems.www.authoring.misc...

was ein quatsch, da jault keiner rum, wenn du ein Gruppe von HTML Tags in ein Div zusammenfaßt. genau dafür ist es da und genau so machen es auch die Puristen.

Außerdem müsste ich dann das <h1> in deinem Beispiel CSS mässig auf 100% setzen damit es die gleiche Grösse wie die Listeneinträge hat und somit ins Design passt.

Und da <h1> dann kleiner als <h2> wäre ist das doch unlogisch...

Nein!
das H1 gehört in das Menü und dort gibt es kein H2. Und wenn dort doch eins auftauchen sollte, dann stimmt das, dann solltest du es keliner als das H1 machen.

Struppi.

[Detlef G.]

Hallo Struppi,

das H1 gehört in das Menü und dort gibt es kein H2. Und wenn dort doch eins auftauchen sollte, dann stimmt das, dann solltest du es keliner als das H1 machen.

Warum überhaupt H1?
Gehen wir mal davon aus, dass die Seite eine H1 hat, der Inhalt der Seite dann eine oder mehrere H2, eventuell H3 usw..
Warum sollten dann die Menüüberschriften nicht H2 oder, je nach Struktur der Gesamtseite, H3 sein?

Auf Wiederlesen
Detlef

[Struppi]

Warum überhaupt H1?
Gehen wir mal davon aus, dass die Seite eine H1 hat, der Inhalt der Seite dann eine oder mehrere H2, eventuell H3 usw..
Warum sollten dann die Menüüberschriften nicht H2 oder, je nach Struktur der Gesamtseite, H3 sein?

Weil sie in dem Bereich #menu die Überschrift erster Ordnung ist, oder?

Struppi.

[Detlef G.]

Hallo Struppi,

Weil sie in dem Bereich #menu die Überschrift erster Ordnung ist, oder?

Das ist auch eine Möglichkeit.
Ich betrachte üblicherweise die ganze Seite oder sogar das gesamte Projekt als eine Einheit.

Auf Wiederlesen
Detlef

[Struppi]

Weil sie in dem Bereich #menu die Überschrift erster Ordnung ist, oder?

Das ist auch eine Möglichkeit.
Ich betrachte üblicherweise die ganze Seite oder sogar das gesamte Projekt als eine Einheit.

Ja, natürlich.
Aber eine Seite hat üblicherwise verschiedenen Bereiche. (z.b. Kopfzeile, Logo, Menü, Text, Fußzeile) und in einem Projekt haben i.d.R. alle Seiten die gleiche oder ähnliche Struktur.

letztlich könnte er auch meinen Vorschlag, mit deinem Ansatz koppeln. D.h. die Überschriften je nach Bedeutung im gesamten Dokument vergeben, aber die Überschrift im Menü dem Layout des restlichen Menüs anpassen. Damit hätte er ein sinvolles Markup und sein gewünschtes aussehen.

Struppi.

[retrax]

hmm also dann kristallisieren sich jetzt folgende Möglichkeiten heraus:

• eine verschachtelte Liste ala Geistiger Hohlraum mit <ul>

• <div> ala Struppi

• Eine Definitionsliste

wenn eine Linkliste eher eine Liste ist so wie Struppi gemeint hat dann würde sich die erste Lösung mit einer verschachtelten Liste wohl am ehesten anbieten.

Ich könnte ja eine Definitionsliste auch verschachteln, aber wenn Links besser zu einer <ul> Liste passen (vom semantischen her)...

[retrax]

Andererseits erlaubt das W3C ausdrücklich Links in einer Definitionsliste:

Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words.
[link]http://www.w3.org/TR/xhtml2/mod-list.html#edef_list_dt[/link]

Although some people disagree with this example, it does suggest that definition lists can be used for more than simple terms and definitions, as long as there is a direct relationship between the items. Following this arguement, all the examples below could be marked up using definition lists:

DT: Speaker

DD: Quotation

DT: Image

DD: Description

DD: Location

DD: Photographer

DT: Term

DD: Descriptive image

DD: Description

DT: Website (link)

DD: Description

DT: Date

DD: Event

DT: Event

DD: Date

DD: Description

DD: Venue

DT: Internal links

DD: Home

DD: Section 1

DD: Section 2

DT: External links

DD: External link 1

DD: External link 2

[Struppi]

hmm also dann kristallisieren sich jetzt folgende Möglichkeiten heraus:

• eine verschachtelte Liste ala Geistiger Hohlraum mit <ul>

• <div> ala Struppi

• Eine Definitionsliste

wenn eine Linkliste eher eine Liste ist so wie Struppi gemeint hat dann würde sich die erste Lösung mit einer verschachtelten Liste wohl am ehesten anbieten.

Nein, denn es ist ja nicht eine Liste in einer Liste und ein Listenpunkt ist keine Überschrift.

sondern es ist ein Bereich (Menü) mit meherene Listen und diese haben jeweils eine Überschrift.

Die Definitionsliste wäre noch denkbar, ich persönlich verwende diese aber lieber für eine Liste von Einträgen mit einer Überschrift (zum Beipiel einem Link) und einer dazugehörigen Beschreibung.

Ich könnte ja eine Definitionsliste auch verschachteln, aber wenn Links besser zu einer <ul> Liste passen (vom semantischen her)...

Das spielt keine Rolle. Du kannst inline Elemente immer in Blockelemente plazieren.

Struppi.

[retrax]

»»» Nein, denn es ist ja nicht eine Liste in einer Liste und ein Listenpunkt ist keine Überschrift.

sondern es ist ein Bereich (Menü) mit meherene Listen und diese haben jeweils eine Überschrift.

Die Definitionsliste wäre noch denkbar, ich persönlich verwende diese aber lieber für eine Liste von Einträgen mit einer Überschrift (zum Beipiel einem Link) und einer dazugehörigen Beschreibung.
Struppi.

und was hälst du von einer Navigation List?

Laut W3C schaut das so aus:

Navigation lists are intended to be used to define collections of selectable items for presentation in a "navigation" menu. A navigation list is required to start with a label element that defines the label for the list.

<nl>
   <label>Contents </label>
   <li href="#introduction">Introduction</li>
   <li>
      <nl>
          <label>Terms</label>
          <li href="#may">May</li>
          <li href="#must">Must</li>
          <li href="#should">Should</li>
      </nl>
   </li>
   <li href="#conformance">Conformance</li>
   <li href="#references">References</li>
   ...
</nl>

das würde doch perfekt passen oder? Allerdings scheint das XHTML zu sein. Verstehen das die heutigen Browser überhaupt?

[Struppi]

und was hälst du von einer Navigation List?

Klar, das ist das was du hast, bis auf die tatsache, das das Beispiel eine verschachtelte Liste ist, die du ja nicht hast.

Laut W3C schaut das so aus:

Navigation lists are intended to be used to define collections of selectable items for presentation in a "navigation" menu. A navigation list is required to start with a label element that defines the label for the list.

das würde doch perfekt passen oder? Allerdings scheint das XHTML zu sein. Verstehen das die heutigen Browser überhaupt?

oh, da darfste mich nicht Fragen.

Struppi.

[retrax]

und was hälst du von einer Navigation List?

Klar, das ist das was du hast, bis auf die tatsache, das das Beispiel eine verschachtelte Liste ist, die du ja nicht hast.

» Struppi.

nicht ganz. Bei der Navigation List gibt es ja dieses <label> Element. Das ist ja dann ungefähr das was <dt> bei der Definitionsliste ist nur würde es vielleicht insgesammt gesehen auf eine Linkliste besser passen als eine Definitionsliste. Wobei im anderen Post von mir steht dass das W3C ausdrücklich auch für Definitionslisten alles erlaubt was in einem Zusammenhang zueinander steht, also auch Kategorieüberschriften und nachfolgende Links die zu dem Thema passen...

[Struppi]

nicht ganz. Bei der Navigation List gibt es ja dieses <label> Element. Das ist ja dann ungefähr das was <dt> bei der Definitionsliste ist nur würde es vielleicht insgesammt gesehen auf eine Linkliste besser passen als eine Definitionsliste. Wobei im anderen Post von mir steht dass das W3C ausdrücklich auch für Definitionslisten alles erlaubt was in einem Zusammenhang zueinander steht, also auch Kategorieüberschriften und nachfolgende Links die zu dem Thema passen...

Klar, aber diese Links sind keine Beschreibungen. Was ist den an dem Konstrukt:
#überschrift
#linkliste

#überschrift
#linkliste

so verwerflich?
Das ist doch semantisch genau das was du auf deiner Seite hast.

Keine Liste von Links mit einzelnen Punkten die keine Links sind oder keine Beschreibungslisten, deren Beschreibungstext einzelne Links sind. Am ehesten hast du neben meinem Vorschlag noch, eine Liste in der einzelnen Punkte Links sind und andere Überschriften.

Aber wie gesagt fürmich sind es mehrere Listen die jeweils eine Überschrift haben und in diesem Bereich in dem diese Listen angeordnet sind sind dies die Hauptüberschriften.

Struppi.