Menù a Rotazione

[mrkarati]

Salve,
volevo sapere se esiste una guida o comunque se potete aiutarmi voi nella realizzazione di un menù a rotazione (scusatemi ma non so come si chiama esattamente) come quello che si vede nella Home-Page di altervista (http://it.altervista.org/) oppure, per esempio, nella Home-Page del sito di Steam (http://store.steampowered.com/) ecc...

Vi ringrazio

[karl94]

Si chiama content slider, cerca questo termine e troverai migliaia di esempi.

[mrkarati]

Cercando in giro sto usando il codice di questo sito: http://bxslider.com/

Il problema è però che non so come si faccia a personalizzare i link (o bottoni) per mostrare la prossima o la precedente slide. Per ora sto facendo qualche test in questa pagina: http://mrkarati.altervista.org/test.php

[karl94]

Per personalizzarli dovresti usare il foglio di stile.

[mrkarati]

e, perdona la mia ignoranza, nei fogli di stile cosa devo scrivere? O meglio, come faccio ad applicare le caratteristiche ai link "prev" e "next"?

[karl94]

Dipende da come li vuoi personalizzare.

[mrkarati]

Per iniziare per esempio vorrei cambiar il loro colore

[karl94]

Dovrai trovare un selettore che identifichi quel dato elemento e usare la proprietà CSS color.
Per esempio potresti identificarlo mediante la classe che gli hai assegnato.

[mrkarati]

Come CSS sto provando ad usare questo codice ma non sembra funzionare

/* SLIDER */
slider:link {font-style:normal; font-weight:normal; color:#b6b6b6; text-decoration:none; font-size:10px}
slider:visited {font-style:normal; font-weight:normal; color:#b6b6b6; text-decoration:none; font-size:10px}
slider:hover {font-style:normal; font-weight:normal; color:#ffffff; text-decoration:underline; font-size:10px}

[karl94]

Il selettore è il problema, non identifica nessun elemento poiché in HTML non c'è nessun elemento slider.
Tu devi identificare i due collegamenti, torna nella pagina di esempio da cui hai preso il codice e con uno degli strumenti per webmasters messi a disposizione dal tuo browser cerca di capire come sono state personalizzate quelle due frecce.

[mrkarati]

Eh si, ora ho trovato e sembra funzionare il tutto a dovere. Metodo semplice ma efficace.

[mrkarati]

No, rettifico... funziona solo con Chrome. Firefox e IE non hanno subito nessuna modifica. Attualmente il CSS che sto utilizzando è questo:

/* SLIDER */
a.bx-next:link {position:relative; bottom: 0px; right: -200px; font-weight:normal; color:#ff6862; text-decoration:none; font-size:13px}
a.bx-next:visited {font-weight:normal; color:#ff6862; text-decoration:none; font-size:13px}
a.bx-next:hover {font-weight:normal; color:#ffffff; text-decoration:underline; font-size:13px}

a.bx-prev:link {position:relative; bottom: 0px; right: 200px; font-weight:normal; color:#ff6862; text-decoration:none; font-size:13px}
a.bx-prev:visited {font-weight:normal; color:#ff6862; text-decoration:none; font-size:13px}
a.bx-prev:hover {font-weight:normal; color:#ffffff; text-decoration:underline; font-size:13px}

[karl94]

Puoi caricare le modifiche all'indirizzo che hai indicato precedentemente, così da poter verificare?

[mrkarati]

mmm no, attualmente il codice funziona. Non ho cambiato nulla e non so perché ci abbia messo un po' ad "aggiornarsi". In ogni caso le modifiche le ho già caricate all'indirizzo precedente ed ora dovreste vedere che i due link (prev e next) sono uno tutto a sinistra ed uno tutto a destra.