Um die CSS-Anwendungsbeispiele auf dieser Seite nötigenfalls besser nachvollziehen zu können, sind die jeweiligen Angaben für die Beispiele im unteren Teil dieser CSS-Datei mit entsprechenden Kommentaren versehen. Viel Spaß beim Nachbasteln!


#01 - Kennzeichnung aktiver Seiten mit CSS


Die Seite, auf welcher man sich momentan befindet, kann man ohne den Einsatz von JavaScript oder PHP, ganz einfach mit CSS im Menü kennzeichnen.

Der "Trick" ist die Vergabe einer id in der body-Marke und in der a-Marke selbst:

<body id="startseite">
<a href="index.html" class="main" id="startseite_menu">Startseite</a>

Die CSS-Syntax sieht wie folgt aus:

#startseite #startseite_menu {
  border-bottom:6px solid #09ff00;
  }

Zum besseren Verständnis sollte man sich den Quelltext ansehen.

Ich habe für dieses Beispiel eine Variante mit border-bottom gewählt.
Man kann natürlich auch andere Varianten bewerkstelligen, wie z.B. ein list-style-image, oder wie hier zu sehen ist, die Textfarbe. Das Ganze lohnt sich aber eigentlich erst dann, wenn man seine Seitennavigation mit Hilfe einer serverseitigen Programmiersprache einbindet.

Nach oben

#02 - Dynamische, verzögerungsfreie Verweis-Grafiken mit CSS

Gesehen hat man das schon oft. Man bewegt seinen Mauszeiger über einen Grafik-Verweis und das nachzuladende Bild erscheint erst mit Verzögerung. Nun kann man das umständlich verhindern, indem man die nachzuladende Grafik via JavaScript vorlädt. Doch das Problem kann man viel eleganter mit CSS lösen.

Dieses Ergebnis soll erreicht werden:

Prominente Beispielseite: Validome.org

Dazu wird ein ähnliches Bild wie dieses benötigt:

Verzögerungsfreie Hover-GrafikWie man sehen kann, besteht diese einzelne Grafik aus den beiden benötigten Zuständen. Bewegt man die Maus nun über den oberen sichtbaren Teil der Grafik, wird lediglich die Hintergrundposition der Grafik verändert.

<a href="index.html" class="hover"></a>

a.hover:link, a.hover:visited, a.hover:hover, a.hover:active {
  display:block;
  width:84px;
  height:30px;
  background:url(pfad/zum/bild.jpg);
  }
a.hover:hover {
  background:url(pfad/zum/bild.jpg) 0px 30px;
  }

Selbstverständlich kann man diese Technik auch mit Text-Verweisen realisieren.

Nach oben

#03 - Kennzeichnung externer Verweise mit CSS

Es bürgert sich immer mehr ein, externe Verweise auch als solche zu kennzeichnen. Damit man aber nicht immer hinter jeden Verweis (oder davor) eine Grafik einfügen muss, erstellt man eine CSS-Klasse.

Dazu benötigt man eine möglichst aussagekräftige Grafik: Grafik für externen Verweis

<a href="http://dkmd.de" class="extern">dkmd.de</a>

a.extern:link, a.extern:visited, a.extern:hover, a.extern:active {
  background:url(pfad/zum/bild.gif) no-repeat center right;
  padding-right:16px;
  }

Fertig sieht das dann so aus: dkmd.de

Nach oben

#04 - Horizontale Linien mit CSS gestalten

Horizontale Linien (<hr />) kann man sehr elegant mit CSS gestalten, damit die Zeiten schlichter Linien der Vergangenheit angehören können. Beispiel hierzu sind die gestrichelten Trennlinien mit der Schere auf dieser Seite. Natürlich könnte man ebensogut eine Grafik anstelle einer Linie benutzen, doch will man einen syntaktisch korrekten Quelltext erzeugen, ist die Verwendung dieses Beispieles eine gute Wahl.

hr {
  color:transparent;
  height:30px;
  background:url(pfad/zum/bild.jpg);
  }

Leider gibt es einen kleinen Schönheitsfehler: Der IE stellt unsinnigerweise einen Rahmen um die Linie dar. Es gibt allerdings eine Möglichkeit, diesen Rahmen verschwinden zu lassen, welche hier beschrieben wird: LANtastic
Nachtrag: Da es sich um ein etwas unsinniges Anwendungsbeispiel handelt (dem IE sei Dank), bestehen auf dieser Seite die Linien nicht mehr aus hr's, sondern aus ganz normalen div's.
Gründe: 1. Wenn man, um den Rahmen verschwinden zu lassen, ein div benötigt, kann man die Linie auch gleich mit einem div darstellen. Spart Quelltext.
2. Der Wert transparent ist bei der Eigenschaft color nicht zulässig.

Die Trennlinien auf dieser Seite sehen nun also wie folgt aus:

<div class="hr"></div>
       

.hr {
  height:30px;
  background:url(pfad/zum/bild.jpg);
  }

Nach oben

Fortsetzung folgt...

Web Standards Group Member

Valides XHTML 1.0 Strict Valides CSS

Ubuntu Validome-Forum JSWelt-Forum Bookmarklets Twitter

Impressum
Herausgeber und verantwortlich für den Inhalt dieser Website:
Dirk Klar
Wachthauskoppel 34
23566 Lübeck
04 51 / 7 07 19 04
email@dkmd.de

Nach oben