nicht angemeldet
Positionierung von Elementen
Hallo!
Ich habe ein Problem mit der Positionierung einiger Elemente. Um das ganze ein wenig verständlich zu machen, erstmal etwas Quelltext zu meiner Seite.
<body style="text-align:center">
<div style="width:700px;text-align:center">
<div class="head">
<!--Das Problemkind-->
</div>
<div class="nav">
<!--Hier kommt die Navigation rein -->
</div>
<div>
<!--und hier der eigentlich Inhalt -->
</div>
</div>
</body>
Mein Problem ist nun, das ich in dem div-Tag (class="head") zwei span-Tags einfügen will wobei das eine links ausgerichtet und das andere rechts ausgerichte sein soll. Sobald ich aber position:absolute und left:0px bzw right:0px angebe, werden die span's am body ausgerichtet und nicht an dem eigentlich Elternelement. Ich hoffe mir kann jemand helfen.
Bis dann, dann
Fluffy
-
Hallo!
<div class="head">
<!--Das Problemkind-->
</div><div>
<div style="float:left;width:50%;">links</div>
<div>rechts</div>
</div>Sobald ich aber position:absolute und left:0px bzw right:0px angebe, werden die span's am body ausgerichtet und nicht an dem eigentlich Elternelement.
Ist ja auch logisch! Die Elemente sollen nicht mehr am elternelement ausgerichtet werden, sonder absolute zum Document-Nullpunkt.
Da kannst noch mit einer relativen Positionierung arbeiten.
MfG, André Laugks
--
L-Andre @ gmx.de-
Hi,
Ist ja auch logisch! Die Elemente sollen nicht mehr am elternelement ausgerichtet werden, sonder absolute zum Document-Nullpunkt.
Falsch, es kann zwar sowohl das Elternelement als auch das Root-Element des Dokuments sein, aber
es ist das innerste Element, daß das positionierte Element umfaßt und selbst einen anderen Wert für position hat als static.cu,
Andreas--
Der Optimist: Das Glas ist halbvoll. - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.
http://mud-guard.de/? http://www.andreas-waechter.de/ http://www.helpers.de/-
Hallo!
Falsch, es kann zwar sowohl das Elternelement als auch das Root-Element des Dokuments sein, aber
es ist das innerste Element, daß das positionierte Element umfaßt und selbst einen anderen Wert für position hat als static.Und was willst Du damit sagen?
MfG, André Laugks
--
L-Andre @ gmx.de-
Hallo,
Falsch, es kann zwar sowohl das Elternelement als auch das Root-Element des Dokuments sein, aber
es ist das innerste Element, daß das positionierte Element umfaßt und selbst einen anderen Wert für position hat als static.Und was willst Du damit sagen?
<div style="position: relative; margin-top: 20%">
<div style="position: absolute; top: 0">
dass dieser Text nicht ganz oben im Browserfenster steht ...
</div>
</div>Viele Grüße
Frank-
Hallo!
Schön.
<div style="position: relative; margin-top: 20%">
Dieses div, in dem Fall das mit der class head, war nun mal nicht relative positioniert.
<div style="position: absolute; top: 0">
dass dieser Text nicht ganz oben im Browserfenster steht ...
</div>
</div>Das ganze ist also eine schöne Info, aber nicht passend!
MfG, André Laugks
--
L-Andre @ gmx.de-
hi,
Das ganze ist also eine schöne Info, aber nicht passend!
so wie dein erstes posting, dass sich doch ziemlich deutlich so las, als ob relative positionierung die _einzige_ verbleibende lösung wäre ...
gruss,
wahsaga-
Hallo!
Das ganze ist also eine schöne Info, aber nicht passend!
so wie dein erstes posting, dass sich doch ziemlich deutlich so las, als ob relative positionierung die _einzige_ verbleibende lösung wäre ...Fluffy hatte ja den span's eine absolute Positionierung verpasst und somit haben sich die Elemente relative Root-Element oder wie ich geschrieben habe zum "Document-Nullpunkt" ausgerichtet.
Und er könne noch mit einer relativen Positionierung arbeiten. Damit habe ich mich auf die span's bezogen. Da aber eien feste Breite vorgegeben ist, sollte das also gut funktionieren. Vielelicht keien optimale Lösung.
In dem Fall währe das Eltern-Element das div mit der Klasse "head".
Dieses div ist wiederum in einem div, welches eine breite von 700Pixel hat.// sein Beispiel
<body style="text-align:center">
<div style="width:700px;text-align:center">
<div class="head">
<!--Das Problemkind-->
</div><div class="nav">
<!--Hier kommt die Navigation rein -->
</div><div>
<!--und hier der eigentlich Inhalt -->
</div>
</div>
</body>Ich sehe hier keine Eigeschaft "postion".
Das heißt, er hätte also Elemente bei <!--Das Problemkind--> eingesetzt und relative zu dem div Element mit der Klasse head positionieren können.
Irgendwie habe ich ja auch den selben Lösungsansatz wie Tim Tepaße gepostet, die die beste Lösung wohl ist.
Aber wieso unterhalten wir uns darüber den noch? Ach ja, wegen MudGuard seinem Posting.
Fluffy seine Frage war ja, wie bekommt er Inhalt links und rechts ausgerichtet. Positionierungskombinationen, wenn Eltern-Element relative und das Kind-Element absolute positioniert ist, war für diese Frage unrelevant, wenn man sein Quelltext anschaut.MfG, André Laugks
--
L-Andre @ gmx.de
-
-
-
-
-
-
-
Hallo Fluffy,
Ein Kommentar nebenbei:
<body style="text-align:center">
<div style="width:700px;text-align:center">Du versuchst offenbar einen zentrierten Bereich mit der Breite 700px mitten
auf der Seite zu schaffen. Deine Variante mit einem zusätzlichen Blockelement
ist da etwas redundant, schließlich kann man CSS-Eigenschaften wie Breite
auch auf das body-Element anwenden. Und schließlich zentriert man Blockelemente
einfach mit margin:0 auto;, nicht mit text-align-center in einem übergeordneten
Element.Mein Problem ist nun, das ich in dem div-Tag (class="head") zwei span-Tags
einfügen will wobei das eine links ausgerichtet und das andere rechts
ausgerichte sein soll.Die CSS-Eigenschaft float ist diejenige, die Du suchst.
http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#float
http://www.thenoodleincident.com/tutorials/box_lesson/basic2_fluid.html- Tim
--
<img src="http://tepasse.org/selfraum/xhtmlbasic" border="0" alt="">