02.01.2009

Link der geöffneten Seite grafisch hervorheben

In dieser Anleitung wurde beschrieben, wie man den Link einer geöffneten Seite optisch hervorhebt. Oft geschieht dies durch abweichende Schrift- und/oder Hintergrundfarben.
Einer Homepagebesucherin haben die vielen Farben nicht gefallen. Sie wollte ihre farblich schlicht gehaltene Navi beibehalten; den Link der geöffneten Seite jedoch mit einem grafischen Element hervorheben.
Auch ein solches Vorhaben lässt sich mit CSS und einigen Grafiken verwirklichen. Auf das Prinzip soll hier nicht näher eingegangen werden; es wurde auf der bereits erwähnten Seite beschrieben.

1. Vertikale Navigation

Demonstrieren wir das Ganze zunächst an einer vertikalen Navigation in Listenform, siehe Demo 1. Wir verwenden in diesem Fall folgende drei Grafiken, die man sich mit einem Grafikprogramm wie Ulead Photo Impact X3 mit Hilfe von Garnets Anleitung selbst erstellen kann:

Pfeil rechts Haken Flagge

Bei unseren ersten beiden Links sollen die Grafiken außerhalb der Linkflächen platziert werden. Deshalb ist darauf zu achten, dass ihre Hintergrundfarbe der des angrenzenden Elements, z.B. dem "Content" entspricht. Werden die Grafiken innerhalb des Links eingebunden, sollten sie transparent sein.

Unsere Navi, eingebettet in einen Container, soll folgenden HTML-Code haben, wobei hier dem ersten Link bereits die besondere Formatierung durch den ID "aktuell" zugewiesen ist:

<div id="container">
<ul id="navi">
<li id="aktuell"><a href="0056a.html">Seite 1</a></li>
<li><a href="0056b.html">Seite 2</a></li>
<li><a href="0056c.html">Seite 3</a></li>
</ul>
</div>

Der Formatierung dienen folgende CSS-Angaben:

#container
{
margin: 20px auto;
width: 700px;
padding: 30px;
background: #bdd2ef;
}

#navi {
background-color: #112c40;
width: 150px;
margin: 0;
padding: 0;
list-style-type: none;
}

#navi a {
display: block;
border-bottom: 1px solid #bdd2ef;
padding: 0px 10px;
text-decoration: none;
font-size: 14px;
line-height: 24px;
font-weight: bold;
color: #bdd2ef;
}

#navi a:hover {
background-color: #1e4d6f;
}

Der "line-height: 24px;" bei "#navi a" kommt zweierlei Bedeutung zu: Zum einen dient die Angabe der vertikalen Zentrierung des Textes. Zum anderen ist es die Orientierungsgröße für unsere Grafikhöhen.

Nun definieren wir noch die Formatierung für den Link der auf der ersten Seite besonders hervorgehoben werden soll:

#aktuell a
{
width: 154px;
background-image: url(pfeilr.gif);
background-position: right;
background-repeat: no-repeat;
}

Hier wird die Hintergrundgrafik eingebunden und rechts positioniert. Die Breite wird etwas erweitert, damit der Pfeil außerhalb der Linkfläche erscheint. Mit den Werten, die von der Grafik abhängig sind, müsst ihr etwas experimentieren.

Wollt ihr lieber einen "Haken" wie auf Seite 2 als Grafik einbinden, so verwendet dieses Hintergrundbild. Soll sich die Grafik innerhalb der Linkfläche befinden wie auf Seite 3, braucht keine erweiterte Breite berücksichtigt zu werden. Es reichen folgende Angaben:

#aktuell a
{
background-image: url(flag.gif);
background-position: right;
background-repeat: no-repeat;
}

2. Horizontale Navigation

Auch bei einer horizontalen Navigation lassen sich auf diese Weise besondere Grafiken einbinden, siehe Demo 2. Hier sollen folgende Grafiken zum Einsatz kommen, wobei die Hintergrundfarbe wieder der der Umgebung entspricht:

  

Auch diese Grafiken wurden mit Ulead Photo Impact X3 nach der Anleitung von Garnet erstellt.

Der HTML-Code kann von der vertikalen Navi übernommen werden. Die CSS-Angaben weichen dagegen etwas ab:





#container
{
margin: 20px auto;
width: 700px;
padding: 30px;
background: #bdd2ef;
}

#navi {
background-color: #112c40;
width: 640px;
height: 24px;
margin: 0;
padding: 0;
list-style: none;
}

#navi li {
float: left;
width: 150px;
text-align: center;
}

#navi a {
display: block;
border-right: 1px solid #bdd2ef;
text-decoration: none;
font-size: 14px;
line-height: 24px;
font-weight: bold;
color: #bdd2ef;
}

#navi a:hover {
background-color: #1e4d6f;
}

#aktuell a
{
height: 44px;
background-image: url(../img/0056/pfeilu.gif);
background-position: bottom;
background-repeat: no-repeat;
}

Auf folgende Besonderheiten gilt es zu achten:
Dem Element li wird eine Breite entsprechend der verwendeten Grafik zugewiesen.
Die #navi erhält eine Normalhöhe, hier 24px entsprechend der "line-height" der Links. Beim "aktiven" Link wird diese die Höhe um den Grafikhöhenwert (hier 20px) erweitert, damit die entsprechende Hintergrundgrafik eingefügt werden kann. Sie ragt damit über den Navi-Div hinaus.

Normalerweise sollte eine einheitliche Grafik verwendet werden. Die Beispiele sollten nur einige Möglichkeiten unterschiedlicher Grafiken verdeutlichen. Sofern ihr innerhalb einer Navi unterschiedliche, z.B. themenbezogene Grafiken verwendet, müsst ihr darauf achten, dass entweder verschiedene ID's verwendet werden, z.B. "#aktuell1", "#aktuell2" usw. oder dass ihr die CSS-Angaben für #aktuell a nicht in eine ausgelagerte CSS-Datei, sondern in den Headbereich eurer Seiten einbindet. Dann könnt ihr pro Seite eine andere Grafik hinterlegen.

Vielleicht ebenfalls noch interessant in diesem Zusammenhang sind diese Beispiele.

nach oben

Webspace preiswert! - Alfahosting.de