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
-
Monitory OLED: klíčové pojmy a funkce
13. května 2024 -
Šokující data od Microsoftu: Kyberútoky rostou o stovky procent!
8. listopadu 2024 -
-
Nejnovější
-
Apple jde naproti práci s HDR monitory!
17. ledna 2025 -
Jak využít AI potenciál svého Macu?
9. ledna 2025 -
NIS2: Verifikace údajů vlastníků domén
6. ledna 2025 -
Dostali jste k vánocům PC? Využijte jeho AI potenciál!
3. ledna 2025