einzelne links in list mit pfeil statt bullet

[mihat]

Eine liste ist allgemein in CSS so formatiert:

/* Allgemeine Vorgaben */

ul,li { list-style: none;}

li { margin: 0.2em 0 0.2em 0%; font-size: 100%; font-weight: bold; }

li:before { content: '•'; padding-right: 0.5em; }
      
                  /* IE Hack */
      *+html li { list-style: disc; }

li:first-child{margin-top: 0.6em;}

/* Ende Allgemeine Vorgaben */

Mit dieser Formatierung sitzt vor jedem Listeneintrag ein Bullet. Nun hat es sich so ergeben, dass einige Listeneinträge Links auf eine weiterführende Seite darstellen, andere nicht.

Um die entsprechenden Einträge als Links erkennbar zu machen möchte ich möglichst nur das Bullet zu einen schrägen pfeil "↗" ändern, und hatte gehofft dies so realisieren zu können:

li:before a { content: '↗';  }

Nunja, blindes probiern führte auch nicht zum Ziel:
li:link { content: '↗';  }

Wenn ich oben in den allgemeinen Vorgaben '•' durch '↗' ersetze, dann geht das für *alle* li Elemente. Aber ich bekomme es eben nicht hin, dies selektiv nur für Links in Listen hinzubekommen.

Was mache ich falsch?

[Gunther]

Hi!

li:before a {content: '↗'; }
Was mache ich falsch?

Hier schon mal ein kleiner "Denkanstoß" vorab ...! ;-)

Gruß Gunther

[mihat]

Hier schon mal ein kleiner "Denkanstoß" vorab ...! ;-)

Ok, das stimmt natürlich, ich habe durch die gewählte methode versucht etwas auf das erste element (li) anzuwenden und als auswahlkriterium ein untergeordnetes versucht zu verwenden, also das kind verwandt um das elternelement zu gestalten. Das kann also so nicht gehen.

LEider ist es lange her, dass ich die seite erstellt habe, dass muß alles etwas aufgrfrischt werden. Ich muß vermutlich eine klasse bilden und diese selektiv auf die betreffenden listeneinträge anwenden ... aber nur auf diese.

bringt mich

.link li:before { content: '↗'; }

weiter?

[mihat]

bringt mich

.link li:before { content: '↗'; }

weiter?

Nein, denn so ist es richtig:

li.verweis:before { content: '↗'; }

("link" als klassenbezeichner habe ich lieber nicht genommen, weil es dies schon als pseudoklasse gibt und ich da nichts durcheinanderbringen will)

[mihat]

Wie man's macht, man macht es verkehrt, oder: Auch Fachleute können irren.

Die Ausgangsfrage ist ja gelöst und ich kann nicht erkennen warum man für ein *anderes Problem* zum gleichen Themenkreis ein Folgeposting hier erzwingen muss, aber bitte, wenn's dennoch der Antwortfindung dient:

In ul, li liste gibt es Listenpunkte, die im Gegensatz zu den übrigen Listenpunkten einen Link auf eine weiterführende Seite darstellen. Aus gestalterischen Gründen möchte ich den Textstil in beiden fällen gleich lassen. Dass einige Einträge Links darstellen möchte ich nur dadurch kenntlich machen, dass ich statt des vorangestellten '•' ein '↗' voranstelle.

Das Problem ist nun ein zweifaches:

1. sind beide Schriftzeichen (!) unterschiedlich groß, was die Einrückung des folgenden Textes unschön verändert.
2. interpretiert jeder Browser diesen Pfeil unterschiedlich lang was die unterschiedliche Texteinrückung endgültig komplett Browserabhängig macht.

Bislang umgehe ich diese Probleme mittels

li.verweis:after { content:'↗'; padding-left: 0.5em; }

ich belasse also vorne überall den Bullet und setze bei Listeneinträgen die Links darstellen den Pfeil hinter den Listeneintrag, wirklich nur ein "würgäraund" (und noch nichtmal IE getestet).

Vielleicht wäre es eine Alternative gleichgroße Grafiken statt der Schriftzeichen zu verwenden.

Gefragt sind hier also Hinweise und Tipps, was sich sonst noch als Lösung anbietet:
Gibt es eine Möglichkeit die Schriftzeichen zu einer gleichen Größe zu zwingen? Hm, ich müßte mal sehn, ob es die Zeichen in Monospaceschriften gibt. Könnte ich einen Monospaceschriftsatz nur für den Bullet und den Pfeil erzwingen?

[Gunther]

Hallo!

Die Ausgangsfrage ist ja gelöst und ich kann nicht erkennen warum man für ein *anderes Problem* zum gleichen Themenkreis ein Folgeposting hier erzwingen muss, aber bitte, wenn's dennoch der Antwortfindung dient:

Weil du dir damit u.a. einen Großteil deiner Erklärung hier hättest sparen können, und weil jeder Leser "die ganze Geschichte" im Überblick sieht. ;-)

In ul, li liste gibt es Listenpunkte, die im Gegensatz zu den übrigen Listenpunkten einen Link auf eine weiterführende Seite darstellen. Aus gestalterischen Gründen möchte ich den Textstil in beiden fällen gleich lassen. Dass einige Einträge Links darstellen möchte ich nur dadurch kenntlich machen, dass ich statt des vorangestellten '•' ein '↗' voranstelle.

Das Problem ist nun ein zweifaches:

1. sind beide Schriftzeichen (!) unterschiedlich groß, was die Einrückung des folgenden Textes unschön verändert.
2. interpretiert jeder Browser diesen Pfeil unterschiedlich lang was die unterschiedliche Texteinrückung endgültig komplett Browserabhängig macht.

Und was ist an Letzterem so "schlimm"? Webseiten sehen selten in allen Browsern gleich aus - müssen sie ja auch nicht.

IMHO "vermengst" du hier eh zwei verschiedene Sachen. Das eine sind Aufzählungszeichen und das andere Link-Kennzeichnungen.

Und entweder verwendest du generell Aufzählungszeichen oder nicht. Wenn ja, dann sollte aber auch jeder Listenpunkt (einer Ebene), dasselbe Aufzählungszeichen haben.

Das ist also IMHO völlig unabhängig von der Link-Kennzeichnung. Ob man diese nun vor oder hinter den Linktext setzt, ist IMHO eher eine Frage der persönlichen Vorliebe (persönlich bevorzuge ich dahinter). Links (interne/ externe) sollten sich aber ja eh generell durch entsprechendes Styling per CSS von anderem Text unterscheiden, und somit klar als solche (links) erkennbar sein.

Vielleicht wäre es eine Alternative gleichgroße Grafiken statt der Schriftzeichen zu verwenden.

Wie gesagt, ich sehe es nicht als entweder oder, sondern einmal gibt es Aufzählungszeichen und dann zusätzlich ggf. noch eine entsprechende Kennezichnung externer Links.

Gefragt sind hier also Hinweise und Tipps, was sich sonst noch als Lösung anbietet:
Gibt es eine Möglichkeit die Schriftzeichen zu einer gleichen Größe zu zwingen? Hm, ich müßte mal sehn, ob es die Zeichen in Monospaceschriften gibt. Könnte ich einen Monospaceschriftsatz nur für den Bullet und den Pfeil erzwingen?

Ja, warum denn nicht? Du definierst den "Content" doch bereits im CSS. Warum solltest du da keine entsprechenden Eigenschaften für die Schrift festlegen können!?

Gruß Gunther

[mihat]

2. interpretiert jeder Browser diesen Pfeil unterschiedlich lang was die unterschiedliche Texteinrückung endgültig komplett Browserabhängig macht.

Und was ist an Letzterem so "schlimm"? Webseiten sehen selten in allen Browsern gleich aus - müssen sie ja auch nicht.

Das wäre nicht das Problem. Sondern der Browserbedingte Unterschied der unterschiedlichen Einrückungen ;-)

IMHO "vermengst" du hier eh zwei verschiedene Sachen. Das eine sind Aufzählungszeichen und das andere Link-Kennzeichnungen.

Und entweder verwendest du generell Aufzählungszeichen oder nicht. Wenn ja, dann sollte aber auch jeder Listenpunkt (einer Ebene), dasselbe Aufzählungszeichen haben.

Siehst du, hier sind wir unterschiedlicher Ansicht. Auch wenn ich selbst auf Grund der Schwierigkeiten von meinem Ansatz nicht restlos überzeugt bin so mag ich ihn mit deiner Begrüdng alleine nicht ausschließen.

... Links (interne/ externe) sollten sich aber ja eh generell durch entsprechendes Styling per CSS von anderem Text unterscheiden, und somit klar als solche (links) erkennbar sein.

Das war die Regel, die immer wenige Anhänger findet. Gestehe mir bitte wenigstens zu, dass es auch vernüftige Ausnahmen geben kann.

...

Gibt es eine Möglichkeit die Schriftzeichen zu einer gleichen Größe zu zwingen? Hm, ich müßte mal sehn, ob es die Zeichen in Monospaceschriften gibt. Könnte ich einen Monospaceschriftsatz nur für den Bullet und den Pfeil erzwingen?

Ja, warum denn nicht? Du definierst den "Content" doch bereits im CSS. Warum solltest du da keine entsprechenden Eigenschaften für die Schrift festlegen können!?

Gruß Gunther

Gruß

Michael

[mihat]

...

Gibt es eine Möglichkeit die Schriftzeichen zu einer gleichen Größe zu zwingen? Hm, ich müßte mal sehn, ob es die Zeichen in Monospaceschriften gibt. Könnte ich einen Monospaceschriftsatz nur für den Bullet und den Pfeil erzwingen?

Ja, warum denn nicht? Du definierst den "Content" doch bereits im CSS. Warum solltest du da keine entsprechenden Eigenschaften für die Schrift festlegen können!?

Geht das nur mit monospace Schriften oder hättest du für die Größenanpassung noch was anderes auf Lager?

[mihat]

Größenanpassung noch was anderes auf Lager?

Betrachte dies als erledigt. Mit
li.verweis:before { content: '↗'; font-family: monospace; }
wurde das Problem schneller erschlagen als ich erwartet hatte. (das ist nun forne statt des bullet. Ist so erstmal ok, ich brüte da noch ob ich das mit den von dir kritisierten unterschiedlichen bullets lasse. Das gut ist dass ich ja jetzt erstmal weiß wie es geht ;-)

Bleibt ein weitere kosmetisches Problemchen.

li.verweis:before { ... mag wohl kein "font-weight:bold(er);"? Echt nicht? Ging auch mit nicht monospace Schriften nicht.

Hat nichts mit Bullet, nur mit ul,li zu tun:
Gleiches bei Mars- und Venuszeichen: ♂ ♀, wo das für mich eher ein Problem als bei dem Bullet/Pfeil ist. Diese beiden Zeichen bräuchte ich fett, geht aber nicht.

???

[mihat]

Hat nichts mit Bullet, nur mit ul,li zu tun:
Gleiches bei Mars- und Venuszeichen: ♂ ♀, wo das für mich eher ein Problem als bei dem Bullet/Pfeil ist. Diese beiden Zeichen bräuchte ich fett, geht aber nicht.

???

Zur Verdeutlichung habe ich hiermit dieses posting nun mit treffenderem Betreff nochmals gepostet. Gibt es keine Möglichkeit für die beiden Zeichen ♂ ♀ eine bold/bolder variante zu erhalten?

[Gunther]

Hi!

Zur Verdeutlichung habe ich hiermit dieses posting nun mit treffenderem Betreff nochmals gepostet.

Dafür gibt es keinen Grund (genauso wie für dein Doppelposting). ;-)

Gibt es keine Möglichkeit für die beiden Zeichen ♂ ♀ eine bold/bolder variante zu erhalten?

Also es gibt schon "bold" für diese Schriftzeichen, aber du "siehst" es wahrscheinlich nicht.
Zum einen ist das von der Schriftart abhängig (bei Arial bspw. besser zu "sehen", als bei Verdana), und zum anderen natürlich auch von der Schriftgröße.

Verwende mal Arial und mind. 72px! Dann setze font-weight: 900;.
Na? Unterschied bemerkt?

Wenn du die Zeichen also gerne "fetter" hättest, musst du entweder nach einer entsprechenden Schriftart suchen und diese per @font-face einbinden, oder du greifst auf Grafiken zurück.

Gruß Gunther

[mihat]

Hi nochmals.

Zur Verdeutlichung habe ich hiermit dieses posting nun mit treffenderem Betreff nochmals gepostet.

Dafür gibt es keinen Grund (genauso wie für dein Doppelposting). ;-)

Naja, den Betreff aussagekräftiger zu machen ist nicht "kein Grund". Ich hatte (vergebens) die Hoffung dass sich dadurch ausser einem fast allwissenden Forendauerläufer eventuell auch ein nur mit geeignetem Punktwissen ausgestatteter Durchschnittswebbastler angesprochen fühlen könnte. Der vorangehende Betreff war wenig informativ, wo ich die Antwort doch schon gestern wollte.

Zum einen ist das von der Schriftart abhängig (bei Arial bspw. besser zu "sehen", als bei Verdana), und zum anderen natürlich auch von der Schriftgröße.

Verwende mal Arial und mind. 72px! Dann setze font-weight: 900;.
Na? Unterschied bemerkt?

Nee, ich glaub dir das einfach (und teste das wenn ich mal begriffen habe was du mir mit .. sagen wolltest).

font-weight: 900 hatte ich testweise schon für die beiden betreffenden Zeichen als .class in css definiert, aber min 72px, never, ich meine wenn ich die Ausgabe von Opera-Dragonfly für die effektive px Größe der betreffenden Zeichen richtig verstehe, dann ist das eine 16px Schrift. Wenn das mit 16px nicht geht (warum denn, geht für alle anderen Zeichen ja auch) dann muß ich wirklich Graffffficccckkken basteln ;-) oder ein schnödes "Männer" bzw. "Frauen" zum besten geben, oje, wattn SCH..aade.

Danke für die Info.

Gruß Michael

[Matthias Apsel]

Om nah hoo pez nyeetz, mihat!

Zur Verdeutlichung habe ich hiermit dieses posting nun mit treffenderem Betreff nochmals gepostet.

Dafür gibt es keinen Grund (genauso wie für dein Doppelposting). ;-)

Naja, den Betreff aussagekräftiger zu machen ist nicht "kein Grund".

Doch, denn wie du selbst aussprobieren konntest, lassen sich Betreff und Themenfeld für jedes einzelne Posting ändern.

Matthias

[mihat]

Doch, denn wie du selbst aussprobieren konntest, lassen sich Betreff und Themenfeld für jedes einzelne Posting ändern.

Nicht nachträglich

[Der Martin]

Hi,

Doch, denn wie du selbst aussprobieren konntest, lassen sich Betreff und Themenfeld für jedes einzelne Posting ändern.
Nicht nachträglich

nein, aber für jedes neu geschriebene Posting im Thread. Sollte doch genügen, oder?
Nachträgliche Änderungen hätten immer latent die Gefahr, dass sie plötzlich nicht mehr zum Original-Kontext passen.

Ciao,
 Martin

[mihat]

nein, aber für jedes neu geschriebene Posting im Thread. Sollte doch genügen, oder?

eigentlich ja, es sei denn man versaut wie ich den Betreff, dann besteht eben Korrekturbedarf. Und das ist mir Grund genug. Auch wenn du das anders siehst.

Danke.

Michael

[michat]

Hi
...

Wenn du die Zeichen also gerne "fetter" hättest, musst du entweder nach einer entsprechenden Schriftart suchen und diese per @font-face einbinden, oder du greifst auf Grafiken zurück.

Ja, ich würde dieses Problem gern mit einer entsprechenden Schriftdatei lösen (und nur dann mit Graphiken, wenn ich die notwendige Suchorgie nicht in den Griff bekomme).

Eben lese ich bei heise
http://www.heise.de/newsticker/meldung/Webfonts-WOFF-endlich-verabschiedet-1769371.html
etwas über WOFF, kann aber hier in der Doku nichts dazu finden.

Grundsätzliche Frage dazu:

1. Muss ich einen derart eingebundenen Font auf meinen Webserver herunterladen um ihn einbinden zu können oder kann der auch durch Angabe einer entsprechenden URL direkt von Google oder wem auch immer nachgeladen werden?

2. Das größte Problem ist jedoch erstmal eine Schrift zu finden, die die beiden Zeichen (es geht nur um die zwei!) bereits in der gewünschten Größe wahrnehmbar fett darstellen (Arial tut das nicht). Wenn ich jede Schrift erst nach diesem Zeichen durchsuchen muss brauche ich ewig. Kann ich nicht irgendwie eine Testwebseite erstellen mit eine Liste von per @font-face eingebundenen/nachgeladenen Schriften und mir so die Suche vereinfachen (da kommt Frage 1 ins Spiel).

3. Wie ich bei heise lese kann der IE @font-face erst an V 9.0 . Gibt es würgaraunds für IE 7 und 8, die ich bei der Webseite noch unterstützen will?

Im Grunde scheint mir das erstellen einer Graphik letztlich einfacher, aber auch irgendwie unangemessener. Und je nach defacto Schriftgröße eventuell nicht immer passend?

bye

MH

[Matthias Apsel]

Om nah hoo pez nyeetz, michat!

Eben lese ich bei heise
http://www.heise.de/newsticker/meldung/Webfonts-WOFF-endlich-verabschiedet-1769371.html
etwas über WOFF, kann aber hier in der Doku nichts dazu finden.

http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Schriftformatierung/@font-face

Matthias

[michat]

Hi

...

http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Schriftformatierung/@font-face

Danke für den Link. Da kommt zwar etwas Licht ins Dunkel, aber soweit es meine Tests ergaben sind Mars- und Venuszeichen (♂ ♀) entweder in den getesteten Schriften nicht vorhanden und werden durch andere ersetzt, oder diese Zeichen werden grundsätzlich und bisher überall gertendürr erstellt und werden selbst im ultrabold Modus noch spaghettidürr dargestellt, warum auch immer. Das mit irgendeiner bestehenden Schrift hin zu bekommen kann ich vermutlich knicken. Also zwei .svg_s.

Hast du vielleicht auch nen link, was es beim Erstellen dieser svg_s  zu beachten ist, damit das anschließend passend zu einer in em angegebenen Schrift  skaliert wird? Ich weiß schon was SVG ist, aber irgendwie muß man sich doch verständigen was die Größe 1.0 oder 1em ist?

Gruß

MH