ol-Liste, list-style-type

[ottogal]

Hallo in die Runde,
gibt es eine Möglichkeit, nur die Nummerierung bei einer ol-Liste fett zu bekommen (nicht aber die Inhalte der li-Elemente)?
Danke
ottogal

[Bobby]

Moin

gibt es eine Möglichkeit, nur die Nummerierung bei einer ol-Liste fett zu bekommen (nicht aber die Inhalte der li-Elemente)?

Rein mit CSS geht das m.W. nicht. Das geht nur mit einem entsprechenden Workaround. Aber dazu hilft google (erstes Ergebnis)

Gruß Bobby

[suit]

Rein mit CSS geht das m.W. nicht. Das geht nur mit einem entsprechenden Workaround. Aber dazu hilft google (erstes Ergebnis)

Viel zu lernen du noch hast, junger Padawan :p

.toc ol { counter-reset: item; }  
  
.toc li { list-style: none; }  
* html .toc li { list-style: decimal; }  
*:first-child+html .toc li { list-style: decimal; }  
  
.toc li:before {  
	content: counters(item, '.');  
	counter-increment: item;  
	padding-right: 0.75em;  
	font-weight: bold;  
}

<div class="toc">  
	<ol>  
		<li>foo</li>  
		<li>bar</li>  
		<li>baz  
			<ol>  
				<li>foo</li>  
				<li>bar</li>  
				<li>baz</li>  
			</ol>  
		</li>  
	</ol>  
</div>

Für den IE6 und 7 ist es übrigens nicht fett, aber das wird keinen umbringen - die beiden Browser sind sowieso fast tot ... oder eher untot.

[Bobby]

Moin

Viel zu lernen du noch hast, junger Padawan :p

Ähm, das von dir gezeigte ist aber auch _nur_ ein Workaround. Du sagst dem Listenelement das es durchgezählt werden soll diese Zählung und 1 Punkt angezeigt werden soll. Die eigentliche dezimale Formatierung und Nummerierung von OL-Listenelementen blendest du aber aus. Am Ende ist es auch nur ein Austauschen. Also bleibts bei meiner Aussage, das du auf die Zahlen des OL-Listenelementes keinen direkten Einfluß hast. Da war nix falsch dran.

Für den IE6 und 7 ist es übrigens nicht fett, aber das wird keinen umbringen - die beiden Browser sind sowieso fast tot ... oder eher untot.

IE6 und 7 zusammen mit 10-15 % untot? Ich weiß ja nicht!

Gruß Bobby

[suit]

Ähm, das von dir gezeigte ist aber auch _nur_ ein Workaround.

Nein, es ist eine saubere CSS-Lösung - es ist ein anderer Ansatz aber imho kein Workaround. counters() ist exakt dafür da das zu tun.

Ein Workaround ist eine Krücke die man nimmt, bis eine bessere Lösung gefunden wird oder das eigentliche Problem gefixt ist. Ich sehe diese Lösung aber nicht als Krücke an.

Die Lösung ist Wasserdicht und funktionieren in modernen Browsern - wie erwähnt, ob die Zahlen in einem älteren Browser nun nicht Fett sind, spielt imho keine Rolle. Es ist ja nicht so, dass dadurch information verloren ginge.

Du sagst dem Listenelement das es durchgezählt werden soll diese Zählung und 1 Punkt angezeigt werden soll.

Nein.

Der Punkt wird nur ab der zweiten Ebene angezeigt.

Es sieht dann etwa so aus

1 foo
2 bar
3 baz
  3.1 foo
  3.2 bar
  3.3 baz

Ob man nun hinten dran eine Klammer macht einen Punkt oder beides - ob man in der 2. Ebene die Verbindung mit dem übergeordneten Zähler weglässt oder nicht, spielt keine Rolle.

Das Beispiel sollte zeigen, dass man eine Liste allein mit CSS schön formatieren kann ohne irgendwelche JavaScript- oder HTML-Krücken zu benötigen.

Die eigentliche dezimale Formatierung und Nummerierung von OL-Listenelementen blendest du aber aus.

Ja.

Am Ende ist es auch nur ein Austauschen.

Aber eben ohne im Code herumzufuhrwerken - in vielen Fällen hat man nicht die Möglichkeit, das HTML einfach zu ändern - z.B. bei einem User-Stylesheet. Hier sind solche Lösung sehr praktisch.

Also bleibts bei meiner Aussage, das du auf die Zahlen des OL-Listenelementes keinen direkten Einfluß hast. Da war nix falsch dran.

Ich hab' auch nicht das Gegenteil behauptet, ich hab' dir lediglich eine ordentliche Alternative gezeigt. Stichwort: Tellerrand.

Für den IE6 und 7 ist es übrigens nicht fett, aber das wird keinen umbringen - die beiden Browser sind sowieso fast tot ... oder eher untot.

IE6 und 7 zusammen mit 10-15 % untot? Ich weiß ja nicht!

Als Mozilla damals noch Marktanteile unter 20 % hatte, wurde auch gesagt, er wäre nicht marktrelevant :p

[Bobby]

Moin

Nein, es ist eine saubere CSS-Lösung - es ist ein anderer Ansatz aber imho kein Workaround. counters() ist exakt dafür da das zu tun.

Counters ist zum Nummerieren von Überschriftskapiteln eingefügt worden. Nicht zum Nummerieren von Listen. Dafür ist der Listentyp OL da.

Ein Workaround ist eine Krücke die man nimmt, bis eine bessere Lösung gefunden wird oder das eigentliche Problem gefixt ist. Ich sehe diese Lösung aber nicht als Krücke an.

Nein, Es kann eine funktionierende Lösung über einen anderen Weg sein, als der Standardweg. Das muß IMO keine Krücke sein.

Die Lösung ist Wasserdicht und funktionieren in modernen Browsern - wie erwähnt, ob die Zahlen in einem älteren Browser nun nicht Fett sind, spielt imho keine Rolle. Es ist ja nicht so, dass dadurch information verloren ginge.

Da gebe ich dir Recht.

Der Punkt wird nur ab der zweiten Ebene angezeigt.

Ja sicher.

Das Beispiel sollte zeigen, dass man eine Liste allein mit CSS schön formatieren kann ohne irgendwelche JavaScript- oder HTML-Krücken zu benötigen.

OK, DA muss ich mich revidieren. Mit CSS ist es möglich aber nicht mit direkten Zugriff auf die eigentliche Nummerierung einer OL-liste

Aber eben ohne im Code herumzufuhrwerken - in vielen Fällen hat man nicht die Möglichkeit, das HTML einfach zu ändern - z.B. bei einem User-Stylesheet. Hier sind solche Lösung sehr praktisch.

Das sehe ich ein. eine praktische Lösung.

Als Mozilla damals noch Marktanteile unter 20 % hatte, wurde auch gesagt, er wäre nicht marktrelevant :p

Alles was über 5 % Marktanteil hat sollte IMHO Beachtung finden. Das scheint aber von den individuellen Ansichten abzuhängen.

Gruß Bobby

[suit]

Counters ist zum Nummerieren von Überschriftskapiteln eingefügt worden. Nicht zum Nummerieren von Listen. Dafür ist der Listentyp OL da.

Du irrst.

Nein, Es kann eine funktionierende Lösung über einen anderen Weg sein, als der Standardweg. Das muß IMO keine Krücke sein.

Der Standard-Weg ist in keinem mir bekannten Browser implementiert - dennoch ist es eine sehr Standardnahe-Lösung. Wenn du das schon als Krücke bezeichnest, was ist dann die von dir vorgeschlagene Lösung? High-Tech Beinprothese vs. Holzbein? :p

Das Beispiel sollte zeigen, dass man eine Liste allein mit CSS schön formatieren kann ohne irgendwelche JavaScript- oder HTML-Krücken zu benötigen.

OK, DA muss ich mich revidieren. Mit CSS ist es möglich aber nicht mit direkten Zugriff auf die eigentliche Nummerierung einer OL-liste

Ich verweise wieder auf oben: das ist nicht richtig - es ist in CSS möglich das zu tun, aber kein relevanter Browser implementiert dies :p

Alles was über 5 % Marktanteil hat sollte IMHO Beachtung finden. Das scheint aber von den individuellen Ansichten abzuhängen.

Gut, dass wir hier nicht entscheiden, was Beachtung finden sollte oder nicht - das macht das macht Apple ganz gut. Den iPad-Safari hat mit einem Marktanteil von 0,0% (gerundet) muss man leider beachten :)

[Der Martin]

Hallo,

iPad-Safari hat mit einem Marktanteil von 0,0% (gerundet) muss man leider beachten :)

muss man? Warum?
So wie hier manche der Ansicht sind, man müsse IE<8 schon aus strategischen Gründen nicht beachten, bin ich der Meinung, dass man Apple-Exoten (und Apple-Produkte sind durchweg Exoten!) aus ideologischen Gründen nicht beachten muss.

Ciao,
 Martin

[suit]

muss man? Warum?
So wie hier manche der Ansicht sind, man müsse IE<8 schon aus strategischen Gründen nicht beachten, bin ich der Meinung, dass man Apple-Exoten (und Apple-Produkte sind durchweg Exoten!) aus ideologischen Gründen nicht beachten muss.

Hotelbetreiber fahren voll drauf ab, wenn ihre Seite im iPad und am iPhone ordentlich aussieht - zudem bezahlen die ordentlich Geld dafür.

Beim IE6 zahlt keiner "freiwillg" Geld, dass es dort ordentlich aussieht obwohl der Marktanteil wesentlich größer ist.

[Gunnar Bittersmann]

@@suit:

nuqneH

Hotelbetreiber fahren voll drauf ab, wenn ihre Seite im iPad und am iPhone ordentlich aussieht - zudem bezahlen die ordentlich Geld dafür.
Beim IE6 zahlt keiner "freiwillg" Geld, dass es dort ordentlich aussieht obwohl der Marktanteil wesentlich größer ist.

IE6 verbreiteter als iPhone/iPad?? Das dürfte für viele Zielgruppen heute schon nicht der Fall sein und sich für die restlichen über kurz oder lang ändern. Eher über kurz.

Qapla'

[Gunnar Bittersmann]

@@Bobby:

nuqneH

Counters ist zum Nummerieren von Überschriftskapiteln eingefügt worden.

Nein, zum Numerieren beliebiger Elemente. Du kannst auch Textzeilen eines Gedichts oder Codezeilen oder Tabellenzeilen durchnumerieren.

Nicht zum Nummerieren von Listen. Dafür ist der Listentyp OL da.

Beliebiger Elemente schließt List-Items nicht aus.

„Konforme Benutzerprogramme müssen vor allen anderen Stylesheets für ein Dokument ein Standard-Stylesheet anwenden (oder sich so verhalten, als ob sie das täten).“ [CSS2 §6.4]

Entscheidend hier der Teil in Klammern. Das heißt, ein Browser verhält sich von außen gesehen so, als ob die Numerierung von List-Items durch sein internes Stylesheet erzeugt würde. Eben per Counter für Listen!

Aus diesem Grund sind auch @type, @start und @value für ol/li missbilligt [HTML401 §10.2] und die Darstellung (Numerierung) sollte per Stylesheet angegeben werden. (Wobei man im Einzelfall darüber streiten kann, ob die Art der Numerierung ins Markup oder ins Stylesheet gehört.)

Qapla'

[Der Martin]

Hallo,

Aus diesem Grund sind auch @type, @start und @value für ol/li missbilligt [HTML401 §10.2] und die Darstellung (Numerierung) sollte per Stylesheet angegeben werden.

naja ...

(Wobei man im Einzelfall darüber streiten kann, ob die Art der Numerierung ins Markup oder ins Stylesheet gehört.)

Eben. Eine Numerierung, beispielsweise von Kapiteln oder auch Aufzählungspunkten, zähle ich ganz klar zur Gliederung eines Dokuments, und damit gehören Angaben über die Numerierung (ob überhaupt, ab welchem Startwert) für mich ins Markup. CSS mag dann meinetwegen festlegen, ob die Numerierung mit arabischen oder römischen Zahlen, oder mit einer Buchstabenfolge gestaltet wird, und natürlich das visuelle Erscheinungsbild.

So long,
 Martin

[Gunnar Bittersmann]

@@Bobby:

nuqneH

gibt es eine Möglichkeit, nur die Nummerierung bei einer ol-Liste fett zu bekommen (nicht aber die Inhalte der li-Elemente)?

Rein mit CSS geht das m.W. nicht

Das CSS3-Modul Lists sieht das Pseudoelement ::marker vor: ol ::marker { font-weight: bold } [CSS3-LISTS §9]

Der aktuelle WD ist vom 2002-11-07. Und es scheinst in keinem Browser implementiert zu sein.

Qapla'

[suit]

Das CSS3-Modul Lists sieht das Pseudoelement ::marker vor: ol ::marker { font-weight: bold } [CSS3-LISTS §9]

Und siehe da, auch hier wird mit counter() bzw. counters() gearbeitet :)