Barra nav orizontale,problemi dimensionamento.

[meltorment]

Ciao a tutti, sto studiando i fogli di stile da poco tempo e sto incotranto un problema con la creazione di una barra di navigazione orizontale e centrata utilizzando una lista non ordinata.
La barra di navigazione è riuscita, l'unico problema è che il risultato non è quello che desideravo perchè è venuta fuori troppo sottile e quando cerco di aumentare le dimensioni del testo o dei "li" mi si sballa tutto.
In particolare, soprattutto su firefox mentre in altri browser (opera explorer,netescape) il risultato non è proprio male, mi succede che la casella colorata corrispondente a "a:hover" risulta essere + bassa come margine superiore e inferiore rispetto al background del "ul".
Vi scrivo il codice html che ho utlizzato e di seguito quello del foglio css:

codice html:



<div id="nav">
<ul>
[*]item1[*]item2
[*]item3[*]item4
[*]item5

[/list]
</div>





codice css:

html,body {margin:0; padding:0;border:0;}

body {background-color:#c9d1c1; font-family:arial,sans serif; font-size:90%;}

div#container{width: 900px;margin:auto;border:0; border-left: 0px solid #36c;border-right: 0px solid #36c;}



div#nav {
padding-top:0;
height:auto;
}




#nav ul{
background-color:#644210;
width:900px;
border:0;
padding:0; 0;
list-style-type: none;
margin:0 2px 0 0;
font ; arial, helvetica, sans-serif;
font-size: 1em;
font-weight: 500;
text-align:center;}







#nav li{ padding: 0.5em;display:inline;}



#nav li a{
color:#fff;
border-right: 1px solid #e4b773;
border-left: 1px solid #e4b773;
text-decoration: none;
padding: 0em 1em;}



#nav li a:hover {background-color:#e4b773;}
#nav li a:active{background-color:#644210}



Quello che vorrei ottenere è una navigation bar orizzontale centrata con "ul" di circa 100px di altezza e il testo ben allineato e centrato nei vari "li", eventualmente vorrei anche provare a inserire delle immagini al posto dei background-color.
Spero di essere stato preciso nell'indicarvi i dettagli del problema.
grazie mille!

[Mich_]

Da quanto scrivi capisco che e` un problema con un menu ... in particolare un menu orizzontale semplice (== ad un unico livello)

Dato che ci sono menu pronti e belle fatti di tutte le forme e tipi, ti consiglio di farti un giro in quei siti.
Alcuni link sono anche tra i "link utili"; vedi in particolare quelli di CSSplay.

[meltorment]

si in effetti è un semplicissimo menù, ho visitato alcuni siti con template però ogni volta mi sono ritrovato a cambiare tutta l'impostazione del css per non ottenere nulla.
scusate ma sono appena 2 settimane che sto smanettando con css
quindi se trovo una template adatta mi conviene cancellare tutto e imparare dalla template?

[Mich_]

Non so cosa intendi per "template": e` un termine usato in modi diversi in diversi contesti.

Comunque il tuo codice contiene alcuni errori (*), per cui ti conviene abbandonarlo e partire da un codice corretto che funziona.
Se cerchi un codice, non focalizzarti su colori e font, che si possono cambiare facilmente; invece il modo di funzionare e` difficile da cambiare senza intervenire su attributi strategici.


(*) Errori principali:
- uso del display:inline nel[*]
- mancato uso del float nel[*]
- mancato uso del display:block nel <a>
- mancato uso delle dimensioni nel <a>

[meltorment]

ho trovato un codice per una nav bar su cssplay ma stranamente utilizza il tag [b] subito dopo il tag <a>. sapevo che il tab era deprecato o quasi. mi sbaglio?

[Mich_]

Originariamente inviato da meltorment
ho trovato un codice per una nav bar su cssplay ma stranamente utilizza il tag [b] subito dopo il tag <a>. sapevo che il tab era deprecato o quasi. mi sbaglio?

Hai ragione!
Il [b] e` deprecato e in alcune DTD non e` valido.
Sostituisci il [b] con [b]. Il resto del codice e il CSS restano validi.