lista al 100%

[cascas]

salve a tutti il mio problema è questo
ho una lista dentro un div con larghezza fissa, ho bisogno che la lista (orizzontale) occupi sempre tutta la larghezza del div..in effetti lo fà in quanto ul ma gli li non arrivano fino in fondo..
c'è un modo per farli espandere senza battezzare anche per loro una dimensione fissa? (il numero degli li può essere variabile)

[scu]

racchiudi i li i un div a cui assegni width:100%;

[Mich_]

Originariamente inviato da cascas
salve a tutti il mio problema è questo
ho una lista dentro un div con larghezza fissa, ho bisogno che la lista (orizzontale) occupi sempre tutta la larghezza del div..in effetti lo fà in quanto ul ma gli li non arrivano fino in fondo..
c'è un modo per farli espandere senza battezzare anche per loro una dimensione fissa? (il numero degli li può essere variabile)

Quindi la marcatura e` di questo tipo:

<div id="larghFissa">
  <ul>[*]primo[*]secondo
    ...[/list]
</div>

Nel CSS ci devi mettere come minimo questi attributi:

#larghFissa {
  width: ...px;
}
#larghFissa ul {
  width: 100%;
}
#larghFissa li {
  margin 0 auto;
  display: inline;
}

In bold le cose necessarie per avere quanto chiedi. Dovrebbe funzionare in molti browser (forse non in tutti).
Nota che ho dovuto usare l'inline nel[*]. La cosa potrebbe non essere possibile (se hai oggetti di tipo blocco dentro il[*]).

Se poi non ti piacciono gli spazi prima del primo e dopo l'ultimo[*], devi fare delle classi specifiche per quegli elementi e mettere a zero il margine sinistro del primo e il margine destro dell'ultimo.

[cascas]

Originariamente inviato da Mich_
Quindi la marcatura e` di questo tipo:

<div id="larghFissa">
  <ul>[*]primo[*]secondo
    ...[/list]
</div>

sì esatto la marcatura è questa, ho provato come hai suggerito tu con il display inline (la lista aveva già larghezza al 100% ed era già inserita in un div con dimensione fissa)
all'interno degli li ho dei link ma non hanno un display block nè una dimensione.. ad ogni modo non funge.. ti posto il codice..

<div id="larghezza-fissa">
<ul>[*]LINK 1[*]LINK 2[*]LINK 3[*]LINK 4[*]LINK 5[/list]
</div>

#larghezza-fissa{width:640px; position:absolute; top:10px; left:10px;}
#larghezza-fissa ul{width:100%; list-style:none; margin:0px; padding:0px;}
#larghezza-fissa ul li{display:inline; margin:0px auto;}

così non funge
(ho provato anche a togliere il position absolute ma non và lo stesso)

[Mich_]

In quali browser hai testato? Quale DTD usi?

Come accennato anche sopra, sono info importanti.
Se hai testato solo in IE, la cosa non mi meraviglia, se la cosa non funziona in FF con DTD strict, allora vuol dire che con questo metodo non si puo` fare (occorre studiare qualcosa diverso).

[cascas]

ho testato in IE in FF e in Safari
... ne funzionasse uno

bhe troverò qualcos'altro.. avevo il sentore che non si potesse fare perché le ho tentate tutte ma volevo una conferma..grazie cmq

[Mich_]

Alla peggio c'e` sempre l'opzione JS.
In pratica calcoli la larghezza dei singoli pezzi, la sottrai dalla larghezza del contenitore, e dividi per gli spazi da lasciare. Tale misura da` il margine da applicare.
Nota che tale JS e` da considerarsi non-intrusivo, in quando alla peggio i vari elementi restano appiccicati tra loro, ma senza difficolta` di navigazione.

Se vuoi posso spostare la discussione in JS, dove puoi trovare anche qualcosa di gia` fatto (prova con una ricerca nel forum).

[cascas]

no no grazie mille.. ho risolto con delle classi.. qualche riga i css in più che mi volevo evitare ma insomma preferisco così che con i js..

granzie cmq