Möchte man in einem vorgegebenen Link den Text unsichtbar machen und durch ein Hintergrundbild ersetzen, so ist das Erste was einem einfällt color: transparent; für die Linkfarbe. Leider ist diese Eigenschaft nicht spezifiziert in CSS 2.1.

Trotzdem möchte ich eine Möglichkeit zeigen, die nach CSS 2.1 gültig ist und im Internet Explorer 6-8 sowie im Mozilla Firefox funktioniert.

…weiterlesen

Wer barrierefreie Webseiten erstellen möchte, der sollte einen Blick auf den BITV-Test werfen. Der BITV-Test ist ein Prüfverfahren für der Barrierefreiheit von Webseiten. Man findet dort sehr nützliche Prüfschritte.

Um ein HTML-Element mit mehreren gleichzeitigen Klassen über CSS zu formatieren, hilft folgender Beispielcode.

HTML-Element:

<li class="klasse1 klasse2 klasse3"><a href="..">Link</a></li>

CSS-Formatierung:

.klasse1.klasse2.klasse3
{ color: red; }

Es gibt viele Möglichkeiten, um über eine CSS-Datei einen div-Container mittig auf einer Webseite auszurichten.

Hier einige Beispiele:

1
2
3
4
5

#mittig
{
	margin-left: auto;
	margin-right: auto;
}

+ Funktioniert sehr gut im Firefox 3.5
+ Funktioniert sehr gut mit variablen Breiten
- Harmoniert nicht mit Internet Explorer 8

1
2
3
4

#mittig
{
	margin: 0 auto;
}

+ Funktioniert sehr gut im Firefox 3.5
+ Funktioniert sehr gut mit variablen Breiten
- Harmoniert nicht mit Internet Explorer 8

1
2
3
4
5
6
7

#mittig
{
	left: 50%;
	width: 500px;
	margin-left: -250px;
	position: relative;
}

+ Funktioniert mit Firefox 3.5
+ Funktioniert mit Internet Explorer 8
- nicht vorteilhaft für flexible Layouts
- Harmoniert wegen der negativen Abstände nicht mit IE6

Auf http://compressor.ebiene.de/ kann man seine CSS und JavaScript Dateien einfach und smart komprimieren. Es gibt dabei zwei unterschiedliche Stufen (basic compress und powerful compress), die die Leserlichkeit des Codes unterschiedlich stark einschränken. Falls man mit der CSS-Datei danach noch weiter arbeiten möchte, empfehle ich die Basis-Kompression.

Die CSS-Datei von bennyn.de (v1) konnte von 7028 Bytes auf 3879 Bytes geschrumpft werden. Das sind gut 45%. Die erweiterte Kompression würde nochmals 7% einbringen, was aber dazu führen würde, dass ich mich als Mensch ziemlich schwer tun würde, den Code noch zu entziffern. Einem Webserver macht sowas jedoch nichts aus, im Gegenteil.

Im HTML-Sektor gibt es für das Anchor-Tag <a> folgende Attribute:

a:link für Hyperlinks von noch nicht besuchten Seiten
a:visited für Hyperlinks von bereits besuchten Seiten
a:focus für Elemente, die durch die Tabulator-Taste markiert werden
a:hover für Elemente, die durch die Maus hervorgehoben werden
a:active für gerade angeklickte Links

Alle Anchor-Tags lassen sich über CSS definieren. Die Eigenschaften focus und hover sind jedoch erst ab CSS 2.0 verfügbar.