«
»
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: , , , ,

Ten wpis został opublikowany wtorek, 24 Listopad 2009 o 19:23 i jest zaszufladkowany do kategorii Sekrety Webmasterów. Możesz śledzić wszystkie odpowiedzi do tego wpisu poprzezkanał RSS 2.0. Możesz dodać odpowiedź lub trackback ze swojej strony.

2 odpowiedzi do “Formatowanie list”

  1. Powerlifter pisze:
    2009-11-24 o 21:49

    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:
    2009-11-25 o 02:02

    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ź

Musisz się zalogować aby dodać komentarz.