--=REKLAMA=--
HTML rozróżnia trzy typy list:
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:
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>
W listach wypunktowanych możemy wybrać jeden z trzech rodzajów punktorów:
W listach numerowanych możemy zastosować oznaczenie wybrane z… siedmiu rodzajów:
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:
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;
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ść:
Przeglądarki nie wstawiają marginesów między elementy listy.
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; }