Elements du menu espacés

Bonjour à tous,

J'ai un menu, le code de ce menu est ici. Comme vous pouvez le voir, les 4 éléments sont actuellement tous collés à gauche du menu. Ce que je voudrais, c'est avoir le premier élément tout à gauche, le dernier tout à droite et les autres entres eux. Comme ceci.

Dans mon exemple, j'ai rajouté :

1

width: 24%;

Sur chaque item.

Le soucis, c’est que maintenant, si je veut mettre un 5éme élément dans mon menu, il va se placer en dessous des autres, et non à côté. Donc je cherche une autre méthode que le width qui me permettrait d'ajouter des nouveaux éléments quand j'en aurais envie. Une idée ?

Merci d'avance pour vos réponses

à part un peu de JS qui diviserais la largeur de l'écran par le nombre de <li>, là tt de suite, je vois pas (d'un autre coté, j'ai jamais été trop calé niveau css )

Si quelqu'un à une solution sans JS, je prends, sinon je mettrais un petit script pour ça.

Ok, merci, je vais donc prendre la méthode simple et changer le pourcentage à chaque fois que j'ajoute un élément (par soucis de compatibilité au niveau du CSS3).

la mise en forme avec des propriété de tableau…on fait un bon bond en arrière là aussi, mais c'est plus propre que mon idée !

Ces deux solutions me paraissent trop "sales"…

hof, avant, on pouvez faire des truc simplement… comme dit Cabrel, c'étais mieux avant ! reste la solution js à mes yeux (à noter que finalement, elle est identique à la solution css-in-page)

Boff, en même temps, mettre un display tableau est selon moi la meilleure façon de faire. On ne code pas avec les balises « table », donc au niveau sémantique, c'est bon. Ensuite, le CSS, c'est uniquement pour le visuel. Si ton visuel oblige a adapter tes trucs à la façon d'un tableau, je ne vois pas ce qu'il y a de mal. Pour vue que ça passe sur les navigateurs de ton publique cible.

Après, pour PHP, c'est une solution. Personnellement, je n'aime pas utiliser PHP pour m'aider au niveau des instructions CSS. Je préfères laisser ça au principal intéresser. Sinon, je trouve qu'on perd de la souplesse et on oblige les associations dans le code.

en fait, pourvu que ce soit full-navigator tant qu'à faire ! On peut être vite tenté de ce dire, par exemple, et complètement au hasard "au chiotte IE, on s'en fout, ils ont qu'a passé sous FF !"…sauf que selon le dernier relevé des navigateurs en France, IE est toujours là avec presque un peu moins de 20% de PDA (soit un surfeur sur 5)!!

Ouin, mais IE6 n'est clairement plus utilisé. Je n'ai pas les stats d'utilisation d'IE 7 et 8, mais je ne penses pas que ce soit fort non plus comme fréquence d'utilisation. Je miserais plus sur IE 9, 10 et 11. Et ces trois versions devraient bien gérer le display: table; alors il n'y aurait pas de soucis.

L'idée n'est pas d'exclure un navigateur au profit d'un autre, mais d'y aller logiquement. Internet Explorer n'est plus une merde pour les codeurs dans ses nouvelles versions. Je te dirais que depuis la version 9, c'est plus facile de faire quelque chose de compatible avec lui et les autres.

sauf si son site est une e-brochure d'une maison de retraite ! …là, c'est 80% d'IE6/7 assuré !

Ouin, c'est sur… En même temps, je te suggèrerais de faire du porte-à-porte, tu auras plus de succès (ah, pis amène des bonbons Peppermint aussi xD).

Anyway, on s'égare un peu du sujet, mais tu auras au moins compris mon point : le plus important, c'est ce que ta clientèle utilise, pas ce que les stats générale te disent !

Pour info : display: table-cell fonctionne très bien sur tous navigateurs à partir d'IE8. C'est une méthode de mise en page reconnue et utilisée.

Flexbox c'est cool aussi, avec un peu moins de support, mais si tes visiteurs n'utilisent que des navigateurs récents tu peux l'utiliser sans problème

J'ai sérieusement songé à Flexbox, je m'impose toutefois le support d'IE 9 (pas en dessous pour ce site là), bien qu'a mon avis, le public touché utilisera surtout des navigateurs récents.

Donc, il y a de grandes chances que j'utilise un display: table, même si, au départ, je n'en voulais pas, ça semble être la meilleure solution en fin de compte.

Merci Myssdii pour la solution, je n'y aurais pas pensé, et ça évite le JS / PHP.

EDIT : Désolé de ne pas avoir passé le sujet en résolu avant, j'étais sur petit écran.