Salve!
Sto realizzando alcune pagine per un progetto,ma ho un problema:
Per la navbar, avevo in mente di realizzare 6 bottoni,distanziati perfettamente tra loro,e centrati in un'immagine di sfondo(anch'essa posta al centro).
Ho pensato di usare una lista non ordinata,di allinearla con la proprietà "display: inline",centrarla,e metterla all'interno dell'immagine di sfondo(che fà parte dell'header,ho usato un margine negativo per spostare tutto il <div> contenente il menu)
tutto ok.
Però io volevo realizzare dei bottoni..
Creo i bottoni,ma come li metto?
faccio una cosa del tipo:
[*]<span>Home</span>
Allo span assegno adeguati pagging,(dato che non posso darli le proprietà height e width,o sbaglio?)
Metto il bottone come sfondo dello span,ma ecco il problema:
Le lettere contenute nei vari span NON sono uguali!e questo mi sballa(seppur di poco)l'aspetto del menu..
Quindi assegnando lo stesso padding a tutti i gli span,esce una cosa poco armoniosa..
Allora ho pensato:
se uso una tabella?(terrorizzato dall'idea di dover usare una tabella per costruire un layout,anche se in minima parte)
Allora faccio la mia tabellina:
#menu table
{
margin: 0 auto;
border-collapse: separate;
border-spacing: 25px;
text-align: center;
}
con i suoi td:
#menu td
{
text-align: center;
height: 52px;
width: 52px;
background: url(img/navbar.gif) center no-repeat;
}
Il risultato è perfetto,e ottengo risultati migliori anche su I.E.(che prima mi visualizzava un mezzo disastro).
Però non sono troppo contento di aver usato una tabella..avete soluzioni alternative?
Vi ringrazio!
P.S: questa è un'immagine dei due menù a confronto.
Ciao!
Rispondi quotando
