My PC Toolbox

Besuchte Links erkennt man an der geänderten Färbung. Wenn Ihnen dies nicht auffallend genug ist, dann heben Sie sie beispielsweise mit einem Häkchen hinter dem Link-Text hervor.

Sie benötigen dazu ein Grafiksymbol im Miniformat von 13 x 13 Bildpunkten. Legen Sie das Bild mit der folgenden CSS-Angabe in den Hintergrund des Hyperlinks:

a:visited { background:url (besucht.gif) no-repeat 100% 50%; }

Mit no-repeat verhindern Sie das Wiederholen der Grafik, und mit den beiden Prozentwerten ordnen Sie die Grafik im entsprechenden Abstand vom linken und oberen Rand an. Schaffen Sie mit der zusätzlichen CSS-Eigenschaft padding-right:15px; den Platz dafür rechts neben dem Beschreibungstext des Links.

Zusätzlichen Pep bekommen die abgehakten  Links, wenn sich das Symbol bei Berührung mit der Maus auch verfärbt. Erstellen Sie dazu eine kolorierte Version des Icons und binden Sie diese über die folgende CSS-Angabe ein:

a:visited:hover { background-image: url(besuchthover.gif) }

Wenn Sie die Maus über den Link halten, dann wird die Hintergrundgrafik ausgetauscht. Kombinieren Sie diese Formate wie folgt mit der klassischen Methode, Links farbig und ohne Unterstrich zu gestalten:

a:visited {
padding-right:15px;
background:url(besucht.gif) no-repeat 100% 50%;
text-decoration: none;
color:#F70;
}

a:visited:hover {
background-image: url(besuchthover.gif);
color:#F00;
}

Source: COM! 10/2007

CASCADING STYLESHEETS 3
Abgerundete Ecken

Wer die Ecken bei Menüboxen und Infokästen abrunden möchte, muss in der Regel aufwendig mit Tabellen und bunten Grafiken tricksen. Beim neuen, noch nicht verabschiedeten Layoutstandard CSS 3 gelingt der gleiche Effekt deutlich einfacher. Erstellen Sie die Infobox mit der folgenden HTML-Zeile:

<div id="kasten1">Inhalt</div>

Formatieren Sie die Infobox anschließend mit dieser CSS-Angabe:

 #kastenl {background-color:red; width:250px; height:120px; padding:40px; border-radius:30px; -moz-border-radius:30px; }

Die CSS-Eigenschaft border-radius legt den Radius der abgerundeten Ecken in Pixeln fest. Notieren Sie zusätzlich die Angabe -moz-border-radius mit dem gleichen Wert. So lange der neue CSS-Standard noch nicht verabschiedet ist, unterstützt lediglich Firefox diesen eigenen leicht abgewandelten Formatnamen. Durch die geänderten Ecken kommt der Rand nun jedoch mit dem Inhalt der Box in Konflikt. Halten Sie deshalb mit der Angabe padding einige Pixel Abstand.

Sie brauchen übrigens nicht für jede Ecke die gleiche Krümmung zu verwenden (Bild A). Experimentieren Sie nach dem folgenden Muster mit unterschiedlichen Werten:

border-radius: 50px 20px 90px 20px;
-moz-border-radius: 50px 20px 90px 20px;

Beginnend oben links formatieren Sie mit diesem Befehls-Listing die Ecken im Uhrzeigersinn.

Ob die Operation das gewünschte Ergebnis zeigt, kontrollieren Sie in der aktuellen Firefox-Version. Browser wie der Internet Explorer 6, die dieses Format noch nicht unterstützen, präsentieren die Beispielbox weiterhin mit spitzen Ecken.

CSS 3 in Aktion: Gestalten Sie individuelle Infokästen mit abgerundeten Ecken (Bild A)

Source: COM! 11/2006