equidistanza

[enigma_79]

ciao a tutti ho un probelma... sto relaizzando un lavoro e mi trovo in questa situazione


ho un div di 680px

al suo interno ho delle voci di menu che però sono dinamiche quindi possono essere 4 o 5

io vorrei che indipendentemente da tutto si distribuissero in maniera equidistante sino ad occupare il 100% del mio div


il mio codice

Questo è il div con l'img di sfondo

#portal-globalnav {
	clear: both;
	list-style: none;
	list-style-image: none;
	list-style-position: outside;
	margin: 0px;
	padding: 0px;
	background-image: url(&dtml-portal_url;/nav-bar.jpg);
	background-repeat: no-repeat;
	width: 680px;
	height: 40px;
	position: relative;
}

questi sono i miei li delle voci

#portal-globalnav li {
	float: left;
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	padding-top:15px;
	text-align:center;
	width:25%;  ovviamente funziona solo se le voci sono 4 così io dovrei disporrli indipendentemente dalle voci come fare? 
             text-transform:uppercase;
	background-image: url(&dtml-portal_url;/separator.gif);
	background-repeat: no-repeat;
	background-position:right center;
	height:25px;
}


rollOver

#portal-globalnav li a{
	display:block;
	text-decoration: none;
	font-family: verdana, sans-serif;
	color: #FFFFFF;
	font-weight: bold;
}

#portal-globalnav li a:hover{
	color:#c4d18a
}

[Mich_]

Togli il width dal[*], e mettici invece:
margin: 0 auto;

In tal modo fai fare il lavoro al browser: gestisce i margini laterali di ciascun[*] in modo da renderli tutti uguali.

PS: probabilmente non funziona in IE6, e non so se ci sono hack CSS per questo problema: magari e` necessario un hack JS.

PS2: se puoi evitare di usare il padding (sostituendolo con il margin), ottieni piu` facilmente la compatibilita` cross-browser.

Nota:
background-position:right center;
e` sbagliato sintatticamente ( http://www.w3schools.com/css/css_reference.asp ): devi scrivere:
background-position: center right;

[enigma_79]

provo grazie per la risposta intanto

[enigma_79]

non va = mi sa che l'unica soluzione anche se non è delle migliori perchè il codice ne risentirà è usare una table al 100% nel div le td in auto si dovrebbero distanziare che dici potrebbe funzionare?

[Mich_]

Usare le tabelle per scopi diversi da intabellare dati vuol dire mettersi fuori dalla logica e dalla semantica, quindi lo sconsiglierei.

In quali browser hai testato? Risondono tutti uguale?
Hai una pag di prova in rete? Puoi postare il link?

[enigma_79]

purtroppo no è ancora tutta in locale firefox e xplorer cmq entrambi = ma ho cambiato la cosa quindi sono tornato all'uso dei div e ho optato di tenere le voci da sx a dx e man mano float:left;

grazie cmq... appenna metto on line magari posto il link per consigli eventuali sul code