letwist

W artykule Definition lists - misused or misunderstood? Russ Weakley podaje ciekawe przykłady zastosowania list definicji. Listy takie można wykorzystać do tworzenia wszelkiego rodzaju spisów z objaśnieniami lub też estetycznie wyglądających "bloków" zawierających zdjęcie wraz z opisem. Szczególnie interesującym wydaje się to drugie zastosowanie. Zaprezentowany przykład pływającego obrazka wygląda smakowicie.

Ma jednak jeden mankament - ustawioną na stałe szerokość, którą trzeba by dobierać do każdego obrazka wstawianego na stronę tą metodą. Czy da się inaczej? Jeśli ustawimy wartość właściwości width na auto, tekst opisu będzie w niektórych przypadkach rozciągać listę, zaburzając wygląd strony.

Molo

Sopockie molo. Schody na górny pokład

Można by łamać tekst opisu, ale przecież ostatecznie chodzi o wygodę. I tu na pomoc przychodzą stare, dobre tabelki, a właściwie ich duch:

width: 10px;
display: table;
table-layout: auto;

Lista definicji ma na początku szerokość 10 pikseli, a potem jest rozciągana (na sposób tabelkowy) zależnie od szerokości obrazka, ale niezależnie od długości tekstu. Po prawej widać efekt. Prawda, że ładnie?

HTML:

<dl class="image right">
  <dt>Molo</dt>
  <dt><img src="/images/schody.jpg" alt="Schody" /></dt>
  <dd>Sopockie molo. Schody na górny pokład</dd>
</dl>

CSS:

dl.image {
	width: 10px;
	padding: 6px;
	border: 1px solid #999;
	background-color: #EEE;
	color: inherit;
	text-align: center;
	display: table;
	table-layout: auto;
	} 

.left {
	float: left;
	margin: .5em 1em .5em 0;
	}
.right {
	float: right;
	margin: .5em 0 .5em 1em;
	}

dl.image dt {
	font-weight: bold;
	}

dl.image dt img {
	border: 1px solid #666;
	}

dl.image dd {
	margin: 0 auto;
	font-size: .8em;
	}

Tym sposobem mamy gotowe style, pozwalające w prosty sposób wstawiać ładnie "wzbogacone" obrazki i, nie sprawiające już problemów, ich opisy.

Ktoś słusznie zauważył, że w Internet Explorerze powyższe nie działa tak jak powinno. Cóż, pewnie nigdy do końca nie będzie, ale IE podesłać można jedno ze - wspomianych już - mniej interesujących rozwiązań. width: 10px; zamienić można na width: auto; (opis poszerza listę) lub width: 100px; (na przykład).