div in andrem div unten und {links,rechts} ausrichten?

[Peter Mairhofer]

Hi!

Wie kriege ich mit CSS das folgende Design hin?

http://img76.imageshack.us/img76/2893/loggedinlayoutxq2.png

Der erste div ist mit width/height statisch vorgegeben, und die andren Elemente sollen wie auf dem Bild ausgerichtet sein:

• Die Schrift unten und links
• Ein Photo und ein Logout-Button rechts

Ich habe schon einiges mit float: left, bottom: 0, vertical-align: bottom etc. versucht aber ich bringe vor allem die Schrift nicht runter :(

Hat jemand eine Idee wie ich das lösen kann?

Danke und lg,
Peter

[Steel]

Hi!

Also wenn Du es so gemacht hast, wie du sagst, dann hast Du jetzt was du wolltest. bottom und float bzw. right sollten genau dazu gefuehrt haben.

Ohne genauere Fehlerbeschreibung oder code kann man dir leider auch nicht weiterhelfen.

[Peter Mairhofer]

Also wenn Du es so gemacht hast, wie du sagst, dann hast Du jetzt was du wolltest. bottom und float bzw. right sollten genau dazu gefuehrt haben.

Nein, eben nicht :(
Und zwar weder in FF1.5/2, noch in IE6/7

Ohne genauere Fehlerbeschreibung oder code kann man dir leider auch nicht weiterhelfen.

Ich kann mich jetzt nicht mehr an alle Möglichkeiten erinnern die ich durchprobiert habe, aber dzt ist der Stand so:

http://img233.imageshack.us/img233/4411/istcs5.png

Und das liefert:

<div id="loginfield">

<p style="border: 1px black solid; float: left; bottom: 0px;">
Herzlich Willkommen peter14!
</p>

<div style="float: right">
  <form method="POST" action="">
  <input type="hidden" name="redirect_url" value="">

<input type="image" src="" alt="Logout">
  </form>

<img src="user-image" alt="peter14">
</div>

</div>

mit:

#loginfield
{
        border: 1px #000000 solid;
        overflow: auto;
        width: 600px;
}

lg,
Peter

[Steel]

Hi!

Das Attribut position sagt Dir aber schon was, oder? Ohne das ist nix mit positionieren. :) Das ganze dann bitte absolut fuer dein Teil am unteren Rand. Damit sich das auch auf das Elternelement bezieht sollte das relativ positioniert werden.

Deinen Loginberaich laesst du floaten und teilst entweder einem Element darin (z.B. dem Bild) clear zu oder fuegst eines extra ein. Sonst faltet sich dein auesseres Div zusammen, weil es keinen Inhalt mehr hat. Gern kannst Du auch einfach deinen Text hinter dem Loginbereich notieren.

Alternativ kannst Du dem Div auch eine Hoehe zuweisen, da es eh nicht dynamisch zu sein scheint.

Ein paar Punkte scheinst Du vergessen zu haben oder sie sind Dir schlicht nicht bewusst:

• positionieren geht nur mit position
• absolute Positioniereung und float nehmen Elemente aus dem Elementfluss heraus
• absolute Positionierungen beziehen sich auf das letzte Eelment, dem Du position gegeben hast.

SELFTHTML hat dazu eigentlich ganz brauchbare Informationen.

[Peter Mairhofer]

Hi!

Vielen Dank! Das mit position hatte ich vergessen :)

Jetzt gehts wie ichs mit wünsche :)

lg,
Peter

[at]

Hallo.

• absolute Positionierungen beziehen sich auf das letzte Eelment, dem Du position gegeben hast.

SELFTHTML hat dazu eigentlich ganz brauchbare Informationen.

Zum Beispiel die, dass position: static; zwar eine Angabe von position ist, aber das Gegenteil dessen bewirkt, was du in Aussicht stellst.
MfG, at