Hallo,
wieder einmal gibt es differenzen zwischen IE und FF.
Ich habe versucht, mit Hilfe einer Tabelle und dem Befehl center ein Div in der Mitte des Browserfensters zu positionieren.
Im IE funktioniert es wunderbar, nur der FF positioniert es am oberen, rechten Rand…
Warum ist das so?
Vielen dank im vorraus…
lg Jo0oker
Zeig mal code.
Hier der code:
[html]
|
Warum geht das mit der Formatierung hier im Forum nicht?
lg Jo0oker
Tabellen sind zum Auszeichnen von tabellarischen Daten, nicht dazu, ein Layout zu erzwingen. Befehle gibts in HTML nicht, die gibts nur in Programmiersprachen, HTML ist eine Strukturbeschreibungssprache. Das Tag ist hoffnungslos veraltet.
Zentrieren von BLock-Elementen macht man mit CSS und zwar per „margin:0 auto;“
Gruß,
-Efchen
P.S.: Formatierung → Verwende [*code] statt [*html]
Danke schonmal,
aber so wird es nur horizontal zentriert, aber ich will es ja auch vertikal zentrieren…(Der IE zentriert es richtig…)
lg Jo0oker
Für vertikale Zentrierung positionierst Du Dein Element auf top:50% und verschiebst es dann mit margin-top um die Hälfte der eigenen Höhe nach oben (negativer margin).
Man könnte es auch mit display:table-cell machen, aber das versteht der IE nicht.
Bei Tabellen kann man vertical-align verwenden.
Hmmm, irgendwas mache ich falsch:
[HTML]
top: 50%;
margin-top: -236;
[/HTML]
lg Jo0oker
-236 was? Ochsen? Hühner? Schweine? Körnerbrötchen? em? Pixel? 
Was zur hölle mache ich falsch? 
Jetzt wird nur noch die hälfte des Div´s angezeigt…
Hier mal der ganze code jetzt 
[HTML]
background-color: White;
width: 840px;
height: 560px;
text-align: left;
margin:0 auto;
top: 50%;
margin-top: -236.5px;
[/HTML]
lg Jo0oker
So weit ich weiß gibts keine halben Pixel…
Da hast du glaub ich recht-> geändert
lg Jo0oker
Brauchts für die Angabe von top nicht auch eine absolute oder relative Positionierung? „position“
horizontal zentrieren: Horizontale Zentrierung mit CSS
horizontal und vertikal zentrieren: Horizontale und vertikale Zentrierung mit CSS
Jetzt geht es… und vielen dank an alle
Der funktionierende code:
[HTML]
background-color: White;
width: 840px;
height: 560px;
text-align: left;
position: absolute;
top: 50%;
left: 50%;
margin-left: -420px;
margin-top: -280px;
[/HTML]
lg Jo0oker
Moin!
Kann man eigentlich, wenn man das Element vertikal zentriert, nicht mehr die übliche Methode anwenden, das Element horizontal zu zentrieren, also per margin:0 auto;?
Denn, die horizontale Zentrierung per left:50%+neg.margin ist ja extrem gefährlich…
Das geht auch.
Funktioniert dann im IE5 natürlich nicht. Dafür verschwindet aber nichts nach links aus dem Browserfenster:
Mit Zentrierhilfe und margin: auto
Sollten wir vielleicht ab jetzt so empfehlen.
Body muß dafür 100% hoch sein.
Deswegen fragte ich. Dann gibt es nämlich keinen Grund den Hack bei horizontaler Zentrierung anzuwenden. Eine Zentrierung auf Kosten der Nutzbarkeit finde ich schon schlimm.
Der IE5 kommt doch sicher mit text-align:center zurecht, oder?
@Efchen
Nein, das geht leider nicht. Der Grund liegt darin, dass wegen der vertikalen Zentrierung das Element absolut positioniert sein muss.
Damit ist es „losgelöst“ vom normalen Elementfluss, so dass margin: 0 auto; nicht zum Tragen kommt.
Du hast zu Recht darauf hingewiesen, dass die absolute Variante der zentrierung gefährlich ist. Je nach Viewportgröße können Teile der Seite verschwinden und lassen sich auch nicht durch scrollen herholen.
Das betrifft allerdings nicht nur die horizontale Zentrierung, sondern die vertikale ebenso.
Man muss sich dieses Risikos bewusst sein.
Ich rate deshalb nur zur horizontalen Zentrierung mit margin: 0 auto;
Die ist im Vergleich zur absoluten problemlos.
Eine Alternative ist möglicherweise diese Variante, hab ich mir aber noch nicht näher zu Gemüte geführt:
CSS vertical center using float and clear
Das habe ich doch gemacht. Als Ausgangspunkt habe ich dem Element für die horizontale Zentrierung position: relative gegeben.
Ich habe es jetzt noch mal für den IE5 mit text-align: center zentriert:
Mit Zentrierhilfe und margin: auto
Ich habe es im IE5-win IE6, ff2.0 und Opera9 angesehen. Wird in allen Zentriert. Safarie3.1, IE7 und ff3 werden das sicher genauso schlucken.
Keine Ahnung warum das nie so beschrieben wird.
Auch bei deiner Zentrierhilfe mit margin: 0 auto; gehen Inhaltsteile „verloren“ bzw. werden unsichtbar, wenn das Fenster zu klein wird. Zumindest im IE 7.
Bei dem von mir um 10.50 Uhr geposteten Link bleiben sie dagegen erhalten bzw. lassen sich „herscrollen“. Das halte ich für insofern die bessere Lösung.