Preloading ist eine beliebte Technik für wechselnde Hintergrundbilder. Doch braucht man dafür kein JavaScript oder gar PHP-Code. Mit CSS lassen sich Hintergrundbilder ganz einfach vorladen, wenn man folgenden CSS-Stil einheitlich einhält:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

a 
{
	background-image: url('hover_on.png');
}
 
a:link,
a:visited
{
	background-image: url('hover_off.png');
}
 
a:hover,
a:focus 
{
	background-image: url('hover_on.png');
}

Durch die Hintergrundbild-Definition im a-Tag wird das hover-Bild schon vorgeladen, was aber durch die Definition a:link für den Benutzer nicht sichtbar wird. So kann man gezielt, einfach und browser-kompatibel die wechselnden Bilder im Voraus laden.

Falls der Internet Explorer die Angabe margin: auto; zum Zentrieren von DIV-Containern nicht befolgt, dann hilft dieser Trick:

#container
{
	position: relative;
	width: 600px;
	left: 50%;
	margin-left: -300px;
}

Mit left: 50%; wird der Container um 50% des Anzeigebereichs nach rechts verschoben. Das ist etwas zu viel, deshalb muss man die halbe Breite bei margin-left angeben, um die Verschiebung auszugleichen und das DIV mittig zu positionieren.

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