Elements du menu espacés

Le problème exposé dans ce sujet a été résolu.

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

+0 -0

le truc, c'est qu'en css, je vois que 2 solutions : - - imposer une largeur (px, em, %, …) qui donnera finalement une dimension "fixe" à ton objet - - utiliser auto pour s'adapter à une certaine notion de largeur maximal disponible

la première ne me semble évidemment pas la bonne, puisque le nombre d'éléments est variable

la seconde serais théoriquement de dire "sur la largeur de l'élément <ul>, colle-moi X éléments <li> les uns à coté des autres, en leurs donnant équitablement le maximum de largeur disponible"....mine de rien, pas simple à écrire! :D

je connais mal les attributs css3, et je doute que cela existe en css2 (en tout cas, si ça existe, ça m'aurais éviter pas mal de soucie dans le passé ;) )

+0 -0

sinon, et à condition que tu remplisse ton <ul> en php, y a une solution du pôvre ;) : à l'aide de php, tu détermine le nombre de <li> ensuite, tu insert directement dans ta page l'attribut css de tes <li>

1
2
//on part du principe que $nb_li contient le nombre de li à afficher
<li style=<?php 100 / $nb_li;?> %></li>

j'ai pas relu, y a probablement des boulettes de syntaxes, sans compter le fait que c'est vraiment crade…mais sur la principe, ça fonctionnera, la largeur de tes <li> s'adaptera quelque soit leur nombres ! (mais c'est vraiment, VRAIMENT crade !)

+0 -1

Ou sinon : utiliser la propriété display: table-cell afin de reproduire un comportement de tableau. Tout simple :

1
2
3
4
5
6
7
ul {
  display: table;
  width: 100%; /* important car sinon ne prend pas toute la largeur de son parent par défaut */
}
li {
  display: table-cell;
}

Les <li> vont se répartir sur toute la largeur de la liste, tout naturellement :)

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.

+0 -0

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)!!

+0 -0

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)!!

babas

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.

+0 -0

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 !

+0 -0

Bonsoir,

il est possible d'arriver à un rendu similaire en utilisant flexbox. Tutoriel sur flexbox : CSS3 Flexbox Layout module

[…] 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. […]

Luigi_home

Ça dépend surtout des statistiques sur ton site web : nombre d'utilisateurs d'IE7 voire 8, etc.

+3 -0

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.

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte