Zitat:
|
Zitat von The Doc
siehe Ulle, der Junge hats drauf, also wirds gehen
|
Himmel, das sehe ich ja jetzt erst. Nur keine Blumen, bin eben/gestern erst selbst auf diese Lösung gekommen. Ob das alle Browser problemlos einlesen weiß ich noch nicht.
Und wenn der Validator nicht geschimpft hätte, dann könnte man sogar das DIV einsparen - indem das HTML-Element schon [display: table;] und das BODY-Element [display: table-cell;] "gespielt" hätte. Funktioniert hat es, aber Valide ist es nur wenn nach dem BODY ein "natürliches" BLOCK-Element folgt. Schade !!
Falls man nur ein "natürliches" Block-Element benutzt
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>
<style type="text/css" media="screen,projection" title="Druckvorschau-semantic-Test">
/*<![CDATA[*/
* {
margin: 0;
padding: 0;
border-collapse:collapse;
border-spacing: 0;
}
html,
body {
display: table;
height: 100%;
width: 100%;
color: #000000;
background-color: #FF9922;
}
body {
display: table-cell;
background-color: #FFFFFF;
vertical-align: middle;
text-align: center;
}
* html body {
/* Star-Hack fuer InternetExplorer
* individuelle Anpassung
* je nach Hoehe des Inhaltes
*
* fuer IE Win \*/
height: 60%;
padding: 20% 0 0 0;
/* */ /* for Mac IE */
}
p {
/*
* stellvertreter Block-Elemente
*/
width: 10em;
height: 9.8em;
margin: auto;
border: 1px solid #000000;
background-color: #FF0000;
}
/*]]>*/
</style>
</head>
<body>
</p>
</body>
</html>
Geht aber nicht mit einem IMG-Tag, da "natürliches" Inline-Element. Aber nur für Bilder gibt es ja die Hintergrund-Zentrierung
