Element nach unten hin ausrichten

[ttakio]

Hallo alle zusammen,

ich bin erst seit wenigen Tagen dabei mit CSS und HTML, deswegen nich wundern^^°.

mein erster Beitrag beginnt gleich mit einer Frage: wie kann man Elemente eine Ausrichtung nach unten geben?
Angenommen, ich hab eiv div-Block mit einer festen Breite und möchte ein einzelnes Kind-Element dieses Blocks am unteren Rand haben. Wie macht man das?

Ich hoffe, ihr könnt mir hierbei weiterhelfen. danke schon mal.

Gruß, Takio

[Ingo]

Hi.

Ein Stichwort hier ist "position", also die Positionsart mit ihren vier Möglichkeiten:

• static: Der Normalfall; Element fließt im Dokument mit (entweder als Inline-Element in der Zeile, oder als Block-Element mit eigenem Absatz)
• relative: wie static, jedoch lässt sich das Element mit top/left aus seiner "natürlichen" Position wegbewegen (was aber keinen Einfluss auf den Rest der Elemente hat)
• absolute: Das Element wird vollkommen unabhängig von anderen Elementen mit top/left/right/bottom positioniert, wobei sich diese Angaben auf den nächsthöheren nicht-static-Vorfahr beziehen. - Andere Elemente tun so, als gäbe es dieses Element gar nicht.
• fixed: wie absolute, Bezug ist der Viewport: das Element hat relativ zum Viewport eine feste Position

(Bilder dazu: http://www.der-webdesigner.net/lexikon/ ... ition.html)

Zum Beispiel mit deinen Vorgaben:

Code: Alles auswählen

CSS:
  #box
  {
    position:relative;             /* damit wírd #box zum Bezugs"rahmen" für absolute children */

    width:500px; height:300px;
    border:1px solid blue;
  }
  #child, #child2
  {
    position:absolute;
    bottom: 0px;

    background:#cccccc;
  }
  #child2 { left:100px; }

HTML:
  <div id="box">
    <div id="child">Hallo, Welt.</div>
    <span id="child2">Hallo, Welt.</span>
  </div>


Ich hoffe, das hilft weiter. - Gruß, Ingo

[ttakio]

Auja, das hat definitiv weiter geholfen, danke für deine Hilfe!

Aber ich muss leider weiter nachfragen: wie kann man das element zum stretchen bringen? sprich, dass es die volle breite der unteren kante annimmt? :$

[Ingo]

Berechtigte Frage, denn absolut positionierte Elemente schrumpfen auf ihr Minimum zusammen (so in etwa).
Man kann aber mit width:100% (oder px-Angabe) eine Breite festlegen.
Bei komplexeren Layouts mit vielen Elementen und vielen Angaben zu padding, margin etc. kann es etwas
Geduld kosten, mit absoluter Positionierung zum gewünschten Resultat zu kommen. Ich denke, man sollte
es nur in bestimmten, wohlüberlegten Fällen nutzen und ansonsten mit dem normalen Fluss arbeiten.