Wenn man einen Div-Container über ein anderes Div-Element legen möchte, muss man dem umschließendem Eltern-Element das Attribut position: relative; zuweisen und den darin befindlichen Div-Containern die Eigenschaft position: absolute; geben. Dadurch liegt dann das Kinder-Div, welches zuletzt im Code definiert wurde, am Obersten. In meinem Beispiel liegt child_2 also über child_1:
HTML

1
2
3
4

    <div id="parent">
      <div id="child_1"></div>
      <div id="child_2"></div>
    </div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

#parent
{
  position: relative;
}
 
#child_1, #child_2
{
  width: 200px;
  height: 200px;
  position: absolute;
}
 
#child_1
{
  background-color: red;
}
 
#child_2
{
  background-color: green;
}

Möchte man die Reihenfolge der Überlappung selbst bestimmen, so muss man den z-index einsetzen. Ein Element mit höherem z-index liegt über Elementen mit niedrigerem z-index. Mit folgender CSS-Code-Änderung würde child_1 über child_2 liegen:

1
2
3
4
5
6
7
8
9
10
11

#child_1
{
  background-color: red;
  z-index: 2;
}
 
#child_2
{
  background-color: green;
  z-index: 1;
}

Vor ein paar Tagen wollte ich ein modernes HTML-Submenü bauen, welches aufklappt, wenn man mit der Maus über einen Menüpunkt fährt.

Auf diversen Seiten habe ich gesehen, dass viele diese Technik mit JavaScript realisieren. Ich finde das übertrieben, da sich dieser Effekt auch mit der CSS “hover”-Eigenschaft für Listenelemente lösen lässt (Stichwort: Suckerfish CSS). Das funktioniert aber nur in aktuellen Browsern.

Der Internet Explorer 6 unterstützt die “hover”-Eigenschaft nämlich nur für Anker. Wie ich leider feststellen musste, gibt es noch weitere Besonderheiten die man beachten muss. Nach 2 Stunden Arbeit habe ich dann aber einen Code entwickelt, der barrierefrei (ohne den Einsatz von display:none und visibility:hidden) ist und problemlos in Firefox und Internet Explorer 6-7 funktioniert (andere Browser wurden nicht getestet).

Screenshot:

…weiterlesen

In meinem Blog gebe ich häufig Tastenkombinationen an, um zu beschreiben, wie bestimmte Dinge bedient werden. Um diese Tastaturkürzel mehr herauszuheben, habe ich einen CSS-Stil entworfen. Hier ein Beispiel:

Bitte drücke Strg + Alt + Entf.

Ich finde, dass die Wörter “Strg” und “Alt” sowie “Entf” aussehen, wie richtige Tasten einer Tastatur.
Den Code dafür möchte ich natürlich niemanden vorenthalten.

…weiterlesen

Für Navigationen werden oft die HTML Listen-Tags <ol> und <ul> verwendet. Standardmäßig haben diese Listen einen vertikalen Aufbau, so dass die Listen-Elemente <li> untereinander angeordnet sind. Für eine horizontale Navigation braucht man aber einen waagerechten Aufbau.

Im Folgenden zeige ich, wie man dieses Layout mit CSS einstellen kann.

…weiterlesen

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.