✔ Zentrierte Divs - ich verstehe es einfach nicht

Status
Nicht offen für weitere Antworten.
E

emmag

Grünschnabel
Hallo, Ihr Lieben,
ich habe mir zwar jetzt schon einige Antworten zu diesem Thema durchgelesen, aber ich verstehe sie einfach nicht. Vielleicht, weil die Beispiele viel komplizierter sind als mein popeliges Anliegen. Ich möchte einfach ein Div im anderen zentrieren und das Ergebnis auch im Firefox sehen können. Dass da text-align: center nicht ausreicht, habe ich begriffen, aber was will der FF denn zusätzlich? So weit mein Ansatz, der aber nur im IE klappt:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta name="generator" content="Adobe GoLive" />
		<title>Unbenannte Seite</title>
		<style type="text/css" media="screen"><!--

#aussen { 	height: 100px; width: 100%; background-color: #998855; text-align: center;}
			
#innen { height: 100px; width: 200px; background-color: #112233;}

--></style>
	</head>

	<body>
		<div id="aussen">
		<div id="innen"></div>
		</div>
	</body>

</html>

Vielleicht erbarmt sich ja eine Geübte oder ein Geübter dieser Anfängerfrage.
Liebe Grüße - Emma
 
Hi,

erweiter mal die Regel für das DIV #innen folgendermaßen:

Code: 
#innen { height: 100px; width: 200px; background-color: #112233; margin:0 auto; }
 
Tausend Dank für die schnelle Antwort, das klappt ja prima. Könntest Du mir auch noch sagen, was der Befehl konkret auslöst? Margin left, top, bottom etc. weiß ich und sieht man ja auch sofort. Aber margin=0? Und auto? Ich frage lieber deshalb jetzt noch einmal nach, denn sollte ich es tatsächlich verstehen, könnte das ja auch für zukünftige Problemchen sinnvoll sein. Fürs' erst aber noch einmal: DANKE - Emma
 
@emmag: Mit dem ersten Wert 0 wird der Außenabstand nach oben und unten definiert, mit dem zweiten Wert auto wird ein gleichmäßiger Außenabstand zur linken und rechten Seite eingerichtet, und somit das Element horizontal zentriert.

@tobee: Mit deinem Vorschlag wäre dann für den IE ein "Conditional Comment" erforderlich, da beide text-align-Angaben im Selektor #aussen nicht notiert werden können, denn nur Letztere wird vom Browser ausgeführt, aber beide (FF + IE) unterstützen die jeweils "andere" nicht.
 
Hallo, tobee, ja, vielen Dank, das habe ich auch probiert. Das Ergebnis war, dass es im FF klappt, dafür aber nicht mehr im IE. Habe auch mal probiert, beides - also moz und auto - zu nutzen, aber das will auch nicht so recht. Es ist schon ein Kreuz mit den unterschiedlichen Darstellungen. Lieben Gruß - Emma
 
Probiert es mal so:
CSS: 
<!--[if IE]>text-align:center;<![endif]-->
<!--[if !IE]>text-align:-moz-center;<![endif]-->
 
Warum so umständlich?

Mein Vorschlag funktioniert in allen modernen Browsern, also nicht nur in den Gecko-Browsern, wie z.B. Firefox. ;)
 
Das müsste ich doch dann dem #aussen-Div zuweisen. Wenn ich das tue und dem #innen-Div das margin=0 auto dafür wegnehme, passiert gar nichts.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück