[RÉGLÉ] Menu tronqué

[mezvin]

Bonjour,

Les libellés de mon menu de gauche sont tronqués.
Sauriez-vous me dire pourquoi et où augmenter la largeur pour que le texte ne soit pas tronqué ?

Ou décaler le texte des menus sur la gauche.

J'utilise le template JA_WALL.

Voici mon site en construction.

Merci beaucoup de votre aide.

[lomart]

Re : Menu tronqué

Bonjour,

Il faut ajouter ces définitions en fin du fichier CSS.

Cette règle permet d'élargir le menu de 120 à 150 px
body.has-sidebar #container .container-main { padding-left: 150px;}

Ces 2 autres règles, modifie la navbar pour être alignée sur le menu gauche
#mainnav { left: 150px; }
.logo-image, .logo-text { width: 150px; }

[mezvin]

Re : Menu tronqué

Bonjour,

Il faut ajouter ces définitions en fin du fichier CSS.

Cette règle permet d'élargir le menu de 120 à 150 px
body.has-sidebar #container .container-main { padding-left: 150px;}

Ces 2 autres règles, modifie la navbar pour être alignée sur le menu gauche
#mainnav { left: 150px; }
.logo-image, .logo-text { width: 150px; }

Merci de ton retour.
Dans quel fichier css dois-je ajouter celà ?
Tout à la suite ?

[lomart]

Re : Menu tronqué

Dans quel fichier css dois-je ajouter celà ?

celui où tu mets les personnalisations. Peut-être template.css!
toutes les lignes à la fin

[mezvin]

Re : Menu tronqué

celui où tu mets les personnalisations. Peut-être template.css!
toutes les lignes à la fin

J'ai mis en place ta solution, mais seul le rectangle vers en haut à gauche de mon site s'est élargit.
Le menu de gauche lui n'a pas bougé. J'ai vidé mon cache et c'est idem.

[lomart]

Re : Menu tronqué

En simulation avec Firebug, ça fonctionne !
Tu n'as pas ajouté la première ligne dans template.css
body.has-sidebar #container .container-main { padding-left: 150px;}

[mezvin]

Re : Menu tronqué

En simulation avec Firebug, ça fonctionne !
Tu n'as pas ajouté la première ligne dans template.css
body.has-sidebar #container .container-main { padding-left: 150px;}

Si je l'ai bien ajouté.
Regarde en pièce jointe mon template.css renommé en txt pour te l'envoyer.

[lomart]

Re : Menu tronqué

C'est normal, la règle dans le fichier est:
,body.has-sidebar #container .container-main { padding-left: 150px;}
la virgule devant empêche la prise en compte de la règle. C'est pour cela que je ne la voyais pas dans le fichier css avec Firebug

[mezvin]

Re : Menu tronqué

C'est normal, la règle dans le fichier est:
,body.has-sidebar #container .container-main { padding-left: 150px;}
la virgule devant empêche la prise en compte de la règle. C'est pour cela que je ne la voyais pas dans le fichier css avec Firebug

Tu as raison. Je viens de supprimer la virgule et c'est mieux. Le menu s'est décalé. Par contre, les textes dans mon menu restent tronqués.

[lomart]

Re : Menu tronqué

Je peux avoir une copie d'écran montrant le problème.
Chez moi les libellés du menu gauche sont complets

[mezvin]

Re : Menu tronqué

Je peux avoir une copie d'écran montrant le problème.
Chez moi les libellés du menu gauche sont complets

Voici la capture d'écran illustrant le problème.
Seulement une partie semble concernée...

[lomart]

Re : Menu tronqué

Le problème se produit sous Chrome mais pas sous Firefox
Il faudrait ajouter ces règles pour élargir le contenu pour le menu:
#sidebar {
margin-left: -150px;
width: 150px;
}

[Rajoz]

Re : Menu tronqué

Bonjour,

Dans la colonne de gauche (sidebar) il y a trois modules dont les libellés ont des comportements différents. Il n'y a que le premier module (catégories ?) dont les libellés sont tronqués et auxquels s'ajoutent des "..." :


Pour corriger cela il faut mettre le css :

#sidebar .categories-module li a { text-overflow: initial; }

Je n'ai pas changé la largeur de la colonne de gauche parce que sur ma simulation Chrome le changement de ellipsis à initial suffit :


Si les textes étaient plus longs, il faudrait effectivement élargir la colonne de gauche. Par exemple, en augmentant la largeur de 30px (pour garder les valeurs de lomart) :

.logo-image, .logo-text { width: 150px; }
#mainnav { left: 150px; }
body.has-sidebar #container .container-main { padding-left: 150px; }
#sidebar { margin-left: -150px; width: 150px; }
#sidebar .categories-module li a { max-width: 130px; text-overflow: initial; }

Voici quelques explications :

• largeur du logo : augmentée de 120 à 150px :
  .logo-image, .logo-text { width: 150px; }
• menu du haut : décalé vers la droite du de 120 à 150px :
  #mainnav { left: 150px; }
• contenu principal : décalé vers la droite du de 120 à 150px :
  body.has-sidebar #container .container-main { padding-left: 150px; }
• colonne de gauche : décalée vers la gauche de -120 à -150px (pour compenser le contenu principal) et largeur de 120 à 150 px :
  #sidebar { margin-left: -150px; width: 150px; }
• texte du lien : largeur maximum de 100 à 130px et aspect quand trop large modifié de "..." (ellipsis) à juste tronqué (initial) :
  #sidebar .categories-module li a { max-width: 130px; text-overflow: initial; }

Amicalement,
Rajoz

[EDIT]
La colonne de gauche est bien décalée vers la gauche (et non vers la droite comme je l'avais écrit un peu rapidement).
[/EDIT]

[lomart]

Re : Menu tronqué

Si les textes étaient plus longs, il faudrait effectivement élargir la colonne de gauche.

+1 avec Rajoz.
N'ayant pas vu le problème sous FF, j'ai répondu à la question "comment élargir la colonne"
Je ne comprends pas pourquoi text-overflow est pris en charge par Chrome et non par FF qui normalement supporte cette commande depuis sa version 7

[mezvin]

Re : Menu tronqué

C'est parfait. Ça fonctionne impeccable.
Un grand merci à toit les deux. Vous avez été top.
Excellente journée.