Elements du menu espacés

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

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

Édité par Titi_Alone

« There was a kingdom that was falling so fast that people wouldn't help it, they wouldn't make it last » - Animal Kingdom, Beau

+0 -0

à 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 ;) )

Vous m’avez reproché de penser que j’avais toujours raison. Et je me suis rendu compte que vous aviez raison.... Mais allez savoir si j’ai raison !

+0 -0
Auteur du sujet

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

« There was a kingdom that was falling so fast that people wouldn't help it, they wouldn't make it last » - Animal Kingdom, Beau

+0 -0

Cette réponse a aidé l'auteur du sujet

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é ;) )

Édité par babas

Vous m’avez reproché de penser que j’avais toujours raison. Et je me suis rendu compte que vous aviez raison.... Mais allez savoir si j’ai raison !

+1 -0
Auteur du sujet

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

« There was a kingdom that was falling so fast that people wouldn't help it, they wouldn't make it last » - Animal Kingdom, Beau

+0 -0

Cette réponse a aidé l'auteur du sujet

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

Édité par babas

Vous m’avez reproché de penser que j’avais toujours raison. Et je me suis rendu compte que vous aviez raison.... Mais allez savoir si j’ai raison !

+1 -1

Cette réponse a aidé l'auteur du sujet

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

+6 -0

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 !

Édité par babas

Vous m’avez reproché de penser que j’avais toujours raison. Et je me suis rendu compte que vous aviez raison.... Mais allez savoir si j’ai raison !

+1 -0

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

Édité par babas

Vous m’avez reproché de penser que j’avais toujours raison. Et je me suis rendu compte que vous aviez raison.... Mais allez savoir si j’ai raison !

+1 -0

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.

« Elle apparaîtra dans les messages de forums »

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

Édité par babas

Vous m’avez reproché de penser que j’avais toujours raison. Et je me suis rendu compte que vous aviez raison.... Mais allez savoir si j’ai raison !

+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.

« Elle apparaîtra dans les messages de forums »

+0 -0

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

Vous m’avez reproché de penser que j’avais toujours raison. Et je me suis rendu compte que vous aviez raison.... Mais allez savoir si j’ai raison !

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

« Elle apparaîtra dans les messages de forums »

+0 -0

Cette réponse a aidé l'auteur du sujet

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.

Je ne donne pas d'aide par message privé.

+4 -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 ;)

+0 -0
Auteur du sujet

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.

Édité par Titi_Alone

« There was a kingdom that was falling so fast that people wouldn't help it, they wouldn't make it last » - Animal Kingdom, Beau

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

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