vertikale Textausrichtung in DIV

[steckl]

Hallo,

gibt es eine Moeglichkeit, Einen Text in einem DIV nach unten auszurichten?
Ich habe es wie hier versucht, aber der Text bleibt immer oben.
Funktioniert das nur in Tabellen?

Mein Code:
<div style="height:50px;vertical-align:bottom; background-color:yellow;">KW 41</div>

so wird es angezeigt:
 +-------+
 | KW 41 |
 |       |
 |       |
 |       |
 |       |
 +-------+

so sollte es nach meinem Verstaendnis angezeigt werden:
 +-------+
 |       |
 |       |
 |       |
 |       |
 | KW 41 |
 +-------+

Hintergrund ist folgender:
Ich habe eine Tabellenzelle, in der ich Einen Text ganz oben und einen Text ganz unten haben will. Dafuer wollte ich dort mehrere DIVs mit unterschiedlicher vertikaler Ausrichtung benutzen.
Oder kann ich anders irgendwie 2 verschieden Ausrichtungen innerhalb einer Zelle erreichen?

mfG,
steckl

[wahsaga]

hi,

gibt es eine Moeglichkeit, Einen Text in einem DIV nach unten auszurichten?
Ich habe es wie hier versucht, aber der Text bleibt immer oben.
Funktioniert das nur in Tabellen?

Gut erkannt.
Genauer: Für Elemente mit einem Display-Typ inline oder table-cell.

Hintergrund ist folgender:
Ich habe eine Tabellenzelle, in der ich Einen Text ganz oben und einen Text ganz unten haben will. Dafuer wollte ich dort mehrere DIVs mit unterschiedlicher vertikaler Ausrichtung benutzen.

Wenn die Größe der Zelle nicht fest sein soll - nutze margin/padding.

Wenn sie fest sein soll - nutze absolute Positionierung. Erfordert aber noch ein zusätzliches Element in der Zelle als relativen Container.

gruß,
wahsaga

[steckl]

hi,

erstmal danke fuer die schnelle Antwort.

Hintergrund ist folgender:
Ich habe eine Tabellenzelle, in der ich Einen Text ganz oben und einen Text ganz unten haben will. Dafuer wollte ich dort mehrere DIVs mit unterschiedlicher vertikaler Ausrichtung benutzen.

Wenn die Größe der Zelle nicht fest sein soll - nutze margin/padding.

So solls sein, aber ich steh wohl grad auf dem Schlauch.
Den abstand von oben kann ich ja mit padding-top angeben, aber wie mache ich es, wenn ich den Text nach unten ausrichten will?

Wenn ich schreibe "padding-bottom:0px" klebt der Text trotzdem noch oben.

So soll es mal aussehen:
+--------+
|oben    |
|        |
|        |
|        |
|unten   |
+--------+

Geht das mit DIVs, oder sollte ich einfach nochmal eine Tabelle innen reinsetzen?

[wahsaga]

hi,

Wenn die Größe der Zelle nicht fest sein soll - nutze margin/padding.

So solls sein,

Noch mal explizit nachgefragt:
Die Höhe der Zelle soll also nicht fest vorgegeben sein, sondern sich dem Inhalt anpassen, als oberer Bereich + bestimmter Abstand + unterer Bereich?

Den abstand von oben kann ich ja mit padding-top angeben, aber wie mache ich es, wenn ich den Text nach unten ausrichten will?

Wenn du obiges wirklich willst - dem zweiten Element, welches weiter nach unten soll, entsprechendes margin-top geben.

gruß,
wahsaga

[steckl]

hi,

Wenn die Größe der Zelle nicht fest sein soll - nutze margin/padding.

So solls sein,

Noch mal explizit nachgefragt:
Die Höhe der Zelle soll also nicht fest vorgegeben sein, sondern sich dem Inhalt anpassen, als oberer Bereich + bestimmter Abstand + unterer Bereich?

Die hoehe ist immer anders, da in anderen Tabellenzellen dieser Zeile viel Text stehen kann. Also weiss ich diese vorher nicht.

Die Zelle soll 3 Zeilen beinhalten:
1. Zeile: ganz oben (beinhaltet keinen Zeilenumbruch)
2. Zeile: in der Mitte (beinhaltet keinen Zeilenumbruch)
3. Zeile: ganz unten (beinhaltet keinen Zeilenumbruch)

Mein Ansatz war es 3 DIVs mit "height:33%" zu verwenden, aber ich habe es nicht geschafft, in den einzelnen DIVs den Text vertikal auszurichten.

Den abstand von oben kann ich ja mit padding-top angeben, aber wie mache ich es, wenn ich den Text nach unten ausrichten will?

Wenn du obiges wirklich willst - dem zweiten Element, welches weiter nach unten soll, entsprechendes margin-top geben.

ich weiss aber nicht wieviel margin-top ich geben muss, weil ja die hoehe der Zelle nach den anderen Zellen dieser Zeile variiert.

mfG,
steckl

[wahsaga]

hi,

ich weiss aber nicht wieviel margin-top ich geben muss, weil ja die hoehe der Zelle nach den anderen Zellen dieser Zeile variiert.

Das war ja meine Frage, ob du die Höhe kennst ...

Dann könntest du es noch mit (relativ-)absoluter Positionierung versuchen.

gruß,
wahsaga

[steckl]

danke fuer deine Hilfe,

aber ich habs jetzt mit einer eigenen Tabelle in der Zelle geloest:

<td height="100%">
                 <div style="height:100%;background-color:red">
                 <table border="0" style="height:100%">
                   <tr><td style="vertical-align:top;height:33%;">oben</td></tr>
                   <tr><td style="vertical-align:middle;height:33%;">mitte</td></tr>
                   <tr><td style="vertical-align:bottom;height:33%;">unten</td></tr>
                 </table>
                 </div>
           </td>

Das schien mir am einfachsten fuer mein doch eigentliches banales Problem.
In diesem Fall macht tabellenloses Design wohl doch nicht alles leichter.

Dann könntest du es noch mit (relativ-)absoluter Positionierung versuchen.

Hab ich auch versucht, aber leider ohne Erfolg.

mfG,
steckl

[Struppi]

Das schien mir am einfachsten fuer mein doch eigentliches banales Problem.
In diesem Fall macht tabellenloses Design wohl doch nicht alles leichter.

Das wird auch nie jemand behaupten, vor allem wenn du Eigenschaften einer Tabelle mit CSS umsetzen willst.

Dann könntest du es noch mit (relativ-)absoluter Positionierung versuchen.
Hab ich auch versucht, aber leider ohne Erfolg.

Ich hab's auch versucht, mit Erfolg.

Struppi.

[steckl]

Hallo,

Ich bin mit CSS (noch) etwas auf Kriegsfuss.

Dann könntest du es noch mit (relativ-)absoluter Positionierung versuchen.
Hab ich auch versucht, aber leider ohne Erfolg.

Ich hab's auch versucht, mit Erfolg.

Verraetst du mir auch wie?

Ich habe es u.a. mit "bottom:0" versucht, das wars aber wohl nicht.

hier ist einer meiner Versuche:
<div style="background-color:red;width:300px;height:300px">
  <div style="background-color:blue;position:relative;bottom:0px;">test</div>
</div>

Ich habs nichtmal geschafft, das blaue DIV an den unteren Rand des roten zu setzen, falls dieses eine Variable hoehe hat, geschweige denn 3 DIVs oben, mittig und unten zu positioneieren.

Gibt es hier irgendeine Eigenschaft die ich vielleicht nicht kenne?

mfG,
steckl

[wahsaga]

hi,

Ich habe es u.a. mit "bottom:0" versucht, das wars aber wohl nicht.

hier ist einer meiner Versuche:
<div style="background-color:red;width:300px;height:300px">
  <div style="background-color:blue;position:relative;bottom:0px;">test</div>
</div>

position:relative verschiebt ein Element relativ zu der Position, die es eh schon inne hat - du hast das Element jetzt also von der Unterkante seiner Normalposition um 0 Einheiten nach oben verschoben.

Gibt es hier irgendeine Eigenschaft die ich vielleicht nicht kenne?

Ich sprach von Anfang an von absoluter Positionierung.

gruß,
wahsaga

[steckl]

hi,

position:relative verschiebt ein Element relativ zu der Position, die es eh schon inne hat - du hast das Element jetzt also von der Unterkante seiner Normalposition um 0 Einheiten nach oben verschoben.

Dann war das wohl ein Schuss in den Ofen ;-)

Gibt es hier irgendeine Eigenschaft die ich vielleicht nicht kenne?

Ich sprach von Anfang an von absoluter Positionierung.

Danke fuer deine Gedult :-)

Ich habe jetzt das in eine Tabellenzelle Eingebaut:

<td style="height:100%">

<div style="background-color:red;width:100%;height:100%;position:relative; margin:1px;">
             <div style="background-color:blue;position:absolute;bottom:0px;">KW 4</div>
           </div>
</td>

Ich hatte nicht beachtet, dass ich das TD-Tag mit einer Hoehe versehen muss. So klappts jetzt endlich einigermasen, nur dass dar IE 6 bei der Hoehe wohl den border von TD abzieht und er FF 1.5 nicht. Dadurch ueberschreibt der FF den Border.
Ich hab versuchst mit padding bei TD und margin bei dem DIV, jedoch beides ohne Erfolg.
Gibt es hierfuer auch noch eine einfache Loesung, oder sollte ich lieber einfach height:98% nehmen?

mfG,
steckl

[Shepard]

Hallo,

So klappts jetzt endlich einigermasen, nur dass dar IE 6 bei der Hoehe wohl den border von TD abzieht und er FF 1.5 nicht.

Dieser IE Bug hat sogar schon Einzug in Wikipedia gefunden, da steht auch, wie er beim IE6 vermieden werden kann (doctype).

Shepard