Am Dienstag 16 August 2005 22:10 schrieb Joerg Rossdeutscher:
> Vorweg: Ich möchte nicht, dass diese Mail nach Hohn und Spott
> aussieht.
>
> Mir ist einfach aufgefallen, dass zu meinem Beispiel (Und das ist ja
> nur *ein* Beispiel, aber mein liebstes. :-):-) ) mehrere Mails von
> mehreren Leuten kamen. Euch allen erstmal vielen Dank. Derzeitiger
> Stand der Dinge ist: Keine der Lösungen läuft auf "allen gängigen
> Browsern". Von kleinen Fehlstellungen (überflüssiger Scrollbalken)
> bis hin zum totalen zerfleddern kam alles vor.
Hallo Joerg,
falls die scrollbalken stören, fehlt das:
body { overflow:auto; }
läuft in gecko und IE perfekt.
Zum Thema Scrollbars:
Scrolling and Scrollbars by Jakob Nielsen
http://www.useit.com/alertbox/20050711.html
Vom w3c wird eine Methode zur Zentrierung empfohlen, die der IE nicht
kann. Ich habe nicht getestet, ob er es mit dem IE7-Script und
javascript schafft:
http://www.w3.org/Style/Examples/007/center-example.html
Es geht ohne(!) Tabellenelement mit
display: table
display: table-cell
Denn, anders als Blockelemente lassen sich Tabellenzellen in css2
vertikal zentrieren. Mit diesem Kniff wird der div-container als
Tabellenzelle dargestellt, die er aber semantisch nicht ist. Somit wird
im HTML keine Tabelle zu Layoutzwecken "missbraucht".
"CSS level 2 doesn't have a property for centering things vertically. "
Bert Bos w3c
Für CSS3 wird es diese Möglichkeit wahrscheinlich geben.
Warum eigendlich fixes Design, und kein elastisches?:
http://www.alistapart.com/articles/elastic/
Weitere css Demo Seiten:
http://frozenfire.dnsalias.net/NEMESiS/demos
http://www.projectseven.com/tutorials/index.htm
http://www.alistapart.com/d/sprites/ala-blobs2.html
CSS Slices:
http://www.meyerweb.com/eric/css/edge/raggedfloat/demo.html
Eine kleine Zusammenstellung von Redesigns:
http://www.meyerweb.com/eric/redesignwatch/
CSS Big Sites:
http://www.meryl.net/css/cat_big_sites.php
Galerie:
http://www.unmatchedstyle.com/
Links + Resources:
http://www.dezwozhere.com/links.html
Zum weiterdiskutieren: ;-)
http://www.htmldog.com/ptg/archives/000049.php
So das waren wohl wieder ein paar zuviele links.
Im Anhang die Zentrierte Seite. Viel Spaß.
ciao
Gerhard
Title: vertical and horizontal centering
body {
overflow:auto;
background-color:#fff;
}
#Content {
position:absolute;
left:50%;
top:50%;
width:300px;
height:320px;
margin-left:-150px; /* width/2 */
margin-top:-160px; /* height/2 */
border:1px dashed #333;
background-color:#eee;
padding:10px;
}
/* The right value for Mozilla */
body>#content {
margin-left:-160px;
margin-top:-170px;
}