Frage zum Wiki-Artikel „Listen“

[Q, ob nun aus der 007 oder Scharddreg-Phantasy-Welt]

Wieso gibt es nicht „längst“ einen „responsiven“ Ersatz für die alten HTML-Listen? Immerhin verbinden die alle Inhalte mit der Darstellung. Und das zwingend, so daß auch jeder Versuch, sie mittels CSS zu (hier, listenbezüglich) „entblocken“, an vielen Ecken und Enden im Detail scheitert?

Beispiel?

„Ich packe in meinen Koffer: einen Hund, eine Katze, einen Föhn, ein …“, „…!”

<ul>
<header>Ich packe inh meinen Koffer</header>
<li>einen Hund</li>
<li>eine Katze</li>
<li>einen Föhn</li>
<li>ein …</li>
<li>…!</li>
</ul>

Den Inhalt in verschiedene Darstellungsformen zu zwingen (hier wäre es erst einmal eine Inline-Liste) und dann mit diversen anderen CSS-Features zu „verzieren“ (insb. ::before und ::after) scheitert. Und zwar, hier im Beispiel, daran, daß so beigefügte Darstellungselemente immer wieder als nicht dem Element zugehörig betrachtet werden, welchem sie von der topologischen Struktur her zugeordnet wären. Sprich: das ::before und/oder ::after-Element wird (oftmals ohne jegliche Not!) umgebrochen und damit vom Element getrennt.

Einen Teil(!) dieser Effekte kann man gerade noch vermeiden, wenn man Whitespace(!) zwischen den Grenzen der Entities (also zwischen einem „>“ und dem folgenden „<“) weg nimmt. Aber schon das Tauschen dieser Whitespaces gegen HTML-Kommentare funktioniert nicht „einwandfrei“. Es dauert nur etwas länger, bis man über das nächste sich daraus ergebende Problem stoplert.

Ergebnis: eine div-Wüste, welche Elemente gegen ihre Eltern isoliert und damit versucht, diese bzw. deren Eigenschaften in die Knie zu zwingen. Oder schlicht Resignation, die intrinsische Frage, wieso man es nicht lieber gleich bei HTML 0.9 beläßt!

[Matthias Scharwies]

Servus!

Wieso gibt es nicht „längst“ einen „responsiven“ Ersatz für die alten HTML-Listen?

Listen sind responsiv, d.h. sie passen sich auch ohne CSS an den Viewport an.

Immerhin verbinden die alle Inhalte mit der Darstellung.

Nein.

Den Inhalt in verschiedene Darstellungsformen zu zwingen (hier wäre es erst einmal eine Inline-Liste)

ul  {
  list-style: none; 
  padding: 0; 
  margin: 0; 
}

ul li {
  display: inline;
}

und dann mit diversen anderen CSS-Features zu „verzieren“ (insb. ::before und ::after) scheitert.

Liegt das an den Listen oder am CSS? Bring mal ein Live-Beispiel!

Ergebnis: eine div-Wüste,

Listen oder divs?

Oder schlicht Resignation, die intrinsische Frage, wieso man es nicht lieber gleich bei HTML 0.9 beläßt!

Fremdwörter kannst du! Respekt! Neue Rechtschreibung kommt noch!

Herzliche Grüße und ein schönes Wochenende!

Matthias Scharwies

[Rolf B]

Hallo Qnix,

schönen Gruß ans Kontinuum, sowie an Jean-Luc und Kathy!

<ul>
<header>Ich packe inh meinen Koffer</header>
<li>einen Hund</li>
<li>eine Katze</li>
<li>einen Föhn</li>
<li>ein …</li>
<li>…!</li>
</ul>

ist falsch, <header> als Kind von <ul> ist unzulässig. Eine Listen-Überschrift muss außerhalb der Liste stehen. Einfach als <p>, oder als passendes <h…> Element. <ul> darf enthalten:

• <li> Elemente
• <script> Elemente
• <template> Elemente

Erstaunlich, dass der Browser vor dem header nicht gleich erstmal das ul zumacht. Was wo enthalten sein darf, sagen Dir die Referenzseiten zu den Elementen im Selfwiki, oder Mozilla, oder die HTML Spezifikation. Die w3schools verraten Dir sowas allerdings nicht.

Aber das sollte Dir die List-Items nicht verhageln.

Einen Teil(!) dieser Effekte kann man gerade noch vermeiden, wenn man Whitespace(!) zwischen den Grenzen der Entities (also zwischen einem „>“ und dem folgenden „<“) weg nimmt.

Dass ::before-Inhalt, li-Inhalt und ::after-Inhalt umgebrochen werden, liegt daran, dass der Inhalt des li als Fließtext aufgefasst wird. Deshalb bleibt auch der Whitespace als eine Leerstelle erhalten. Hier kann es helfen, das li-Element mit display:inline-flex zu formatieren (was aber auch gleich das Listenverhalten entfernt) und flex-flow: row wrap; zu setzen. li Elemente haben ab Werk ein display:list-item, wenn dessen Entfernung stört, musst Du den li-Inhalt in ein span oder div packen und dem die passenden Styles geben. Muss aber alles nicht klappen, es hängt sehr davon ab, was Du da tust.

Tauschen von Whitespace gegen Kommentare ist eine weitere Möglichkeit, das kann man aber auch so machen. Schön ist allerdings anders:

<span>Hallo</span
><span>Welt</span>

(Kann ich jetzt nicht mit ~~~ formatieren weil der HTML-Formatter vom Forum darüber austickt)

Um Dir wirklich eine Lösung empfehlen zu können, müssten wir wissen, was genau Du erreichen willst.

Rolf

[Gunnar Bittersmann]

@@Q, ob nun aus der 007 oder Scharddreg-Phantasy-Welt

Den Inhalt in verschiedene Darstellungsformen zu zwingen (hier wäre es erst einmal eine Inline-Liste) und dann mit diversen anderen CSS-Features zu „verzieren“ (insb. ::before und ::after) scheitert.

Tut es das?

Und zwar, hier im Beispiel, daran, daß so beigefügte Darstellungselemente immer wieder als nicht dem Element zugehörig betrachtet werden, welchem sie von der topologischen Struktur her zugeordnet wären. Sprich: das ::before und/oder ::after-Element wird (oftmals ohne jegliche Not!) umgebrochen und damit vom Element getrennt.

Kann ich auf den lower decks nicht nachvollziehen. Auf den upper decks auch nicht.

Kwakoni Yiquan