Toto řešení ukazuje efektní vylepšení strohých textových popisných seznamů pomocí obrázků uvozujících texty. Seznam definic (definition list – DL) tak můžeme jednoduše zkrášlit pomocí tématického obrázku.

Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Zoe Gillenwater. Bližší popis najdete v článku Create a Teaser Thumbnail List Using CSS.

CSS

dl
{
  width: 250px;
  font-size: 80%;
}
dt
{
  float: right;
  width: 190px;
  font-weight: bold;
  font-family: Georgia, „Times New Roman“, Times, serif;
}
dd
{
  margin: 0 0 15px 60px;
  color: #666666;
  font-family: „Trebuchet MS“, Arial, Helvetica, sans-serif;
}
dd.obrazek
{
  float: left;
  margin: 0;
}

XHTML

<html>
<body>
<dl>
<dt>Očko</dt>
<dd class=“obrazek“>
<img src=“ocko.gif“ alt=““ width=“50″ height=“31″ />
</dd>
<dd>Lorem ipsum…</dd>
</dl>
</body>
</html>

Žádný příspěvek v diskuzi

Odpovědět