Obrázkové popisné seznamy
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>
Mohlo by vás také zajímat
-
Nenechte se zaskočit TLS certifikáty na 47 dní
2. května 2025 -
INNOCN monitory: špičková kvalita za zlomek ceny
5. června 2025 -
-
Aktualizujete svoji .NET webovou aplikaci? Může se hodit app_offline.htm
10. července 2024
Nejnovější
-
Zoner Photo Studio X se mění na Zoner Studio
13. června 2025 -
Co je to transformer v umělé inteligenci (AI)
10. června 2025 -
INNOCN monitory: špičková kvalita za zlomek ceny
5. června 2025 -
20 let Ubuntu: Cesta od revoluce k digitální každodennosti
30. května 2025