Div von unten nach oben befüllen

[kaefer]

Hey,

Ich hab grad schon google (nichts brauchbares gefunden) und die Suchfunktion hier bemüht (internal error - please try again later -.-) -- naja...dann probier ichs mal hier:

Ich möchte ein Div - im Gegensatz zum HTML-Standard nicht von oben - sondern von unten befüllen (also das was es bei Tabellen für Text gibt valign=bottom).

In den Div sollen mehrere andere Divs rein (oder auch grafiken - das spielt denk ich keine große Rolle).
Gibt es dafür eine Möglichkeit, oder hab ich eh schon "verloren"?

also

  
<div>  
  <div> hier soll inhalt rein</div>  
  <div> hier soll weiter inhalt rein, der oberhalb des ersten Divs angezeigt werden soll</div>  
  <div> und hier soll noch mehr inhalt rein, der noch weiter oberhalb angezeigt werden soll</div>  
  
</div>

das ganze möglichst dann auch noch so, dass die child-divs am unteren Rand des parent-Div ausgerichtet sind.

(im prinzip: eine Spiegelung des normalen Layoutes - Div wird von unten befüllt und die child-divs sind unten ausgerichtet)

Danke schonmal!
kaefer

[Multi]

Ich möchte ein Div - im Gegensatz zum HTML-Standard nicht von oben - sondern von unten befüllen (also das was es bei Tabellen für Text gibt valign=bottom).

Und vertical-align: bottom; per CSS greift nicht?

[kaefer]

Ich möchte ein Div - im Gegensatz zum HTML-Standard nicht von oben - sondern von unten befüllen (also das was es bei Tabellen für Text gibt valign=bottom).

Und vertical-align: bottom; per CSS greift nicht?

ich bin mal so frei von css4you zu zitieren:

Die Eigenschaft vertical-align beeinflusst die vertikale Ausrichtung von Text in einer Zeile, bezogen auf das Elternelement, das ein Inline-Element sein muß. Man kann damit also kleineren Text an größerem Text oder auch an Grafiken ausrichten - nicht aber die vertikale Positionierung in einem Blockelement (z.B. div-Element) direkt bestimmen. Außerdem kann Text damit vertikal in Tabellenzellen positioniert werden. Der Normalwert ist dabei »baseline« - die Grundlinie. <<

[ChrisB]

Hi,

ich bin mal so frei von css4you zu zitieren:

Außerdem kann Text damit vertikal in Tabellenzellen positioniert werden.

Das DIV-Element kannst du wie eine Tabellenzelle darstellen lassen.

MfG ChrisB

[kaefer]

Das DIV-Element kannst du wie eine Tabellenzelle darstellen lassen.

  
<div style="height: 500px; vertical-align: bottom">text</div>  
  

platziert aber den text nicht am unteren ende des divs - sondern weiterhin oben

[Gunnar Bittersmann]

@@kaefer:

nuqneH

Das DIV-Element kannst du wie eine Tabellenzelle darstellen lassen.
<div style="height: 500px; vertical-align: bottom">text</div>
platziert aber den text nicht am unteren ende des divs - sondern weiterhin oben

Du hast das div-Element ja auch nicht wie eine Tabellenzelle darstellen lassen. (Und deshalb wirkt vertical-align nicht.)

Im Übrigen solltest du CSS-Eigenschaften nicht inline in @style-Attributen angeben, sondern immer im Stylesheet.

Qapla'

[kaefer]

Du hast das div-Element ja auch nicht wie eine Tabellenzelle darstellen lassen. (Und deshalb wirkt vertical-align nicht.)

so war das gedacht *nachgucken geh*

Im Übrigen solltest du CSS-Eigenschaften nicht inline in @style-Attributen angeben, sondern immer im Stylesheet.

tu ich auch - bloß geht hier jetzt als beispiel, wie ich es ausprobiert habe nicht gut ^^

[Gunnar Bittersmann]

@@kaefer:

nuqneH

im prinzip: eine Spiegelung des normalen Layoutes

Und genauso machst du’s auch: das div spiegeln (scaleY(); filter() für alte IE). Und dessen Kinder jedes für sich auch wieder, damit deren Inhalte wieder richtigrum stehen.

Qapla'

[kaefer]

Und genauso machst du’s auch: das div spiegeln (scaleY(); filter() für alte IE).

Bin grad zu blöd scaleY() zu finden - hast du einen Link zu eine Dokumentation, wo die Funktion erklärt wird?
 ...bis jetzt find ich nur das hier:
http://docs.jquery.com/UI/Effects/Scale
wobei das ja ein bisschen am Sinn vorbeigeht (nur Vergrößern/Verkleinern)

des weiteren ist ne Lösung, die den IE außen vorlässt auch nicht wirklich sinnvoll (leider).

Ansonsten aber Danke für den Ansatz!

[Gunnar Bittersmann]

@@kaefer:

nuqneH

Und genauso machst du’s auch: das div spiegeln (scaleY(); filter() für alte IE).

Bin grad zu blöd scaleY() zu finden - hast du einen Link zu eine Dokumentation, wo die Funktion erklärt wird?

Im CSS-3-Modul 2D Transforms.

des weiteren ist ne Lösung, die den IE außen vorlässt auch nicht wirklich sinnvoll (leider).

Sagte ich nicht, dass der IE proprietäre http://de.selfhtml.org/css/eigenschaften/filter.htm@title=Filter hat? Doch, sagte ich.

Qapla'

[kaefer]

Sagte ich nicht, dass der IE proprietäre http://de.selfhtml.org/css/eigenschaften/filter.htm@title=Filter hat? Doch, sagte ich.

Doch sagtest du - dann brauch ich aber ne browserweiche - und habe wieder 2 ansätze, die ich verfolgen muss.
aber wenn das der einzig mögliche Weg ist, dann halt nur so ^^
danke für den Link

jetzt taucht nur leider ein weiteres problem auf:
die Child-Divs sind mittels jQuery UI draggable..und bewegen sich jetzt auch spiegelverkehrt -.-

[Gunnar Bittersmann]

@@kaefer:

nuqneH

Doch sagtest du - dann brauch ich aber ne browserweiche

Die hast du bereits dadurch, dass Browser ihnen unbekannte CSS-Eigenschaften ignorieren.

Problematisch wären IEs, die sowohl filter als auch transform kennen. Aber gibt es solche?

Qapla'

[kaefer]

Doch sagtest du - dann brauch ich aber ne browserweiche

Die hast du bereits dadurch, dass Browser ihnen unbekannte CSS-Eigenschaften ignorieren.

da hab ich wieder mal zu schnell getippt und nicht gedacht... ist ja hier css und nicht javascript o.ä.  :/