UWAGA: Strona zawiera materiały archiwalne. Większość artykułów dotyczy Joomla! 1.0
Start arrow Szablony arrow CSS w Joomla arrow Treść: style dla list
Treść: style dla list Drukuj Email
Standardowo w kodzie Joomla! stosowane są jedynie znaczniki list nieuporządkowanych (objetych elementem ul). HTML oferuje jednak większe możliwości. W arkuszach stylów warto zdefiniować także reguły dla list uporządkowanych oraz list z definicjami terminów.

Listy i CSS

Wprawdzie w HTML mamy dwa znaczniki obejmujące listy - ul dla list nieuporządkowanych oraz ol dla list uporządkowanych, ale specyfikacja CSS nie nakazuje ich rozróżniania. Domyślną wartością właściwości list-style-type jest disc. Jeśli więc przeglądarka nie będzie mieć określonej odpowiedniej reguły dla ol, może się zdarzyć, że użyje dysku dla wyróżnienia elementów listy numerowanej.

E. Meyer podkreśla, że przeglądarka może uniemożliwić nadawanie znaków list numerowanych listom wypunktowanym i odwrotnie nawet wówczas, gdy nie ma zdefiniowanej reguły typu:

ol {list-style-type: decimal;</code>

Szablony udostępniane w Sieci często nie zawierają w arkuszach stylów definicji formatujących listy numerowane. W efekcie przeglądarki wyświetlają je najczęściej zgodnie z ustawieniami list punktowanych (nieuporządkowanych) - trzeba zwrócić uwagę na tę kwestię przy tworzeniu i modyfikacji arkuszy CSS.

Jeśli chcesz korzystać z list numerowanych, zdefiniuj dla elementu ol właściwość list-style-type. A jeszcze lepiej - zastosuj selektory kontekstowe, jak w przykłądzie poniżej.

Przykład. Reguły dla list punktowanych i numerowanych
 
ul {
   margin                  : 0;
   padding                 : 0 0  1em 0; /* ustala odstęp 1em od lewej */ 
   list-style-type         : none;
}
ol {
   margin                  : 0;
   padding                 : 0 0 1em 1em;
   list-style-type         : decimal; /* 1,2,3... znakiem wypunktowania  */ 
}
ul li {
   margin                  : 0 0.1em 0 0.2em;
   padding-left            : 1.25em;
   padding-top             : 0;  
   background-image        : url(../icons/list.png) no-repeat 0 5px; ; 
   background-repeat       : no-repeat;
   background-position     : 0 3px !important;
   background-position     : 0 .33em;  
}
ul ul li{                  /* zmiana obrazka wypunktowania */
   background              : url(../icons/list1.png) no-repeat 0 5px; 
}
ol li {
   padding-top             : 0;    
      }

Definicje

HTML oferuje trzy znaczniki opisujące listy z definicjami Zadeklarowanie w arkuszu stylów odpowiednich reguł dla tych elementów może być wielce przydatne np. na witrynach z materiałami edukacyjnymi:

Reguła dla elementu dl {} sformatuje tytuł listy definicji, reguła dla dt {} - sformatuje definiowane słowo, a reguła dla dd {} - tekst definicji.

Przykład. Reguły dla list z definicjami
 
dl {                         /* formatuje tytuł listy */
   font-size        : 1.2em;
   font-weight      : 500;
}
 
dt {                         /* formatuje definiowany termin */
   font-style        : italic;
   font-weight       : 500;
}
dd {                         /* formatuje definicję */
   pading-left       : 0;
   margin-left       :1em;
}
Zmieniony ( 14.10.2007. )
 
« poprzedni artykuł   następny artykuł »