Vertikale Ausrichtung in einem DIV-Container

N

NicM

New member
Hallo!

Ich bin schon seit längerem am rumpröbeln, wie man den Inhalt eines DIV-Elements vertikal ausrichten kann. Ich habe eine Navigationsleiste (DIV) mit nebeneinanderstehenden Links (a). Da der DIV grösser ist als die Zeilenhöhe der Links, möchte ich, dass die Links am unteren Rand des DIVs angezeigt werden. Mit "vertical-align" geht es nicht, da dieses nur für Inline-Elemente festgelegt ist. Auch der Versuch, aus dem DIV ein SPAN zu machen ging in die Hose, und zwar deshalb, weil für SPAN keine Höhenangaben möglich sind...
 
Wenn die Höhe des div's fix ist, kannst Du die Links mit margin-top "positionieren".

@Anna: Sorry, muss wohl an der vielen Sonne liegen...
 
Zuletzt bearbeitet:
[edit]@ Herr Denz, macht nichts. Ich gönn Dir die Sonne. :D[/edit]
 
Zuletzt bearbeitet:
Also bei mir funktioniert die Eigenschaft margin überhaupt nicht. Ein ganz einfaches BSP:

Code: 
<p style="background-color:#FF0000;">
<a style="margin:100px;">HALLO WELT!</a>
</p>

Der obere und der untere Abstand ist bei mir gleich null. Macht man es mit der padding-Eigenschaft, passiert ebenfalls nichts. Lediglich die horizantalen Abstände stimmen.

Woran liegt das?

PS: Gleich noch eine ganz allgemeine Frage: Ist es richtig, dass sich Block- und Inline-Elemente nur in einem Punkt unterscheiden, nämlich dass die Blockelemente eine neue Zeile erzeugen?
 
Zuletzt bearbeitet:
NicM schrieb:
Also bei mir funktioniert die Eigenschaft margin überhaupt nicht. Ein ganz einfaches BSP:

Code: 
<p style="background-color:#FF0000;">
<a style="margin:100px;">HALLO WELT!</a>
</p>
Zum Vergrößern anklicken....
...das wundert mich nicht, lies mal hier: CSS bei CSS-Garden
ungefähr in der Mitte der Seite, Eintrag vom 11.12.2006, da hast du es kurz zusammengefasst.

Gib deinen a-tags ein display: block, dann kannst du ihnen auch oben und unten margin geben...

planet4.
 
SELF-HTML kenne ich schon beinahe wie meine Westentasche...^^

Naja, auch jeden Fall steht dort z.B. bei MARGIN-BOTTOM:

Sie können bestimmen, wie viel Abstand ein Element zu seinem Nachfolgerelement nach unten hin hat - oder, wenn es das letzte Kindelement eines Elements ist - wie viel Abstand es zu dessen unteren Rand hin hat.

Das fett-gedruckte stimmt nicht... Das Ganze funktioniert nur dann, wenn noch Inhalt im Elternelement unterhalb des letzten Kindelements ist. Nur dann wird margin akzeptiert. Möchte man dort aber Leerraum und trotzdem einen Abstand zwischen Elternrand und Kindrand, dann hat man wohl ein Problem...

Mit padding funktioniert es zwar, aber darum geht es jetzt nicht. Ich sehe bei CSS manchmal keine sinnvolle Regel dahinter. Warum bitte schön funktioniert margin nicht immer? Und wieso lässt sich bei Inline-Elementen keine Höhe oder Breite angeben? ... Es ist zum Verzweifeln...

NicM
 
NicM schrieb:
Warum bitte schön funktioniert margin nicht immer? Und wieso lässt sich bei Inline-Elementen keine Höhe oder Breite angeben? ... Es ist zum Verzweifeln...

NicM
Zum Vergrößern anklicken....
hallo,
zeig doch mal ein Beispiel, in dem margin nicht funktioniert. Das hängt oft noch von anderen Faktoren ab (was das für Elemente sind, die zuvor kommen, ob positioniert, gefloatet oder sonst was).
und Inline-Elemente sind eben nicht dafür da, dass man ihnen margin-top oder margin-bottom zuweist, das ist aber überhaupt kein Problem, weil du sie ja als Block-Element deklarieren kannst.

planet4.
 
Sehr gerne... hier ein einfaches Beispiel:

Code: 
<div style="background-color:#FF0000;">
<div style="background-color:#9DF49D;margin:30px;">
HALLO WELT!
</div>
</div>

<div style="background-color:#FF0000;">
<a style="background-color:#9DF49D;margin:30px;">
HALLO WELT!
</a>
</div>

Zuerst ein DIV in einem anderen DIV. margin-top und -bottom funktionieren nicht, obwohl Block-Element in Block-Element.

Beim anderen: A-Element in in einem DIV. Ebenfalls keine Wirkung (das ist wenigstens einleuchtender).


Nun noch ein Beispiel, bei dem es funktioniert:

Code: 
<div style="background-color:#FF0000;">
Text oben
<div style="background-color:#9DF49D;margin:30px;">
HALLO WELT!
</div>
Text unten
</div>

Hier funktioniert es, und zwar nur deshalb, weil ich einen Inhalt oben und unten im DIV eingefügt habe ("Text oben" und "Text unten").

Und das soll mal einer verstehen...
 
Zuletzt bearbeitet:
hier dein Beispiel leicht verändert, und du hast dein margin in alle Richtungen:
HTML: 
<div style="float: left;background-color:#FF0000;"> 
	<div style="float: left;background-color:#9DF49D;margin:30px;">
HALLO WELT!
	</div> 
</div>
vielleicht stellt dich das nicht zufrieden, weil du denkst: warum ist das so?
aber wenn du einem "normalen" div keine Höhe gibst, dehnt es sich nicht nach unten hin aus...

planet4.
 
Ja, das funktioniert vielleicht, aber wie du selber schön gesagt hast: Es stellt mich nicht zufrieden^^. Un zwar deshalb nicht, weil ich es lieber verstehen möchte.

Du hast FLOAT angewendet... Warum bloss funktioniert es denn jetzt? Für mich ist das irgendwie alles völlig unwillkürlich...

Und das mit der Höhe: Ich könnte bei meinem Beispiel oben jedem DIV eine Höhe geben, und es funktioniert nicht. Ausserdem wäre es doch sowieso nicht logisch, dass sich ein DIV ausdehnt, wenn ich ihm eine feste Höhe gebe...


PS: SELFHTML: CSS Stylesheets / CSS-Eigenschaften / Außenrand und Abstand

Hier sieht man die Erklärung von SELF-HTML. Wenn man das so liest, scheint es logisch zu sein. Probiert man das aber aus (wie ich eben), dann geht es überhaupt nicht so, wie beschrieben.
 
Zuletzt bearbeitet:
Gut, ich habe es unterdessen selbst herausgefunden.

Sobald man dem DIV einen Rand oder einen Innenabstand spendiert, funktioniert der margin des Kindelemtes... Mit diesem Grad an Logik kann ich leben^^.

Danke an alle, die mir helfen wollten!

NicM
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben