Ein Code sagt mehr als tausend Worte:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Centering a Div horizontally and vertically</title> <style type="text/css"> html { background-color: black; } body { width: 100%; height: 100%; position: static; /* don't make it relative! */ } #centered { position: absolute; height: 396px; width: 400px; margin: -198px 0px 0px -200px; /* 50% height, 0px, 0px, 50% width */ top: 50%; left: 50%; background-color: violet; border: 1px solid white; } </style> </head> <body> <div id="centered"></div> </body> </html> |
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; } |
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:
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. …weiterlesen
Den Code dafür möchte ich natürlich niemanden vorenthalten.
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
0