ugrás a tartalomhoz

Styling ordered lists

zsepi · 2005. Május. 18. (Sze), 12.40
szép!
 ■
1

Szépnek szép, de...

Török Gábor · 2005. Május. 18. (Sze), 16.16
Dinamikus tartalomgeneráláskor nem igazán nyerő, de egy alkalmasint közbelépő arculatváltáskor is örülhet a designer, amikor rajzolhatja előről a számokat. A CSS segítségével szerintem sokkal dinamikusabb megoldás érhető el, noha előbbi változat a böngészők jóval szélesebb skáláján működik, míg az alábbi egyelőre csak Opera alatt muzsikál, de ez lehet az én hibám:

ol {
  counter-reset: item;
}
ol li {
  font: bold 14px arial, helvetica, sans-serif;
  background: #eee url(step2.gif) no-repeat;
  margin: 5px;
  padding: 5px;
  color: #aaa;
  display: block;
}
ol li:before {
  width: 30px;
  float: left;
  content: counters(item, ". ");
  counter-increment: item;
  color: #fff;
}
Működés közben: http://gábor.20y.hu/lista/

--
slink
http://20y.hu/
2

Firefox is

attlad · 2005. Május. 18. (Sze), 16.41
Konqueror-ral (gondolom Safarival is), meg 1.8-as Gecko motorral is megy a counter.

Attila
3

Firefox 1.1 is tudni fogja

Jano · 2005. Május. 18. (Sze), 16.47
Firefox 1.1 is tudni fogja a counter-t.

Design valtasnal meg mindent lehet atrajzolni egyebkent is :)
De tényleg szép megoldás lehet counter!
4

Safarival nem

Török Gábor · 2005. Május. 18. (Sze), 17.06
Safari sajnos nem támogatja: safari_css.html

--
slink
http://20y.hu/
5

attr esetleg?

zsepi · 2005. Május. 18. (Sze), 17.18
A counter nem rossz, csak nekem ffox-al (win 1.0.4) nem működött.
Alternatív megoldásként erre a problémára javasolnám az attr haználatát, ami általánosabb esetben is használható az xIR technikákhoz.

ol li {
  background: #eee;
  margin: 5px;
  padding: 5px;
  color: #aaa;
  display: block;
}
ol li[id] {
  background: url(attr(id) ".gif") no-repeat;
}
Kiprbáltam, nem működik. Valamiért az url[code]-en belül nem fogad el attr értéket, illetve egyáltalán nem hagyja, hogy összefűzzünk sztringeket ([code]background: url('kepnev' '.gif');)

azért az ötletet közzéteszem, hátha valaki megtalálja a magyarázatot/megoldást