2009-11-24 19:23:41

Formatowanie list

Listy zarówno uporządkowane jak i nieuporządkowane mają wiele zastosowań na stronach www. Z reguły wykorzystywane są domyślne sposoby formatowania tych list i w większości przypadków jest to wystarczające. Bywa jednak czasem, że przydałoby się rozwiązanie ciekawsze, bardziej niestandardowe. Zacznijmy jednak od początku.

Listy uporządkowane i nieuporządkowane

Najprostszą listę umieszczamy na stronie wpisując znaczniki <ul> i </ul> dla listy nieuporządkowanej lub <ol> i </ol> dla listy uporządkowanej, a pomiędzy nimi serię pozycji w znacznikach <li>…</li>

<ul>
	<li>Pozycja pierwsza listy nieuporządkowanej</li>
	<li>Pozycja druga listy nieuporządkowanej</li>
	<li>Pozycja trzecia listy nieuporządkowanej</li>
	<li>Pozycja czwarta listy nieuporządkowanej</li>
</ul>

Wpisując powyższy kod otrzymamy:

  • Pozycja pierwsza listy nieuporządkowanej
  • Pozycja druga listy nieuporządkowanej
  • Pozycja trzecia listy nieuporządkowanej
  • Pozycja czwarta listy nieuporządkowanej

…i to samo dla listy uporządkowanej.

<ol>
	<li>Pozycja pierwsza listy uporządkowanej</li>
	<li>Pozycja druga listy uporządkowanej</li>
	<li>Pozycja trzecia listy uporządkowanej</li>
	<li>Pozycja czwarta listy uporządkowanej</li>
</ol>

Wpisując powyższy kod otrzymamy:

  1. Pozycja pierwsza listy uporządkowanej
  2. Pozycja druga listy uporządkowanej
  3. Pozycja trzecia listy uporządkowanej
  4. Pozycja czwarta listy uporządkowanej

Zarówno wewnątrz elementów <ul> i </ul> jak i elementów <ol> i </ol> mogą znaleźć się tylko elementy <li> i </li>, natomiast wewnątrz nich oprócz tekstu mogą znajdować się też inne elementy w tym również listy.

Zagnieżdżanie list

Listy można w sobie zagnieżdżać wiele razy w dowolnych konfiguracjach. Np. lista uporządkowana może zawierać dwie listy nieuporządkowane i trzy uporządkowane, a ostatnia z nich również zawiera listę itd.

<ol>
	<li>Pozycja pierwsza listy uporządkowanej</li>
	<li>
<h3>Podrzędna lista nieuporządkowana</h3>
<ul>
	<li>Pozycja pierwsza listy nieuporządkowanej</li>
	<li>Pozycja druga listy nieuporządkowanej</li>
	<li>Pozycja trzecia listy nieuporządkowanej</li>
	<li>Pozycja czwarta listy nieuporządkowanej</li>
</ul>
</li>
	<li>Pozycja trzecia listy uporządkowanej</li>
	<li><strong>Kolejna podrzędna lista nieuporządkowana</strong>
<ul>
	<li>Pozycja pierwsza listy nieuporządkowanej</li>
	<li>Pozycja druga listy nieuporządkowanej</li>
	<li>Pozycja trzecia listy nieuporządkowanej</li>
	<li>Pozycja czwarta listy nieuporządkowanej</li>
</ul>
</li>
	<li>Podrzędna lista uporządkowana
<ol>
	<li>Pozycja pierwsza listy uporządkowanej</li>
	<li>Pozycja druga listy uporządkowanej</li>
	<li>Pozycja trzecia listy uporządkowanej</li>
	<li><span class="kolor">Podrzędna (podwójnie ;)) lista uporządkowana</span>
<ol>
	<li>Pozycja pierwsza listy uporządkowanej</li>
	<li>Pozycja druga listy uporządkowanej</li>
	<li>Pozycja trzecia listy uporządkowanej</li>
	<li>Pozycja czwarta listy uporządkowanej</li>
</ol>
</li>
</ol>
</li>
</ol>
  1. Pozycja pierwsza listy uporządkowanej
  2. Podrzędna lista nieuporządkowana

    • Pozycja pierwsza listy nieuporządkowanej
    • Pozycja druga listy nieuporządkowanej
    • Pozycja trzecia listy nieuporządkowanej
    • Pozycja czwarta listy nieuporządkowanej
  3. Pozycja trzecia listy uporządkowanej
  4. Kolejna podrzędna lista nieuporządkowana
    • Pozycja pierwsza listy nieuporządkowanej
    • Pozycja druga listy nieuporządkowanej
    • Pozycja trzecia listy nieuporządkowanej
    • Pozycja czwarta listy nieuporządkowanej
  5. Podrzędna lista uporządkowana
    1. Pozycja pierwsza listy uporządkowanej
    2. Pozycja druga listy uporządkowanej
    3. Pozycja trzecia listy uporządkowanej
    4. Podrzędna (podwójnie ;) ) lista uporządkowana
      1. Pozycja pierwsza listy uporządkowanej
      2. Pozycja druga listy uporządkowanej
      3. Pozycja trzecia listy uporządkowanej
      4. Pozycja czwarta listy uporządkowanej

To tyle podstawy. Przejdźmy teraz do części nieco bardziej zaawansowanej.

Typy wypunktowania

Jeżeli na stronie mamy wiele list nieuporządkowanych, warto niektóre z nich wyróżnić odmiennym stylem wypunktowania. Czasem też czarne kropki po prostu nie pasują do ogólnego wyglądu strony. W takiej sytuacji z pomocą przychodzą nam style CSS. Wystarczy jedna prosta definicja:

ul{list-style-type: circle;}

zmienia kropki na okręgi,

  • Pozycja pierwsza listy nieuporządkowanej
  • Pozycja druga listy nieuporządkowanej
  • Pozycja trzecia listy nieuporządkowanej

a definicja stylu:

ul{list-style-type: square;}

na kwadraty

  • Pozycja pierwsza listy nieuporządkowanej
  • Pozycja druga listy nieuporządkowanej
  • Pozycja trzecia listy nieuporządkowanej

Definicja:

ul{list-style-type: disc;}

przywraca domyślny wygląd listy z kropkami.

  • Pozycja pierwsza listy nieuporządkowanej
  • Pozycja druga listy nieuporządkowanej
  • Pozycja trzecia listy nieuporządkowanej

Jeżeli natomiast chcielibyśmy zrezygnować z jakichkolwiek symboli umieścimy definicję:

ul{list-style-type: none;}
  • Pozycja pierwsza listy nieuporządkowanej
  • Pozycja druga listy nieuporządkowanej
  • Pozycja trzecia listy nieuporządkowanej

Możliwe też jest zastosowanie dowolnego symbolu graficznego z pliku: (może nie działać w przeglądarce Internet Explorer)

ul{list-style-image: url(zaznaczenie.gif);}
  • Pozycja pierwsza listy nieuporządkowanej
  • Pozycja druga listy nieuporządkowanej
  • Pozycja trzecia listy nieuporządkowanej

lub

ul{list-style-image: url(rower.gif);}
  • Pozycja pierwsza listy nieuporządkowanej
  • Pozycja druga listy nieuporządkowanej
  • Pozycja trzecia listy nieuporządkowanej

Tylko nie przesadzajcie z wielkością grafiki ;)

Również przy listach uporządkowanych można modyfikować typ numerowania. Począwszy od standardowego

ol{list-style-type: decimal;}
  1. Pozycja pierwsza listy nieuporządkowanej
  2. Pozycja druga listy nieuporządkowanej
  3. Pozycja trzecia listy nieuporządkowanej

poprzez numerowanie z zerem wiodącym

ol{list-style-type: decimal-leading-zero;}
  1. Pozycja pierwsza listy nieuporządkowanej
  2. Pozycja druga listy nieuporządkowanej
  3. Pozycja trzecia listy nieuporządkowanej

do numerowania przy pomocy cyfr rzymskich dużych i małych

ol{list-style-type: upper-roman;}
  1. Pozycja pierwsza listy nieuporządkowanej
  2. Pozycja druga listy nieuporządkowanej
  3. Pozycja trzecia listy nieuporządkowanej
ol{list-style-type: lower-roman;}
  1. Pozycja pierwsza listy nieuporządkowanej
  2. Pozycja druga listy nieuporządkowanej
  3. Pozycja trzecia listy nieuporządkowanej

oraz liter – również dużych i małych

ol{list-style-type: upper-alpha;}
  1. Pozycja pierwsza listy nieuporządkowanej
  2. Pozycja druga listy nieuporządkowanej
  3. Pozycja trzecia listy nieuporządkowanej
ol{list-style-type: lower-alpha;}
  1. Pozycja pierwsza listy nieuporządkowanej
  2. Pozycja druga listy nieuporządkowanej
  3. Pozycja trzecia listy nieuporządkowanej

Jeżeli zmieniony styl chcemy zastosować tylko do wybranych list, posługujemy się klasą

.rzymskie ol{list-style-type: upper-roman;}
<ol class="rzymskie">
	<li>Pozycja pierwsza listy nieuporządkowanej</li>
	<li>Pozycja druga listy nieuporządkowanej</li>
	<li>Pozycja trzecia listy nieuporządkowanej</li>
</ol>

Możemy dzięki temu stosować różne typy numerowania list i dowolnie te listy w sobie zagnieżdżać, aczkolwiek z różnorodnością nie należy przesadzać.

Skomentuj ten artykuł, a dostaniesz dodatkowe informacje na temat formatowania list na swój adres email podany przy wysyłaniu komentarza. Dodatkowe informacje postaram się wysłać Ci w ciągu 24 godzin. Komentarze głupie, bezsensowne i obraźliwe będą odrzucane.

pozdrawiam
Leszek Sewastianowicz

Tagi: , , , ,

2 odpowiedzi do “Formatowanie list”

  1. Powerlifter pisze:

    Zastosowanie podanej wyżej grafiki jako punktora (rower, zaznaczenie) nie działa na Firefoxie 3.5.5, przynajmniej u mniej – widoczny jest punktor dla stylu „disc”. To tak na marginesie.

    Według mnie należałoby jeszcze dopowiedzieć, które style działają dla CSS 2.0, a które dla CSS 2.1 i na jakich przeglądarkach mogą przestać pracować. W zależności od rodzaju przeglądarki punktory niekoniecznie wyglądają tak jak programista (czy może – stylista) sobie założył.

    Jeśli chodzi o wygląd strony to ciekawie zapowiada się styl „decimal-leading-zero” i „lower-greek” (litery greckie od alfa począwszy). Natomiast stylem „none” możemy poeksperymentować z marginesem lewostronnym w tabelkach – w tym zagnieżdżając listy.

    Znacznie ciekawszym rozwiązaniem byłoby pokazanie zastosowania list ukrywanych – rozwijanych klinięciem lub najechaniem kursorem na odpowiedni element strony. One również zawierają informacje przetwarzane przez Google, ale nie wpływają na dużą wizualnie objętość strony internetowej, pokazując się wtedy kiedy jest potrzeba. Mam nadzieję, że w jakimś suplemencie do tego artykułu te listy pojawią się.

    Pozdrawiam autora i Czytelników!

  2. Leszek Sewastianowicz pisze:

    Grafiki już działają. Podczas publikacji zmieniła się interpretacja ścieżek do plików z grafikami.

    Większość przedstawionych stylów działa we wszystkich nowszych przeglądarkach (CSS 1.0) wyjątkiem tu jest decimal-leading-zero (CSS 2.0) – w IE działa dopiero od wersji 8 podobnie ma się sprawa z lower-greek i innym „egzotycznymi” alfabetami, ale o tym w dodatkowych informacjach.

    Eksperymentowanie z listami w tabelkach jedynie dla uzyskania odpowiednich marginesów uważam za przerost formy nad treścią. Nie widzę w tym jakiejś szczególnej korzyści czy przewagi nad stosowaniem właściwości „margin” czy „padding”, ale może o czymś nie wiem? Ponadto takie postępowanie jest sprzeczne z semantyką języka oraz dążeniami do czegoś, co niektórzy nazywają WEB 3.0 wg. mnie trochę na wyrost.

    A listy rozwijane, to temat na zupełnie inny artykuł.

    pozdrawiam
    Leszek Sewastianowicz

Dodaj odpowiedź