Mit jedem Artikel dieses Webs verbinden sich weiterverarbeitende Funktionen,
wie z.B. "Druckerversion anzeigen" oder "Artikel empfehlen". Um Platz zu sparen
sind diese über eine kleine Symbolleiste erreichbar, die sich in der oberen
rechten Ecke jedes Artikels befindet. Wie man solche Toolbars inkl. Tooltip
schnell und einfach erstellen kann, ist Gegenstand dieses Artikels.
Grundlage der Toolbar ist eine HTML-Liste, die mit Cascading-Style-Sheet-Klassen
formatiert wird. Hauptaugenmerk liegt hierbei zum einen darauf die Symbolleiste
innerhalb des Textes zu positionieren und zum anderen die Bilder ebenfalls nur
über CSS-Code beizusteuern.
Der HTML-Code
Um der klaren Trennung Trennung zwischen Inhalt und Formatierung Rechnung
zu tragen, ist der HTML-Code sehr einfach gehalten. Innerhalb eines DIV-Tags,
das den Text aufnimmt, ist ein weiteres DIV definiert,
das die HTML-Liste (UL) enthält. Jeder Listeneintrag
(LI) enthält einen Link (A)
mit den Informationen zum Ziel des jeweiligen Buttons. Um dem Benutzer zu verdeutlichen
wohin die Reise beim Klick auf eines der Symbole geht, ist ein Tooltip nötig.
Da alle Bilder über das ALT-Attribut zu einem solchen
kommen, ist in den A-Tag ein sog. Blind-GIF eingeschlossen,
d.h. ein kleines transparentes GIF mit den Abmessungen 1px/1px.
<div>
<div id="toolbar">
<ul>
<li>
<a class="tb_button1">
<img src="images/blind.gif" alt="Funktion 1">
</a>
</li>
<li>
<a class="tb_button2">
<img src="images/blind.gif" alt="Funktion 2">
</a>
</li>
</ul>
</div>
<h1>Titel</h1>
<h2>Untertitel</h2>
<p>... Text</p>
</div>
Der CSS-Code
Aufhänger für den CSS-Code ist der mit der ID "toolbar" versehene Bereich.
Mit float:right wird dafür gesorgt, dass der Text
um ihn herumfließt:
#toolbar {
float: right;
}
Die Liste wird über list-style:none grundsätzlich
angewiesen, auf das Aufzählungszeichen zu verzichten. Zudem wird u.a. ein Rand
von 2px gesetzt und alle Listenelemente werden rechtsbündig angeordnet.
#toolbar ul {
margin: 2px;
padding: 0px:
text-align: right;
list-style: none;
}
Die Listeneinträge werden mit display: inline dazu
gebracht nebeneinander zu stehen und background-image: none
verhindert ebenso die Darstellung eines Aufzählungszeichen. Über das
padding wird der Abstand zwischen den einzelnen Symbolen
gesteuert.
#toolbar li {
margin: 0px;
padding: 3px;
display: inline;
background-image: none;
}
Um die Höhe des Blind-GIF's zu bestimmen und um zu verhindert, dass der Browser
um dasselbe einen Rahmen zeichnet wird zudem für alle IMG-Elemente
definiert:
#toolbar img {
border: none;
height: 16px;
width: 16px;
}
Schließlich muss noch das Aussehen der Links bestimmt werden. Hierzu wird
für jedes Element eine eigene Klasse definiert in der das darzustellende Bild
als background-image hinterlegt ist.
#toolbar a.tb_button1 {
background-image: url('images/button1.gif'); background-repeat:no-repeat
}
#toolbar a.tb_button2 {
background-image: url('images/button2.gif'); background-repeat:no-repeat
}