In effetti la cosa e` fattibile in modo molto piu` semplice, senza usare i posizionamenti.
E poi i bottoni sono tutti uguali, quindi il rollover e` unico per tutti.
La scritta non puo` far parte della grafica, altrimenti addio accessibilita` ed addio al posizionamento nei motori: un menu realizzato con solo elementi grafici non e` accessibile e non e` indicizzabile.
Quindi la cosa va realizzata:
Nella marcatura non va aggiunto altro: e` sufficiente per tutti, e la cosa e` decisamente pulita e chiara.
Il CSS si deve occupare del resto (la grafica e la formattazione)
codice:
#menu {
width: 100%;
height: ...;
}
#menu li {
float: left; /* questo fa affiancare gli oggetti */
display: inline; /* pleonastico - per far contento IE */
margin-right: 1px; /* lo spazietto piu` chiaro tra i vari link */
height: ...;
width: 14%; /* per 7 oggetti - in alternativa larghezza in px (e` piu` semplice sistemare le immagini) */
}
#menu a {
display: block;
width: 100%; height: 100%;
background: url(...); /* questa immagine e` doppia: contiene anche l'hover */
background-position: 0 0; /* posizione dello sfondo per vedere solo lo stato a riposo */
font: helvetica, Arial, sans-serif; /* scegli un font simile a quello che vorresti */
font-variant: small-caps;
text-align: center; /* centrare il testo all'interno del "bottone" */
}
#menu a:hover {
background-position: 0 20px; /* inizio della posizione dello stato :hover dello sfondo */
}
L'immagine di sfondo deve essere doppia, come spiegato in alcuni dei link postati sopra.
Devi fare in modo che il testo assomigli il piu possibile al tuo. Probabilmente helvetica e` un buon compromesso, ma se ne trovi uno migliore, mettilo per primo, poi lascia anche helvetica, arial e sans-serif, inmodo che i brwoser che non conoscono i font piu` simili ne utilizzino di quelli non troppo brutti.
Questo descritto e` il primo passo. Si puo` poi migliorare, si pososno aggiungere immagini specifiche per ogni bottone, ma occorre conosere le tecniche di progressive-enhancement, altrimenti limiti accessibilita` e usabilita`, e perdi anche visibilita` nei motori.
Rispondi quotando
