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
-
AI v programování: Jak používat GitHub Copilot (část 1)
12. února 2024 -
-
Co je to GPSR a jak ovlivní české e‑shopy?
28. ledna 2025 -
10 nejčastějších chyb při tvorbě webu na WordPressu
28. července 2025
Nejnovější
-
Jaké jsou nejlepší nástroje pro tvorbu webového designu
3. října 2025 -
Rozhovor s vývojářem: „AI mi šetří hodiny práce měsíčně“
30. září 2025 -
.ai: Umělá inteligence a tak trošku ukradená doména
17. září 2025 -
Proč jsou důležité správné údaje o vlastnících domén
11. září 2025