Textausrichtung in einer div-Box?

[Sanny]

Hallo,

ich weiss, es nervt, nach einer gerade gestellten Frage gleich wieder eine ähnliche zu stellen. Aber ich komme mit dem Thema Textausrichtung in einer div-Box einfach nicht weiter.

Ich möchte nichts weiter, als den Text, der in einer div-Box steht, am unteren Rand der Box ausrichten.

Dazu habe ich ein paar Beispiele gefunden:

.unten {position:absolute; bottom:0px;}

...funktioniert noch, aber ich will mein Element nicht am unteren Bildrand, sondern am unteren Rand der umgebenden Box ausrichten (müsste doch eigentlich suuuuuuupereinfach sein?).

.unten2 {position:relative; bottom:0px}

..funktioniert nicht. Das Element wird weiterhin links oben an der umgebenden Box angezeigt. Man kann es zwar mit dem Wert von bottom nach oben oder nach unten verschieben, aber der Aufhängepunkt ist immer noch oben.

Was mache ich falsch? Kann man es auch irgendwie anders machen?

Sanny

[wahsaga]

hi,

.unten {position:absolute; bottom:0px;}

...funktioniert noch, aber ich will mein Element nicht am unteren Bildrand, sondern am unteren Rand der umgebenden Box ausrichten (müsste doch eigentlich suuuuuuupereinfach sein?).

Ist es auch - wenn du mal in SELFHTML nachlesen magst, worauf absolute Positionierung Bezug nimmt ...

Kann man es auch irgendwie anders machen?

padding-top ...?

gruß,
wahsaga

[Sanny]

Hallo wahsaga,

was absolute Positionierung ist, ist mir klar, das ist wohl nicht rübergekommen, sry.

mit padding-top möchte ich es nicht machen, da, wenn die Leute einen größeren Schriftgrad in ihrem Browser eingerichtet haben, der untere Schriftrand unter den unteren Rand der Box rutscht.

LG, Sanny

[Manuel B.]

Hi,

mit padding-top möchte ich es nicht machen, da, wenn die Leute einen größeren Schriftgrad in ihrem Browser eingerichtet haben, der untere Schriftrand unter den unteren Rand der Box rutscht.

schonmal mit vertical-align probiert?

Ansonsten (ungetestet):

padding-top: auto;
padding-bottom: 0px;

[D.R.]

Hi,

schonmal mit vertical-align probiert?

Ansonsten (ungetestet):

padding-top: auto;
padding-bottom: 0px;

Soweit ich weiß, funktioniert vertical-align nur in Tabellen. Ein absolute Positionierung, relativ zu der Elternbox erreichst da, indem du also die besagte Elternbox mit position:relative formatiest. Dann wirken sich die absoluten positionierungen der Kindelemente auf das Absolut-positionierte Elternelement aus.

z.B:

Div.allesumschliessendeBox
 {position:relative;}
div.innerhalbderallesumschliessendenbox
 {position:absolute;bottom:0}

(Die Klassen sind natürlich beliebig gewählt.)

Einen schönen Dienstag noch!

[Manuel B.]

Hi,

Soweit ich weiß, funktioniert vertical-align nur in Tabellen.

Also Selfthtml sagt mir dazu folgendes:

.... zum Beispiel Tabellenzellen in einer Tabellenzeile oder Textpassagen mit unterschiedlicher Schriftgröße innerhalb einer Zeile ....

Für mich heisst das, das nicht nur Tabellen, sondern auch Textelemente zulässig sind. Und wenn ich mich nicht täusche, gehören divs da mit dazu.

[at]

Hallo.

Für mich heisst das, das nicht nur Tabellen, sondern auch Textelemente zulässig sind. Und wenn ich mich nicht täusche, gehören divs da mit dazu.

Du kannst jedem Element eine entsprechende Eigenschaft zuweisen, die es aus Sicht von CSS zur Tabellenzellen macht. Die Frage ist nur, welche Browser das in welcher Weise unterstützen.
MfG, at

[D.R.]

Hi,

Soweit ich weiß, funktioniert vertical-align nur in Tabellen.

Also Selfthtml sagt mir dazu folgendes:

.... zum Beispiel Tabellenzellen in einer Tabellenzeile oder Textpassagen mit unterschiedlicher Schriftgröße innerhalb einer Zeile ....

Für mich heisst das, das nicht nur Tabellen, sondern auch Textelemente zulässig sind. Und wenn ich mich nicht täusche, gehören divs da mit dazu.

Aber trotzdem, die Eigenschaft wirkt immer anders. Wenn man sie z.B. auf ein Bild anwendet, dann wirkt sie auf den Text daneben. Bei Tabellenzellen dagegen wirkt sie auf die Positionierung der Kind-Elemente. Bei div's passiert bei mir idr. nichts weiter. Eigentlich schade, denn wenn diese Eigenschaft auch auf div's (die nicht als Table-cell formatiert sind) wirken würde, könnte man sich wiele Tabellen ersparen. Aber so ist eine mittige ausrichtung nur mit Tabellen (und sehr Inhaltsabhängig mit CSS) möglich.
Jedenfalls hat mich das Beispiel in den FAQ nicht überzeugt. Ein paar Überschriften mehr, und der Inhalt ging unten raus. Die Startposition war aber immer noch in der Mitte.

Einen schönen Donnerstag noch!

[Sanny]

Hallo,

Div.allesumschliessendeBox
{position:relative;}
div.innerhalbderallesumschliessendenbox
{position:absolute;bottom:0}

Das ist es. Genau das! Vielen Dank!! *strahl* :)

noch einen wunderschönen Abend und eine wunderschöne Woche und überhaupt danke (auch allen anderen).

Viele Grüße,
Sanny

[wahsaga]

hi,

was absolute Positionierung ist, ist mir klar

Und das, wo von ich schrieb - worauf sie Bezug nimmt - auch ...?

gruß,
wahsaga

[Lukas]

Hi,

also ich bin auch noch nicht so lange dabei mit der CSS Ausrichtung!
Ich habe es so gemacht: (weiß aber ned ob des stimmt!)

#content
 {
  float:right;
  height:291px;
  width:505px;
  background-image:url(Material/content_background.gif);
  background-repeat:no-repeat;
  background-position:top;
  position:absolute;  <----- WICHTIG!!!!!
 }

.unten
 {
  position:absolute;
  bottom:3px
 }

Bei mir ist #content das Elternteil! Dadurch bezieht sich .unten auf
#content.

Falls es bei mir nciht richtig ist, bitte sagen! ;-)

mfg Lukas

[Auge]

Hallo

also ich bin auch noch nicht so lange dabei mit der CSS Ausrichtung!
Ich habe es so gemacht: (weiß aber ned ob des stimmt!)

#content

{
  float:right;
  height:291px;
  width:505px;
  ...
  position:absolute;  <----- WICHTIG!!!!!
}

  
1\. `float`{:.language-css} und `position`{:.language-css} schließen sich, meines Wissens nach, aus. Entweder, oder.  
  
2\. Mit `position`{:.language-css} ist man auf dem richtigen Weg. `position:relative;`{:.language-css} wäre hier meiner Meinung nach besser als `position:absolute;`{:.language-css} (auch wenn das funktionieren mag). Ohne die Angabe der Startposition wird es um 0 (Pixel oder was auch immer) gegenüber der Normalposition (`position:static;`{:.language-css}) verschoben. Es bleibt, wo es ist, ist aber trotzdem aus dem normalen Elementfluss herausgenommen.  
  

> ~~~css

.unten  

>  {  
>   position:absolute;  
>   bottom:3px  
>  }

Somit funktionieren diese Angaben für das hier bezeichnete Kindelement, wie hier angesagt.

Bei mir ist #content das Elternteil! Dadurch bezieht sich .unten auf
#content.

Tschö, Auge