Bernd Sangmeister: Außen bündige Verteilung von Listeneinträgen

Heyho,

ich habe folgende Aufgabe: Eine (unsortierte) Liste als Navigation soll so ausgerichtet werden, dass die Einträge gleichmäßig verteilt sind. Dabei sollen die Worte an den Außenkanten bündig sein, damit sie optisch die Breite eines darunter liegenden Bildes erreichen. Also in etwa so:

Listeneintrag1      Listeneintrag2     Listeneintrag3     Listeneintrag4
+----------------------------------------------------------------------+
|                                                                      |
|                                                                      |
|                                 Bild                                 |
|                                                                      |
|                                                                      |
+----------------------------------------------------------------------+

Wichtig:
1. Valides, standardkonformes XHTML/CSS
2. Die Worte außen sollen bündig sein... d.h. das <ul> hat eine feste Breite (?)
3. Die mittleren Einträge sollen gleichmäßig verteilt sein.

Hat jemand eine Idee oder einen Ansatz?

Vielen vielen Dank!

  1. Hat jemand eine Idee oder einen Ansatz?

    table, table-row, table-cell, :first-child, :last-child

    Anm.: bis auf :last-child ist es bereits auch mit CSS 2.1 möglich.

    1. @@suit:

      nuqneH

      table, table-row, table-cell

      Bist du _sicher_? Ich sehe nicht, wei’s damit gehen sollte.
      Qapla'

      --
      Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
      1. Bist du _sicher_? Ich sehe nicht, wei’s damit gehen sollte.

        Eine pseudo-Tabelle zum gleichmäßigen Aufteilen sowie ein text-align: left bzw. right für das erste bzw. letzte Element.

        1. @@suit:

          nuqneH

          Bist du _sicher_? Ich sehe nicht, wei’s damit gehen sollte.
          Eine pseudo-Tabelle zum gleichmäßigen Aufteilen sowie ein text-align: left bzw. right für das erste bzw. letzte Element.

          Dann ergäbe doch wohl aber einen anderen Abstand zwischen erstem und zweiten bzw. vorletztem und letztem Item als zwischen den anderen.

          Qapla'

          --
          Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
          1. Dann ergäbe doch wohl aber einen anderen Abstand zwischen erstem und zweiten bzw. vorletztem und letztem Item als zwischen den anderen.

            Stimmt, in der Tat - mein Denkfehler.

  2. @@Bernd Sangmeister:

    nuqneH

    Hat jemand eine Idee oder einen Ansatz?

    http://forum.de.selfhtml.org/archiv/2006/2/t123997/#m798667 (2) in Kombination mit http://forum.de.selfhtml.org/archiv/2008/11/t179003/#m1180868

    Wenn die Einträge auch aus mehreren Wörtern bestehen können (zwischen denen dann ein normaler Leerzeichenabstand sein soll), könnte 'li { display: inline-block }' helfen.

    Qapla'

    --
    Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
    1. @@Bernd Sangmeister:

      nuqneH

      Hat jemand eine Idee oder einen Ansatz?

      http://forum.de.selfhtml.org/archiv/2006/2/t123997/#m798667 (2) in Kombination mit http://forum.de.selfhtml.org/archiv/2008/11/t179003/#m1180868

      Wenn die Einträge auch aus mehreren Wörtern bestehen können (zwischen denen dann ein normaler Leerzeichenabstand sein soll), könnte 'li { display: inline-block }' helfen.

      Qapla'

      Danke für Deine Antwort! Wenn ich Dich aber richtig verstehe, würde das ja eher folgende Ausgabe ergeben:

      Listeneintrag1    Listeneintrag2   Listeneintrag3   Listeneintrag4
      +----------------------------------------------------------------------+
      |                                                                      |
      |                                                                      |
      |                                 Bild                                 |
      |                                                                      |
      |                                                                      |
      +----------------------------------------------------------------------+

      Ich hätte also vor dem ersten und nach dem letzten Eintrag einen Abstand zu den Bild-Grenzen. Und das will ich ja gerade vermeiden.

      Oder habe ich es falsch verstanden?

      1. @@Bernd Sangmeister:

        nuqneH

        Ich hätte also vor dem ersten und nach dem letzten Eintrag einen Abstand zu den Bild-Grenzen.

        Nein. Wo sollte der herkommen?

        Qapla'

        PS: Zitiere bitte sinnvoll, nicht alles.

        --
        Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
  3. @@Bernd Sangmeister:

    nuqneH

    Markup:

    <ul>  
        <li><a href="#">Lorem ipsum</a></li>  
        <li><a href="#">dolor sit amet</a></li>  
        <li><a href="#">consectetuer adipiscing</a></li>  
        <li><a href="#">elit</a></li>  
    </ul>
    

    Stylesheet:

    ul  
    {  
        list-style: none;  
        margin: 0;  
        padding: 0;  
        text-align: justify;  
        text-align-last: justify;  
        background: yellow;  
    }  
      
    li  
    {  
        display: inline;  
        margin: 0 0 0 2em;  
        padding: 0;  
    }  
      
    li:first-child  
    {  
        margin: 0;  
    }  
      
    li:last-child::after  
    {  
        content: "\A0";  
        display: block;  
        height: 0;  
        overflow: hidden;  
    }  
      
    a  
    {  
        display: inline-block;  
    }
    

    Funktioniert in Firefox 3.5 und IE 8.

    Webkits können 'display' noch nicht auf generierten Inhalt anwenden. Opera 9 und 10 tun dies, dennoch kein Blocksatz der vorigen Zeile.

    Opera 9 (nicht 10) macht auch einen Umbruch bei 'content: "\A \A0"' ohne 'display: block', aber dennoch keinen Blocksatz.

    Qapla'

    --
    Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
    1. Klasse, das funktioniert! Vielen Dank!!!