Kommentare 18

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

18 Kommentare

  1. 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

  2. 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ß

  3. 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/

  4. 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.

  5. 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

  6. merlin

    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 :)

  7. 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 :)

Schreibe eine Antwort