Style

Assistant

Startseite
Screenshot
Kurzanleitung
Download
Kurse & Infos
>Tipps & Tricks<
Unterstützer
TMXtensions
?Freeware!
About TM
E-Mail
Made with CSS
Valid HTML 4.01!
Stand: 07.12.2002

Tipps & Tricks – Tipp 76
Zur Übersicht

76. Linkformatierung mit CSS (24.12.2001)

Einer der ersten StyleAssistant-Tipps war die Realisierung von Buttons ohne Grafik. Dazu muss man nicht unbedingt JavaScript bemühen, wie der folgende Ansatz zur Linkformatierung mit CSS pur zeigen soll. Im Beispiel 76 werden A-Elemente innerhalb von SPAN-Elementen platziert und mit CSS-Klassen verbunden. Beim Berühren der Links mit dem Mauszeiger wird der HOVER-Effekt auf das jweilige SPAN-Element angewendet. Neben Farbänderungen werden auch Rahmenformate ausgetauscht.

      
      .linkformat3
      {
      Color: #0000CC;
      Background-Color: #FFFFFF;
      Border: none;
      }
      
      
      .linkformat3 A:HOVER
      {
      Color: #FFFFFF;
      Background-Color: #009900;
      Border-Left: 1px solid #CCCCCC;
      Border-Top: 1px solid #CCCCCC;
      Border-Right: 2px solid #000000;
      Border-Bottom: 2px solid #000000;
      Text-Decoration: none;
      }

      
Erfreulicherweise sind alle neueren Browser mittlerweile in der Lage, diese Effekte umzusetzen.