List-Style-Type

[TS]

Hello,

leider bin ich zu blöde den Text aus dem Wiki zu verstehen:

Mit CSS3 wurden eine Vielzahl neuer Aufzählungszeichen bzw. Nummerierungen definiert. Außerdem können durch die Angabe einer Zeichenkette, etwa list-style-type: "P"; oder list-style-type: "Punkt"; auch eigene Aufzählungszeichen festgelegt werden.

    für ungeordnete Listen
        box, Zeichen 25FD (◽)
        check, Zeichen 2713 (✓)
        diamond, Zeichen 25C6 (◆)
        dash, Zeichen 2014 (—)

Ich würde gerne als Aufzählungszeichen das Box-Symbol haben, schön groß zum abhaken auf der ausgedruckten Kontrollliste mit dem Stift, also ganz unelektronisch.

Leider bekomm eich meinen ULs das Box-Symbol nicht beigebogen.

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@TS

leider bin ich zu blöde den Text aus dem Wiki zu verstehen:

Leider hast du die Stelle im Wiki nicht gezeigt. Vielleicht hat der Schreiberling ja auch die Spec nicht verstannden und was Blödes ins Wiki geschrieben.

Mit CSS3 wurden eine Vielzahl neuer Aufzählungszeichen bzw. Nummerierungen definiert. Außerdem können durch die Angabe einer Zeichenkette, etwa list-style-type: "P"; oder list-style-type: "Punkt"; auch eigene Aufzählungszeichen festgelegt werden.

Ja. Und wo ist dein Problem damit?

list-style-type: '◽ ' sollte ebenso funktionieren wie list-style-type: '\25FD ' (man beachte die 2 Leerzeichen).

für ungeordnete Listen
box, Zeichen 25FD (◽)
check, Zeichen 2713 (✓)
diamond, Zeichen 25C6 (◆)
dash, Zeichen 2014 (—)

Nichts davon steht in der Spec. Nichts davon funktioniert in Firefox oder Chrome.

Du kannst aber mit einer At-Regel deinen eigenen Aufzählungs- bzw. Nummerierungsstil festlegen:

@counter-style box
{
	system: cyclic;
	symbols: '\25FD ';
	suffix: ' ';
}

ul
{
	list-style-type: box;
}

LLAP 🖖

[TS]

Hello,

Leider hast du die Stelle im Wiki nicht gezeigt. Vielleicht hat der Schreiberling ja auch die Spec nicht verstannden und was Blödes ins Wiki geschrieben.

siehe hier

[...]
Danke. Das sollte auch so ins Wiki, wenn ich es nicht nur übersehen habe.
Komme jetzt aber gerade selber nicht dazu...

Wie kann ich jetzt nur das List-Style-Symbol etwas vergrößern gegenüber dem nachfolgenden Text?

Liebe Grüße
Tom S.

[Matthias Apsel]

Hallo TS,

Wie kann ich jetzt nur das List-Style-Symbol etwas vergrößern gegenüber dem nachfolgenden Text?

Wenn du keine Pseudoelemente verwenden möchtest, könntest du

li::-moz-list-bullet {
  /* */
}

verwenden

Diese Funktion entspricht nicht dem Standard und ist nicht Teil der Standardisierung. Diese Funktion darf nicht in Webseiten, die via das Internet zugänglich sind, benutzt werden: Sie wird nicht für alle Nutzer funktionieren. Es kann zu umfangreichen Inkompatibilitäten zwischen verschiedenen Implementierungen kommen und die Funktionsweise oder Eigenschaften könnten in der Zukunft verändert werden.

Bis demnächst
Matthias

[TS]

Hello,

Wie kann ich jetzt nur das List-Style-Symbol etwas vergrößern gegenüber dem nachfolgenden Text?

Wenn du keine Pseudoelemente verwenden möchtest, könntest du

li::-moz-list-bullet {
  /* */
}

verwenden

Danke. Aber das lasse ich lieber. Dann werde ich lieber ein Image vorlegen. Aber da das Ganze die Güte des Inhaltes der ca. 180 Seiten, die ich heute noch aus dem Draft-Mode in gültiges (passives) HTML überführen muss nicht steigert, schiebe ich es jetzt vor mir her für die Umsetzung mit einer aktiven Lösung (CMS, Datenbank-Backend).

Bis demnächst ...
und
liebe Grüße

Tom S.

[marctrix]

Hej TS,

Danke. Aber das lasse ich lieber. Dann werde ich lieber ein Image vorlegen. Aber da das Ganze die Güte des Inhaltes der ca. 180 Seiten, die ich heute noch aus dem Draft-Mode in gültiges (passives) HTML überführen muss nicht steigert, schiebe ich es jetzt vor mir her für die Umsetzung mit einer aktiven Lösung (CMS, Datenbank-Backend).

Mach doch einfach so was für Deine private Checkliste:

ul {
  list-style: none;
}
li::before {
  content: '';
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background: rgba(0, 0, 0, .25);
  position: relative;
  left: -1.5em;
  top: 0;
}

Nicht ausprobiert, einfach so runtergeschrieben. Wenn es nicht klappt, bitte noch mal melden.

Entfernt die vorhandenen Aufzählungszeichen und setzt statt dessen ein grau hinterlegtes Pseudoelement vor die Listeneinträge.

Kann man mit text-indent usw sicher noch aufhübschen, aber dann muss man das wirklich ausprobieren. So blind positionieren ist nichts für mich.

Marc

[Matthias Scharwies]

Servus!

@@TS

leider bin ich zu blöde den Text aus dem Wiki zu verstehen:

@TS fett oben über der Stelle ist die Browserunterstützung, in der alle Felder leer sind. Also solltest du schon vorher wissen, dass dieser Vorschlag wohl nicht implementiert wurde.

Leider hast du die Stelle im Wiki nicht gezeigt.

@Gunnar Bittersmann Ich hab' einfach list-style-type eingegeben.

Vielleicht hat der Schreiberling ja auch die Spec nicht verstannden und was Blödes ins Wiki geschrieben.

Das war @Matthias Apsel am 30.12.2013

Mit CSS3 wurden eine Vielzahl neuer Aufzählungszeichen bzw. Nummerierungen definiert. Außerdem können durch die Angabe einer Zeichenkette, etwa list-style-type: "P"; oder list-style-type: "Punkt"; auch eigene Aufzählungszeichen festgelegt werden.

Ja. Und wo ist dein Problem damit?

list-style-type: '◽ ' sollte ebenso funktionieren wie list-style-type: '\25FD ' (man beachte die 2 Leerzeichen).

Sowohl das im Wiki genannte Beispiel als auch die von dir genannten Beispiele funktionieren nur im Firefox, nicht in Chrome und in IE11 (mehr hab ich nicht getestet).

für ungeordnete Listen
box, Zeichen 25FD (◽)
check, Zeichen 2713 (✓)
diamond, Zeichen 25C6 (◆)
dash, Zeichen 2014 (—)

Nichts davon steht in der Spec. Nichts davon funktioniert in Firefox oder Chrome.

Nichts anderes hat das Wiki behauptet.

Du kannst aber mit einer At-Regel deinen eigenen Aufzählungs- bzw. Nummerierungsstil festlegen:

@counter-style box
{
	system: cyclic;
	symbols: '\25FD ';
	suffix: ' ';
}

ul
{
	list-style-type: box;
}

Alternativ list-style-type: none; und ein Pseudoelement davor mit dem gewünschten Inhalt mittels content.

Herzliche Grüße

Matthias Scharwies

[TS]

Hello,

Alternativ list-style-type: none; und ein Pseudoelement davor mit dem gewünschten Inhalt mittels content.

Ist mir jetzt zuviel Stress.

War auch nicht böse gemeint;
ich hatte nur gehofft, auch mal das gedeckte Silbertablett entdecken zu dürfen ;-O

Liebe Grüße
Tom S.

[marctrix]

Hej TS,

Hello,

Alternativ list-style-type: none; und ein Pseudoelement davor mit dem gewünschten Inhalt mittels content.

Ist mir jetzt zuviel Stress.

War auch nicht böse gemeint;
ich hatte nur gehofft, auch mal das gedeckte Silbertablett entdecken zu dürfen ;-O

Bittesehr: Silbertablett 😉

Marc

[Gunnar Bittersmann]

@@Matthias Scharwies

fett oben über der Stelle ist die Browserunterstützung, in der alle Felder leer sind. Also solltest du schon vorher wissen, dass dieser Vorschlag wohl nicht implementiert wurde.

Was hat ein Vorschlag, der nie implementiert wurde und der in keiner aktuellen Spec (weder WD noch ED) zu finden ist, in der SELFHTML-Doku zu suchen?

Sowohl das im Wiki genannte Beispiel als auch die von dir genannten Beispiele funktionieren nur im Firefox, nicht in Chrome und in IE11 (mehr hab ich nicht getestet).

Yep. Was angesichts der Tatsache, dass Tab Atkins von Google Autor der entsprechenden CSS-Module ist, schon bemerkenswert ist.

Alternativ list-style-type: none; und ein Pseudoelement davor mit dem gewünschten Inhalt mittels content.

Solange die schöne™ Lösung nicht browserübergreifend zur Verfügung steht, ist dieser Hack das Mittel der Wahl.

LLAP 🖖

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

fett oben über der Stelle ist die Browserunterstützung, in der alle Felder leer sind. Also solltest du schon vorher wissen, dass dieser Vorschlag wohl nicht implementiert wurde.

Was hat ein Vorschlag, der nie implementiert wurde und der in keiner aktuellen Spec (weder WD noch ED) zu finden ist, in der SELFHTML-Doku zu suchen?

Ich glaub, dass hier die Betonung auf ... in keiner aktuellen Spec ... liegen müsste - und da sind wir wieder bei der alten Geschichte - wer pflegt die Seiten der MDN und vor alle unsere Inhalte im Wiki? Es wäre gut, wenn dort jeder, der einen Fehler findet, zumindest ein {{ToDo}} setzen sollte.

Ist jetzt erledigt. Was sowieso gefehlt hatte war ein link auf das bestehende Tutorial:

• CSS/Anwendung und Praxis/Listen mit CSS gestalten

in dem die Vorgehensweise mit lits-style-type:none; und Pseudoelement li::before gezeigt wird:

li {
  list-style-type: none;
}
li::before  {
  content: "♥ ";    
  color: red;
  font-size: 1.5em;
}

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

und da sind wir wieder bei der alten Geschichte - wer pflegt die Seiten der MDN und vor alle unsere Inhalte im Wiki?

Richtig, die alte Geschichte: meine Kritik am Wiki. MDN hat die (Wo)manpower, seine Seiten zu pflegen, SELFHTML hat sie nicht.

Deshalb ist im SELFHTML-Wiki einiges veraltet oder falsch und es ist nicht absehbar, dass sich das zukünftig bessert. Flickste ein Loch, tun sich zwei andere auf …

LLAP 🖖

[Matthias Scharwies]

Servus!

Richtig, die alte Geschichte: meine Kritik am Wiki. MDN hat die (Wo)manpower, seine Seiten zu pflegen, SELFHTML hat sie nicht.

Aber selbst bei der MDN sieht man, dass die Bestände nicht gepflegt werden. Viele der Artikel wurden bei der Implementierung neuer Eigenschaften geschrieben, wobei der erklärende Teil oft direkt aus der Spec übernommen wurde. Die damals verwendeten vendor-prefixe stehen dann 3-4 Jahre später immer noch drin - schade.

Ein Beispiel fällt mir jetzt aber grad nicht ein - hab aber mindestens 2 in den letzten Wochen gesehen.

Herzliche Grüße

Matthias Scharwies

[marctrix]

Hej Gunnar,

@@Matthias Scharwies

Deshalb ist im SELFHTML-Wiki einiges veraltet oder falsch und es ist nicht absehbar, dass sich das zukünftig bessert. Flickste ein Loch, tun sich zwei andere auf …

Das ist Unsinn. Es tun sich keine zwei andere auf, wenn man eines flickt. Wenn ich eines flicke, ist es dicht. Sonst passiert nichts.

Deswegen wäre es schön, wenn das viele machen würde. 😉

Marc

[Gunnar Bittersmann]

@@marctrix

Flickste ein Loch, tun sich zwei andere auf …

Das ist Unsinn.

Nein. Nicht so wie ich es meinte: nicht kausal, sondern temporär.

Es tun sich keine zwei andere auf, wenn man eines flickt.

Doch, wenn „wenn“ hier nicht für if, sondern für when steht: In der Zeit, wo du ein Loch flickst, tun sich zwei andere auf.

Ganz einfach weil sich die Webtechnologie so rasant weiterentwicklet, dass das SELFHTML-Wiki da nicht mithalten kann.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

Flickste ein Loch, tun sich zwei andere auf …

Das ist Unsinn.

Nein. Nicht so wie ich es meinte: nicht kausal, sondern temporär.

OK, aber auch dagegen hilft mein Vorschlag, sich rege zu beteiligen. Obwohl ich durchaus verstehen kann, wenn Du in Frage stellst, dass das Wiki noch Sinn. Ich sehe es trotzdem anders. Insbesondere dank angebundenem Forum bringt es durchaus was. Wie hier bereits gesagt wurde, findet man auch auf MDN veraltete Informationen.

Wichtig ist daher prominent das letzte Bearbeitung-Datum eines Beitrages anzuzeigen direkt in der Nähe der Überschrift am besten!

Marc

[Matthias Apsel]

Hallo marctrix,

Wichtig ist daher prominent das letzte Bearbeitung-Datum eines Beitrages anzuzeigen direkt in der Nähe der Überschrift am besten!

Gute Idee.

Mit einem kleinen JavaScript sollte das machbar sein.

Schade, dass das Markup nicht so gut ist.

<li id="footer-info-lastmod"> Diese Seite wurde zuletzt am 30. August 2017 um 12:28 Uhr geändert.</li>

Bis demnächst
Matthias

[marctrix]

Hej Matthias,

Wichtig ist daher prominent das letzte Bearbeitung-Datum eines Beitrages anzuzeigen direkt in der Nähe der Überschrift am besten!

Gute Idee.

Mit einem kleinen JavaScript sollte das machbar sein.

Schade, dass das Markup nicht so gut ist.

<li id="footer-info-lastmod"> Diese Seite wurde zuletzt am 30. August 2017 um 12:28 Uhr geändert.</li>

Ah - wieder was übersehen. Aber gut, dass es schon mal da ist und im Footer könnte man eigentlich auch mal gucken…

Marc

[TS]

Hello,

Wichtig ist daher prominent das letzte Bearbeitung-Datum eines Beitrages anzuzeigen direkt in der Nähe der Überschrift am besten!

Diese Forderung mag ich ich mit meiner zarten Stimme voll unterstützen.
Und bitte auch den letzten Bearbeiter anzeigen.

Liebe Grüße
Tom S.

[Matthias Apsel]

Hallo TS,

Und bitte auch den letzten Bearbeiter anzeigen.

Warum wäre das für dich wichtig?

Bis demnächst
Matthias

[TS]

Hello,

Und bitte auch den letzten Bearbeiter anzeigen. Warum wäre das für dich wichtig?

Damit ich seine abweichenden Ideen erst freundlichst direkt mit ihm/ihr diskutieren kann, bevor ich sie arrogant mit meinen überschreibe...

Liebe Grüße
Tom S.

[Matthias Apsel]

Hallo TS,

Damit ich seine abweichenden Ideen erst freundlichst direkt mit ihm/ihr diskutieren kann, bevor ich sie arrogant mit meinen überschreibe...

Wenn du das planst, schaust du ohnehin in die Versionsgeschichte. Ich denke, für den Leser ist die Info, wer den Artikel zuletzt angefasst hat, nicht wichtig. Zumal die letzte Änderung auch nur die Korrektur eines Rechtschräibfehlers sein kann.

Bis demnächst
Matthias

[Tabellenkalk]

Hallo,

Nein. Nicht so wie ich es meinte: nicht kausal, sondern temporär.

Na, wenn's nur temporär ist, das geht vorüber…

Gruß
Kalk

[TS]

Hello,

• CSS/Anwendung und Praxis/Listen mit CSS gestalten

in dem die Vorgehensweise mit lits-style-type:none; und Pseudoelement li::before gezeigt wird:

li {
  list-style-type: none;
}
li::before  {
  content: "♥ ";    
  color: red;
  font-size: 1.5em;
}

Danke, das hilft mir doch schon weiter... ;-)

Liebe Grüße
Tom S.