Salve a tutti, l'altro giorno ho trovato su internet un foglio di stile che mi permetteva di avere l'effetto rollover senza l'uso di js e con l'ausilio di una sola immagine (non elenco i dettagli perchè sono sicuro che lo conosciate anche voi). Nel mio sito ho un menù verticale e uno orizzontale e ho pensato di creare un foglo di stile per ogni menù. Questo è il codice del menù verticale:
codice:<style> #menu{ width:178px; text-align:center; font-family:"verdana"; font-size:12px; } #menu a { height:42px; padding-top:9px; display:block; color:#000; text-decoration:none; background: url("http://midiclorian.altervista.org/index_file/rollover.jpg") 0 0 no-repeat; } #menu a:hover { background-position: -178px 0; } #menu a:active { background-position: -356px 0; } </style> <div id="menu">Home</div>
E questi i codici del menù orizzontale:
Praticamente sono identici nella struttura, cambiano solo i links delle immagini e le misure.codice:<style> #menu{ width:122px; text-align:center; font-family:"arial"; font-size:12px; } #menu a { height:33px; padding-top:9px; display:block; color:#000; text-decoration:none; background: url("http://img523.imageshack.us/img523/8978/rollovertopoi5.jpg") 0 0 no-repeat; } #menu a:hover { background-position: -122px 0; } #menu a:active { background-position: -244px 0; } </style> <div id="menu">Home</div> </style>
I problemi sono questi, intanto non riesco a mettere la scritta bianca, la seconda immagine ha lo sfondo nero e quendo scrivo ad es. "Home" viene in nero e non si legge;
Il secondo problema, e forse quello più grave, è questo: quando vado ad inserire entrambi i codici nella pagina si mischiano, vi spiego meglio, praticamente compare ad entrambi la stessa immagine di sfondo anche se i link portano a due immagini diverse.
Spero che sono riuscito a farvi capire il mio problema e che riusciate a risolverlo.
Grazie in anticipo per le risposte!

Rispondi quotando