Ralf Heumann: <li> und deren Inhalte unten im <ul> ausrichten

Hallo,

unter http://www.janus-wa.de/layouts/adler/testcase.html habe ich folgendes Problem:

Ich habe Blockelement id="submenu" -> [weiße Hintergrundfarbe],
darin positioniert eine <ul> -> [grüne Hintergrundfarbe],
deren Listenelemente -> [rote Umrandung],
und darin Bilder.

Ich möchte nun, dass die <li>-Elemente am unteren Rand der grünen <ul> haften und die Bilder darin sollen ebenfalls unten andocken.

Das ganz soll wie ein Register mit Reiterkärtchen aussehen. Das Problem ist, dass die Grafiken innerhalb der <li>s unterschiedlich groß sein können. Wie kann ich nun die <li> sowie deren Grafiken darin alle auf einer Bodenlinie ausrichten?

Ich hatte schon versucht dem <ul> den Wert position: relative; zu geben und den <li> den Wert position: absolute; bottom: 0; allerdings war das Ergebnis alles andere als wünschenswert. Ich nehme an, dass das am float lag...

Würde mich über jede Hilfe freuen.

  1. hi,

    Ich möchte nun, dass die <li>-Elemente am unteren Rand der grünen <ul> haften und die Bilder darin sollen ebenfalls unten andocken.

    Wenn du die LI nicht floatest - eine feste Breite zuweisen dürfte ja unnötig sein, wenn die enthaltenen Bilder ihnen eine Breite geben - sondern sie stattdessen inline darstellen lässt, solltest du vertical-align auf sie anwenden können.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Guten Morgen,

      ich schließe mich wahsaga an, <li> solltest du inline ausrichten. Eine Breite brauchst du nicht, da Sie sich nach dem Inhalt richten.

      Was ich nicht verstehe ist, Warum überhaupt float an dieser Stelle?
      Soll da noch irgendetwas hin?

      Vielen Dank
      LG
      --
      kEv*
      ----

      1. Guten Morgen,

        ich schließe mich wahsaga an, <li> solltest du inline ausrichten. Eine Breite brauchst du nicht, da Sie sich nach dem Inhalt richten.

        Was ich nicht verstehe ist, Warum überhaupt float an dieser Stelle?
        Soll da noch irgendetwas hin?

        Hmm das float benötige ich doch an dieser Stelle, damit die <li>-Elemente nebeneinander stehen. Ich möchte ja eine horizontale Navigation erstellen, nicht eine vertikale.

        Ich probiere es mal aus. Würde das ganze dann genauso mit den Grafiken darin funktionieren, wenn ich die <li> dann bottom ausgerichtet habe? Diese würden ja innerhalb der <li> immernoch oben stehen..

        MFG

        Ralf

        1. hi,

          Hmm das float benötige ich doch an dieser Stelle, damit die <li>-Elemente nebeneinander stehen. Ich möchte ja eine horizontale Navigation erstellen, nicht eine vertikale.

          Hm - weißt du, was inline bedeutet?

          gruß,
          wahsaga

          --
          /voodoo.css:
          #GeorgeWBush { position:absolute; bottom:-6ft; }
          1. Hallo,

            Hm - weißt du, was inline bedeutet?

            inline = in Reihe

            Vielen Dank
            LG
            --
            kEv*
            ----