DIV innerhalb DIV zentrieren ?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ablegen
abstand
attribut
ausgeglichener abstand
ausrichten
aussen code
auto
befehl
belieben
code
dank
eigenschaft
eindeutige anweisung
hauptsache
logik
oberer abstand
position
text
tippfehler
url
-
Hi,
ich möchte innerhalb eines DIV ein anderes DIV zentriert darstellen,
aber es klappt nicht ...
<div id="aussen" style="text-align:center; width:100%"> <div id="innen" style="text-align:left; width:530px; background:#DEDEDE;"> <p>Hier Text linksbündig aber DIV innen zentriert zu DIV aussen ... </p> </div> </div>
was ist daran falsch ?!
EDIT: wenn ich DIV aussen mit der "alten" (nicht CSS) align="center" definiere,
dann klappt es, aber ist das dann auch valider Code ?
<div id="aussen" align="center" width="100%"> <div id="innen" style="text-align:left; width:"530px; background:#DEDEDE;"> <p>Hier Text linksbündig aber DIV innen zentriert zu DIV aussen ... </p> </div> </div>
weil auf Dauer will ich ja auch den Style für die DIV id in einer .css Datei ablegen
aber mit <div id="aussen" align="center" width="100%"> geht das ja sooo nicht,oder ?
muss doch mit "reinem" CSS auch gehen ?!
Beitrag zuletzt geändert: 6.1.2012 12:25:11 von tauli -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
tauli schrieb:
Du hast dich hier verschrieben:
<div id="aussen" align="center" width="100%"> <div id="innen" style="text-align:left; width:"530px; background:#DEDEDE;"> <p>Hier Text linksbündig aber DIV innen zentriert zu DIV aussen ... </p> </div> </div>
Da ist ein " zu viel drin (vor 530px).style="text-align:left; width:"530px; background:#DEDEDE;" -
Danke @fatfreddy
werde es mal mit margin 0 auto ausprobieren
EDIT: juhu ...das klappt so, Danke ... verstehe zwar die Logik nicht, aber hauptsache funzt.
Danke @hackyourlife
ja, Tippfehler ... muss natürlich raus das eine " .. also so
<div id="innen" style="text-align:left; width:530px; background:#DEDEDE;">
kommt daher, weil ich es vorher in der ur-alt Variante hatte,
<div id="innen" align="left" width="530">
hab nur einen ur-alt HTML Editor ;)
-
tauli schrieb:
... verstehe zwar die Logik nicht, aber hauptsache funzt.
Die Logik ist simpel
Die Null steht für den Abstand oben UND unten
Das auto sagt, daß rechts und links ein ausgeglichener Abstand gewünscht ist.
Das ist nur eine Kurzschreibweise für: "margin: 0 auto 0 auto;"
-
geht das denn auch wenn man nur margin:0px; rein schreibt...beim hauptdiv sollte das gehen..XD
-
sironia-helper schrieb:
geht das denn auch wenn man nur margin:0px; rein schreibt...beim hauptdiv sollte das gehen..XD
Warum sollte das gehen? 0px ist eine eindeutige Anweisung. Da wird nichts ausgeglichen wie bei "auto" .
-
margin: 0 auto; ist sozugan der zentrier Hack.
Mit margin definiert man ja die Abstände zum gewählten rand (-top: -left usw.).
Gibt man nur margin: ein definiert die position des wertes den abstand zu festgelegten rändern:
Bsp: margin: 5px 10px 5px 10px;
Bedeutet: 5pixel von oben, 10pixel von rechts, 5pixel von unten, 10pixel von links.
Der befehl margin: 0 auto; beschreibt dabei keinen abstand von oben und alle restlichen abstände automatisch... bedeutet zwischen links und zechts zentriert.
Somit kannst du jeden Container zentriert ausrichten. -
samed schrieb:
margin: 0 auto; ist sozugan der zentrier Hack.
Wieso Hack?
Die Eigenschaft auto ist im CSS Standard als gültige Eigenschaft für das Attribut margin definiert. Ein Hack ist was anderes.
Beitrag zuletzt geändert: 15.1.2012 2:31:44 von fatfreddy -
das weisst du geauso wie ich, entschuldige wenn ich mich da falsch ausgedrückt habe... sollte nur die kraft des Befehls ausdrücken.
Natürlich ist es nur eine Eigenschaft für ein Attribut.
Beitrag zuletzt geändert: 15.1.2012 2:38:38 von samed -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
