• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Div zentrieren

Status
Für weitere Antworten geschlossen.
J

Jo0oker

Neues Mitglied
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
 
Hier der code:
HTML: 
   <link href="StyleSheet_Orange.css" rel="stylesheet" type="text/css" />
 
</head>
<body id="body">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
   <center>
<table  id="centerTable">
<tr id="centerTable">
<td id="centerTable">
<div id="border">
<div id="header">
<img alt="" src="Images/header.PNG" style="width: 840px; height: 87px" />
</div>
<div id="container">
<table>
<tr>
<td style="width: 180px; height: 450px;">
<div style="width: 180px; height: 450px;">
</div>
</td>
<td style="width: 640px; height: 720px;">
<div id="ContentPlaceHolderDiv" style="height: 720px; width: 640px;">   
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
 
</asp:ContentPlaceHolder>
</div>
</td>
</tr>
</table>
</div>
</div>
 
</td>
</tr>
</table>
</center>
</form>
</body>
</html>

Warum geht das mit der Formatierung hier im Forum nicht?

lg Jo0oker
 
Zuletzt bearbeitet:
Jo0oker schrieb:
Ich habe versucht, mit Hilfe einer Tabelle und dem Befehl center ein Div in der Mitte des Browserfensters zu positionieren.
Zum Vergrößern anklicken....
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 <center> 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.
 
-236 was? Ochsen? Hühner? Schweine? Körnerbrötchen? em? Pixel? :-)
 
Was zur hölle mache ich falsch? :cry:
Jetzt wird nur noch die hälfte des Div´s angezeigt...
Hier mal der ganze code jetzt :D
HTML: 
background-color: White;
width: 840px; 
height: 560px;
text-align: left;
margin:0 auto;
top: 50%;
margin-top: -236.5px;



lg Jo0oker
 
Brauchts für die Angabe von top nicht auch eine absolute oder relative Positionierung? "position"
 
Jetzt geht es... und vielen dank an alle :D :D :D

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;


lg Jo0oker
 
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
 
prm schrieb:
Nein, das geht leider nicht. Der Grund liegt darin, dass wegen der vertikalen Zentrierung das Element absolut positioniert sein muss.
.....
Zum Vergrößern anklicken....
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.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben