Chcete-li ozvláštnit seznam odkazů, vhodným prvkem může být například tzv. hover efekt který známe převážně z různých typů tlačítek.

Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Christian Watson. Bližší popis najdete v článku How to Create a Block Hover Effect for a List of Links.

CSS

#links ul
{
list-style-type: none;
width: 400px;
}
#links li
{
border-top: 1px solid #999;
border-width: 1px 0;
margin: 5px 0;
}
#links li a
{
color: #3366CC;
display: block;
font: bold 120% Arial, Helvetica, sans-serif;
padding: 5px;
text-decoration: none;
}
* html #links li a
{ /* zprovozní hover efekt i pro IE */
width: 400px;
}
#links li a:hover {
background: #f6f6f6;
}
#links a em
{
color: #333;
display: block;
font: normal 85% Verdana, Helvetica, sans-serif;
line-height: 125%;
}
#links a span
{
color: #125F15;
font: normal 70% Verdana, Helvetica, sans-serif;
line-height: 150%;
}

XHTML

<html>
<body>
<div id=“links“>
<ul>
<li><a href=“#“ title=“Text“>Tabulka s posuvníkem …
<em>Tabulka u…</em>
<span>10. 7. 2007</span></a></li>
<li><a href=“#“ title=“Text“>Odstránkování
<em>Navigace ve…</em>
<span>2. 7. 2007</span></a></li>
<li><a href=“#“ title=“Text“>Drobečková navigace
<em>Drobečková navigace je…</em>
<span>24. 4. 2007</span></a></li>
</ul>
</div>
</body>
</html>

4 Příspěvků v diskuzi

  1. Vámi publikovaný ,hover efekt‘ v tom příkladě již hotovém pod Safari na Macu nechodí. Když pominu ještě češtinu. Na stránkách Christiana Watsona to však chodí bez problémů. I tak děkuji pane Kučero.
    Petr B.

  2. Nechci si hrát na chytrýho, ale problém s češtinou jsem kdysi řešil nastavením v:

    Tehdy mi češtinu špatně zobrazoval i FireFox.

  3. Tak snad napotřetí se to ukáže, píšu to bez závorek:
    „meta http-equiv=“content-type“ content=“text/html; charset=windows-1250″
    Místo uvozovek patří

Odpovědět