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.

Die Glossar-Navigation

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

Kommentare (14) Schreibe einen Kommentar

Danke, eine gute Idee.
Wie immer bei Euch.

Gruß
Oliver

Antworten
- Rata
- 09.09.11 @ 20:11
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)

Antworten
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

Antworten
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ß

Antworten
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/

Antworten
Hallo Ellen,

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

Stefan

Antworten
Ich habe dein Beispiel hier mal mit dem oben beschriebenen HTML umgesetzt:

http://infotekten.de/testdrive/glossary/

Im CSS sind nur zwei kleine Änderungen notwendig. Funktioniert gut ;-)

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

Antworten
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ß

Antworten
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

Antworten
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

Antworten
- Bernd Klaus Achter
- 23.09.11 @ 12:37
Danke für diesen sehr praktikablen Tip. Nach so einer Lösung habe ich schon lange gesucht. Gleich mal ausprobieren.

Antworten
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

Antworten
Danke super erklarung!

Antworten

Elmastudio

Est 2009

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

1. Der HTMl Code für dein Glossar

2. Der benötigte CSS-Code

Ellen

Kommentare (14) Schreibe einen Kommentar

Hinterlasse eine Antwort Antworten abbrechen

1. Der HTMl Code für dein Glossar

2. Der benötigte CSS-Code

Ähnliche Artikel anschauen

Ellen

Kommentare (14) Schreibe einen Kommentar

Hinterlasse eine Antwort Antworten abbrechen