In einer <ol>-Liste eine sichtliche Abtrennung vornehmen

[Cameron]

Vorab herzlichen Glückwunsch an das Forum und vielen Dank insbesondere an die, die hier regelmäßig helfen. Eure Kompetenz hätte ich gerne. 😀

Meine Frage: Ich habe eine einfache geordnete Liste, also

<ol> <li></li> (...)

Innerhalb der Liste gibt es verschiedene Kategorien, daher würde ich die Liste gerne in irgendeiner Art und Weise sichtlich abtrennen. Was ich meine ist das:

1. Bonn
2. Köln
3. Münster
4. Hanau
5. Gießen
6. Kassel

Sollte zum Beispiel so aussehen:

1. Bonn
2. Köln
3. Münster

-Trennstrich-

4. Hanau
5. Gießen
6. Kassel

Geht das und gibt es andere Möglichkeiten, die Liste erkennbar zu trennen?

Vielen Dank!

[Cameron]

Oder anders gefragt: Ist soetwas…

https://codepen.io/anon/pen/yYyyGY?editors=110

auch mit verschiedenen Farben?

[beatovich]

hallo

Oder anders gefragt: Ist soetwas…

https://codepen.io/anon/pen/yYyyGY?editors=110

auch mit verschiedenen Farben?

z.B. Rangliste, die drei ersten speziell stylen.

ol li {background:white;}
ol li:nth-child(1){background:gold}
ol li:nth-child(2){background:silver}
ol li:nth-child(3){background:bronce}

[Cameron]

Das mit den Nummern ist doch keine Option.

Geht das mit der Linie? Ich finde da keine Lösung, das ist vermutlich zu einfach.

[beatovich]

hallo

Das mit den Nummern ist doch keine Option.

Geht das mit der Linie? Ich finde da keine Lösung, das ist vermutlich zu einfach.

Du suchst also nach margin-bottom, border-bottom und padding-bottom? Oder allgemeiner nach den Eigenschaften für margin, padding und border?

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/äußere_Gestaltung/Rahmen/border

[Robert B.]

Moin Cameron,

Innerhalb der Liste gibt es verschiedene Kategorien, daher würde ich die Liste gerne in irgendeiner Art und Weise sichtlich abtrennen. Was ich meine ist das:

1. Bonn
2. Köln
3. Münster
4. Hanau
5. Gießen
6. Kassel

Sollte zum Beispiel so aussehen:

1. Bonn
2. Köln
3. Münster

-Trennstrich-

4. Hanau
5. Gießen
6. Kassel

Dahinter steckt doch eine Semantik, oder? Die könntest du doch im ersten Schritt mal in deiner Liste abbilden:

<dl>
<dt>Nordrhein-Westfalen</dt>
<dd><ol>
    <li>Bonn</li>
    <li>Köln</li>
    <li>Münster</li>
</ol></dd>
<dt>Hessen</dt>
<dd><ol>
    <li>Hanau</li>
    <li>Gießen</li>
    <li>Kassel</li>
</ol></dd>
</dl>

Und jetzt du.

Viele Grüße
Robert

[Meowsalot]

Hallo Robert,

und die Abgrenzung nach unten könnte dann so aussehen:

dd {
  margin-bottom: 2em;
  border-bottom: 1px solid #999;
  padding-bottom: 1em;
  margin-left: 0;
}

https://codepen.io/anon/pen/wxjXdE

Bis bald!
Meowsalot (Bernd)

[Cameron]

Vielen Dank! Als ich mich vor einigen Jahren mit HTML beschäftigte, gab's <dt> noch nicht. Das ist keine Ausrede, aber darauf wäre ich einfach nicht gekommen. Vielen Dank!

[Tabellenkalk]

Hallo,

Vielen Dank! Als ich mich vor einigen Jahren mit HTML beschäftigte, gab's <dt> noch nicht.

Ich hab jetzt nicht nach HTML 3 gegraben, aber du musst „vor einigen Jahrzehnten“ gemeint haben...

Gruß
Kalk

[Robert B.]

Moin Cameron,

Als ich mich vor einigen Jahren mit HTML beschäftigte, gab's <dt> noch nicht.

Das ist aber schon ein bisschen länger her, denn dl und seine Kindelemente dt und dd sind seit HTML 1 Bestandteil – das verlinkte Dokument wurde spätestens 1992 veröffentlicht.

Viele Grüße
Robert

[Matthias Apsel]

Hallo Robert B.,

Als ich mich vor einigen Jahren mit HTML beschäftigte, gab's <dt> noch nicht.

Das ist aber schon ein bisschen länger her, denn dl und seine Kindelemente dt und dd sind seit HTML 1 Bestandteil – das verlinkte Dokument wurde spätestens 1992 veröffentlicht.

Da Cameron vermutlich nicht im CERN arbeitete, hat er sich wohl schlicht geirrt, denn laut Wikipedia erschien die erste Version der HTML-Spezifikation am 3.11.1992.

Bis demnächst
Matthias

[Rolf B]

Hallo,

was ihr da überseht, ist die Frage ob es überhaupt einen gliedernden Oberbegriff gibt, und die Kontinuität der Nummerierung.

Eine Definitions- oder Beschreibungsliste ist nur sinnvoll wenn es einen Begriff gibt, der durch die Listenpunkte definiert bzw. beschrieben wird. Ohne diesen Begriff kann man genausogut die Listen hintereinanderkleben.

Wegen der Nummerierung kann man im einfachen Fall der zweiten Liste mittels start-Attribut beibringen, wo sie fortsetzen soll. Aber warum die Liste trennen, wenn es nicht nötig ist? Wenn keine natürliche Gliederung vorhanden ist, sollte man einfach im CSS ein spezielles Styling für das LI vor oder hinter dem Trennstrich vorsehen, so dass mittels Margin, Padding und Border ein Strich erzeugt wird. Das KANN mit dem vorhandenen Styling der LI kollidieren, so dass es auch interessant sein kann, mittels ::before oder ::after ein Pseudo-Element einzufügen, das den Strich abbildet.

Welches LI den Trennstrich erzeugt, kann durch die Position bestimmt werden (wie beat mit nth-child gezeigt hat; man kann auch nth-of-type verwenden), oder man markiert das LI vor oder hinter dem Trennstrich mit einer Klasse, die für die Semantik dieser Trennung steht.

Rolf

[Robert B.]

Moin Rolf,

was ihr da überseht, ist die Frage ob es überhaupt einen gliedernden Oberbegriff gibt […]

Nein, genau diese Frage habe ich doch gestellt:

Dahinter steckt doch eine Semantik, oder?

Viele Grüße
Robert

[Gunnar Bittersmann]

@@Rolf B

Wegen der Nummerierung kann man im einfachen Fall der zweiten Liste mittels start-Attribut beibringen, wo sie fortsetzen soll.

Dazu müsste man aber wissen, wie lang die erste Liste ist. Wenn in der ersten Liste später noch „Düsseldorf“ hinzukommt, muss man die zweite anpassen. Keine gute Idee.

Welches LI den Trennstrich erzeugt, kann durch die Position bestimmt werden (wie beat mit nth-child gezeigt hat; man kann auch nth-of-type verwenden)

Dazu müsste man aber wissen … Keine gute Idee.

:nth-child()/:nth-of-type() ist geeignet, das dreiundzwölfzigste Element zu selektieren. Diese Pseudoklassen sind nicht geeignet, ein bestimmtes Element zu selektieren, das gegenwärtig(!) gerade das dreiundzwölfzigste ist.

oder man markiert das LI vor oder hinter dem Trennstrich mit einer Klasse, die für die Semantik dieser Trennung steht.

Das ist eine gute Idee.

Oder man markiert alle li mit einer Klasse, die für die Semantik deren Inhalts steht:

<ol>
	<li class="NRW">Bonn</li>
	<li class="NRW">Köln</li>
	<li class="NRW">Münster</li>
	<li class="Hessen">Hanau</li>
	<li class="Hessen">Gießen</li>
	<li class="Hessen">Kassel</li>
</ol>

Die Stelle für den Trennstrich könnte man mit .NRW + .Hessen selektieren.

LLAP 🖖

[Rolf B]

Hallo Gunnar,

Dazu müsste man aber wissen, wie lang die erste Liste ist.

In statischem HTML hast Du recht. Ein start="4" in der zweiten Liste wäre dann eine magische Zahl. Aber wenn das HTML dynamisch generiert wird, ist das kein Problem.

nth-child - keine gute Idee

Wenn die erste Liste variabel lang ist, ja. Wenn es um die Top-3 geht, ist es wieder egal. Es kommt halt auf den Anwendungszweck an.

Die Stelle für den Trennstrich könnte man mit .NRW + .Hessen selektieren.

Die Idee einer Kategorie-Klasse hatte ich auch schon, aber ich halte einen Selektor dieser Art für eine fatale Lösung. Denn dann muss das CSS fachspezifische Inhalte enthalten. Die gehören da meiner Auffassung nach niemals nicht hinein. Was ist, wenn noch Bayreuth, Augsburg und Passau hinzukommen? Du musst das CSS erweitern, weil fachlich ein Bundesland dazu kommt. Ansonsten zanken sich unterm Strich die Hessen mit den Bayern. Huiuiui, aus Berliner Sicht mag das alles ein Haufen Volk mit unverständlicher Sprache irgendwo jenseits der Elbe sein, aber vor Ort wird man das anders sehen...

Ein CSS Selektor, der erkennt, dass eine Klasse wechselt, müsste das lösen, aber ich kann mir nicht vorstellen wie das mit CSS formulierbar wäre. Vor allem angesichts der Tatsache, dass die LI mehr als eine Klasse haben könnten und es nur um den Wechsel der Kategorieklasse gehen sollte.

Deswegen dürfte das Setzen der Übergangspunkte im HTML wohl am sinnvollsten sein, solange es nur im einen Strich geht. Wenn es Gliederungsüberschriften gibt, bleibt nur das Trennen in mehrere Listen. Und dann ist vermutlich ein selbstgemachter CSS Counter die beste Methode, das übergreifend zu nummerieren (Fiddle):

<style>
dl { counter-reset: stadt; }
dt { font-weight:bold; }
dd { margin-left: 0; }
dd ol { margin: 0.5em 0 0.3em 0; padding: 0; }
dd li { list-style:none }
dd li::before {
  counter-increment: stadt;
  content: counter(stadt) ".";
  display: inline-block;
  width: 2em; margin-right: 0.5em;
  text-align:right;
}
</style>

<!-- im Body: -->
<dl>
<dt>Nordrhein-Westfalen</dt>
<dd><ol>
<li>Bonn</li>
<li>Köln</li>
<li>Münster</li>
</ol></dd>
<dt>Hessen</dt>
<dd><ol>
<li>Hanau</li>
<li>Gießen</li>
<li>Kassel</li>
</ol></dd>
</dl>

Rolf

[Tabellenkalk]

Hallo,

Ein CSS Selektor, der erkennt, dass eine Klasse wechselt, müsste das lösen, aber ich kann mir nicht vorstellen wie das mit CSS formulierbar wäre.

Es wäre immer noch Inhalt im css, aber könnte sowas wie .hessen + not(.hessen) funktionieren?

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

Es wäre immer noch Inhalt im css, aber könnte sowas wie .hessen + not(.hessen) funktionieren?

Nicht, wenn die Klasse im Markup Hessen heißt. 😜

Aber ja, derartige Selektoren sind natürlich sinnvoller als meiner. Man kann einfach alle möglichen Bundesländer im Stylesheet vorsehen, egal, ob sie gerade(!) im Seiteninhalt vorkommen oder nicht. Dann können sich auch die Bayern zwischen NRW und Hessen schieben:

.Bayern + :not(.Bayern),
.Hessen + :not(.Hessen),
.NRW + :not(.NRW), …
{ … }

Oder bei Bedarf andersrum

:not(.Bayern) + .Bayern,
:not(.Hessen) + .Hessen,
:not(.NRW) + .NRW, …
{ … }

Wenn man einen CSS-Präprozessor verwendet (bspw. Sass), würde man das so in der Art machen:

$Bundesländer: (Bayern, Hessen, NRW, …);

@each $Bundesland in $Bundesländer
{
  .#{$Bundesland} + :not(.#{$Bundesland}) { … }
}

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Wenn man einen CSS-Präprozessor verwendet (bspw. Sass), würde man das so in der Art machen:

$Bundesländer: (Bayern, Hessen, NRW, …);

@each $Bundesland in $Bundesländer
{
  .#{$Bundesland} + :not(.#{$Bundesland}) { … }
}

Nö, nicht ganz. Das würde ja

Selektor1 { … }
Selektor2 { … }
Selektor3 { … }

generieren. Wir wollen doch aber die Selektoren aufzählen:

Selektor1, Selektor2, Selektor3 { … }

Der SCSS-Code dafür:

$Bundesländer: (Bayern, Hessen, NRW);
$Selektor: ();

@each $Bundesland in $Bundesländer
{
  $Selektor: append($Selektor, '.#{$Bundesland} + :not(.#{$Bundesland})', comma);
}

#{$Selektor} { … }

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Nö, nicht ganz.

Immer noch nicht. Ich hatte ein paar Punkte vergessen. Berichtigt.

LLAP 🖖

[Gunnar Bittersmann]

@@Rolf B

nth-child - keine gute Idee Wenn es um die Top-3 geht, ist es wieder egal.

Nicht „egal“, sondern dann ist :nth-child() bzw. :nth-of-type() Mittel der Wahl. Was ich mit „ist geeignet, das dreiundzwölfzigste Element zu selektieren“ schon sagte.

LLAP 🖖

[Gunnar Bittersmann]

@@Robert B.

<dl>
<dt>Nordrhein-Westfalen</dt>
<dd><ol>
    <li>Bonn</li>
    <li>Köln</li>
    <li>Münster</li>
</ol></dd>
<dt>Hessen</dt>
<dd><ol>
    <li>Hanau</li>
    <li>Gießen</li>
    <li>Kassel</li>
</ol></dd>
</dl>

Wenn Beschreibungsliste, dann braucht man nicht unbedingt innere Listen:

<dl>
	<div>
		<dt>Nordrhein-Westfalen</dt>
		<dd>Bonn</dd>
		<dd>Köln</dd>
		<dd>Münster</dd>
	</div>
	<div>
		<dt>Hessen</dt>
		<dd>Hanau</dd>
		<dd>Gießen</dd>
		<dd>Kassel</dd>
	</div>
</dl>

Numerierung mit CSS.

Allerdings fehlt dann im Markup die Information, dass es sich um eine geordnete Liste handelt.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Allerdings fehlt dann im Markup die Information, dass es sich um eine geordnete Liste handelt.

Bzw. um zwei geordnete Listen, deren Numerierung durchläuft. Also:

<div id="cities">
	<ol>
		<li>Bonn</li>
		<li>Köln</li>
		<li>Münster</li>
	</ol>
	<ol>
		<li>Hanau</li>
		<li>Gießen</li>
		<li>Kassel</li>
	</ol>
</div>

Nur dass die Numerierung nicht durch ein start-Attribut durchläuft, sondern mittels CSS.

LLAP 🖖

[Lars]

Ich frage mal doof dazwischen: Was wäre denn gegen diese Lösung einzuwenden? → https://codepen.io/anon/pen/ejKxdo Das Wäre in meinen Augen die einfachste.

Gruß Lars

[Matthias Apsel]

Hallo Lars,

Ich frage mal doof dazwischen: Was wäre denn gegen diese Lösung einzuwenden? → https://codepen.io/anon/pen/ejKxdo Das Wäre in meinen Augen die einfachste.

<ol>
  <li>Bonn</li>
  <li>Köln</li>
  <li>Münster</li>
  <li class="trenn"><hr class="linie"></li>
  <li value="4">Hanau</li>
  <li>Gießen</li>
  <li>Kassel</li>
</ol>

Was machst du, wenn sich die Trennstelle ändert?

Semantisch sind alle Listenelemente Städte, eine Stadt <hr class="linie"> gibt es nicht. hr steht für einen thematischen Bruch. Wenn es den gibt, sind getrennte Listen das Mittel der Wahl.

Gestaltung gehört ins CSS.

Bis demnächst
Matthias

[Lars]

Hallo Matthias,

das leuchtet mir auch ein. 😟 Wenigstens habe ich heute wieder was gelernt 👍

Gruß Lars