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:
  1. ol {  
  2.   counter-reset: item;  
  3. }  
  4. ol li {  
  5.   font: bold 14px arial, helvetica, sans-serif;  
  6.   background: #eee url(step2.gif) no-repeat;  
  7.   margin: 5px;  
  8.   padding: 5px;  
  9.   color: #aaa;  
  10.   display: block;  
  11. }  
  12. ol li:before {  
  13.   width: 30px;  
  14.   float: left;  
  15.   content: counters(item, ". ");  
  16.   counter-increment: item;  
  17.   color: #fff;  
  18. }  
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.
  1. ol li {  
  2.   background: #eee;  
  3.   margin: 5px;  
  4.   padding: 5px;  
  5.   color: #aaa;  
  6.   display: block;  
  7. }  
  8. ol li[id] {  
  9.   background: url(attr(id) ".gif") no-repeat;  
  10. }  
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