Stránkování
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>
Martin
Zář 15, 2009 v 12:24Dobrý 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.