Wpisy otagowane ‘CSS’

Nowsze wpisy »

Formatowanie list

wtorek, 24 Listopad 2009

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:, , , ,
Zaszufladkowany do Sekrety Webmasterów | 2 komentarzy »

Nowsze wpisy »