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
-
Jak si vyzkoušet Apple Intelligence v EU
2. srpna 2024 -
Co je to TTL a proč na něm záleží?
25. března 2025 -
Fandíme českým sportovcům a rozdáváme hosting ZDARMA!
26. července 2024 -
Jak se chránit před podvody na internetu – část 1
8. října 2024
Nejnovější
-
-
Co je to jazykový model
17. června 2025 -
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