Joomla!WikiPL

Style dla list w kodzie Joomla!

HTML rozróżnia trzy typy list:

• punktowane (nieuporządkowane), obejmowane znacznikiem <ul>, służące do tworzenia wykazów, w których kolejność elementów nie ma istotnego znaczenia.
• numerowane (uporządkowane), obejmowane znacznikiem <ul>, służące do prezentacji procedur, kolejnych czynności tudzież zestawów elementów, w których ważny jest porządek elementów.
• definicji, obejmujące znacznikiem <dl> definiowany termin (element <dt>) oraz jego definicję (element <dd>.

W standardowym kodzie Joomla! stosowane są jedynie znaczniki list nieuporządkowanych, a o ich stylizacji decydują nie tylko reguły ustalone dla selektora elementu, ale także style:

• klasy .mostread - w Joomla 1.0 i 1.5
• klasy .latestnews - w Joomla 1.0 i 1.5
• selektora potomka ul#mainlevel-nav {} - w Joomla 1.0 oraz w trybie zgodności wstecznej w Joomla 1.5
• selektora potomka ul#mainlevel-nav li{} - w Joomla 1.0 w trybie zgodności wstecznej w Joomla 1.5
• selektora potomka .moduletable ul li {} - w trybie zgodności wstecznej w Joomla 1.5
• klasy .parent - w Joomla 1.5
• klasy .active - w Joomla 1.5
• klasy .itemXXX - w Joomla 1.5
• klasy .menu - w Joomla 1.5
• klasy .pagination - w Joomla 1.5
• klasy .relateditems - w Joomla 1.5
• klasy .sections - w Joomla 1.5, klasa stylu dla elementu <ul>. Formatuje listę odnośników w module Sekcje

Listy i CSS

Specyfikacja CSS nie nakazuje rozróżniania list numerowanych i nieuporządkowanych, w obu przypadkach przeglądarki mogą stosować w roli punktora domyślną wartość właściwości list-style-type, którą jest disc. Można sobie zatem wyobrazić, że przeglądarka użyje dla wyróżnienia elementów listy numerowanej dysku, a nie, jak być może oczekiwalibyśmy, liczb. Nie oznacza to wszakże, że elementy list numerowanych i punktowanych można swobodnie stylizować punktorami graficznymi albo np. cyframi czy literami. E. Meyer podkreśla, że przeglądarka może uniemożliwić nadawanie listom wypunktowanym znaków list numerowanych i odwrotnie nawet wówczas, gdy nie ma zdefiniowanej reguły typu:

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

Standardowe punktory

W listach wypunktowanych możemy wybrać jeden z trzech rodzajów punktorów:

• disc (wypełnione kolisty punkt)
• circle (pusty okrąg)
• square (wypełniony kwadracik).

W listach numerowanych możemy zastosować oznaczenie wybrane z… siedmiu rodzajów:

• decimal - cyfry arabskie
• decimal-leading-zero - cyfry arabskie z zerem na początku, gdy jedna cyfra
• upper-alpha - wielkie litery alfabetu łacińskiego
• lower-alpha - małe litery alfabetu łacińskiego
• upper-roman - numeracja rzymska, wielkie znaki
• lower-roman - numeracja rzymska, małe znaki (i, ii, iii, iv, v)
• lower-greek - małe litery alfabetu greckiego.

Punktory graficzne

Zamiast niezbyt atrakcyjnych punktorów standardowych można stworzyć własne ikonki, korzystając choćby z bogatego zbioru znaków Webdings. Własnych punktory można umieszczać w dwojaki sposób:

• za pomocą własności list-style-image, wskazującej ścieżkę do pliku graficznego
• za pomocą własności background-image, która umożliwia precyzyjne określanie położenia obrazka stosowanego jako punktor.

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;    
      }

Przeglądarki domyślnie stosują wcięcia list, a przy tym jedne kontrolują wcięcia za pomocą dopełnienia (Fiefox, Mozilla, Safari), a inne za pomocą marginesów. Aby zapewnić sobie jednolite wcięcia, nejlepiej je wyzerować i ustalić własne reguły:

   margin-left: 0; 
   padding-left: 0;

Aby usunąć punktory:

   list-style-type: none;

Pozycjonowanie punktorów

Punktory i numery umieszczone są standardowo poza tekstem, można je jednak spozycjonować tak, aby znajdowały się wewnątrz bloku tekstu. Służy temu własność:

• list-style-position: outside; /*na zewnątrz, standardowe ustawienie, nie trzeba go deklarować*/
• list-style-position: inside; /*wewnątrz*/

Przeglądarki nie wstawiają marginesów między elementy listy.

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;
}
 
dt {                         /* formatuje definiowany termin */
   font-style        : italic;
   font-weight       : 600;
}
dd {                         /* formatuje definicję */
   padding-left       : 0;
   margin-left       :1em;
}