Ein Glossar in HTML und CSS erstellen – so funktioniert’s

Um ein Glossar, z.B. auf deinem WordPress-Blog zu erstellen, benötigst du eigentlich kein extra Plugin. Mit ein paar Zeilen HTML und einigen extra CSS-Styles kannst du in wenigen Schritten dein eigenes Glossar einrichten. Ich habe den benötigten HTML und CSS Code bereits vorbereitet, so dass du diesen nur noch in deine eigene Webseite einfügen und deine Glossar-Beschreibungen eintragen musst.

1. Der HTMl Code für dein Glossar

Diese HTML-Code dient als Grundgerüst für dein Glossar. Den Code kannst du z.B. einfach ganz einfach über den WordPress HTML-Editor in eine Seite oder einen Artikel deines WordPress-Blogs einfügen.

<div class="letters-bg"><strong><a href="#letter-a">A</a> <a href="#letter-b">B</a> <a href="#letter-c">C</a> <a href="#letter-d">D</a> <a href="#letter-e">E</a> <a href="#letter-f">F</a> <a href="#letter-g">G</a> <a href="#letter-h">H</a> <a href="#letter-i">I</a> <a href="#letter-j">J</a> <a href="#letter-k">K</a> <a href="#letter-l">L</a> <a href="#letter-m">M</a> <a href="#letter-n">N</a> <a href="#letter-o">O</a> <a href="#letter-p">P</a> <a href="#letter-q">Q</a> <a href="#letter-r">R</a> <a href="#letter-s">S</a> <a href="#letter-t">T</a> <a href="#letter-u">U</a> <a href="#letter-v">V</a> <a href="#letter-w">W</a> <a href="#letter-x">X</a> <a href="#letter-y">Y</a> <a href="#letter-z">Z</a></strong></div>

<div id="letter-a" class="big-letter">A</div>
<div class="glossar-bg">
<h3>Augue</h3>
Penatibus mauris lorem sociis turpis arcu. Eros porta, vel, aliquam? <a href="#">Magna</a> penatibus. Odio nisi? Lectus? Dictumst vel turpis, magna, a scelerisque turpis ut mid nisi est tristique nisi nunc parturient! Pulvinar et, pulvinar ac rhoncus rhoncus magna sed! Integer massa integer ultricies. Ultrices? Rhoncus.

<h3>Aliquet</h3>
Penatibus mauris lorem sociis turpis arcu. Eros porta, vel, aliquam? Magna penatibus. Odio nisi? Lectus? Dictumst vel turpis, magna, a scelerisque turpis ut mid nisi est tristique nisi nunc parturient! Pulvinar et, pulvinar ac rhoncus rhoncus magna sed! Integer massa integer ultricies. Ultrices? Rhoncus.
</div>

<div id="letter-b" class="big-letter">B</div>
<div class="glossar-bg">
<h3>Headline</h3>
Penatibus mauris lorem sociis turpis arcu. Eros porta, vel, aliquam? Magna penatibus. Odio nisi? Lectus? Dictumst vel turpis, magna, a scelerisque turpis ut mid nisi est tristique nisi nunc parturient! Pulvinar et, pulvinar ac rhoncus rhoncus magna sed! Integer massa integer ultricies. Ultrices? Rhoncus.
</div>

<div id="letter-c" class="big-letter">C</div>
<div class="glossar-bg">
<h3>Headline</h3>
Text...
</div>

<div id="letter-d" class="big-letter">D</div>
<div class="glossar-bg">
<h3>Headline</h3>
Text...
</div>

<div id="letter-e" class="big-letter">E</div>
<div class="glossar-bg">
<h3>Headline</h3>
Text...
</div>

<div id="letter-f" class="big-letter">F</div>
<div class="glossar-bg">
<h3>Headline</h3>
Text...
</div>

<div id="letter-g" class="big-letter">G</div>
<div class="glossar-bg">
<h3>Headline</h3>
Text...
</div>

<div id="letter-h" class="big-letter">H</div>
<div class="glossar-bg">
<h3>Headline</h3>
Text...
</div>

<div id="letter-i" class="big-letter">I</div>
<div class="glossar-bg">
<h3>Headline</h3>
Text...
</div>

<div id="letter-j" class="big-letter">J</div>
<div class="glossar-bg">
<h3>Headline</h3>
Text...
</div>

<div id="letter-k" class="big-letter">K</div>
<div class="glossar-bg">
<h3>Headline</h3>
Text...
</div>

<div id="letter-l" class="big-letter">L</div>
<div class="glossar-bg">
<h3>Headline</h3>
Text...
</div>

<div id="letter-m" class="big-letter">M</div>
<div class="glossar-bg">
<h3>Headline</h3>
Text...
</div>

<div id="letter-n" class="big-letter">N</div>
<div class="glossar-bg">
<h3>Headline</h3>
Text...
</div>

<div id="letter-o" class="big-letter">O</div>
<div class="glossar-bg">
<h3>Headline</h3>
Text...
</div>

<div id="letter-p" class="big-letter">P</div>
<div class="glossar-bg">
<h3>Headline</h3>
Text...
</div>

<div id="letter-q" class="big-letter">Q</div>
<div class="glossar-bg">
<h3>Headline</h3>
Text...
</div>

<div id="letter-r" class="big-letter">R</div>
<div class="glossar-bg">
<h3>Headline</h3>
Text...
</div>

<div id="letter-s" class="big-letter">S</div>
<div class="glossar-bg">
<h3>Headline</h3>
Text...
</div>

<div id="letter-t" class="big-letter">T</div>
<div class="glossar-bg">
<h3>Headline</h3>
Text...
</div>

<div id="letter-u" class="big-letter">U</div>
<div class="glossar-bg">
<h3>Headline</h3>
Text...
</div>

<div id="letter-v" class="big-letter">V</div>
<div class="glossar-bg">
<h3>Headline</h3>
Text...
</div>

<div id="letter-w" class="big-letter">W</div>
<div class="glossar-bg">
<h3>Headline</h3>
Text...
</div>

<div id="letter-x" class="big-letter">X</div>
<div class="glossar-bg">
<h3>Headline</h3>
Text...
</div>

<div id="letter-y" class="big-letter">Y</div>
<div class="glossar-bg">
<h3>Headline</h3>
Text...
</div>

<div id="letter-z" class="big-letter">Z</div>
<div class="glossar-bg">
<h3>Headline</h3>
Text...
</div>

<div class="letters-bg-bottom"><strong><a href="#letter-a">A</a> <a href="#letter-b">B</a> <a href="#letter-c">C</a> <a href="#letter-d">D</a> <a href="#letter-e">E</a> <a href="#letter-f">F</a> <a href="#letter-g">G</a> <a href="#letter-h">H</a> <a href="#letter-i">I</a> <a href="#letter-j">J</a> <a href="#letter-k">K</a> <a href="#letter-l">L</a> <a href="#letter-m">M</a> <a href="#letter-n">N</a> <a href="#letter-o">O</a> <a href="#letter-p">P</a> <a href="#letter-q">Q</a> <a href="#letter-r">R</a> <a href="#letter-s">S</a> <a href="#letter-t">T</a> <a href="#letter-u">U</a> <a href="#letter-v">V</a> <a href="#letter-w">W</a> <a href="#letter-x">X</a> <a href="#letter-y">Y</a> <a href="#letter-z">Z</a></strong></div>

So erhältst du eine Alphabet-Übersicht ganz oben und eine zweite ganz unten auf der Seite. Die Buchstaben haben Anchor-Tags zu den jeweiligen Buchstaben im Glossar. So kannst du sie als Navigation zu den einzelnen Buchstaben nutzen.

Glossar in HTML und CSS erstellen
Die Glossar-Navigation

Glossar in HTML und CSS erstellen
Bei einem Buchstaben kannst du jetzt einfach deine Beschreibungen eintragen. Du kannst eine Überschrift und einen erklärenden Text eintragen.

2. Der benötigte CSS-Code

Jetzt brauchst du nur noch einige CSS-Styes, die dein Glossar etwas übersichtlicher zu machen. Füge dazu einfach folgende Styles in dein Stylesheet ein.

/* Custom Glossar
----------------------------------------------- */
.big-letter {
	background: #3D5199;
	margin: 40px 0 0;
	padding: 8px 13px;
	display: block;
	text-align: center;
	width: 30px;
	font-size: 1.6em;
	font-weight: bold;
	color: #fff;
}
.letters-bg {
	background-color: #f0f0f0;
	margin: 15px 0 0 0;
	padding: 8px 20px;
	font-size: 1.3em;
	word-spacing: .4em;
	line-height: 1.4em;
}
.glossar-bg {
	background-color: #f0f0f0;
	margin: 15px 0 0 0;
	padding: 2px 20px 15px 20px;
}
.glossar-bg h3 {
	margin:20px 0 0;
	padding:0;
	font-size:.9em;
	font-weight:bold;
	text-transform: none;
}
.glossar-bg p {
	font-size:.85em;
	line-height:1.4;
	margin-bottom:10px;
}
.letters-bg-bottom {
	background-color: #f0f0f0;
	margin: 40px 0 30px 0;
	padding: 10px 20px;
	font-size: 1.4em;
	word-spacing: .4em;
	line-height: 1.4em;
}

Die Farben kannst du natürlich noch an dein eigenes Design anpassen. Vor allem den blauen background Hex-Wert bei .big-letter möchtest du eventuell anpassen.

Als Vorlage habe ich übrigens den gleichen Code aus dem WordPress-Lexikon hier auf dem Elmastudio-Blog verwendet. Für den Smooth Scroll Effekt kannst du das jQuery Smooth Scroll-Plugin von Karl Swedberg (auf GitHub) verwenden.

Ich hoffe meine Beschreibung und der Code hilft dir weiter, so dass du schnell ein eigenes Glossar umsetzten kannst. Über dein Feedback freue ich mich sehr

22 Kommentare

  1. Danke Dir, liebe Ellen!

    Schon das zweite Mal, daß Du hier etwas erklärst, was recht weit oben auf meiner Tutorial-Suchliste steht.

    Spooky! ;)

    Lieber Gruß
    Rata

    8)

  2. Hallo Ellen,
    je nachdem, wie umfangreich ein Glossar wird, wäre bei jedem Buchstaben ein „Zum Seitenanfang“ Link bzw. ein Anker zur Buchstabenübersicht sinnvoll. Sonst kann das Scrollen ganz schön mühsam werden.
    Schöne Grüße
    Thomas Erl

  3. Hallo Ellen,
    vielen Dank für Deinen tollen Tipp. Ich freue mich immer wieder wenn ich etwas von Dir höre, da Deine Tipps immer sehr wertvoll sind.
    Eine kleine Idee hätte ich noch. Wenn ich in einem solchen Glossar etwas lesen möchte, nehmen wir an mit dem Buchstaben H, son kann ich das. Doch wie komme ich wieder zu den einzelnen Buchstaben. Entweder ich muss nach oben scrollen oder nach unten. Und das ist dann nicht mehr so geschmeidig. Kannst Du noch einen „nach oben“ oder einen „nach unten“ Button einbauen?
    Ich wünsche Dir ein schönes, sonniges Wochenende.
    Lieben Gruß

  4. Hallo Ellen,

    das Glossar sieht wie immer Klasse aus, aber ich hätte einen Vorschlag fürs HTML.

    Den Text unter den H3-Überschriften könntest du in p-Absätze packen. Es ist ja ein Fließtextabsatz, und dann kann ein Eintrag auch mehrere Absätze enthalten.

    Etwas grundsätzlicher wäre die Idee, statt neutraler divs und h3 „description lists“ (früher „Definitionsliste) zu verwenden. Die sind für Glossare gemacht: dl für die Liste, dt für die Begriffe und dd für die Erklärungen.

    Syntax in HTML5
    http://www.w3.org/TR/html-markup/dl.html#dl
    Kurzform: dt darf nur Inline-Elemente enthalten, dd auch Blöcke.

    Klassischer Artikel Beispiele zur Gestaltung von Russ Weakley:
    http://www.maxdesign.com.au/articles/definition/

  5. Hallo Ellen,

    das ist mal wieder sehr praktisch, vielen Dank für den Code. Werde ich bestimmt bald mal einbauen.
    Viele Grüße,

    Stefan

  6. Liebe Ellen,

    ich bin immer wieder begeistert über die vielen Tipps, so auch beim dem Glossar. Eine super Idee, die mir gerade gelegen kommt, da ich dieses für ein Projekt umsetzen möchte.

    Herzlichen dank für die tollen Tipps.

  7. Hallo Ellen,
    Deine Idee ist umgesetzt. Nur mit dem jQuery Smooth Scroll-Plugin kam ich nicht zurecht.
    Kannst Du mir einen kurzen Tipp geben?
    Lieben Gruß

  8. Danke für das Tutorial! Sieht auf jedenfall schön schlicht aus, und ist perfekt für ein Glossar. Sobald ich eines benötige werd ich deine Lösung mal ausprobieren.

    Grüße
    Vincent

  9. Wieder mal ein klasse Tutorial, das ich sehr gut gebrauchen kann :-) Habe ähnliches schon mit ein paar Plugins ausprobiert – ist leider nicht so geworden, wie ich es mir dachte.

    LG
    Jasmina

  10. Bernd Klaus Achter 23. September 2011

    Danke für diesen sehr praktikablen Tip. Nach so einer Lösung habe ich schon lange gesucht. Gleich mal ausprobieren.

  11. Hallo Ellen,
    vielen Dank für die Anregung zum Glossar. Ich habe den Code für ein Inhaltsverzeichnis verwendet und ein wenig angepasst. Von jedem aufgerufenen Buchstaben ist nun ein Rücksprung nach oben möglich (Sinnvoll bei langen Seiten; wurde schon von einem User angeregt). Die CSS-Ergänzung habe ich mit dem Plugin „Your Custom CSS“ aus dem Theme ausgelagert. Somit muss bei Theme-Änderungen der CSS-Teil nicht erneut in die style.css eingefügt werden. Im Plugin-Editor lassen sich die ggf. erforderlichen Anpassungen an das neue Theme leicht vornehmen.
    Hier der Link zu meinem Inhaltsverzeichnis:
    http://www.web266.de/musik/inhaltsverzeichnis.html

    LG Hans

  12. Verbreitete Plugins für ein Glossar sind unter anderem „WP Glossary“ von TCBarret, „CM Tooltip“ (verschiedene Schreibweisen u.a. „CM Super Tooltip Glossary“) von „CM Plugins“ und „Encyclopedia“ von „Dennis Hoppe“. Erstes ist kostenlos erhältlich, das zweite und dritte gibt es sowohl als kostenlose Light oder als kostenpflichtige Pro-Version. Leider gefiehl mir beim WP Glossary das default-Layout auf der Beispielseite nicht so gut. Da das Encyclopedia in der kostenlosen Variante nur 5 Einträge zulässt, habe ich als erstes CM Tooltip getestet. Mit dem Ergebnis bin ich sehr zufrieden. Wenn irgendwann etwas fehlt mache ich gerne das Upgrade und freue mich, dass ich dann nicht alles erneut eingeben muss. Hoffentlich :)

    • Hallo Ellen,

      da Merlin bereits Plugins vorgeschlagen hat, möchte ich auch noch eine Empfehlung aussprechen, da ich die Pflege des Glossars mittels oben vorgestelltem Code ziemlich aufwändig und „Copy & Paste“ ohne Grundkenntnisse eher problematisch finde.

      Ich selbst benutze die „Encyclopedia“ von Dennis Hoppe in der Lite-Version, in der man zwar nur 12 Begriffe anlegen kann, die aber für meine Zwecke völlig ausreicht. Ich finde das Plugin außerdem super, da es die Begriffe auf dem Rest der Webseite automatisch verlinkt und von einem deutschen Programmierer stammt, was das Verständnis für mich sehr erleichtert.

      Dennoch herzlichen Dank für die Anregung und viele Grüße
      Paula

  13. Liebe Ellen, nach dem ich schon ungezählte Male auf deiner Webseite war, will ich mich heute endlich mal bedanken. Es wird ZEIT! Es ist immer wieder bewundernswert wie du genau immer MEINE Probleme löst. Vielen, Vielen Dank für deine Arbeit. Ich habe den Glossar so umgesetzt, siehe hier http://www.tollus-catering.de/glossar-tollus-catering-frankfurt-main/ Auf Grund meines Templates sieht man aber nicht den Buchstaben, den man anklickt, da das Menü ja oben „stehen bleibt“. Dafür wird es wohl keine Lösung geben, oder doch? Wie macht Ihr die Anordnung alphabetisch der einzelnen Einträge, also alle die mit z.B. A beginnen, manuell?

    • Ich habe mir mal Gedanken gemacht mit der Anordnung von A-Z und bin dann auf eine Exel Tabelle gekommen. Es funktioniert wunderbar, ich habe auch den HTML Code integriert, somit kann man dann in der Exel Tabelle den Glossar schreiben und dann einfach mit kopieren in den Blog schreiben. Immer wenn mir was einfällt schreibe ich es in die Exel und einmal pro Woche übertrage ich dann die gesamte Tabelle. Ich habe ein Bild gemacht, wie das aussieht… nur ich kann es ja hier nicht hochladen. Wenns jemand interessiert kann man sich ja melden :)

  14. Hi Ellen

    Echt super! Danke für den Code. Ich habe es gleich auf der Seite unserer Grundschule umgesetzt. Es sieht super aus.

  15. Michael Andres 19. Juni 2016

    Moin Ellen.

    Hier zeigt sich mal wieder warum es gut ewig alte Threads bestehen zu lassen, denn Du hast mir falsche Querdenker erspart.
    Ganz Klasse. Vielen Dank für Deine Bereitstellung.

    Beste Grüße,
    der Micha

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *