Alphabet in einer Reihe

[Achot]

Hallo,

wie würdet ihr das Alphabet in einer Reihe anordnen?

Also:

A B C D E F G usw.…

die Buchstaben sollen jeweils einen viereckigen Kasten bekommen.

<div>A</div>
<span>A</span>
<p>A</p>

oder gar etwas ganz anderes?

[Camping_RIDER]

Aloha ;)

Du sprichst in Rätseln. Vielleicht klärst du uns vor allem mal darüber auf, wozu du das ganze brauchst. Nur dann lässt sich das sinnvoll beurteilen.

wie würdet ihr das Alphabet in einer Reihe anordnen?

Also:

A B C D E F G usw.…

die Buchstaben sollen jeweils einen viereckigen Kasten bekommen.

Das ist eine Frage von CSS, keine Frage von HTML, und ist mit quasi jedem Markup möglich.

<div>A</div>

Nein.

<span>A</span>

Vielleicht.

<p>A</p>

Vielleicht.

oder gar etwas ganz anderes?

Vielleicht auch <h1> / <h2> / ... / <h6> ? Das kommt doch vollständig darauf an, in welcher Art und aus welchem Grund du die Buchstaben hier nutzen willst. Das kann man so pauschal doch gar nicht beantworten ohne mehr zu wissen.

Grüße,

RIDER

[Achot]

Hallo,

ich habe eine Seite mit knapp 5000 Einträge. Jetzt möchte ich gerne eine Navigation einbauen mit dem ich in der Lage bin z.b. auf ein A zu klicken und es werden nur Einträge angezeigt, die mit einem A beginnen usw....

[Gunnar Bittersmann]

@@Achot

auf ein A zu klicken

Das schränkt die Auswahl der zu verwendenden HTML-Elemente schon arg ein: zur Verfügung stehen a und button.

a ist für Links zu anderen Seiten (bzw. anderen Ressourcen), button ist für Aktionen auf der bestehenden Seite.

und es werden nur Einträge angezeigt, die mit einem A beginnen usw....

Also zweiteres: button.

Damit ergibt sich der von dir gewünschte Rahmen von selbst.

Die Buttons können auch aufgelistet werden:

<ol>
  <li><button id="buttonA">A</button></li>
                           ⋮
  <li><button id="buttonZ">Z</button></li>
</ol>

LLAP 🖖

[Achot]

Hallo,

ein button möchte ich lieber nicht verwenden, was ist wenn ich einem User direkt eine gefilterte Version zur Verfügung stellen möchte? Deshalb lieber ein <a> dann kann ich z.B. folgendes weiter reichen:

example.com/locations.php?filter=a

Mit einem button ist dieses nicht möglich

[Camping_RIDER]

Aloha ;)

ein button möchte ich lieber nicht verwenden, was ist wenn ich einem User direkt eine gefilterte Version zur Verfügung stellen möchte? Deshalb lieber ein <a> dann kann ich z.B. folgendes weiter reichen:

example.com/locations.php?filter=a

Mit einem button ist dieses nicht möglich

Wieso nicht?

Grüße,

RIDER

[Julius]

Hallo Achot,

example.com/locations.php?filter=a

Mit einem button ist dieses nicht möglich

Doch:

<form>
 <button name="filter" value="a">A</button>
 <button name="filter" value="b">B</button>
 <button name="filter" value="c">C</button>
</form>

... ergibt beispielsweise example.com/list?filter=a

Ich persönlich bin kein Fan einer solchen Lösung mit buttons, weil ich damit keine neuen Tabs öffnen kann, was ich auch bei Pagination manchmal mache – ich würde die Links nehmen.

Gruß
Julius

[Gunnar Bittersmann]

@@Achot

Deshalb lieber ein <a> dann kann ich z.B. folgendes weiter

example.com/locations.php?filter=a

Bei „Filtern“ war ich (etwas leichtfertig) davon ausgegangen, dass alle Daten schon beim Client sind und lediglich die nicht benötigten ausgeblendet werden.

Spätestens wenn Paging im Spiel ist, ist das nicht gegeben; und jede gefilterte Ansicht per eigenem URI bookmarken und an andere weitergeben zu können hat auch seinen Charme.

Dann sind a-Elemente angebracht.

LLAP 🖖

[Regina Schlaukug]

a ist für Links zu anderen Seiten (bzw. anderen Ressourcen), button ist für Aktionen auf der bestehenden Seite.

Um einen Anker auf derselben Seite zu erreichen, benutzt man <a href="#anker">, anstatt irgendwas mit button zu veranstalten.

und es werden nur Einträge angezeigt, die mit einem A beginnen usw....

5000 Einträge dürften zwar arg viel sein für eine einzelne Seite, eventuell sollen auch mehrere Gruppen gleichzeitig angezeigt werden ("Einträge mit D und F"), aber trotzdem als Anregung für einen ganz einfachen Anzeigefilter:

Mittels :target lassen sich CSS-seitig Elemente abhängig vom aktiven Anker ein- oder ausblenden, ganz ohne zusätzliche Hilfe von Javascript oder serverseitigen Filtern und ständigem Nachladen. :target steht für das Element, dessen id-Attribut dem Anker in der URL entspricht.

<section id="a">
<h1><a href="#a">A</a></h1>
<ol><li>Apfel</li><li>Ananas</li></ol>
</section>

<section id="b">
<h1><a href="#b">B</a></h1>
<ol><li>Banane</li><li>Birne</li></ol>
</section>

<section id="c">
<h1><a href="#c">C</a></h1>
<ol><li>Citrone mit C</li></ol>
</section>

Mit

section > ol {
  display:none;
}
section:target > ol {
  display:block;
}

sind jeweils nur die Abschnittstitel (hier als h1) zu sehen sowie der gerade über die URL ausgewählte Abschnitt (hier als ol). Die URLs dazu lauten ganz simpel beispiel.html#a, beispiel.html#b, etc.

[Gunnar Bittersmann]

@@Achot

wie würdet ihr das Alphabet in einer Reihe anordnen?

Also:

A B C D E F G usw.…

Eine Liste ist eine Liste ist eine Liste.

<ol>
  <li>A</li>
      ⋮
  <li>Z</li>
</ol>

die Buchstaben sollen jeweils einen viereckigen Kasten bekommen.

So in etwa?

LLAP 🖖

[Achot]

Hallo,

jaaaa genau so nur nicht so viel Abstand dazwischen :) Aber sag mal bitte wie hast du das Alphabet eingefügt?

Das soll HTML sein?

ol
- var c = 'A'.charCodeAt(0);
	while c <= 'Z'.charCodeAt(0)
		li= String.fromCharCode(c++)

[Gunnar Bittersmann]

@@Achot

Das soll HTML sein?

ol
- var c = 'A'.charCodeAt(0);
	while c <= 'Z'.charCodeAt(0)
		li= String.fromCharCode(c++)

Nö, das ist Pug f/k/a Jade, wie auch unschwer zu erkennen ist:

Das daraus generierte HTML siehst du durch Click auf 🔽, View compiled HTML.

LLAP 🖖