Printable View
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
Si chiama content slider, cerca questo termine e troverai migliaia di esempi.
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
Per personalizzarli dovresti usare il foglio di stile.
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"?
Dipende da come li vuoi personalizzare.
Per iniziare per esempio vorrei cambiar il loro colore
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.
Come CSS sto provando ad usare questo codice ma non sembra funzionare
Codice:/* 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}
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.
Eh si, ora ho trovato e sembra funzionare il tutto a dovere. Metodo semplice ma efficace.
No, rettifico... funziona solo con Chrome. Firefox e IE non hanno subito nessuna modifica. Attualmente il CSS che sto utilizzando è questo:
Codice:/* 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}
Puoi caricare le modifiche all'indirizzo che hai indicato precedentemente, così da poter verificare?
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.