Sie sind hier: Grundlagen

Grundlagen

Effekte mit Cascading Style Sheets

Hover-Buttons sind Buttons, die ihre Farbe beim Überfahren mit der Maus ändern und werden im Internet oft genutzt. Für diesen Effekt sind nicht zwei Bilder notwendig, realisiert wird das Ganze lediglich über Cascading Style Sheets. Dargestellt wird dies jedoch nur vom Internet Explorer ab Version 4.x, bei Netscape Browsern passiert nichts, es kommt aber auch nicht zu Fehlermeldungen.
Es gibt verschiedene Möglichkeiten der Darstellung eines Links:

Link ohne normale Linkunterstreichung

<style type="text/css">
a {text-decoration:none;}
</style>

Änderung der Linkfarbe beim Überfahren mit der Maus:

<style type="text/css">
a:hover {color:red;}
</style>

Linküberstrich mit beim Überfahren mit der Maus:

<style type="text/css">
a:hover {text-decoration: overline }
</style>

Linkunterstrich mit beim Überfahren mit der Maus:

<style type="text/css">
a:hover {text-decoration: underline }
</style>

Letztendlich lassen sich die einzelnen Cascading Style Sheets zusammenpacken, beispielsweise für einen nichtunterstrichenen Link (Schrift: Verdana) der beim überfahren mit der Maus seine Farbe ändert und einen Über-und Unterstrich zeigt :

<style type="text/css">
a {font-family:Verdana,Helvetica,Arial,sans-serif;text-decoration:none;}
a:hover {color:red;}
a:hover {text-decoration: overline }
a:hover {text-decoration: underline }
</style>

Zur Erstellung des Quellcodes für diese Buttons kann man auch Hover-Maker nutzen.

Gestrichelte Tabellenrahmen

Um den Tabellenrahmen einer Seite nicht durchgezogen sondern gestrichelt darzustellen braucht man ebenfalls CSS. Einfach den folgenden Code im HEAD-Bereich einfügen.

<style type="text/css">
<!--
td {border: 1px #000000 dashed; border-color: #000000 dashed}
-->
</style>

Wenn nicht alle Tabellen so dargestellt werden sollen sondern einzelne Spalten

<td style="border: 1px #000000 dashed; border-color: #000000 dashed">

Nachteil: Geht aber leider nur mit dem Internet Explorer!