[Résolu] Ajuster la largeur d'un texte selon le div

Bonjour,
j'ai un problème que malgré mes nombreuses recherche ne mène à rien,
j'ai une barre en <div> et j'ai plusieurs mot écrit avec des <li>
et j'aimerai que ces <li> soient espacé et prennent toute la barre, comme mon titre le dit
Ajuster la largeur d'un texte selon le div, j'ai essayé avec
text-align: justify sa ne marche pas sa reste à gauche
text-align: center sa ne marche pas non plus sa centre les éléments sans les espacer
et on ne peux pas faire de text align: left et right en même temps

et le pire la barre fonctionne en pourcentage.

y aurais-t'il un code en javascript ou un CSS qui pourrai m'aidez à réaliser ce que je cherche à faire?

Merci de bien vouloir m'aidez.

Hello,

Tu pourrais jeter un oeil au table layout peut-être : http://www.alsacreations.com/tuto/lire/1525-le-modele-tabulaire-en-css.html ?
Sinon il y a flexbox pour répartir équitablement l'espace mais c'est pas encore super bien supporté.

hello,
apparement tu pourrais t'inspirer de ceci , si tu cherche a faire un alignement justifier. http://codepen.io/gc-nomade/pen/nrbDl (display:flex VS text-align:justify).

Stéphanie W. > le flexbox si il n'est pas bien supporter il vaux mieux alors évité pour le moment parce que certaine personne que je connais utilise encore IE7 ou 8
mais ton idée sur les tables layout me parais pas mal, il faudrai que je teste pour voir ce que cela donne mais sa veux dire qu'il faudrai remplacer tout les <nav><ul><li> par des <table><tr><td>
et sa, sa ne va pas être chose simple vu la mises en forme que j'ai déjà faite


gc-nomade> ton idée reprend le flex mais bon je vis quand même voir aussi

à ce qu'il parait le "simple" flex peux être utilisez avec les -moz, -webkit etc....
si je regarde le flex sur alsa création le "space around" serai ce qui me conviens le mieux
Modifié par borrougagnou (15 Feb 2014 - 17:36)

mon exemple compare le display:flex (1er exemple) au display:inline-block; + text-align:justify (2eme et 3eme exemple ) ; qui dans le cas du 3eme, façon année 90 est compatible IE5.5 + et tous les navigateurs qui comprennent inline-block (certains vieux FF y etait imperméables).
Modifié par gc-nomade (15 Feb 2014 - 17:57)

le
display:inline-block;
text-align:justify;

ne m'aide en rien à ajuster le contenu à la taille de ma barre
ma barre prend la largeur de la page donc voila.
alors que si j'insère inline-block c'est ma barre qui ce rétrécit au niveau des lettres

le modèle tabulaire ne m'aide pas non plus :s
voici comment est structuré ma liste actuellement:
http://imageshack.com/a/img33/7861/d2sp.png

(il y a un beug ce qui empêche de voir l'arrondi à droite que je corrigerai moi même)

voici ce que je cherche a réaliser (ceci es un montage photoshop):
http://imageshack.com/a/img196/2373/q9qr.png

en gros que les éléments s'adapte à la barre mais comme on peux le voir il n'y a pas 3 mais 6 lignes donc utiliser "before" et "after" m'est pas possible avec des tables

Cordialement merci de bien vouloir m'aidez
Modifié par borrougagnou (17 Feb 2014 - 11:01)

Salut,
Je ne comprend pas pourquoi cela ne marche pas si tu précises la taille :s. Ils vont se ranger tout seul normalement.

width:16.66%;

et ça roule
Hop 2 exemples :
http://jsfiddle.net/6Awtp/2/

Pour explication :
avec la table,il faut lui préciser de prendre 100% de la largeur sinon il se limite au contenu et ne va pas entièrement à droite.
avec les li en inline-block, il faut penser à enlever le padding-left qu'il y a sur les listes (sur ul du coup) et penser à coller les li dans le html pour éviter les espaces bizarre entre chaque li ( cela vient du inline-block ça )

merci je n'avais pas penser à cette idée qui étais vraiment simple .____.

mais ce que je comprend sur ton CSS pourquoi tu met
table, tr {…}
normalement un simple
table {...}
aurai suffit non? .__.
Modifié par borrougagnou (17 Feb 2014 - 15:00)

bon rien a dire de plus

Oui enfin si on pouvait éviter de revenir à un tableau HTML alors qu'un modèle tabulaire CSS suffirait ça serait une bonne idée

Salut,

oui oui pas besoin du tr, c'est juste que j'avais commencer par faire tr width:100% (ce qui ne marche pas, mais c'était dans l'idée la ligne doit prendre 100% ^^) puis j'ai mis table et je ne sais pas pourquoi j'ai pas penser à enlever tr ^^.

Hop : http://jsfiddle.net/6Awtp/3/
ajout d'un 3e exemple avec le modèle tabulaire CSS ( display:table sur le ul et table-cell sur les li, si j'ai bien compris le lien de Stéphanie ^^ )

Stéphanie W.> oui mais quel vrai différence y a t'il entre les 2? il n'y a pas de failles et les 2 font approximativement la même choses non?

mathieu>okep et je ne comprend pas ta fonction:
*:not(.test_table_cell)>li
sachant que tu n'as qu'une seule classe avec la valeur: ".test_table_cell"

C'est parce que j'ai rajouter un exemple en ul li,
du coup *:not(.test_table_cell)>li pour changer le style du premier ul li seulement( et du coup on a le même css qu'avant avec le padding )

et l'ajout que j'ai fait pour le 3e exemple ( le 2e ul li) ça correspond seulement au css de .test_table_cell et .test_table_cell>li

Edit pour essayer de répondre à l'autre question même si ce n'est pas pour moi ^^ :
Je pense que c'est pour une question de sémantique : en gros les tableaux ne doivent être utilisé que pour affichés des données , par exemple une base de données ou des tableaux de nombres.
La dans ton cas il s'agit d'un menu, et tu souhaites utiliser un tableau uniquement dans un but de présentation, d'affichage, et non pas dans le but d'affiché un tableau de valeur. C'est en contradiction avec le principe de séparation du contenu et du style (via css). Pour un menu, on utilise généralement une liste non ordonnée ( d’où les exemples avec ul et li )
Modifié par mathieu1004 (18 Feb 2014 - 15:02)

ok merci et oui j'avais oublié que tu avais déjà crée un ul et un li désolé c'étais de l'inatention.

et c'est vrai que les tables sont souvent fais pour les données mais ce n'est qu'une charte graphique. je vais donc essayer d'utiliser ces éléments
merci de m'avoir aidé