paginazione record con i css

**nicola75ss** · 23-04-2006, 17:27

Ciao a tutti. Come da titolo qualcuno saprebbe indicarmi qualche link con degli esempi di paginazione di record. Vorrei infatti qualcosa di più carino di un semplice menù di numeri tipo 1 2 3 4 sottolineati per il richiamo delle pagine.

**pierofix** · 23-04-2006, 18:01

Potresti spiegarti meglio, magari con qualche link o immagine d'esempio? Grazie.

**nicola75ss** · 23-04-2006, 18:19

Sì,scusami. Pensavo di essere stato abbastanza chiaro ma un esempio pratico sicuramente chiarisce il concetto.

http://php.html.it/script/lista/67/audio-e-musica/

La pagina restituisce i record suddivisi in 3 pagine con la pagina corrente evidenziata con un rettangolino rosso. Ho provato a guardare il sorgente ma non sono riuscito a ricrearlo.

**pierofix** · 23-04-2006, 18:33

Credo ti basti utilizzare delle semplici immagini di sfondo:

codice:

XHTML
<p id="paginazione">
   Pagine: 
   1 
   <span>|</span> 
   2 
   <span>|</span> 
   3
</p>

CSS
#paginazione span
{
   position:absolute; top:-100px;
   width:1px, height:1px;
   overflow:hidden;
}
#paginazione a
{
   padding:3px;
   color:#fff;
   text-decoration:none;
   background:url('sfondo.gif') no-repeat 50% 50%;
}

**nicola75ss** · 23-04-2006, 19:45

Ciao Piero. Stavo facendo un pò di prove con la soluzione che mi hai postato.
Ho notato una cosa buffa (almeno per me novizio dei css). Le barre separatrici tra le pagine mi vengono visualizzate solo se commento questa riga:
/*position:absolute; top:-100px;*/

Siccome mi piacerebbe ottenere un effetto come quello linkato ho definito un id pagina solo per la pagina corrente. L'effetto visivo è quello desiderato. Spero che sia anche sintatticamente corretto. Grazie ancora.

<html>
<head>
<style type="text/css">
#paginazione span
{
position:absolute; top:-100px;
width:1px, height:1px;
overflow:hidden;
}

#paginazione a
{
padding:3px;
color:#fff;
text-decoration:none;
background:url('sfondo.gif') no-repeat 50% 50%;
}

/*codice mio */
#pagina
{
padding:3px;
color:#fff;
text-decoration:none;
background:url('sfondo.gif') no-repeat 50% 50%;

}
a
{
text-decoration:none;
}
/*fine mio esperimento :-) */
</style>
</head>
<body>
<p id="paginazione">
Pagine:
1
<span>|</span>
2
<span>|</span>
3
</p>

Pagine:
1
2
3
</p>
</body>

**michelepi** · 24-04-2006, 10:02

Ciao Nicola, scusa il dubbio, ma non si sa mai, per applicare il numero di pagine prima hai fatto lo script per il numero di record?

grazie

**nicola75ss** · 24-04-2006, 11:59

Originariamente inviato da michelepi
Ciao Nicola, scusa il dubbio, ma non si sa mai, per applicare il numero di pagine prima hai fatto lo script per il numero di record?

grazie

Sì, è un'applicazione che sto realizzando in php. Mi serviva solo un consiglio per rendere il tutto esteticamente più gradevole. Se cerchi paginazione in rete o sul forum del linguaggio lato server che ti interessa trovi tanti esempi pratici.

**pierofix** · 24-04-2006, 21:10

Originariamente inviato da nicola75ss
Ho notato una cosa buffa (almeno per me novizio dei css). Le barre separatrici tra le pagine mi vengono visualizzate solo se commento questa riga:

/*position:absolute; top:-100px;*/

In realtà le barre spaziatrici (i pipe) le avevo nascoste intenzionalmente.

Nell'esempio da te portato infatti non figuravano. A livello di markup, però, i link adiacenti devono sempre essere separati da almeno un carattere stampato a video, per evitare che alcuni screen-reader leggano l'intera serie come fosse un solo collegamento. Ecco perchè nella struttura compaiono i caratteri ma a video no.

Comunque, a livello di accessibilità reale, se fai visualizzare le barre separatrici tra un link e l'altro è molto meglio. Puoi infatti aiutare chiunque a percepire (visivamente) meglio dove finisce un collegamento ipertestuale e dove ne inizia un altro.

Siccome mi piacerebbe ottenere un effetto come quello linkato ho definito un id pagina solo per la pagina corrente. L'effetto visivo è quello desiderato. Spero che sia anche sintatticamente corretto.

Sì, scusa hai ragione: avevo dato lo sfondo a tutti i numeri di pagina.

A occhio e croce mi pare che la sintassi sia tutta corretta.

Buon proseguimento per la tua applicazione.

**nicola75ss** · 24-04-2006, 22:55

Ciao Piero. Grazie per la spiegazione dettagliata e per la gentilezza e la pazienza che hai sempre nei confronti miei e di tutti gli altri.

Discussione: paginazione record con i css

Strumenti discussione

Ricerca discussione

Visualizza

paginazione record con i css

Permessi di invio