Navigace ve formě odkazování na další stránky. Lze ji vidět predevším u internetových obchodů, katalogů a vyhledávačů, pokud se obsah nevejde na jednu stránku a je potřeba jej rozdělit na stránky další.

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

Toto řešení publikoval Ian Main. Bližší popis najdete v článku CSS Pagination Links.

CSS

.odstrankovani
{
padding: 2px;
}
.odstrankovani ul
{
margin: 0;
padding: 0;
text-align: left;
font-size: 16px;
}
.odstrankovani li
{
list-style-type: none;
display: inline;
padding-bottom: 1px;
}
.odstrankovani a, .odstrankovani a:visited
{
padding: 0 5px;
border: 1px solid #9aafe5;
text-decoration: none;
color: #2e6ab1;
}
.odstrankovani a:hover, .odstrankovani a:active
{
border: 1px solid #2b66a5;
color: #000;
background-color: lightyellow;
}
.odstrankovani li.aktualni-stranka
{
font-weight: bold;
padding: 0 5px;
border: 1px solid navy;
background-color: #2e6ab1;
color: #FFF;
}
.odstrankovani li.zruseny-odkaz
{
padding: 0 5px;
border: 1px solid #929292;
color: #929292;
}
.odstrankovani li.dalsi-stranka
{
font-weight: bold;
}
* html .odstrankovani li.aktualni-stranka, * html .odstrankovani li.zruseny-odkaz
{
margin-right: 5px;
padding-right: 0;
}

XHTML

<html>
<body>
<div class=“odstrankovani“>
<ul>
<li class=“zruseny-odkaz“>« Předchozí</li>
<li class=“aktualni-stranka“>1</li>
<li><a href=“#“>2</a></li>
<li><a href=“#“>3</a></li>
<li class=“dalsi-stranka“><a href=“#“>Další »</a></li>
</ul>
</div>
</body>
</html>

1 Příspěvěk v diskuzi

  1. Dobrý den,
    chtěl bych se zeptat jak ovlivním počet odkazu věcí na stránce než mě to přidá stránky.
    Předem děkuji.

Odpovědět