nicht angemeldet
Mit CCS 2 ein DIV in einem anderen zentrieren
Hallo,
ich habe folgenden Quellcode zum testen.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Bla!</title>
<link rel="stylesheet" type="text/css" href="StyleSheet.css" />
</head>
<body>
<div id="global">
<div id="content">content</div>
</div>
</body>
</html>
Ich habe ein CSS das den Inhalt so formatieren soll, dass das Div "content" zentriert im Div "global" angezeigt wird, obwohl es nicht die max Breite hat.
Zur Übersicht das CSS:
#global
{
background-color: yellow;
text-align: center;
width: 100%;
}
#content
{
border: dotted 1px black;
height: 100px;
width: 200px;
}
Nun zum Problem:
Eigentlich solte das ja gehen. Aber im Opera [7.51] wird es nicht richtig angezeigt. Da ist das Div "content" links ausgerichtet. Gibt es noch eine andere Möglichkeit? Wie kann man Objekte in XHTML-Dateien am besten positionieren und ausrichten?
Andreas
-
Hallo,
#content
{
border: dotted 1px black;
height: 100px;
width: 200px;Soweit mir in Erinnerung ist, musst du das div#content mit margin:auto ausrichten.
Im div#global gibst du für den IE text-align:center an.Mit freundlichen Grüßen
André
--
ie:% fl:( br:& va:) ls:# fo:) rl:° n4:~ ss:{ de:] js:( ch:| mo:} zu:)
Die Farbe eines Autos ist egal, hauptsache sie ist schwarz...
http://forum.de.selfhtml.org/archiv/2003/10/60651/-
Soweit mir in Erinnerung ist, musst du das div#content mit margin:auto ausrichten.
Im div#global gibst du für den IE text-align:center an.Danke, hat super funktioniert. Ich verstehe nur nicht ganz, was das margin dann bewirkt? Und was war mit dem IE nochmal? Wieso benötigt er das nicht?
-
hi,
Ich verstehe nur nicht ganz, was das margin dann bewirkt?
margin:auto bewirkt, dass der browser den "neben" dem div freien platz auf beide seiten gleichmäßig verteilt - damit wird der div also zentriert dargestellt.
Und was war mit dem IE nochmal? Wieso benötigt er das nicht?
weil er zu doof ist, dass zu verstehen (gilt für IE < 6 oder 6 im quirks mode).
margin:auto _ist_ der richtige weg für diese zentrierung, weil text-align nun mal auf block level elemente wie div laut definition gar keine auswirkung haben dürfte.
zum glück macht der IE das ebenfalls falsch, so dass man damit auch den IE zum zentrieren von block level elemente bringen kann, obwohl es eigentlich falsch ist.gruß,
wahsaga--
I'll try being nicer if you'll try being smarter. -
Hallo,
Danke, hat super funktioniert. Ich verstehe nur nicht ganz, was das margin dann bewirkt? Und was war mit dem IE nochmal? Wieso benötigt er das nicht?
Der IE hat ein sog. Bug, dass er das eigentliche Blockelement <div> nicht mit margin:auto zentriert ausrichtet, er benötigt text-align, was eigentlich für Inline-Elemente bestimmt ist. Für nähere Infos google mal nach Boxmodell.
Mit freundlichen Grüßen
André
--
ie:% fl:( br:& va:) ls:# fo:) rl:° n4:~ ss:{ de:] js:( ch:| mo:} zu:)
Die Farbe eines Autos ist egal, hauptsache sie ist schwarz...
http://forum.de.selfhtml.org/archiv/2003/10/60651/
-
-
-
Ich habe jetzt noch was kleines gefunden. Wie ist es denn, wenn ich ein Bild in einem Div rechts ausrichten möchte?
-
Hi,
da IMG ein inline-Element ist, solltest Du Dir diese Frage jetzt selbst beantworten können - aber auch, wenn Du dem Bild die Eigenschaft display:block zuweist.
freundliche Grüße
Ingo -
Hallo,
Ich habe jetzt noch was kleines gefunden. Wie ist es denn, wenn ich ein Bild in einem Div rechts ausrichten möchte?
Ein Bild kann man mit <img src="" style="float:right"> nach rechts ausrichten und dann vom restlichen Text umfließen lassen. In Verbindung mit 'margin' kann man den Abstand des Bildes vom Text auch steuern.
Mit freundlichen Grüßen
André
--
ie:% fl:( br:& va:) ls:# fo:) rl:° n4:~ ss:{ de:] js:( ch:| mo:} zu:)
Die Farbe eines Autos ist egal, hauptsache sie ist schwarz...
http://forum.de.selfhtml.org/archiv/2003/10/60651/
-