Salut tout le monde !  
 
Je suis en train de créer un menu à onglets horizontaux en HTML/CSS. J'utilise des listes. Chaque onglet doit avoir la même largeur.  
Le problème c'est que je veux que la largeur de mes onglets s'adapte à la largeur disponible (le UL est dans un DIV de taille connue), quel que soit le nombre d'onglets. Mes onglets doivent occuper toute la largeur disponible. En d'autre termes, les onglets doivent se partager équitablement la largeur disponible.  
Si j'ai 4 onglets, je peux mettre width:25%; mais j'ai un nombre variable d'onglets.  
 
Est-ce que vous avez une solution ?  
Je serais bien tenté par utiliser un tableau, mais je dois faire tout un ensemble de transformations XSLT sur ma page, et je n'ai pas envie de finir sous anti-dépresseurs.  
 
J'ai beau chercher dans ma tête ou sur le web, je ne trouve rien. Mais peut-être que j'ai du mal à formuler mon problème.  
 
Merci beaucoup pour votre aide !

Comment tu connais le nombre d'onglet ?
Générer le css de façon dynamique, avec ce nombre d'onglet, ce serait possible ? C'est ce qui semble le plus simple non ?

Le contenu de mes onglets (ou plutôt des sous-onglets, puisque c'est eux qui changent en fonction de l'onglet sélectionné) sera décidé par PHP en fonction de la page demandé. Donc en gros j'aurai un test "quel onglet est sélectionné ?", et mon script PHP générera la bonne liste du menu et du sous-menu.  
Le problème c'est qu'en fonction de l'onglet sélectionné, le nombre d'éléments dans le sous-menu peut varier.  
 
Je ne pense pas que je puisse générer le CSS à la volée. Je fais ce site dans le cadre d'un projet d'IHM où je dois mettre en en valeur la plasticité. Je dois donc avoir une séparation la plus stricte possible entre le squelette HTML, les transformations CSS, les transformations XSL, et le noyau fonctionnel (minimal dans mon cas).  
Donc j'aimerais vraiment éviter de toucher aux CSS. D'autant que je vais avoir plusieurs CSS pour la même chose (version iPhone et version PC).  
 
T'as pas une autre solution en stock ? Ca fait des heures que je me creuse la tête et je n'ai plus d'idées.
 
EDIT :  
A noter que je connais le nombre maximum d'onglets : 4
J'aimerais donc que si j'ai 3 ou 2 onglets ils s'adaptent à la largeur. Mais comme il s'agit de la version iPhone je n'aurai pas plus de 4 onglets sur une même ligne.

Je ne suis pas sûr que ce soit possible en css only.
Avec du JS, à la limite, mais ce serait vraiment pas élégant.
 
Edit : perso, je ne vois pas pourquoi ce serait problèmatique, dans ce cas là (et uniquement ce type de cas assez particulier) ou un élément de style particulier est dépendant du contenu, d'utiliser une css dynamique. Si on avait une solutin clean, ok, mais a priori ce n'est pas le cas. La solution la plus clean après une solution css only, ce serait bien un css dynamique je pense.

Oki merci pour ton aide. Je vais voir à l'usage quelle est la meilleure solution, entre la CSS dynamique ou laisser le 25% même s'il y a trois éléments, ce qui n'est pas choquant au final.  
 
Par contre j'ai une question subsidiaire, une peu plus tordue encore..  
Admettons que j'ai un DIV, à l'intérieur duquel il y a une image en background. J'aimerais que cette image de fond dépasse du DIV par le haut. J'ai cherché dans les bas fonds du site de la W3C pour trouver des propriétés secrètes qui me permettraient de le faire, mais je sèche. Evidemment, un positionnement avec des valeurs négatives dans le rect fonctionne mais l'image est tronquée. Je voudrais qu'elle apparaisse par dessus le reste. Je sais que c'est bizarre de vouloir qu'une image de fond apparaisse par dessus le reste, et en dehors du DIV qui plus est, mais j'en ai besoin pour garder un code propre tout en respectant ma maquette...

 
je vois pas le probleme
je dirais presque que c ets le but du JS
le truc que JS ne doit pas faire c est gerer des fonctionnalités essentielles du site
la c est juste un probleme cosmetique (taille des onglets)
c est nettement plus malin d utiliser le js dans ce cas que de generer une css a la volée
 
a la rigueur si tu veux vraiment passer par le serveur sans generer de nouvelle css tu rajoutes une classe spéciale dans ton conteneur genre deuxOnglets troisOnglets...avec en css les regles deja prédéfinis
 

bah justement j ai l impression que ton code est pas si propre que ca
c est le principe meme de background
tu mets ton div avec son background correctement et un padding-top pour decaler vers le bas tout simplement non

Pour le premier problème :  
j'avais pensé aussi à faire une classe pour 4onglets, une classe pour 3onglets etc. Mais ça m'obligerait à répéter certaines choses. A voir.  
Le JS reste aussi une solution. Ca fait longtemps que j'en ai pas écris donc je ne me souviens plus vraiment, mais il me semble qu'il est exécuté une fois que tout le document est chargé, ce qui implique qu'on peut "voir" le changement si le chargement est lent (ce qui peut être le cas sur iPhone). Me trompe-je ? (C'est juste un vague souvenir, mais il y a des chances pour que j'ai rêvé...).  
 
Pour le deuxième problème :  
Finalement j'ai utilisé une solution plus propre sans faire déborder l'image de fond. Mais je perds une petite bande de surface cliquable (4px de haut), ce qui n'est pas important vu que c'est un doigt qui va cliquer. Je n'ai pas besoin d'une précision au pixel.  
 
Merci pour votre aide en tout cas !

oui tu te trompes
il existe l evenement dom ready (verifier le terme exact sur la doc iphone, parfois ca s appelle aussi dom content loaded). ca te permet de lancer ton js une fois que le html est chargé donc avant les images