larghezza dei pulsanti della barra di navigazione.

[trust]

ciao raga,
ho creato mediante l'uso dei css una barra di navigazione orizzontale:

regole css:

div#MENU
{
    text-align: Center;
    padding: 5px;
    background-color: #DDDDDD;
    border: Solid 1px #000000;
}


a.MENU
{
    background-color: #AAAAAA;
    color: #000000;
    font-weight: Bold;
    text-decoration: None;
    width: 100px;
    padding: 1px;
    border: Solid 1px #000000;
}
a:hover.MENU
{
    background-color: #778899;
    color: #EEEEEE;
    font-weight: Bold;
    text-decoration: None;
    width: 100px;
    padding: 1px;
    border: Solid 1px #000000;
}

codice html:

<div id="MENU">
    home
    cantattaci
    forum
    download
    chat
    link utili
    foto
</div>

Il problema è che i pulsanti della barra in questione non rispettano la regola "width: 100px;" e quindi la larghezza di essi è direttamente proporzionale alla lunghezza del testo contenuti in quest'ultimi...

Cosa devo modificare per fare in modo che ogni pulsante sia largo 100px?

Grazie

[Mich_]

Ci sono errori di semantica ed errori di sintassi.

Una serie di link sono una lista, e come tale devono essere rappresentati (usa il tag[*])
Il tag <a> e` di tipo inline, e quindi non accetta il width.

Se sui i[*] (dentro il loro <ul>, naturalmente) devi specificare:
float: left; /*per farli affiancare */
list-style-type: none; /* per eliminare il "bollo" */
padding-left: 0; margin-left:0; /* per eliminare lo spazio a sinistra */

[trust]

ciao,
leggendo le tue indicazioni ho fatto nel seguente modo:

regole css:

<style type="text/css">

div#MENU {
	position: absolute;
	left: 0;
	text-align:left;
	width: auto;
}


div#MENU ul
{
    background-color: #AAAAAA;
    border: Solid 1px #000000;
    
    list-style-type: none;
    padding-left: 0; 
	margin-left:0;

}

div#MENU ul a{
   color: #000000;
   font-weight: Bold;
   text-decoration: None;
   background-color: #778899;
   border: Solid 1px #000000;
float: left;
}


div#MENU ul a:hover{
    background-color: #ff0000;
	color: #EEEEEE;
    font-weight: Bold;
    text-decoration: None;

}


</style>

codice html:

<div id="MENU">
<ul>[*] Home[*]contattaci[*]forum[*]chat[*]foto
        [/list]
</div>

con "opera" e "explorer" i tasti vengono messi uno sotto l'altro...
Funziona solo con firefox!!!

Come mai? forse ci manca qualche altro piccolo accorgimento?

Grazie mille

[Mich_]

Ti manca il float: left;
Infatti lo hai inserito nel tag <a> (dove non serve), e non lo hai messo nel tag[*] (dove serve)
In pratica ti basta cambiare il selettore: div#MENU ul a in div#MENU ul li

Poi occorre anche definire qualche cosa nel div#MENU ul a, tipo:
display: block;
width: 100%; height: 100%
per poter sistemare gli sfondi. Ma fai le cose graduali: una modifica alla volta, per capire cosa fa ogni proprieta`

[trust]

adesso finalmente funziona:

<style type="text/css">

div#menu ul{list-style:none;margin:0 auto;padding:0}
div#menu ul li{float: left;width: 100px;margin:0 0 0 3px;
    padding:0;border: 1px solid #2693FF}
div#menu a{display: block;height: 25px;line-height: 25px;
    text-decoration:none; text-align: center;
    background-color: #FFFFC5;color: #41418A}
div#menu a:hover{background-color: #FF7E00;color: #fff} 


</style>

Grazie mille