michat: li bullet links ausrichten, text rechts ausrichten möglich?

Hi
eigentlich sagt der Betreff schon fast alles, ergänzen möchte ich dass es um xhtml 4x geht.

Also kann man in einer ul li Liste die Bullets links ausrichten und die zugehörigen unterschiedlich breiten Listentexte rechts ausrichten?

bye

MH

--
war unregistriert "michaa"
  1. Also kann man in einer ul li Liste die Bullets links ausrichten und die zugehörigen unterschiedlich breiten Listentexte rechts ausrichten?

    Einfach das Listen-Element oder die Einträge mit "text-align: right;" versehen funktioniert für Chrome. Firefox zickt da aber rum. Mir fällt auf die schnelle keine Möglichkeit ohne zusätzliches Markup ein.

    1. Hi

      Also kann man in einer ul li Liste die Bullets links ausrichten und die zugehörigen unterschiedlich breiten Listentexte rechts ausrichten?

      Einfach das Listen-Element oder die Einträge mit "text-align: right;"

      @ beide

      Nee. Soweit wußte ich das schon selbst. Das zieht aber die Bullets mit. Die sollen aber wie angegeben links ausgerichtet bleiben.

      Und ja, das kann komisch aussehen und ob ich das dann mag weiß ich noch garnicht so genau. Jetzt will ich erstmal sehen: Bullet links ausgerichtet, Texteintrag rechts ausgerichtet.

      Gruß

      Michael

  2. Hallo,

    eigentlich sagt der Betreff schon fast alles, ergänzen möchte ich dass es um xhtml 4x geht.

    scheint ein Tippfehler zu sein, es gibt kein XHTML 4. Du meinst wahrscheinlich entweder HTML 4.01 oder XHTML 1.0. Spielt aber für die Frage bzw. die Antwort auch keine Rolle.

    Also kann man in einer ul li Liste die Bullets links ausrichten und die zugehörigen unterschiedlich breiten Listentexte rechts ausrichten?

    Was läge näher als text-align:right für das li-Element bzw. die li-Elemente? Wobei ich finde, dass das merkwürdig aussieht.

    Ciao,
     Martin

    --
    ... und der FDP-Wähler gibt seine Stimme der FDP.
       (Faszinierende Erkenntnis meines Gemeinschaftskunde-Lehrers, 9. Schuljahr)
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    1. Hallo,

      Also kann man in einer ul li Liste die Bullets links ausrichten und die zugehörigen unterschiedlich breiten Listentexte rechts ausrichten?

      Was läge näher als text-align:right für das li-Element bzw. die li-Elemente? Wobei ich finde, dass das merkwürdig aussieht.

      Nicht ganz, dann ist auch das Bullet rechts vor den Text verschoben.
      Zusätzlich list-style-type:none für ul/ol und das Bullet als Hintergrund für li definieren.

      vg ichbinich

      --
      Kleiner Tipp:
      Tofu schmeckt am besten, wenn man es kurz vor dem Servieren durch ein saftiges Steak ersetzt...
      1. Hi,

        Was läge näher als text-align:right für das li-Element bzw. die li-Elemente? Wobei ich finde, dass das merkwürdig aussieht.
        Nicht ganz, dann ist auch das Bullet rechts vor den Text verschoben.

        das scheint browserabhängig zu sein. Ich habe auf die Schnelle nur mit Opera 12.12 getestet, da sind die Bullets sauber untereinander trotz unterschiedlicher Textausrichtung. Und das meinte ich mit "sieht merkwürdig aus": Der Abstand zwischen Bullet und dem Beginn des Texts ist unterschiedlich.

        Zusätzlich list-style-type:none für ul/ol und das Bullet als Hintergrund für li definieren.

        Okay. Das ist dann eine aufwendigere, aber vermutlich browserunabhängige Lösung.

        Ciao,
         Martin

        --
        The other line moves faster. (from Murphy's Law)
        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
        1. Hi

          das scheint browserabhängig zu sein. Ich habe auf die Schnelle nur mit Opera 12.12 getestet, da sind die Bullets sauber untereinander trotz unterschiedlicher Textausrichtung.

          Das verstehe ich jetzt überhaupt nicht. Opera 12.12 (Debian/Linux) ist auch mein (Standard-) Browser. Und hier werden die Bullets mitgezogen, benso im FF/IW. Aber was heißt unterschiedlicher Textausrichtung. Hast du für den Bullet explizit eine eigene angegeben, sowas wie li:before { content: '•'; font-family: monospace; padding-right: 0.5em; text-align: left; }, was bei mir im Zusammenhang mit dem rechts ausgerichteten Listeneintrag nicht funktioniert?

          bye

          MH

          --
          war unregistriert "michaa"
          1. Hallo,

            Ich habe auf die Schnelle nur mit Opera 12.12 getestet, da sind die Bullets sauber untereinander trotz unterschiedlicher Textausrichtung.
            Das verstehe ich jetzt überhaupt nicht. Opera 12.12 (Debian/Linux) ist auch mein (Standard-) Browser. Und hier werden die Bullets mitgezogen

            sehr seltsam - hier Opera 12.12 unter Linux Mint.

            Hast du für den Bullet explizit eine eigene angegeben, sowas wie li:before { content: '•'; font-family: monospace; padding-right: 0.5em; text-align: left; }, was bei mir im Zusammenhang mit dem rechts ausgerichteten Listeneintrag nicht funktioniert?

            Nein, eigentlich nicht. Das war mein minimierter Test Case, auf die Schnelle sogar mit "schmutzigem" inline-Style:

            <ul>  
             <li>Punkt 1</li>  
             <li style="text-align:right;">Punkt 2</li>  
             <li>Punkt 3</li>  
            </ul>
            

            Das Ergebnis waren drei sauber untereinander stehende Bullets am linken Rand, der erste und der dritte Eintrag bündig dazu ausgerichtet, und der zweite dazwischen klebte am rechten Bildrand, weit weg von seinem Bullet.

            So long,
             Martin

            --
            Wer im Glashaus sitzt, sollte sich nur im Dunkeln ausziehen.
            Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
            1. Hi

              Hallo,

              Ich habe auf die Schnelle nur mit Opera 12.12 getestet, da sind die Bullets sauber untereinander trotz unterschiedlicher Textausrichtung.
              Das verstehe ich jetzt überhaupt nicht. Opera 12.12 (Debian/Linux) ist auch mein (Standard-) Browser. Und hier werden die Bullets mitgezogen

              sehr seltsam - hier Opera 12.12 unter Linux Mint.

              Ok, ich beginne meine eigenen Stolperfallen zu durchblicken. Es kann bei mir *so* nicht funktionieren, weil ich nicht den vorgegebenen Bullet verwende (der in jedem Browser unterschiedlich in Größe und Lage dargestellt wird, und ausgerechnet in Opera deplaziert aussieht). Ich verwende deshalb ein Textsymbol: li:before { content: '•'; }
              weshalb ich einen Teil des Textes links, den anderen rechts ausrichten müsste. Und das geht vermutlich überhaupt nicht. Und wohl auch nicht im HG?

              So long,
              Martin

              bye

              MH

              --
              war unregistriert "michaa"
              1. Om nah hoo pez nyeetz, michat!

                weshalb ich einen Teil des Textes links, den anderen rechts ausrichten müsste. Und das geht vermutlich überhaupt nicht. Und wohl auch nicht im HG?

                Doch. Beispielsweise mit absoluter Postionierung des before-Pseudoelements.

                Matthias

                --
                1/z ist kein Blatt Papier.

                1. Hi

                  Doch. Beispielsweise mit absoluter Postionierung des before-Pseudoelements.

                  Danke. Das tut exakt das was ich suchte. Und so simpel dass man eigentlich selber draufkommen sollte. Eigentlich.
                  Ob mir das Ergebniss visuell dann tatsächlich gefällt werde ich wohl erst mit etwas Herumprobieren und zeitlichem Abstand verstehen.

                  bye

                  MH

                  --
                  war unregistriert "michaa"
      2. Hi

        Nicht ganz, dann ist auch das Bullet rechts vor den Text verschoben.
        Zusätzlich list-style-type:none für ul/ol und das Bullet als Hintergrund für li definieren.

        Danke. Das schaue ich mir mal genauer an.

        Gruß

        MH

        --
        war unregistriert "michaa"
      3. Zusätzlich list-style-type:none für ul/ol und das Bullet als Hintergrund für li definieren.

        Oder mit dem after-Pseudoelement.
        Beispiel, funktioniert zumindest im Firefox.

        1. Hi

          Oder mit dem after-Pseudoelement.
          Beispiel, funktioniert zumindest im Firefox.

          Sehr interessante Lösung. Wobei mir das gleich als zweifach von hinten durch die Brust ins Auge vorkommt.
          Auch die Seite auf die du verlinkst finde ich recht praktisch.

          Danke.

          bye

          MH

          --
          war unregistriert "michaa"
          1. Sehr interessante Lösung. Wobei mir das gleich als zweifach von hinten durch die Brust ins Auge vorkommt.

            Stimmt, da hat mich ein Denkfehler geritten.