Sickbrain.org

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:

.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;
}

Con il codice XHTML di questo tipo:

<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>

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.

Technorati Tags: css, tutorial, xhtml

Articoli che potrebbero interessarti

• 27/08/2009 -- Creare un effetto su blocchi con sfumatura di tonalità (0)
• 27/02/2009 -- Creare un menu di navigazione con effetto rollover con i CSS partendo dalla grafica (12)
• 27/02/2009 -- Drop-Down Menu e stile orizzontale (4)