list-style-type i pozycja markera - sposoby

list-style-image

Css pozwala nam zastąpić standardowe markery list obrazkami. Styl, który do tego służy to list-style-image

Jak zwykle jednak w takich sytuacjach pojawia się problem (problem pojawia się też przy standardowych markerach ale jakoś nikt na niego wtedy uwagi nie zwraca). Każda przeglądarka inaczej pozycjonuje takiego markera względem elementu listy

Moje sposoby na drania

zabawy z obrazkiem - metoda Picasso

Metoda Picasso - najmniej skuteczna - polega na odpowiednich eksperymentach z przygotowanym obrazkiem tak by we wszystkich przeglądarkach wyglądał w miarę poprawnie. Ustawiając odpowiednio wysokość obrazka i położenie na nim markera możemy wyrównać obrazek w pionie z dosyć sporą dokładnością.

Niestety metoda ta daje bardzo ograniczone możliwości i prawie nie pozwala na operowanie położeniem markera w poziomie, dlatego polecam ją tylko do prostych rozwiązań.

position: relative;

Ten sposób można zastosować jeśli tekst wewnątrz elementu <li /> jest upakowany np wewnątrz <a /> lub <span /> lub innego znacznika. Możemy wtedy dla tego elementu przypisać styl position:relative; i odpowiednio ustawić go przy pomocy styli top i left.

Wadą tego rozwiązania jest to, że dla każdej przeglądarki pozycję musimy ustawiać osobno. Wymaga to użycia wielu styli i hacków.

html:
<ul>
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
</ul>

css:
ul{list-style-image:url(obrazek.gif);}
li a{position: relative; top:-5px; left-3px;}

list-style-type:none; i background;

Ta metoda polega na całkowitym ukryciu markerów listy i zastąpieniu ich tłem dla elementu <li />.

html:
<ul>
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
</ul>

css:
ul{list-style-type:none; margin:0;padding:0;}
li{margin:0; padding:0 0 0 20px; background: url(obrazek.gif) no-repeat 0% 50%;}

W stylu background 0% i 50% oznacza kolejno pozycję w poziomie i w pionie. 50% dla pionu spowoduje wyśrodkowanie tła względem elementu <li />. Jeśli zawartość tego elementu nie mieści się w jednej linijce lepszym rozwiązaniem może być podanie pozycji tła w pikselach lub em-ach.

opływane elementy listy - <li style="float:left;" />

Stosując metodę "background" można zbudować też listy z opływanymi elementami <li /> i markerami.

Markery na listach z ustawionym float nie działają w IE i Operze.

Nie wiem co jest tego przyczyną ale może to być zmiana w specyfikacji CSS2.1 w stounku do CSS2.0. Ta druga mówi, że każdy element ze stylem float automatycznie staje się elementem blokowym, a te nie mogą mieć markerów. W CSS2.1 wprowadzono zmiany w relacjach między display i float.