Questo tutorial è liberamente ispirato ai vari siti web dell’ondata web 2.0 come Digg.com oppure Flickr.com; questi presentano enormi quantità di argomenti e perciò tali contenuti non possono stare tutti all’interno della medesima pagina ed è per questo che vengono suddivisi in più fogli.
Il metodo utilizzato è basato sull’impiego delle ormai dinamicissime liste riuscendo ad avere un risultato semanticamente buono e facilmente controllabile. Ovviamente le scelte stilistiche possono essere infinite e totalmente personalizzabili, ma per capire subito di cosa stiamo parlando si può visualizzare questo esempio.

Come accennato si inizia con l’impiego di una classe specifica che noi chiameremo .page_flickr in omaggio al sito Flickr.com; di questa classe dichiareremo il comportamento sulle liste, sia come testo “neutro” sia come collegamento ipertestuale.

Perciò avremo un codice CSS simile a questo:

[code lang=”css”]
.page_flickr {
padding: 1em;
}
.page_flickr ul {
margin: 0;
padding: 0;
text-align: left; /*Allineamento*/
font-size: 1.0em;
}
.page_flickr li {
list-style-type: none;
display: inline;
padding-bottom:1px;
}
.page_flickr a, .page_flickr a:visited {
padding: 0 5px;
margin-right: 0.1em;
border: 1px solid #9aafe5;
text-decoration: none;
color: #2e6ab1;
}
.page_flickr a:hover, .page_flickr a:active {
border: 1px solid #036;
color: #fff;
background:#0063dc;
}
.page_flickr li.current {
padding: 0 5px;
font-weight: bold;
color: #ff0084;
}
.page_flickr li.disable {
padding: 0 5px;
background: #fff;
color: #aaa;
}
.page_flickr li.next { font-weight: bold;}
.page_flickr li.next a:hover { border: solid 2px #036;}

/*IE 6 e precedenti*/
* html .page_flickr li.current, * html .page_flickr li.disable {
margin-right: 5px;
padding-right: 0;
}
[/code]

Con il codice XHTML di questo tipo:

[code lang=”html”]
<div class="page_flickr">
<ul>
<li class="disable">« previous</li>
<li class="current">1</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a>…</li>
<li><a href="#">10</a></li>
<li><a href="#">11</a></li>
<li class="next"><a href="#">next »</a></li>
</ul>
</div>
[/code]

Analizziamo il CSS

Si inizia creando una classe specifica .page_flick che conterrà la lista e il comportamento di questa nei confronti dei link e le successive dichiarazioni sugli elementi.
Per prima cosa generiamo una lista orizzontale e a questa applicheremo la grafica che meglio si abbina alle nostre esigenze; le cose risultano estremamente semplici con i comportamenti sui link (a:hover, a:visited, a:active) e ci concentriamo con maggiore cura per quanto riguarda ciò che indica la pagina corrente nella sequenza dei numeri.

La classe .page_flickr li.current e .page_flickr li.disable servono rispettivamente allo scopo di specificare il comportamento per quegli elementi che indicano la pagina attuale e quelle disabilitate perché molto antecedenti o precedenti.

A tal riguardo è necessario un comportamento specifico nei confronti del browser Internet Explorer 6 e precedenti, per chi fosse interessato ho fatto riferimento all’articolo di Position is Everything che spiega come risolvere il problema.
Nel nostro caso bisogna fare fronte a tale situazione utilizzando il selettore universale * abbinato a l’elemento html per controllare il posizionamento e il padding destro.