Tutoriaux
Voici aujourd'hui un petit cours de design pour vos paginations à l'aide de CSS. Depuis l'arrivée des blogs, que ce soit avec Wordpress, Dotclear, Joomla ou tout autres services en ligne tel Blogspot, les systèmes de pagination on fait une entré fracassante sur le web. En fait, ce système existait déjà bien avant, par contre, leur utilisations était beaucoup plus discrète. Voici donc aujourd'hui, une série d'exemple code inclus pour améliorer la présentation de vos paginations.
Digg Style

HTML
<div class="digg">
<span class="disabled"> < </span>
<span class="current">1</span>
<a href="#?page=2">2</a>
<a href="#?page=3">3</a>
<a href="#?page=4">4</a>
<a href="#?page=5">5</a>
<a href="#?page=6">6</a>
<a href="#?page=7">7</a>...
<a href="#?page=199">199</a>
<a href="#?page=200">200</a>
<a href="#?page=2"> > </a>
</div>
CSS
DIV.digg {
PADDING-RIGHT: 3px;
PADDING-LEFT: 3px;
PADDING-BOTTOM: 3px;
MARGIN: 3px;
PADDING-TOP: 3px;
TEXT-ALIGN: center;
}
DIV.digg A {
BORDER-RIGHT: #aaaadd 1px solid;
PADDING-RIGHT: 5px;
BORDER-TOP: #aaaadd 1px solid;
PADDING-LEFT: 5px;
PADDING-BOTTOM: 2px;
MARGIN: 2px;
BORDER-LEFT: #aaaadd 1px solid;
COLOR: #000099;
PADDING-TOP: 2px;
BORDER-BOTTOM: #aaaadd 1px solid;
TEXT-DECORATION: none;
}
DIV.digg A:hover {
BORDER-RIGHT: #000099 1px solid;
BORDER-TOP: #000099 1px solid;
BORDER-LEFT: #000099 1px solid;
COLOR: #000;
BORDER-BOTTOM: #000099 1px solid;
}
DIV.digg A:active {
BORDER-RIGHT: #000099 1px solid; B
ORDER-TOP: #000099 1px solid;
BORDER-LEFT: #000099 1px solid;
COLOR: #000;
BORDER-BOTTOM: #000099 1px solid;
}
DIV.digg SPAN.current {
BORDER-RIGHT: #000099 1px solid;
PADDING-RIGHT: 5px;
BORDER-TOP: #000099 1px solid;
PADDING-LEFT: 5px;
FONT-WEIGHT: bold;
PADDING-BOTTOM: 2px; MARGIN: 2px;
BORDER-LEFT: #000099 1px solid;
COLOR: #fff;
PADDING-TOP: 2px;
BORDER-BOTTOM: #000099 1px solid;
BACKGROUND-COLOR: #000099;
}
DIV.digg SPAN.disabled {
BORDER-RIGHT: #eee 1px solid;
PADDING-RIGHT: 5px;
BORDER-TOP: #eee 1px solid;
PADDING-LEFT: 5px;
PADDING-BOTTOM: 2px;
MARGIN: 2px;
BORDER-LEFT: #eee 1px solid;
COLOR: #ddd;
PADDING-TOP: 2px;
BORDER-BOTTOM: #eee 1px solid;
}
Yahoo Style

HTML
<div class="yahoo">
<span class="disabled"> < </span>
<span class="current">1</span>
<a href="#?page=2">2</a>
<a href="#?page=3">3</a>
<a href="#?page=4">4</a>
<a href="#?page=5">5</a>
<a href="#?page=6">6</a>
<a href="#?page=7">7</a>...
<a href="#?page=199">199</a>
<a href="#?page=200">200</a>
<a href="#?page=2"> > </a>
</div>
CSS
DIV.yahoo {
PADDING-RIGHT: 3px;
PADDING-LEFT: 3px;
PADDING-BOTTOM: 3px;
MARGIN: 3px;
PADDING-TOP: 3px;
TEXT-ALIGN: center;
}
DIV.yahoo A {
BORDER-RIGHT: #fff 1px solid;
PADDING-RIGHT: 5px;
BORDER-TOP: #fff 1px solid;
PADDING-LEFT: 5px;
PADDING-BOTTOM: 2px;
MARGIN: 2px;
BORDER-LEFT: #fff 1px solid;
COLOR: #000099;
PADDING-TOP: 2px;
BORDER-BOTTOM: #fff 1px solid;
TEXT-DECORATION: underline;
}
DIV.yahoo A:hover {
BORDER-RIGHT: #000099 1px solid;
BORDER-TOP: #000099 1px solid;
BORDER-LEFT: #000099 1px solid;
COLOR: #000;
BORDER-BOTTOM: #000099 1px solid;
}
DIV.yahoo A:active {
BORDER-RIGHT: #000099 1px solid;
BORDER-TOP: #000099 1px solid;
BORDER-LEFT: #000099 1px solid;
COLOR: #f00;
BORDER-BOTTOM: #000099 1px solid;
}
DIV.yahoo SPAN.current {
BORDER-RIGHT: #fff 1px solid;
PADDING-RIGHT: 5px;
BORDER-TOP: #fff 1px solid;
PADDING-LEFT: 5px;
FONT-WEIGHT: bold;
PADDING-BOTTOM: 2px;
MARGIN: 2px;
BORDER-LEFT: #fff 1px solid;
COLOR: #000;
PADDING-TOP: 2px;
BORDER-BOTTOM: #fff 1px solid;
BACKGROUND-COLOR: #fff;
}
DIV.yahoo SPAN.disabled {
BORDER-RIGHT: #eee 1px solid;
PADDING-RIGHT: 5px;
BORDER-TOP: #eee 1px solid;
PADDING-LEFT: 5px;
PADDING-BOTTOM: 2px;
MARGIN: 2px;
BORDER-LEFT: #eee 1px solid;
COLOR: #ddd;
PADDING-TOP: 2px;
BORDER-BOTTOM: #eee 1px solid;
}
New Yahoo Style

HTML
<div class="yahoo2">
<span class="disabled"> < Prev</span>
<span class="current">1</span>
<a href="#?page=2">2</a>
<a href="#?page=3">3</a>
<a href="#?page=4">4</a>
<a href="#?page=5">5</a>
<a href="#?page=6">6</a>
<a href="#?page=7">7</a>...
<a href="#?page=199">199</a>
<a href="#?page=200">200</a>
<a href="#?page=2">Next > </a>
</div>
CSS
DIV.yahoo2 {
PADDING-RIGHT: 3px;
PADDING-LEFT: 3px;
FONT-SIZE: 0.85em;
PADDING-BOTTOM: 3px;
MARGIN: 3px;
PADDING-TOP: 3px;
FONT-FAMILY: Tahoma,Helvetica,sans-serif;
TEXT-ALIGN: center;
}
DIV.yahoo2 A {
BORDER-RIGHT: #ccdbe4 1px solid;
PADDING-RIGHT: 8px;
BACKGROUND-POSITION: 50% bottom;
BORDER-TOP: #ccdbe4 1px solid;
PADDING-LEFT: 8px;
PADDING-BOTTOM: 2px;
BORDER-LEFT: #ccdbe4 1px solid;
COLOR: #0061de;
MARGIN-RIGHT: 3px;
PADDING-TOP: 2px;
BORDER-BOTTOM: #ccdbe4 1px solid;
TEXT-DECORATION: none;
}
DIV.yahoo2 A:hover {
BORDER-RIGHT: #2b55af 1px solid;
BORDER-TOP: #2b55af 1px solid;
BACKGROUND-IMAGE: none;
BORDER-LEFT: #2b55af 1px solid;
COLOR: #fff;
BORDER-BOTTOM: #2b55af 1px solid;
BACKGROUND-COLOR: #3666d4;
}
DIV.yahoo2 A:active {
BORDER-RIGHT: #2b55af 1px solid;
BORDER-TOP: #2b55af 1px solid;
BACKGROUND-IMAGE: none;
BORDER-LEFT: #2b55af 1px solid;
COLOR: #fff;
BORDER-BOTTOM: #2b55af 1px solid;
BACKGROUND-COLOR: #3666d4;
}
DIV.yahoo2 SPAN.current {
PADDING-RIGHT: 6px;
PADDING-LEFT: 6px;
FONT-WEIGHT: bold;
PADDING-BOTTOM: 2px;
COLOR: #000;
MARGIN-RIGHT: 3px;
PADDING-TOP: 2px;
}
DIV.yahoo2 SPAN.disabled {
DISPLAY: none;
}
DIV.yahoo2 A.next {
BORDER-RIGHT: #ccdbe4 2px solid;
BORDER-TOP: #ccdbe4 2px solid;
MARGIN: 0px 0px 0px 10px;
BORDER-LEFT: #ccdbe4 2px solid;
BORDER-BOTTOM: #ccdbe4 2px solid;
}
DIV.yahoo2 A.next:hover {
BORDER-RIGHT: #2b55af 2px solid;
BORDER-TOP: #2b55af 2px solid;
BORDER-LEFT: #2b55af 2px solid;
BORDER-BOTTOM: #2b55af 2px solid;
}
DIV.yahoo2 A.prev {
BORDER-RIGHT: #ccdbe4 2px solid;
BORDER-TOP: #ccdbe4 2px solid;
MARGIN: 0px 10px 0px 0px;
BORDER-LEFT: #ccdbe4 2px solid;
BORDER-BOTTOM: #ccdbe4 2px solid;
}
DIV.yahoo2 A.prev:hover {
BORDER-RIGHT: #2b55af 2px solid;
BORDER-TOP: #2b55af 2px solid;
BORDER-LEFT: #2b55af 2px solid;
BORDER-BOTTOM: #2b55af 2px solid;
}
Flickr Style

HTML
<div class="flickr">
<span class="disabled"> < </span>
<span class="current">1</span>
<a href="#?page=2">2</a>
<a href="#?page=3">3</a>
<a href="#?page=4">4</a>
<a href="#?page=5">5</a>
<a href="#?page=6">6</a>
<a href="#?page=7">7</a>...
<a href="#?page=199">199</a>
<a href="#?page=200">200</a>
<a href="#?page=2"> > </a>
</div>
CSS
DIV.flickr {
PADDING-RIGHT: 3px;
PADDING-LEFT: 3px;
PADDING-BOTTOM: 3px;
MARGIN: 3px;
PADDING-TOP: 3px;
TEXT-ALIGN: center;
}
DIV.flickr A {
BORDER-RIGHT: #dedfde 1px solid;
PADDING-RIGHT: 6px;
BACKGROUND-POSITION: 50% bottom;
BORDER-TOP: #dedfde 1px solid;
PADDING-LEFT: 6px;
PADDING-BOTTOM: 2px;
BORDER-LEFT: #dedfde 1px solid;
COLOR: #0061de;
MARGIN-RIGHT: 3px;
PADDING-TOP: 2px;
BORDER-BOTTOM: #dedfde 1px solid;
TEXT-DECORATION: none;
}
DIV.flickr A:hover {
BORDER-RIGHT: #000 1px solid;
BORDER-TOP: #000 1px solid;
BACKGROUND-IMAGE: none;
BORDER-LEFT: #000 1px solid;
COLOR: #fff;
BORDER-BOTTOM: #000 1px solid;
BACKGROUND-COLOR: #0061de;
}
DIV.meneame A:active {
BORDER-RIGHT: #000 1px solid;
BORDER-TOP: #000 1px solid;
BACKGROUND-IMAGE: none;
BORDER-LEFT: #000 1px solid;
COLOR: #fff;
BORDER-BOTTOM: #000 1px solid;
BACKGROUND-COLOR: #0061de;
}
DIV.flickr SPAN.current {
PADDING-RIGHT: 6px;
PADDING-LEFT: 6px;
FONT-WEIGHT: bold;
PADDING-BOTTOM: 2px;
COLOR: #ff0084;
MARGIN-RIGHT: 3px;
PADDING-TOP: 2px;
}
DIV.flickr SPAN.disabled {
PADDING-RIGHT: 6px;
PADDING-LEFT: 6px;
PADDING-BOTTOM: 2px;
COLOR: #adaaad;
MARGIN-RIGHT: 3px;
PADDING-TOP: 2px;
}
Sabros.us Style
.png)
HTML
<div class="sabrosus">
<span class="disabled"> < </span>
<span class="current">1</span>
<a href="#?page=2">2</a>
<a href="#?page=3">3</a>
<a href="#?page=4">4</a>
<a href="#?page=5">5</a>
<a href="#?page=6">6</a>
<a href="#?page=7">7</a>...
<a href="#?page=199">199</a>
<a href="#?page=200">200</a>
<a href="#?page=2"> > </a>
</div>
CSS
DIV.sabrosus {
PADDING-RIGHT: 3px;
PADDING-LEFT: 3px;
PADDING-BOTTOM: 3px;
MARGIN: 3px;
PADDING-TOP: 3px;
TEXT-ALIGN: center;
}
DIV.sabrosus A {
BORDER-RIGHT: #9aafe5 1px solid;
PADDING-RIGHT: 5px;
BORDER-TOP: #9aafe5 1px solid;
PADDING-LEFT: 5px;
PADDING-BOTTOM: 2px;
BORDER-LEFT: #9aafe5 1px solid;
COLOR: #2e6ab1;
MARGIN-RIGHT: 2px;
PADDING-TOP: 2px;
BORDER-BOTTOM: #9aafe5 1px solid;
TEXT-DECORATION: none;
}
DIV.sabrosus A:hover {
BORDER-RIGHT: #2b66a5 1px solid;
BORDER-TOP: #2b66a5 1px solid;
BORDER-LEFT: #2b66a5 1px solid;
COLOR: #000;
BORDER-BOTTOM: #2b66a5 1px solid;
BACKGROUND-COLOR: lightyellow;
}
DIV.pagination A:active {
BORDER-RIGHT: #2b66a5 1px solid;
BORDER-TOP: #2b66a5 1px solid;
BORDER-LEFT: #2b66a5 1px solid;
COLOR: #000;
BORDER-BOTTOM: #2b66a5 1px solid;
BACKGROUND-COLOR: lightyellow;
}
DIV.sabrosus SPAN.current {
BORDER-RIGHT: navy 1px solid;
PADDING-RIGHT: 5px;
BORDER-TOP: navy 1px solid;
PADDING-LEFT: 5px;
FONT-WEIGHT: bold;
PADDING-BOTTOM: 2px;
BORDER-LEFT: navy 1px solid; COLOR: #fff;
MARGIN-RIGHT: 2px;
PADDING-TOP: 2px;
BORDER-BOTTOM: navy 1px solid;
BACKGROUND-COLOR: #2e6ab1;
}
DIV.sabrosus SPAN.disabled {
BORDER-RIGHT: #929292 1px solid;
PADDING-RIGHT: 5px;
BORDER-TOP: #929292 1px solid;
PADDING-LEFT: 5px;
PADDING-BOTTOM: 2px;
BORDER-LEFT: #929292 1px solid;
COLOR: #929292;
MARGIN-RIGHT: 2px;
PADDING-TOP: 2px;
BORDER-BOTTOM: #929292 1px solid;
}
Black-Red Style

HTML
<div style="padding-top:10px;padding-bottom:10px;background-color:#313131;">
<div class="black-red">
<span class="disabled"> < </span>
<span class="current">1</span>
<a href="#?page=2">2</a>
<a href="#?page=3">3</a>
<a href="#?page=4">4</a>
<a href="#?page=5">5</a>
<a href="#?page=6">6</a>
<a href="#?page=7">7</a>...
<a href="#?page=199">199</a>
<a href="#?page=200">200</a>
<a href="#?page=2"> > </a>
</div>
</div>
CSS
DIV.black-red {
FONT-SIZE: 11px;
COLOR: #fff;
FONT-FAMILY: Tahoma, Arial, Helvetica, Sans-serif;
BACKGROUND-COLOR: #3e3e3e;
}
DIV.black-red A {
PADDING-RIGHT: 5px;
PADDING-LEFT: 5px;
PADDING-BOTTOM: 2px;
MARGIN: 2px;
COLOR: #fff;
PADDING-TOP: 2px;
BACKGROUND-COLOR: #3e3e3e;
TEXT-DECORATION: none;
}
DIV.black-red A:hover {
COLOR: #fff;
BACKGROUND-COLOR: #ec5210;
}
DIV.black-red A:active {
COLOR: #fff;
BACKGROUND-COLOR: #ec5210;
}
DIV.black-red SPAN.current {
PADDING-RIGHT: 5px;
PADDING-LEFT: 5px;
FONT-WEIGHT: bold;
PADDING-BOTTOM: 2px;
MARGIN: 2px;
COLOR: #fff;
PADDING-TOP: 2px;
BACKGROUND-COLOR: #313131;
}
DIV.black-red SPAN.disabled {
PADDING-RIGHT: 5px;
PADDING-LEFT: 5px;
PADDING-BOTTOM: 2px;
MARGIN: 2px;
COLOR: #868686;
PADDING-TOP: 2px;
BACKGROUND-COLOR: #3e3e3e;
}
Blue Style

HTML
<div class="manu">
<span class="disabled"> < Prev</span>
<span class="current">1</span>
<a href="#?page=2">2</a>
<a href="#?page=3">3</a>
<a href="#?page=4">4</a>
<a href="#?page=5">5</a>
<a href="#?page=6">6</a>
<a href="#?page=7">7</a>...
<a href="#?page=199">199</a>
<a href="#?page=200">200</a>
<a href="#?page=2">Next > </a>
</div>
CSS
.manu {
PADDING-RIGHT: 3px;
PADDING-LEFT: 3px;
PADDING-BOTTOM: 3px;
MARGIN: 3px;
PADDING-TOP: 3px;
TEXT-ALIGN: center;
}
.manu A {
BORDER-RIGHT: #eee 1px solid;
PADDING-RIGHT: 5px;
BORDER-TOP: #eee 1px solid;
PADDING-LEFT: 5px;
PADDING-BOTTOM: 2px;
MARGIN: 2px;
BORDER-LEFT: #eee 1px solid;
COLOR: #036cb4;
PADDING-TOP: 2px;
BORDER-BOTTOM: #eee 1px solid;
TEXT-DECORATION: none;
}
.manu A:hover {
BORDER-RIGHT: #999 1px solid;
BORDER-TOP: #999 1px solid;
BORDER-LEFT: #999 1px solid;
COLOR: #666;
BORDER-BOTTOM: #999 1px solid;
}
.manu A:active {
BORDER-RIGHT: #999 1px solid;
BORDER-TOP: #999 1px solid;
BORDER-LEFT: #999 1px solid: #666;
BORDER-BOTTOM: #999 1px solid;
}
.manu .current {
BORDER-RIGHT: #036cb4 1px solid;
PADDING-RIGHT: 5px;
BORDER-TOP: #036cb4 1px solid;
PADDING-LEFT: 5px;
FONT-WEIGHT: bold;
PADDING-BOTTOM: 2px;
MARGIN: 2px;
BORDER-LEFT: #036cb4 1px solid;
COLOR: #fff;
PADDING-TOP: 2px;
BORDER-BOTTOM: #036cb4 1px solid;
BACKGROUND-COLOR: #036cb4;
}
.manu .disabled {
BORDER-RIGHT: #eee 1px solid;
PADDING-RIGHT: 5px;
BORDER-TOP: #eee 1px solid;
PADDING-LEFT: 5px;
PADDING-BOTTOM: 2px;
MARGIN: 2px;
BORDER-LEFT: #eee 1px solid;
COLOR: #ddd;
PADDING-TOP: 2px;
BORDER-BOTTOM: #eee 1px solid;
}
Gray Style
.png)
HTML
<div class="quotes">
<span class="disabled"> < </span>
<span class="current">1</span>
<a href="#?page=2">2</a>
<a href="#?page=3">3</a>
<a href="#?page=4">4</a>
<a href="#?page=5">5</a>
<a href="#?page=6">6</a>
<a href="#?page=7">7</a>...
<a href="#?page=199">199</a>
<a href="#?page=200">200</a>
<a href="#?page=2"> > </a>
</div>
CSS
DIV.quotes {
PADDING-RIGHT: 3px;
PADDING-LEFT: 3px;
PADDING-BOTTOM: 3px;
MARGIN: 3px;
PADDING-TOP: 3px;
TEXT-ALIGN: center;
}
DIV.quotes A {
BORDER-RIGHT: #ddd 1px solid;
PADDING-RIGHT: 5px;
BORDER-TOP: #ddd 1px solid;
PADDING-LEFT: 5px;
PADDING-BOTTOM: 2px;
BORDER-LEFT: #ddd 1px solid;
COLOR: #aaa;
MARGIN-RIGHT: 2px;
PADDING-TOP: 2px;
BORDER-BOTTOM: #ddd 1px solid;
TEXT-DECORATION: none;
}
DIV.quotes A:hover {
BORDER-RIGHT: #a0a0a0 1px solid;
PADDING-RIGHT: 5px;
BORDER-TOP: #a0a0a0 1px solid;
PADDING-LEFT: 5px;
PADDING-BOTTOM: 2px;
BORDER-LEFT: #a0a0a0 1px solid;
MARGIN-RIGHT: 2px;
PADDING-TOP: 2px;
BORDER-BOTTOM: #a0a0a0 1px solid;
}
DIV.quotes A:active {
BORDER-RIGHT: #a0a0a0 1px solid;
PADDING-RIGHT: 5px;
BORDER-TOP: #a0a0a0 1px solid;
PADDING-LEFT: 5px;
PADDING-BOTTOM: 2px;
BORDER-LEFT: #a0a0a0 1px solid;
MARGIN-RIGHT: 2px;
PADDING-TOP: 2px;
BORDER-BOTTOM: #a0a0a0 1px solid;
}
DIV.quotes SPAN.current {
BORDER-RIGHT: #e0e0e0 1px solid;
PADDING-RIGHT: 5px;
BORDER-TOP: #e0e0e0 1px solid;
PADDING-LEFT: 5px;
FONT-WEIGHT: bold;
PADDING-BOTTOM: 2px;
BORDER-LEFT: #e0e0e0 1px solid;
COLOR: #aaa;
MARGIN-RIGHT: 2px;
PADDING-TOP: 2px;
BORDER-BOTTOM: #e0e0e0 1px solid;
BACKGROUND-COLOR: #f0f0f0;
}
DIV.quotes SPAN.disabled {
BORDER-RIGHT: #f3f3f3 1px solid;
PADDING-RIGHT: 5px;
BORDER-TOP: #f3f3f3 1px solid;
PADDING-LEFT: 5px;
PADDING-BOTTOM: 2px;
BORDER-LEFT: #f3f3f3 1px solid;
COLOR: #ccc;
MARGIN-RIGHT: 2px;
PADDING-TOP: 2px;
BORDER-BOTTOM: #f3f3f3 1px solid;
}
















