vertical-align: bottom in einem <li>

[B2F]

Hallo,

wie der Titel schon sagt, möchte ich einen Text in ein <li> schreiben, der am Boden liegt.
Das Problem das es dabei gibt, das <li> sitzt in einem <ul>, das wiederum in einem <div> sitzt. Alle mit unbestimmter Höhe.
Im <div> sitzen 2 <ul>s nebeneinander, die rechts enthält ein Bild, die linke ein paar Aufzählungen, die meistens weniger Höhe als das Bild in anspruch nehmen.
Das letzte <li> soll nun am Boden liegen. Wie ist das möglich?

Danke schonmal!

Grüße

[ChrisB]

Hi,

wie der Titel schon sagt, möchte ich einen Text in ein <li> schreiben, der am Boden liegt.
Das Problem das es dabei gibt, das <li> sitzt in einem <ul>, das wiederum in einem <div> sitzt. Alle mit unbestimmter Höhe.
Im <div> sitzen 2 <ul>s nebeneinander, die rechts enthält ein Bild, die linke ein paar Aufzählungen, die meistens weniger Höhe als das Bild in anspruch nehmen.

Du hast eine unordered List, die nur ein einziges List-Item enthaelt, und in diesem wiederum ein Bild?
Klingt nicht unbedingt so, als ob eine UL das geeignetste Element fuer die Auszeichnung waere.

Das letzte <li> soll nun am Boden liegen. Wie ist das möglich?

Schwerlich.
vertical-align darf per Definition nur auf bestimmte Tabellenelemente wirken, oder auf die Ausrichtung von inline-Elementen in ihrer line box.

Absolute Positionierung am botton koennte evtl. eine Option sein - fragt sich nur, in Bezug auf was dann. Ausserdem problematisch, was Textgroesse etc. angeht, kann leicht zu ueberlagerungen fuehren.

Wenn du eine Beispielseite haettest, waere das zum Nachvollziehen u.U. hilfreich.

MfG ChrisB

[B2F]

Hi,

danke für deine Antwort.
Absolute positionierung ist für mich leider keine alternative, genausowenig eine feste height, da der Text auch mal länger als das Bild (das nie mehr als 200px hoch ist) sein kann.
Ich poste hier mal den code:

<div style="background-color: #fff; width: 594px; padding: 2px">  
  <ul style="float: left; background-color: #0f0; height: 100%">  
    <li><a>Link</a></li>  
    <li><a>Link</a></li>  
    <li><a>Link</a></li>  
    <li>  
      <a style="display: block; width: 300px; height: 100%; background-color: #0F0; font-size: 14px; padding-top: 50px">  
        <em>DAS hier sollte auf den Boden</em>  
      </a>  
    </li>  
  </ul>  
  <ul style="text-align: right; padding-top: 4px">  
    <a style="text-align: right;">  
      <img src="Hier das schoene Bild">  
    </a>  
  </ul>  
</div>

Hier nochmal ein Bild, damit Du es dir besser vorstellen kannst: <[URL=http://img219.imageshack.us/my.php?image=unbenanntim1.png>

Grüße

[ChrisB]

Hi,

Absolute positionierung ist für mich leider keine alternative, genausowenig eine feste height, da der Text auch mal länger als das Bild (das nie mehr als 200px hoch ist) sein kann.

Dann bleiben dir eigentlich nur noch die Werte der display-Eigenschaft, die Elemente als tabellenartig darstellen lassen - da kannst du dann auch vertical-align wieder drauf anwenden.
Da der IE die immer noch nicht umsetzen kann, landest du dann aber letztendlich doch wieder bei einer HTML-Tabelle zur Auszeichnung, wenn du das wie beschrieben flexibel halten willst.

Wenn der Text unten immer "garantiert" nur ein- oder zweilig waere, dann koennte man trotzdem absolute Positionierung nutzen - der obere Text muesste dann ueber ein entsprechendes margin oder padding (idealerweise in em) dafuer sorgen, dass unter ihm im Container auf jeden Fall noch genug Platz fuer den unteren bleibt.

<ul style="text-align: right; padding-top: 4px">
    <a style="text-align: right;">

Abgesehen davon, dass ich wie bereits gesagt hierfuer eine Liste mit nur einem Eintrag fuer fehl am Platze halte, ist das auch inkorrektes HTML - A darf kein direktes Kind von UL sein, da fehlt ein LI drumherum.

MfG ChrisB