HTML/CSS Hintergrundbilder für ordered list Nummern

Berbatov

Rated R Superstar
ID: 208039
L
20 April 2006
3.979
192
Hey,

Ich würde gerne bei <ol>s auf meiner Seite die Nummern mit einem Hintergrundbild bestücken.

Das Problem ist, dass sich das nicht kacheln lässt, sonst könnte man sowas hier benutzen. Hab ich schon probiert, aber ich will ja praktisch nur eine Grafik hinter der Nummer haben und nicht massenweise wiederholt. Bei 5 list-items also auch nur 5 mal die Grafik, jeweils hinter der Zahl.

Irgendeine pfiffige Idee das umzusetzen, längeres googlen hat nicht unbedingt was gebracht?
 
Wenn Du's hinter die Zahl haben willst, kannst Du da nicht dem <li> das Hintergrundbild geben (halt oben links positioniert) und ein entsprechendes padding-left geben? Oder verschiebt das Padding auch die Zahl?

Bin mir da grad nicht so sicher und mir fehlt grad leider die Zeit um's zu testen.
 
Wenn Du's hinter die Zahl haben willst, kannst Du da nicht dem <li> das Hintergrundbild geben (halt oben links positioniert) und ein entsprechendes padding-left geben? Oder verschiebt das Padding auch die Zahl?

Bin mir da grad nicht so sicher und mir fehlt grad leider die Zeit um's zu testen.

Klappt leider nicht, hier mal zwei Möglichkeiten, die ich ausprobiert habe: https://mybling.de/referenzen/orderedlist.html
 
Eine Idee:
HTML:
<li><img style="position: relative; left: -20px;" ../>....
Da müsstest du aber das Bild in jedes Listitem stecken. Doof.

Afair geht es mit CSS3, automatisch was "anzufügen".
Code:
ol.foo li:after {
  ...
}
in der Art. Kp, ob ich das richtig im Kopf hab und ob das überhaupt schon unterstützt wird. Aber vielleicht hilfts ja trotzdem :)
 
Eine Idee:
HTML:
<li><img style="position: relative; left: -20px;" ../>....
Da müsstest du aber das Bild in jedes Listitem stecken. Doof.

Afair geht es mit CSS3, automatisch was "anzufügen".
Code:
ol.foo li:after {
  ...
}
in der Art. Kp, ob ich das richtig im Kopf hab und ob das überhaupt schon unterstützt wird. Aber vielleicht hilfts ja trotzdem :)

Bin jetzt so weit: https://mybling.de/referenzen/orderedlist.html

Wer mir jetzt noch erklärt, wie ich das eingerückt bekomme, gewinnt einen Gummipunkt. Das :before als block zu machen funktioniert nicht, an der height rumschrauben auch nicht...
 
Das :before als block zu machen funktioniert nicht, an der height rumschrauben auch nicht...
Das geht bei mir ohne Probleme :think:
Code:
li:before
{
  /* ... dein zeugs... */
  display: block;
  height: 50px;
}
und schon steht die Nummer mit nem Riesenabstand allein da.
 
Das geht bei mir ohne Probleme :think:
Code:
li:before
{
  /* ... dein zeugs... */
  display: block;
  height: 50px;
}
und schon steht die Nummer mit nem Riesenabstand allein da.

Dann steht die Nummer aber über den jeweiligen Texten. Die soll schon wie normal links davon stehen. Immoment ist aber nur die erste Zeile eingerückt (mit einem padding-right bei :before). Sobald ich aber am eigentlichen <li> rumdoktor, rückt der mir immer alles (Nummer+Text) zusammen ein und am eigentlich Abstand Nummer<->Text ändert sich nichts...
 
Zuletzt bearbeitet:
Haha :idea:

Ein doppelt dem padding entgegengerichtetes margin scheint das Problem zu lösen, da dann der Platz, den der :before-Block braucht, auf 0 sinkt und der Text dann nicht mehr eingerückt wird :think:

z.B.
Code:
position: relative;
left: -30px;
padding: 6px 20px 15px 13px;
margin: -6px -40px -15px -13px;
in den :before-Block, dann hab ich es so, wie du willst.
Musst selber mal probieren, was alles notwendig is und ob man das vereinfachen kann.

Die Frage is natürlich auch, wie dirty diese Lösung is und wie andere Browser sie aufnehmen. Ich hab mit Firefox 3.6.10 probiert.
 

Klappt soweit perfekt: https://mybling.de/referenzen/orderedlist1.html
Habe es bei browsershots.org mal getestet und zumindest die neuen Browser supporten das, IE7- unter anderem leider nicht, wobei man für die Browser dann halt andere CSS Sachen anlegen könnte (bzw. andersrum, für alle die normale Liste und dann für die aktuellen das spezielle).

Da ich schön länger an der Geschichte am googlen bin und unzähliche Threads gelesen habe, ist mir diese Seite aufgefallen: https://www.wikihow.com/Know-if-You-Like-Someone-or-if-You're-Just-Lonely

Im Abschnitt "Steps" verwenden die ebenfalls eine ordered list.
Hier der Link zu deren .css: https://pad2.whstatic.com/extensions/min/?f=/skins/WikiHow/new.css (bisschen unübersichtlich...)

Lässt man sich aber den Quelltext der Grundseite anzeigen, haben die die Nummern noch in ein extra div gepackt. Habe selbige Seite auch mal bei browsershots testen lassen und es werden schon mehrere Browser unterstützt, wobei es bei IE6 zB alle Nummern anzeigt nur die 1 nicht...:ugly:

Sinnvollere Methode oder nicht?
 
Bei der Lösung musst du halt "von Hand" nummerieren, was aber wohl ein sehr kleiner Preis dafür is, dass es in den meisten Browsern läuft (mit dem IE6 kannstde das sicherlich auch noch hinbiegen).

CSS3 wird noch bisschen dauern, bis das soweit is, dass man sich drauf verlassen kann, dass es jeder korrekt und vollständig implementiert.
 
Folgendes Problem:
Das von oben klappt immer noch gut, benutze folgenden Code:
Code:
OL{
counter-reset: item;
}
ol LI{
display:block;
padding-top: 20px;
margin-left: 20px;
padding-bottom: 10px;
}
ol LI:before{
content: counter(item) ". ";
counter-increment: item;
color: white;
font-weight: bold;
background-image: url(images/libg.png);
background-repeat: no-repeat;
position: relative;
left: -30px;
padding: 6px 24px 15px 12px;
margin: -6px -42px -15px -12px;
font-family: Georgia, serif;
font-size: 120%;
}

Jetzt will ich aber auf der Seite noch eine andere OL anzeigen, die nicht diesen Spezifikationen unterlegen sein soll, default sozusagen (ist aber nur diese einzelne hier). Dazu hab ich der neuen OL eine eigene class gegeben und mit folgenden Werten versucht das alles wieder zu "defaulten":

Code:
.wostyle{
color: black;
font-size: normal;
}
.wostyle LI{
display:inline;
padding: 0px;
margin: 0px;
color: black;
font-size: normal;
}
.wostyle LI:before{
color: black;
font-size: normal;
font-weight: normal;
font-family: normal;
font-size: 100%;
background-image: none;
}

Optisch sieht das schonmal gut aus, die Nummerierung macht aber noch Sorgen, da ich jetzt immer die LI-Nummer in einer Zeile hab, den Text dadrunter in der Zeile. Dann kommt wieder eine Zeile mit einer Nummer, dann wieder der dazugehörige Text.
Liegt an der content und counter-increment Geschichte (hab mal ein bisschen auskommentiert).
Wie kann ich das wieder defaulten?
Hab schon noch verschiedenen Einstellungen gegooglet, "none" bringt auch nichts.
 
Du kannst nur alles auf auto stellen; das muss aber nicht notwendigerweise "default" sein, weil "default" browserabhängig is.

Wieso so kompliziert? Lass das "normale" ol auf "default" und definiere eine Klasse für deine "besondere" Aufzählung.