Icon in <li></li>
Nems
- html
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ß
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
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
Hallo,
kleine Zwischenfrage, kann ich auch etwas anderes nehmen? Also anstatt des Bildes ein ASCII-Zeichen oder so?
Mit freundlichem Gruß
Micha
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
Hallo,
Danke Euch beiden, leider kann es der IE ja noch nicht - Schade, aber trotzdem Danke!
Mit freundlichem Gruß
Micha
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
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
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
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]
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
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
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
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
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
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
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...
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
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*
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
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
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
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
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
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
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
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
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
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
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
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
Hallo,
Hättest du evtl. einen Link wo man darüber etwas lesen kann oder
Mit freundlichem Gruß
Micha
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
Hi Nems,
Hättest du evtl. einen Link
SELFHTML ist immer eine gute Adresse: :before
Gruß,
Gunnar
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.