Kategorie: CSS

DIV-Container mit 100 Prozent Höhe

Oft wünscht man sich in einem CSS-Layout einen Div-Container, welcher als Wrapper fungiert und 100 Prozent der im Browser zur Verfügung stehenden Höhe einnimmt. Möchte man dieses Verhalten browserkompatibel gestalten, ist das die Möglichkeit:

HTML

1
2
3

<body>  
  <div id="wrapper"></div>
</body>

CSS

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

html, body 
{
  height: 100%;
}
 
div#wrapper
{
  min-height: 100%;
  height: auto !important;
  height: 100%;
  background-color: seagreen;
  width: 300px;
}

Div Container übereinander legen

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;
}

In meinen Tests hatte der z-index nur Auswirkungen auf Elemente, die position: absolute; definiert hatten.

Suckerfish CSS done right!

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:

Suckerfish CSS done right! weiterlesen

CSS Stil für Keyboard-Tasten

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.
CSS Stil für Keyboard-Tasten weiterlesen

Horizontale Navigationen mit Listen

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.
Horizontale Navigationen mit Listen weiterlesen

Hover Images preloaden

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.