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> |
Der Artikel “Top 10 CSS Table Designs” zeigt, wie man schnöde HTML-Tabellen mit CSS richtig schick machen kann. Im Anhang befindet sich eine “schnöde” HTML-Tabelle nach dem Standard des W3C sowie eine schicke Tabelle mit abgerundeten Kanten. …weiterlesen
Eine wunderbare Übersicht über alle Maskierungen für HTML-Sonderzeichen (engl. “escapes”) nach dem ASCII-Zeichensatz findet man in der HTML ISO-8859-1 Reference.
Häufig wird in Foren gefragt, wie man mit JavaScript gezielt Daten über einen HTTP-Request an eine bestimmte Datei senden kann. Weil dieser Vorgang in der Web-Entwicklung besonders wichtig ist, habe ich ein kurzes Beispiel programmiert, dass diese Funktionalität besitzt. …weiterlesen
Bei der Darstellung von HTML-Elementen und CSS-Formatierung gibt es zwischen dem Internet Explorer 8 und dem Internet Explorer 7 gravierende Unterschiede. Besonders die verschiedene Interpretation von Abständen (padding, margin) bereiten Web-Entwicklern große Probleme.
Sehr oft musste man Conditional Comments benutzen, um die verschiedenen Anzeigen zu bewältigen. Doch damit ist jetzt Schluss! Microsoft hat im IE8 eine Funktion zur Abwärtskompatibilität eingebaut, so dass es möglich ist, das Anzeigeverhalten vom IE8 auf das Anzeigeverhalten vom IE7 einzustellen.
Dafür ist nur folgender Code nötig:
<html> <head> <!-- Mimic Internet Explorer 7 --> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <title>Titel</title> </head> <body> <p>Diese Webseite sieht im IE8 so aus wie im IE7.</p> </body> </html>
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.
0