nicht angemeldet
/Browser Margin vs text-align
Hallo Leute,
ich hatte mich irgendwann mal darüber beschwert, dass mozilla mein div nicht zentriert darstellt (ich hatte es mit "text-align:center;" formatiert). Dann hattet ihr mir empfohlen, es mit "left-margin:auto;", bzw. "top-margin:auto;" zu versuchen...
Jetzt meine frage: wäre es ein fehler meiner seite, immernocht text-align zu verwenden, oder liegt es am browser? Denn eigentlich sollte er das doch als anweisung interpretieren, dass div-tag zentriert darzustellen...
sollte ich dennoch auf "margin" zurückgreifen?
Danke im Voraus...
MfG Jakob
-
Hallo Jakob,
ich hatte mich irgendwann mal darüber beschwert, dass mozilla mein div nicht zentriert darstellt (ich hatte es mit "text-align:center;" formatiert). Dann hattet ihr mir empfohlen, es mit "left-margin:auto;", bzw. "top-margin:auto;" zu versuchen...
da handelt Mozilla, wie Du mittlerweile ja auch weißt, korrekt, die
Eigenschaften heißen übrigens margin-left:auto; und margin-right:auto;Jetzt meine frage: wäre es ein fehler meiner seite, immernocht text-align zu verwenden, oder liegt es am browser? Denn eigentlich sollte er das doch als anweisung interpretieren, dass div-tag zentriert darzustellen...
ältere MSIE-Versionen sind nicht in der Lage, diese CSS-Standards
korrekt umzusetzen, so dass u.U. eine Verwendung beider Varianten
durchaus sinnvoll sein kann.Viele Grüße,
Stefan-
Hi Stefan,
danke erstmal für den tipp...
die eigenschaften habe ich eben verwechselt, ich meinte natürlich die von dir genannten...
Wenn ich beide varianten verwende, bekomme ich dann nicht ein invalides Stylesheet, oder eines mit wiedersprüchlichen angaben?
LG Jakob
-
Hallo,
Wenn ich beide varianten verwende, bekomme ich dann nicht ein invalides Stylesheet, oder eines mit wiedersprüchlichen angaben?
Warum solltest Du? Die Angaben beziehen sich doch auf zwei unterschiedliche Elemente. Die Angabe text-align ist eine Eigenschaft des umgebenden Elementes. Die Angabe margin ist eine Eigenschaft des zu zentrierenden Elementes selbst.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
</head>
<!--text-align im body, weil MSIE5.5 kein margin:auto interpretiert-->
<body style="text-align:center;">
<!--text-align:left um das Zentrieren wieder aufzuheben. Border="1" = nur, damit man was sieht.-->
<table border="1" style="width:300px; margin:auto; text-align:left;">
<tr>
<td>Test</td>
</tr>
</table>
</body>
</html>Gruß
Axel
-
Hallo,
Hi,
Warum solltest Du? Die Angaben beziehen sich doch auf zwei
»»unterschiedliche Elemente. Die Angabe text-align ist eine
»»Eigenschaft des umgebenden Elementes. Die Angabe margin ist eine
»»Eigenschaft des zu zentrierenden Elementes selbst.ich kann also gestrost für ein div-tag "text-align" und "margin" zur formatierung benutzen, ohne dass ein Stylesheet-fehler entsteht?
Habe ich das richtig verstanden?
LG Jakob
-
Hallo,
ich kann also gestrost für ein div-tag "text-align" und "margin" zur formatierung benutzen, ohne dass ein Stylesheet-fehler entsteht?
Ja, natürlich. Allerdings bedeutet das für _einen_ div (Bereich):
Das text-align wirkt sich auf die Elemente _im_ div aus.
Der margin auf den div (Bereich) selbst.<div style="margin:auto; text-align:center;">Text</div>
Der oben stehende div ist in Browsern, die margin korrekt interpretieren, im umgebenden Element zentriert _und_ der im div stehende Text ist innerhalb des div zentriert. Der oben stehende div wird im MSIE5.5 _nicht_ im umgebenden Element zentriert sein, wohl aber wird der Text im div zentriert sein.
Gruß
Axel
-
Hi,
ich (du) hätte also mein ziel erreicht, weil ohne einen stylesheet-fehler das div im explorer und im mozilla zentriert dargestellt wird, richtig?
LG Jakob
-
Hallo,
ich (du) hätte also mein ziel erreicht, weil ohne einen stylesheet-fehler das div im explorer und im mozilla zentriert dargestellt wird, richtig?
Nein!
Ich zitiere mich:<div style="margin:auto; text-align:center;">Text</div>
Der oben stehende div wird im MSIE5.5 _nicht_ im umgebenden Element zentriert sein, wohl aber wird der Text im div zentriert sein.
Der MSIE5.5 interpretiert margin:auto _nicht_. Um den div im umgebenden Element (bspw. im body) zu zentieren, muss das _umgebende_ Element die Eigenschaft text-align:center; bekommen. Das wiederum interpretiert der MSIE _falsch_, indem er die Position des innliegenden divs daraufin horizontal zentriert. Eigentlich dürfte ein text-align _keinen_ Einfluss auf die _Position_ von Blockelementen haben. Deshalb reicht das text-align _alleine_ auch nicht für andere Browser aus. Diese benötgen margin:auto, um die Position des div zu zentrieren. Das wird dadurch erreicht, dass automatisch so große Ränder rings um den Bereich eingefügt werden, dass er in der Mitte des umgebenden Elementes steht.
<body style="text-align:center;">
<div style="margin:auto;">Text</div>
</body>Gruß
Axel
-
Ok, nun hab ich verstanden...
Dankeschön!
Gruß
Jakob
-
-
-
-
-
-
-