• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Formatierung für Listen überschreiben

mikdoe

mikdoe

Moderator
Hi!
Die Seite SELFHTML: Stylesheets / CSS-Formate definieren / Kaskade - Anwendung von Stylesheets auf Dokumente überfordert mich.
Ich habe eine übergreifende CSS Datei mit diesem Abschnitt:
Code: 
li {
	padding-bottom:5px;
	list-style-image:url('/meinpfad/meingif.gif');
}

Nun möchte ich in einer einzelnen Liste gern eine <ol> nutzen und in den <li>'s sollen die Ziffern erscheinen, wie sie es sonst tun. Also an einer einzelnen Stelle die übergreifende Definition list-style-image außer Kraft setzen. Wie kann ich das bewerkstelligen?
 
ein schlauer schrieb:
Die erste Frage, die mir sich stellt, warum sagst du im CSS nicht, dass dieser list-style nur für ul gilt?
Zum Vergrößern anklicken....
Weil es tausende Stellen gibt, wo es genau so sein soll, wie es jetzt ist. Alle Listen sollen so definiert sein, egal ob ul oder ol.
Es gibt nur diese eine einzige Ausnahme, die ich jetzt das allererste mal machen möchte.
 
dann machste dir eben eine Ausnahme:
Code: 
ol.special li {
  list-style-image:none!important;
}
nun gibst du diesem speziellen ol die css-klasse "special". Das !important sollte dazuführen, dass es egal ist, wo du den code in deine css datei schreibst, es hat eine höhere priorität, als die andere definition.

Nicht getestet.

Lg Kasalop
 
ein schlauer schrieb:
Das ist zwar merkwürdig, aber ok und was hat die verlinkte selfhtml Seite damit zu tun?
Zum Vergrößern anklicken....
Da stehen die Prioritäten wie die Definitionen ziehen. Hast du sie überhaupt geöffnet? :)
important war das richtige Stichwort.

Kasalop schrieb:
Das !important sollte dazuführen, dass es egal ist, wo du den code in deine css datei schreibst, es hat eine höhere priorität, als die andere definition.
Zum Vergrößern anklicken....
Klappt perfekt, vielen Dank!
 
Bei list-style-image ist das recht einfach:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
li {
	list-style-image: url("/1.jpg");
}
.exception li {
	list-style-image: none;
}
</style>
</head>
<body>
<ul>
	<li>a</li>
	<li>b</li>
</ul>
<ol class="exception">
	<li>1</li>
	<li>2</li>
</ol>
</body>
</html>
 
ein schlauer schrieb:
Ja ich habe mir die Seite angeschaut. Abert es wurde nicht klar was dein Problem ist.
Zum Vergrößern anklicken....
Komischerweise scheinst du ständig Probleme zu haben, meine Fragen zu verstehen.
Was ist denn an meinem Beitrag #1 missverständlich? Selbst wenn ein Zusammenhang zwischen Problem und Link nicht oberflächlich erkennbar ist war doch beides klar formuliert. Den Inhalt des Links verstehe ich nicht und das Problem ist klar beschrieben.

ein schlauer schrieb:
Zumal du das Bild auch ohne !important weg kriegst.
Zum Vergrößern anklicken....
Stimmt. Mein erster Versuch war mit ''. Auf 'none' kam ich nicht, daher fragte ich hier. Dann scheinst du mich aber doch verstanden zu haben!?
 
mikdoe schrieb:
Komischerweise scheinst du ständig Probleme zu haben, meine Fragen zu verstehen.
Was ist denn an meinem Beitrag #1 missverständlich? Selbst wenn ein Zusammenhang zwischen Problem und Link nicht oberflächlich erkennbar ist war doch beides klar formuliert. Den Inhalt des Links verstehe ich nicht und das Problem ist klar beschrieben.
Zum Vergrößern anklicken....
Unverständlich war, dass wir mit fast Null informationen dir eine fertige Lösung servieren sollten. Wir haben keinen HTML Code, keine Angaben darüber ob die Liste in einem speziellen Bereich ist oder eine spezielle Klasse hat. Und warum du bei geordneteten Listen den Zähler weg machst (was ich nach wie vor für unlogisch halte), wurde auch nicht wirklich geklärt (es ist halt so, mag für dich ausreichend sein, eine Erklärung ist das aber nicht).
mikdoe schrieb:
Stimmt. Mein erster Versuch war mit ''. Auf 'none' kam ich nicht, daher fragte ich hier. Dann scheinst du mich aber doch verstanden zu haben!?
Zum Vergrößern anklicken....
Eben.
Ich hatte none ausprobiert und es hat ohne Probleme funktioniert. Nun war ich verwundert, dass du eine Seite verlinkt hast, die mit eine völlig andere Sache zeigt, daher mussten wir davon ausgehen, dass du irgend etwas anderes Wissen willst.
 
Kasalop und Korbinian haben es sofort verstanden. Komisch. Ich weiß nicht, wieso das bei dir nicht klappt, Schlauer.
 
mikdoe schrieb:
Kasalop und Korbinian haben es sofort verstanden. Komisch.
Zum Vergrößern anklicken....
ja, das finde ich auch.

wenn du mit diesem satz beginnst
mikdoe schrieb:
Die Seite SELFHTML: Stylesheets / CSS-Formate definieren / Kaskade - Anwendung von Stylesheets auf Dokumente überfordert mich.
Zum Vergrößern anklicken....
heisst das für mich, dein eigentliches ziel ist es, irgendwas von dieser seite zu nutzen/damit zu experimentieren.
wenn dann deine folgenden außerungen nichts mit deinem vermeitlichen problem zu tun haben, ist das verwirrend.

nächster punkt:
mikdoe schrieb:
Nun möchte ich in einer einzelnen Liste gern eine <ol> nutzen und in den <li>'s sollen die Ziffern erscheinen, wie sie es sonst tun.
Zum Vergrößern anklicken....
auch hier beschreibst du die sache so, dass die einzige antwort lauten muss
ein schlauer schrieb:
warum sagst du im CSS nicht, dass dieser list-style nur für ul gilt?
Zum Vergrößern anklicken....
wieder musst du einwerfen, dass du etwas ganz anderes willst als im ursprungspost beschrieben.
mikdoe schrieb:
Weil es tausende Stellen gibt, wo es genau so sein soll, wie es jetzt ist. Alle Listen sollen so definiert sein, egal ob ul oder ol.
Zum Vergrößern anklicken....
dann ist doch die frage, wass willst du eigentlich.
 
Vielleicht lesen hesst und Schlauer anders als Kasalop, Korbinian und ich.
Die Leute sind halt verschieden.
Für meine Begriffe konnte ich es klarer nicht formulieren. Und der anfängliche Link sollte im Grunde zeigen, wo ich nachgeschaut hatte, um mein Problem selbst zu lösen. Das das viel zu kompliziert war hat sich ja später erst rausgestellt. Dafür habe ich gefragt.
Trotzdem danke für die Aufmerksamkeit :)
 
Es ist nicht klar formuliert!
Das man versuchen kann raten, was du gemeint hast, ist eine andere Sache. Aber wie gesagt ich hatte auch list-style-image: none ausprobiert und war daher verwundert, dass du darauf nicht kommst - du hast es nicht mal erwähnt. Dann der Link zu einem völlig anderem Thema und dann nicht mal 1 Zeile Code amnhand derer man festzustellen könnte, ob du einen Fehler gemacht hast. Du erwartest, dass die Leute deine Fragen dank hellseherischer Kräfte aus Fragementen herauslesen und fängst dann jedesmal eine Debatte an, wenn man nach details fragt, weil man sich mit deinem Problem auseinandersetzt.
 
ein schlauer schrieb:
Es ist nicht klar formuliert!
Zum Vergrößern anklicken....
Das ist Auffassungssache.

ein schlauer schrieb:
Du erwartest, dass die Leute deine Fragen dank hellseherischer Kräfte aus Fragementen herauslesen
Zum Vergrößern anklicken....
Nein, das erwarte ich nicht. Zwei Leute haben die Frage auf Anhieb verstanden und hilfreich beantwortet. Zwei nicht. Es hätte schlechter ausgehen können :)

ein schlauer schrieb:
und fängst dann jedesmal eine Debatte an, wenn man nach details fragt, weil man sich mit deinem Problem auseinandersetzt.
Zum Vergrößern anklicken....
Nein, die hast du in #9 angefangen, nachdem es in #5 schon gelöst war. Schau es dir gern nochmal an.

Lass uns nicht darüber streiten. Wir haben genug anderes zu tun.
 
mikdoe schrieb:
Nein, das erwarte ich nicht. Zwei Leute haben die Frage auf Anhieb verstanden und hilfreich beantwortet.
Zum Vergrößern anklicken....
Die versucht haben zu raten, dass du none zwar probiert hast, aber es falsch benutzt hast. Das hast du erst erwähnt, nachdem man dich darauf aufmerksam gemacht hat, dass deine Frage nicht verständlich war - vor allem durch den irreführenden Link. Da deine Erwartungshaltung eine andere ist, ist das Problem.
 
gut habt ihr fertig gespielt? :D
BTT:
In diesem Fall gehen kkapsners und meine Lösung beide. Es kommt darauf an, wie dein restlicher Code aussieht.
Du hast uns nur eine li {} definition gegeben, dass bekommt von der CSS Bewertungsfunktion die Priorität 1.
Der Code von kkapsner .exception li {} bekommt die Priorität 2.
Somit reicht das. Wenn du jedoch irgendwo noch die Definition ol li {} hast bekommt dies ebenfalls die Priorität 2 zugewiesen und da krachts dann uU, da es darauf ankommt wo in der CSS Datei du die beiden Blöcke definiert hast (Reihenfolge).
Das !important (bei meinem Beispiel fehlt davor ein Leerzeichen. Bitte beachten dass da nach CSS2/2.1 eigentlich eins hingehört) hebt die Priorität einfach nur über alle definitionen ohne !important an. Völlig unabhängig von der sonstigen Bewertungsfunktion. Da ich dir diese Verwirrung ersparen wollte, ist in meinem Beispiel noch das !important eingebaut.

Dies nur als Hinweis zum lernen :)

Lg Kasalop
 
Danke für die Ergänzung, Kasalop.
Ich habe das important! mal raus genommen, da es hier nicht nötig ist.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben