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
-
Proč investovat do nejvýkonnějších VPS s AMD EPYC procesory
14. června 2024 -
Vlastní web pomocí AI už může vytvořit opravdu každý
8. srpna 2024 -
-
AI v programování: Jak používat GitHub Copilot (část 1)
12. února 2024
Nejnovější
-
Jak rozšířit úložiště Macu za pětinovou cenu?
16. prosince 2024 -
Nové trendy v doménách pro osobní projekty – DIY, LIVING a LIFESTYLE
9. prosince 2024 -
Jak chránit webové stránky před Web/AI Scrapingem
27. listopadu 2024 -
Jaký monitor je nejlepší k novému Macu Mini?
25. listopadu 2024