Web-Spirit Sebastian Gollus

CSS Tagcloud (Schlagwortwolke) 17.12.2007

Passend zum Tutorial − PHP und MySQL Tagcloud (Schlagwortwolke) − zeigt dieser Artikel, wie die erstellte Tagcloud in CSS gestaltet werden kann. Durch die Benutzung von Style-Klassen können die Schlagwörter nun nicht nur durch ihre Schriftgröße unterschieden werden, sondern auch durch Schriftfarbe, Schriftart, Hintergrundfarbe etc.

Dieser Artikel baut auf dem Tutorial PHP und MySQL Tagcloud (Schlagwortwolke) auf.

XHTML Markup

Die XHTML Struktur bleibt die gleiche, wie die im vorherigen Artikel. Um die Tagcloud anschaulicher zu machen, habe ich nun meine aktuellen Tags für die Tagcloud verwendet. Das PHP Script liefert dann folgendes:

<div id="tagcloud">

<a href="/tag-suche/bildwechsel" class="tag1">bildwechsel</a> 

<a href="/tag-suche/css" class="tag3">css</a> 

<a href="/tag-suche/hover" class="tag2">hover</a> 

<a href="/tag-suche/liste" class="tag1">liste</a> 

<a href="/tag-suche/mouseover" class="tag2">mouseover</a> 

<a href="/tag-suche/navigation" class="tag1">navigation</a> 

<a href="/tag-suche/newsflash" class="tag1">newsflash</a> 

<a href="/tag-suche/newsteaser" class="tag1">newsteaser</a> 

<a href="/tag-suche/ohne-javascript" class="tag2">ohne-javascript</a> 

<a href="/tag-suche/pagination" class="tag1">pagination</a> 

<a href="/tag-suche/popup-effekt" class="tag1">popup-effekt</a> 

<a href="/tag-suche/seitennummerierung" class="tag1">seitennummerierung</a> 

<a href="/tag-suche/seitenzahl" class="tag1">seitenzahl</a> 

<a href="/tag-suche/webdesign" class="tag3">webdesign</a> 

</div>

Tagcloud Beispiel 1

Für eine 3-stufige Tagcloud, also eine Tagcloud, in der drei Style-Klassen verwendet werden, kann das CSS wie folgt aussehen:

#tagcloud{ background: #303030; padding:10px 5px 10px 5px;}

 

.tag1{ font-size:1em; color:#555555; line-height:1em; }

.tag2{ font-size:1.2em; color:#606060; line-height:1em; }

.tag3{ font-size:1.4em; color:#808080; line-height:1em; }

 

#tagcloud a{ text-decoration:none; }

#tagcloud a:hover{ text-decoration:underline; }

Die Tagcloud sieht so aus:

Tagcloud Beispiel 2

Eine weitere 3-stufige Lösung wäre zum Beispiel durch folgendes CSS möglich:

#tagcloud{ background:#000000; width:200px; text-align:center; }

 

.tag1{ font-size:0.6em; color:#505050; }

.tag2{ font-size:0.9em; color:#808080; }

.tag3{ font-size:1.5em; color:#E0E0E0; }

 

#tagcloud a{ text-decoration:none; }

#tagcloud a:hover{ text-decoration:none; background-color:#ffffff; color:#000000; }

Die Tagcloud sieht nun so aus:

Tagcloud Beispiel 3

Wenn die Variable $TagSortierung = 2 gesetzt wird, werden die Tags nach ihrer Anzahl abwärts und alphabetisch sortiert. Mit dem folgenden CSS lässt sich die Tagcloud in einer etwas anderen Form gestalten:

#tagcloud{ width:180px;	padding:10px; background:#303030; }

 

.tag1{ font-size:0.6em; background-color:#705662; color:#fff; }

.tag2{ font-size:0.9em; background-color:#AB5471; color:#fff; }

.tag3{ font-size:1.2em; background-color:#f20161; color:#fff; }

 

#tagcloud a{ text-decoration:none; margin:2px; padding:2px 2px 2px 5px; display:block; }

#tagcloud a:hover{ text-decoration:none; background-color:#fff; color:#000; }

Die Tagcloud sieht dann so aus:


Der Fantasie sind mal wieder keine Grenzen gesetzt. Viel Spaß beim Gestalten der eigenen Tagcloud!

« Zur Übersicht

Kommentare

 (Trackback senden) (CSS Tagcloud (Schlagwortwolke)) (Kommentare abonnieren)

Einen eigenen Kommentar schreiben

Name (notwendig):
E-Mail Adresse (wird nicht veröffentlicht) (notwendig):
Website (dofollow):
Kommentar (notwendig):
Sicherheitscode (notwendig):