Nems: Icon in <li></li>

Hallo,

Ist es möglich vor in einer <li> ......</li> ein Icon z.B. Pfeil
per CSS einbinden.

Mit
<ul style="list-style-image: url(../img/arrow_straight.gif);">
   <li>Dummy Link</li>
</ul>

scheint nicht zu funkitonieren.

Besten Gruß

  1. puts "Hallo " + gets.chomp + "."

    ?> Nems
    => Hallo Nems.

    Ist es möglich vor in einer <li> ......</li> ein Icon z.B. Pfeil
    per CSS einbinden.

    Wenn dies eine Frage war, ja.

    Mit
    <ul style="list-style-image: url(../img/arrow_straight.gif);">
       <li>Dummy Link</li>
    </ul>

    scheint nicht zu funkitonieren.

    Existiert das Bild auch in dem Ordner, in dem du es vermutest? Zumindest die Syntax ist korrekt.

    Einen schönen Donnerstag noch.

    Gruß, Ashura

    --
    [remote-signature:http://download.noctus.net/scripts/self_sig.php]
    1. Hi Ashura,

      Wenn dies eine Frage war, ja.

      Sorry, das sollte iene Frage sein. Tipfehler ;-)

      Existiert das Bild auch in dem Ordner, in dem du es vermutest? Zumindest die Syntax ist korrekt.

      Ja, das Bild ist da.

      Gruß

      Nems

      1. Hallo,

        kleine Zwischenfrage, kann ich auch etwas anderes nehmen? Also anstatt des Bildes ein ASCII-Zeichen oder so?

        Mit freundlichem Gruß
        Micha

        1. Hi derletztekick,

          kleine Zwischenfrage, kann ich auch etwas anderes nehmen? Also anstatt des Bildes ein ASCII-Zeichen oder so?

          Dann hieße es wohl list-style-character statt list-style-image.

          Mit :before sollte da was zu machen sein (bei UAs, die das verstehen).

          Gruß,
          Gunnar

          --
          „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
          1. Hallo,

            Danke Euch beiden, leider kann es der IE ja noch nicht - Schade, aber trotzdem Danke!

            Mit freundlichem Gruß
            Micha

            1. puts "Hallo " + gets.chomp + "."

              ?> derletztekick
              => Hallo derletztekick.

              Danke Euch beiden, leider kann es der IE ja noch nicht - Schade, aber trotzdem Danke!

              Das ist doch hoffentlich kein Grund für dich, auf diesen Effekt zu verzichten, oder?

              Verpasse dem IE mittels Hack einen Standard-List-Style-Type und gönne Nutzern von Browsern die Vorzüge ihrer Überzeugung.

              Einen schönen Donnerstag noch.

              Gruß, Ashura

              --
              [remote-signature:http://download.noctus.net/scripts/self_sig.php]
              1. Hallo Ashura,

                Das ist doch hoffentlich kein Grund für dich, auf diesen Effekt zu verzichten, oder?

                Ich wollte zwischen einzelnen Listelementen ein | haben. Die Liste ist mit display:inline; schon in der horizontalen...

                Ich könnte hinter jeden Link einfach ein | setzen... Alternativ wäre natürelich auch ein Bild mit einem Strich möglich...

                Verpasse dem IE mittels Hack einen Standard-List-Style-Type

                Mit JavaScript oder schwebte Dir da was eleganteres vor, wobei ich auch eine JS Lösung gut finden würde ;-)) ?

                gönne Nutzern von Browsern die Vorzüge ihrer Überzeugung.

                Das Totschlagargument^^

                Mit freundlichem Gruß
                Micha

                1. puts "Hallo " + gets.chomp + "."

                  ?> derletztekick
                  => Hallo derletztekick.

                  Ich könnte hinter jeden Link einfach ein | setzen... Alternativ wäre natürelich auch ein Bild mit einem Strich möglich...

                  Verpasse dem IE mittels Hack einen Standard-List-Style-Type
                  Mit JavaScript oder schwebte Dir da was eleganteres vor, wobei ich auch eine JS Lösung gut finden würde ;-)) ?

                  Es gibt aus meiner Sicht 3 clientseiten Möglichkeiten:

                  :before, JavaScript oder ein border-Spielchen:

                  li{border-left:2px solid #000;}  
                  li:first-child{border-left:none;border-right:2px solid #000;}
                  

                  Aber, rate mal, wer's wieder nicht versteht. ;-)

                  gönne Nutzern von Browsern die Vorzüge ihrer Überzeugung.
                  Das Totschlagargument^^

                  Ist doch wahr. :-)

                  Einen schönen Donnerstag noch.

                  Gruß, Ashura

                  --
                  [remote-signature:http://download.noctus.net/scripts/self_sig.php]
                  1. puts "Hallo " + gets.chomp + "."

                    ?>
                    => Hallo.

                    li{border-left:2px solid #000;}

                    li:first-child{border-left:none;border-right:2px solid #000;}

                      
                    Gna, das border-right muss weg...  
                      
                      
                    Einen schönen Donnerstag noch.  
                      
                    Gruß, Ashura  
                    
                    -- 
                    [remote-signature:http://download.noctus.net/scripts/self\_sig.php]
                    
                  2. Hallo Ashura,

                    Es gibt aus meiner Sicht 3 clientseiten Möglichkeiten:

                    :before, JavaScript oder ein border-Spielchen:

                    li{border-left:2px solid #000;}

                    li:first-child{border-left:none;border-right:2px solid #000;}

                    
                    >   
                    > Aber, rate mal, wer's wieder nicht versteht. ;-)  
                      
                    Der, den wir damit "beglücken" wolltern?  
                      
                      
                    Mit freundlichem Gruß  
                    Micha
                    
                    1. puts "Hallo " + gets.chomp + "."

                      ?> derletztekick
                      => Hallo derletztekick.

                      Aber, rate mal, wer's wieder nicht versteht. ;-)

                      Der, den wir damit "beglücken" wolltern?

                      Habe ich je behauptet, dass dieser optische Leckerbissen für ihn sein soll? ;-)

                      Einen schönen Donnerstag noch.

                      Gruß, Ashura

                      --
                      [remote-signature:http://download.noctus.net/scripts/self_sig.php]
                      1. Hallo Ashura,

                        Habe ich je behauptet, dass dieser optische Leckerbissen für ihn sein soll? ;-)

                        Nein, natürlich nicht, wie konnte ich in meinem Wahn auch nur soewas denken und gar aussprechen^^

                        Es ist aber schön, das wir somit einen WorkAround für Firefox gefunden haben ;-))

                        Mit freundlichem Gruß
                        Micha

                      2. Hi Ashura,

                        Habe ich je behauptet, dass dieser optische Leckerbissen für ihn sein soll? ;-)

                        Wenn das

                        Ich wollte zwischen einzelnen Listelementen ein | haben.

                        für eine Navigationsliste sein soll, dann nix „Leckerbissen“:

                        „10.5 Bis Benutzeragenten (einschließlich assistiver Technologien) beieinanderliegende Links getrennt darstellen, platzieren Sie druckbare Zeichen, die nicht zu einem Link gehören, umgeben von Leerzeichen, zwischen Links.“ [WCAG10]

                        Gruß,
                        Gunnar

                        --
                        „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
                        1. puts "Hallo " + gets.chomp + "."

                          ?> Gunnar
                          => Hallo Gunnar.

                          „10.5 Bis Benutzeragenten (einschließlich assistiver Technologien) beieinanderliegende Links getrennt darstellen, platzieren Sie druckbare Zeichen, die nicht zu einem Link gehören, umgeben von Leerzeichen, zwischen Links.“ [WCAG10]

                          Denke von mir aus, was du möchtest, aber: Wie?
                          Ich habe mir den Absatz ein paar mal durchgelesen, doch nicht verstanden, was der Text (und damit auch du) mir damit sagen will(st).

                          Einen schönen Donnerstag noch.

                          Gruß, Ashura

                          --
                          [remote-signature:http://download.noctus.net/scripts/self_sig.php]
                          1. Hi Ashura,

                            „[…] platzieren Sie druckbare Zeichen, die nicht zu einem Link gehören, umgeben von Leerzeichen, zwischen Links.“

                            So: foo | bar | baz (nicht so: foo bar baz).

                            Gruß,
                            Gunnar

                            --
                            „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
                            1. puts "Hallo " + gets.chomp + "."

                              ?> Gunnar
                              => Hallo Gunnar.

                              „[…] platzieren Sie druckbare Zeichen, die nicht zu einem Link gehören, umgeben von Leerzeichen, zwischen Links.“

                              Aha, jetzt. Mein Verständnisproblem lag bei Sie <-> sie...

                              So: foo | bar | baz [...]

                              Also wird das nicht wie folgt vorgelesen?
                              foo, vertical-line, bar, vertical-line, baz

                              (Ich weiß, ich muss mir endlich mal einen richtigen Screenreader zulegen.)

                              Einen schönen Donnerstag noch.

                              Gruß, Ashura

                              --
                              [remote-signature:http://download.noctus.net/scripts/self_sig.php]
                              1. Hi,

                                Mein Verständnisproblem lag bei Sie <-> sie...

                                wieder ein Grund für ordentliche Groß- und Kleinschreibung. helft den armen vögeln ... der gefangene floh ... er hat liebe genossen ... wäre er doch nur dichter ... sie konnte gut blasen und glieder behandeln ... die nackte sucht zu quälen ... die spinnen, die robben ... und ich werde mich jetzt brüsten und anderem zuwenden :-)

                                Chea "zu tausenden standen sie an den hängen und pisten" tah, ein "s" nachreichend *g*

                                --
                                X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
                                X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
                                X-Will-Answer-Email: No
                                X-Please-Search-Archive-First: Absolutely Yes
                                1. puts "Hallo " + gets.chomp + "."

                                  ?> Cheatah
                                  => Hallo Cheatah.

                                  Mein Verständnisproblem lag bei Sie <-> sie...

                                  wieder ein Grund für ordentliche Groß- und Kleinschreibung. helft den armen vögeln ... der gefangene floh ... er hat liebe genossen ... wäre er doch nur dichter ... sie konnte gut blasen und glieder behandeln ... die nackte sucht zu quälen ... die spinnen, die robben ... und ich werde mich jetzt brüsten und anderem zuwenden :-)

                                  Chea "zu tausenden standen sie an den hängen und pisten" tah, ein "s" nachreichend *g*

                                  *prust* Ich kann nicht mehr... *g*

                                  Einen schönen Donnerstag noch.

                                  Gruß, Ashura

                                  --
                                  Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
                                  30 Days to becoming an Opera8 Lover -- Opera 8.02 mit Bittorent-Unterstützung
                                  Meine Browser: Opera 8.01, der Vorreiter | Firefox 1.0.4 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0
                                  [Deshalb frei! - Argumente pro freie Software]
                        2. Hallo Gunnar,

                          Ich wollte zwischen einzelnen Listelementen ein | haben.
                          für eine Navigationsliste sein soll, dann nix „Leckerbissen“:

                          Falsch formuliert, ich suche _als_ Listensymbol ein |. Dazwischen sind keine Leerzeichen, sondern Padding's (<-- schreibt man das so?)

                          Mit freundlichem Gruß
                          Micha

                          1. Hi derletztekick,

                            Falsch formuliert, ich suche _als_ Listensymbol ein |. Dazwischen sind keine Leerzeichen, sondern Padding's (<-- schreibt man das so?)

                            Wenn man unter Apostrophitis leidet ja.

                            Ob der Leerraum nun durch Leerzeichen oder padding erzeugt wird, sieht man ihm nicht an.

                            Gruß,
                            Gunnar

                            --
                            „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
                            1. Hallo

                              Ob der Leerraum nun durch Leerzeichen oder padding erzeugt wird, sieht man ihm nicht an.

                              Außer, man markiert den Text, dann sieht man den Unterschied sehr wohl. :-)

                              Tschö, Auge

                              --
                              Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
                              (Victor Hugo)
                              Veranstaltungsdatenbank Vdb 0.1
                            2. Hallo Gunnar,

                              Falsch formuliert, ich suche _als_ Listensymbol ein |. Dazwischen sind keine Leerzeichen, sondern Padding's (<-- schreibt man das so?)

                              Wenn man unter Apostrophitis leidet ja.

                              Gut, dann habe ich den Zwischenraum mit Hilfe des Innenabstandes (padding) optisch vergrößert.

                              Ob der Leerraum nun durch Leerzeichen oder padding erzeugt wird, sieht man ihm nicht an.

                              Worauf Du letztlich hinaus willst, ist mir noch etwas schleierhaft. Ja, mag sein, das man das nicht sieht. Aber ob einer eine Liste oder eine Tabelle nimmt für sein Menü, ist unter Umständen optisch auch nicht zu erkennen...

                              Mit freundlichem Gruß
                              Micha

                              1. Hi derletztekick,

                                Ob der Leerraum nun durch Leerzeichen oder padding erzeugt wird, sieht man ihm nicht an.
                                Worauf Du letztlich hinaus willst, ist mir noch etwas schleierhaft.

                                Dass die Existenz des Leerraums wichtiger ist als die Umstände seiner Genesis.

                                Aber ob einer eine Liste oder eine Tabelle nimmt für sein Menü, ist unter Umständen optisch auch nicht zu erkennen...

                                Ähm, ja. Das bleibt aber unter uns! ;-)

                                Gruß,
                                Gunnar

                                --
                                „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
                                1. Hallo,

                                  Dass die Existenz des Leerraums wichtiger ist als die Umstände seiner Genesis.

                                  Es ist ja kein Leerraum, es ist ein definierter Abstand... Ohne das mit Dir vertiefen zu Wollen, das Du eine Lösung wie die nicht gut findest, habe ich schon rausgelesen.

                                  <ul>
                                  <li><a href="seite1.html">Unterseite 1</a> |</li>
                                  <li><a href="seite2.html">Unterseite 2</a> |</li>
                                  ...
                                  </ul>

                                  Das mit :bevor hat leider den Nachteil, das es noch nicht in allen Browsern geht. Wie würdest Du es denn lösen? Die Antworten von Ashura waren ja auch nicht so nach Deinem Geschmack...

                                  Mit freundlichem Gruß
                                  Micha

                                  1. Hi derletztekick,

                                    das Du eine Lösung wie die nicht gut findest, habe ich schon rausgelesen.

                                    Da hast du etwas rausgelesen, was gar nicht drin war.

                                    <ul>
                                    <li><a href="seite1.html">Unterseite 1</a> |</li>
                                    <li><a href="seite2.html">Unterseite 2</a> |</li>
                                    ...
                                    </ul>
                                    Wie würdest Du es denn lösen?

                                    So z.B.

                                    Gruß,
                                    Gunnar

                                    --
                                    „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
                        3. Hi,

                          „10.5 Bis Benutzeragenten (einschließlich assistiver Technologien) beieinanderliegende Links getrennt darstellen, platzieren Sie druckbare Zeichen, die nicht zu einem Link gehören, umgeben von Leerzeichen, zwischen Links.“

                          das "bis" würde ich übrigens mittlerweile als gegeben ansehen. Diejenigen, die den IE einsetzen, sind zwar durchaus einer (von Microsoft entwickelten) Behinderung erlegen, aber sie sind nur schwerlich von dem Grund der Barrierefreiheitsgrundsätze betroffen. Schließt man Netscape 4 von CSS aus, was ich empfehle, ist der IE aber der einzige mir bekannte graphische User-Agent, bei dem das oben angesprochene Problem vorliegt. Damit genügt meiner Ansicht nach eine Lösung für moderne Browser sowie ein Sichttest im IE; obiger Punkt darf überlesen werden.

                          Cheatah

                          --
                          X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
                          X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
                          X-Will-Answer-Email: No
                          X-Please-Search-Archive-First: Absolutely Yes
                        4. Hi,

                          „10.5 Bis Benutzeragenten (einschließlich assistiver Technologien) beieinanderliegende Links getrennt darstellen, platzieren Sie druckbare Zeichen, die nicht zu einem Link gehören, umgeben von Leerzeichen, zwischen Links.“ [WCAG10]

                          Das gilt für Links allgemein. Aber Listenpunkten trennen die Links bereits ausreichend, so daß der Trennstrich hier wirklich nur der Optik dienen muß.

                          freundliche Grüße
                          Ingo

        2. puts "Hallo " + gets.chomp + "."

          ?> derletztekick
          => Hallo derletztekick.

          kleine Zwischenfrage, kann ich auch etwas anderes nehmen? Also anstatt des Bildes ein ASCII-Zeichen oder so?

          Ich glaube nicht, dass dies ohne :before{content:"";} möglich ist.

          Einen schönen Donnerstag noch.

          Gruß, Ashura

          --
          [remote-signature:http://download.noctus.net/scripts/self_sig.php]
          1. Hi,

            sorry die Frage, aber was bedeutet das in diesem Zusammenhang?

            :before{content:"";}

            Hättest du evtl. einen Link wo man darüber etwas lesen kann oder
            einfach eine Erklärung.

            Gruß

            Nems

            1. Hallo,

              Hättest du evtl. einen Link wo man darüber etwas lesen kann oder

              css4you Inhalt

              Mit freundlichem Gruß
              Micha

            2. puts "Hallo " + gets.chomp + "."

              ?> Nems
              => Hallo Nems.

              sorry die Frage, aber was bedeutet das in diesem Zusammenhang?

              :before{content:"";}

              Das ist eine Kombination aus dem Pseudoselektor :before und der temporären Inhalt generierenden Eigenschaft content.

              Einen schönen Donnerstag noch.

              Gruß, Ashura

              --
              [remote-signature:http://download.noctus.net/scripts/self_sig.php]
            3. Hi Nems,

              Hättest du evtl. einen Link

              SELFHTML ist immer eine gute Adresse: :before

              Gruß,
              Gunnar

              --
              „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
  2. Moin!

    Ist es möglich vor in einer <li> ......</li> ein Icon z.B. Pfeil
    per CSS einbinden.

    Im Grunde schon.

    Mit
    <ul style="list-style-image: url(../img/arrow_straight.gif);">
       <li>Dummy Link</li>
    </ul>

    scheint nicht zu funkitonieren.

    Das hängt vom Browser ab.

    Eigentlich alle Browser sind in der Lage, das Bulletzeichen verschwinden zu lassen.

    Die Bulletgrafik kann man dann als Hintergrundbild einbinden. Mit no-repeat und Positionierung sowie etwas padding kann man eigentlich recht problemlos grafische Bulletzeichen herstellen.

    • Sven Rautenberg