search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

[CSS] Jak tworzyć style dla listy definicyjnej? – 8 sposobów, aby ją ogarnąć

[CSS] Jak tworzyć style dla listy definicyjnej? – 8 sposobów, aby ją ogarnąć

W dzisiejszym artykule opiszę sposoby ostylowania listy definicyjnej.
Lista definicyjna lub definicji składa się z trzech znaczników: ‹dl›, ‹dt› oraz ‹dd›.
Pierwszy z tych znaczników jest kontenerem (podobnym do ‹ul› czy ‹ol›), drugi z nich jest odpowiedzialny za termin, czyli to co będzie opisywane, a ostatni z nich odpowiada za definicję terminu.
To tyle tytułem wstępu. Teraz możemy przejść do sposobów budowania listy definicji.

  1. Lista definicji z podstawowymi stylami

    HTML

    <dl class="podstawowe">
      <dt>Jakiś tekst</dt>
      <dd>Nisl ut aliquip ex ea commodo consequat</dd>
      <dt>Jakiś inny tekst</dt>
      <dd>Lorem ipsum dolor sit amet elit...</dd>
      <dt>Jeszcze inny tekst</dt>
      <dd>Facilisis at vero eros et accumsan</dd>
    </dl>

    CSS

    dl.podstawowe {
    	margin: 0;
    	padding: 0;
    }
    .podstawowe dt {
    	margin: 0;
    	padding: 0;
    	font-weight: bold;
    }
    .podstawowe dd {
    	margin: 0 0 16px 0;
    	padding: 0;
    }

    Wynik takiego zapisu będzie wyglądał następująco:
    Lista definicji z podstawowymi stylami

  2. Lista definicji z obrazkami w tle

    HTML

    <dl class="obrazki-w-tle">
      <dt>Jakiś tekst</dt>
      <dd>Nisl ut aliquip ex ea commodo consequat</dd>
      <dt>Jakiś inny tekst</dt>
      <dd>Lorem ipsum dolor sit amet elit...</dd>
      <dt>Jeszcze inny tekst</dt>
      <dd>Facilisis at vero eros et accumsan</dd>
    </dl>

    CSS

    .obrazki-w-tle dt {
    	color: #000;
    	font-weight: bold;
    	padding: 0;
    }
    .obrazki-w-tle dd {
    	margin: 0 0 16px 0;
    	padding: 0 0 0 10px;
    	background: url(arrow.gif) no-repeat 0 8px;
    }

    Wynik takiego zapisu będzie wyglądał następująco:
    Lista definicji z obrazkami w tle

  3. Lista definicji jako boxy

    HTML

    <dl class="box">
      <dt>Jakiś tekst</dt>
      <dd>Nisl ut aliquip ex ea commodo consequat</dd>
      <dt>Jakiś inny tekst</dt>
      <dd>Lorem ipsum dolor sit amet elit...</dd>
      <dt>Jeszcze inny tekst</dt>
      <dd>Facilisis at vero eros et accumsan</dd>
    </dl>

    CSS

    dl.box {
    	margin: 2em 0;
    	padding: 0;
    	width: 20em;
    }
    .box dt {
    	background-color: #131210;
    	color: #959289;
    	padding: 8px;
    	font-weight: bold;
    	text-align: center;
    	text-transform: uppercase;
    	border-left: 1px solid #131210;
    	border-right: 1px solid #131210;
    	border-top: 1px solid #131210;
    }
    .box dd {
    	margin: 0 0 16px 0;
    	background: #DBD8D8;
    	text-align: center;
    	padding: 16px 8px;
    	font-style: italic;
    	border-left: 1px solid #131210;
    	border-right: 1px solid #131210;
    	border-bottom: 1px solid #131210;
    }

    Wynik takiego zapisu będzie wyglądał następująco:
    Lista definicji jako boxy

  4. Lista definicji jako tabela

    HTML

    <dl class="tabela">
      <dt>Jakiś tekst</dt>
      <dd>Nisl ut aliquip ex ea commodo consequat</dd>
      <dt>Jakiś inny tekst</dt>
      <dd>Lorem ipsum dolor sit amet elit...</dd>
      <dt>Jeszcze inny tekst</dt>
      <dd>Facilisis at vero eros et accumsan</dd>
    </dl>

    CSS

    dl.tabela {
    	float: left;
    	width: 520px;
    	margin: 16px 0;
    	padding: 0;
    	border-bottom: 1px solid #999;
    }
    .tabela dt {
    	clear: left;
    	float: left;
    	width: 200px;
    	margin: 0;
    	padding: 5px;
    	border-top: 1px solid #999;
    	font-weight: bold;
    }
    .tabela dd {
    	float: left;
    	width: 300px;
    	margin: 0;
    	padding: 5px;
    	border-top: 1px solid #999;
    }

    Wynik takiego zapisu będzie wyglądał następująco:
    Lista definicji jako tabela

  5. Lista definicji jako "obrazek" z prawej strony treści

    HTML

    <p>
    <dl class="obrazek-prawy">
      <dt>Czerwony samochód</dt>
      <dd><img src="car.jpg" alt=""/></dd>
      <dd><em>Banksius maximus</em></dd>
      <dd>Found off the coast of Australia</dd>
    </dl>
    Jakaś treść ....
    </p>

    CSS

    dl.obrazek-prawy {
    	border: 1px solid #000;
    	background-color: #ddd;
    	width: 142px;
    	text-align: center;
    	padding: 0 0 10px 0;
    	float: right;
    	margin: 0 0 16px 16px;
    }
    .obrazek-prawy dt {
    	font-weight: bold;
    	background-color: #131210;
    	color: #959289;
    	padding: 5px 10px;
    	margin-bottom: 10px;
    }
    .obrazek-prawy dd img {
    	border: 1px solid #000;
    	width: 100px;
    	height: auto;
    }
    .obrazek-prawy dd {
    	margin: 0;
    	padding: 0 10px 5px 10px;
    	font-size: 12px;
    }

    Wynik takiego zapisu będzie wyglądał następująco:
    Lista definicji jako obrazek z prawej strony treści

  6. Lista definicji jako galeria obrazków

    HTML

    <dl class="galeria">
      <dt><img src="car.jpg" alt=""/></dt>
      <dt>Tytuł</dt>
      <dd>A tutaj opis</dd>
    </dl>
    <dl class="galeria">
      <dt><img src="car.jpg" alt=""/></dt>
      <dt>Tytuł</dt>
      <dd>A tutaj opis</dd>
    </dl>
    <dl class="galeria">
      <dt><img src="car.jpg" alt=""/></dt>
      <dt>Tytuł</dt>
      <dd>A tutaj opis</dd>
    </dl>

    CSS

    dl.galeria {
    	border: 1px solid #000;
    	background-color: #ddd;
    	width: 102px;
    	text-align: center;
    	padding: 10px;
    	float: left;
    	margin-right: 16px;
    }
    .galeria dt {
    	font-weight: bold;
    }
    .galeria dt img {
    	border: 1px solid #000;
    	width: 100px;
    	height: auto;
    }
    .galeria dd {
    	margin: 0;
    	padding: 0;
    }

    Wynik takiego zapisu będzie wyglądał następująco:
    Lista definicji jako galeria obrazków

  7. Lista definicji jako kalendarz

    HTML

    <dl class="kalendarz">
      <dt>20 październik</dt>
      <dd>Spotkanie</dd>
      <dd>10.00</dd>
      <dd>Pojedź tam i się spotkaj ... </dd>
      <dt>25 październik</dt>
      <dd>Artykuł</dd>
      <dd>21.00</dd>
      <dd>Napisz artykuł na bloga ... </dd>
    </dl>

    CSS

    dl.kalendarz {
    	margin: 32px 0;
    	padding: 0;
    	font-family: georgia, times, serif;
    }
    .kalendarz dt {
    	position: relative;
    	left: 0;
    	top: 18px;
    	width: 80px;
    	font-weight: bold;
    }
    .kalendarz dd {
    	border-left: 1px solid #000;
    	margin: 0 0 0 96px;
    	padding: 0 0 8px 8px;
    }

    Wynik takiego zapisu będzie wyglądał następująco:
    Lista definicji jako kalendarz

  8. Lista definicji jako tabela - wersja 2

    HTML

    <dl class="tabela2">
      <dt>Jakiś tekst</dt>
      <dd>Nisl ut aliquip ex ea commodo consequat</dd>
      <dt>Jakiś inny tekst</dt>
      <dd>Lorem ipsum dolor sit amet elit...</dd>
      <dt>Jeszcze inny tekst</dt>
      <dd>Facilisis at vero eros et accumsan</dd>
    </dl>

    CSS

    dl.tabela2 {
    	border-bottom: 1px solid #999;
    }
    dl.tabela2 dt {
    	clear: left;
    	float: left;
    	width: 220px;
    	margin: 0;
    	padding: 5px;
    	border-top: 1px solid #999;
    	font-weight: bold;
    }
    dl.tabela2 dd {
    	margin-left: 230px;
    	padding: 5px;
    }
    dl.tabela2 dd.first {
    	border-top: 1px solid #999;
    }

    Wynik takiego zapisu będzie wyglądał następująco:
    Lista definicji jako tabela - wersja 2

Mam nadzieję, że powyższa lista przykładów okaże się użyteczna dla Ciebie.
Demo z tego artykułu możesz zobaczyć tutaj: lista definicji z wykorzystaniem CSS.

  • czarny

    Witam.

    Mam pytanie. Jak zrobic serie bialych pól na ktorych znajdowalo by sie zdjecie i opis tak jak na tej stronce.

    http://www.seans24.pl/

    Dzieki za odpowiedz.
    Pozdrawiam.

  • To, jak oni zrobili takie pola, można łatwo podejrzeć u nich w kodzie źródłowym strony.
    Taki układ nie jest żadnym problemem aby go zrobić.
    U nich zostało to zrobione na bazie listy nieuporządkowanej (ul). Nie widzę w tym nic trudnego i nadzwyczajnego.

  • yarr

    Witam

    Mam problem, którego rozwiązanie widziałem w zastosowaniu listy definicyjnej, ale nie umiem w żaden znany mi sposób osiągnąć pożądanego jej formatowania. Byłbym wdzięczny za jakąkolwiek sugestię.

    Ma więc być jak w zwykłej dwukolumnowej tabelce wyrównanie pierwszej kolumny do prawej, a drugiej do lewej. W pierwszej są numery przypisów, a w drugiej ich treść.

    Lista uporządkowana dostarcza takiego formatu, ale nie umożliwia (według mojego rozeznania) przypisania łączy do numerów poszczególnych pozycji listy.

    Lista definicyjna natomiast umożliwia zestawienie w jednej linii terminu i jego definicji jako oddzielnie formatowanych obiektów, ale nie znalazłem sposobu na ich wyjustowanie na wzór formatu listy uporządkowanej.

    Czy miałbyś na to jakiś sposób?

    Męczy mnie ten temat ze względu na kłopoty z formatowaniem przypisów w ebooku, gdzie tabelki nie są wskazane.

    Pozdrawiam –

    yarr

  • Piotr Nalepa

    nie do końca umiem sobie wyobrazić taki pomysł

  • yarr

    Chodzi o to, że tabelka umożliwia „przylepienie” swojej zawartości do krawędzi komórek, a tym samym ładne wyrównanie kolumny. Element listy nie udostępnia podobnego mechanizmu, ale pomyślałem, że może poradziłby sobie z takim zadaniem arkusz stylu.
    Znacznie lepiej wygląda justunek wzrastających liczb do prawej niż do lewej strony.

    Może należałoby sformułować problem ogólniej…
    Może to właśnie lista jest ograniczeniem. Nie wiem.
    Tymczasem postaram się obyć bez tego.
    W każdym razie, dziękuję za odzew.

    Pozdrawiam –
    yarr

  • Piotr Nalepa

    Można zajrzeć pod ten adres. O to chodziło? http://twitter.github.com/bootstrap/base-css.html#typography – chodzi o podpunkt z dl