web-dev-qa-db-fra.com

Les menus justifiés ne fonctionnent pas dans Joomla

Ok, c’est un joli ensemble de styles pour rendre toute navigation centrée et 100% largeur, en utilisant une astuce de justification.

https://Gist.github.com/anonymous/1a1460cf195c058d180d

Fonctionne sans problème dans codepen, ou un flatfile. Cela ne fonctionne PAS sur une installation Joomla. Cela souffle ma nouille, comment est-ce possible? C'est comme si la couleur rouge ne fonctionnait pas. Quelqu'un peut-il imaginer pourquoi cela échouerait sur Joomla ou comment je pourrais le faire fonctionner exactement?

Plus d'informations demandées:

Nous utilisons notre propre modèle personnalisé. Nous avons un modèle appelé "base" avec tout notre code en moins, en compilant au format css. Si j'utilise ceci en supprimant tous les styles ul et tous les styles de corps, cela ne fonctionne toujours pas. Je peux enlever le bootstrap, cela ne fait aucune différence.

Nouvelle information: j'ai utilisé cette méthode de deux manières - fonctionne totalement dans un article Joomla. Totalement ne fonctionne pas avec un menu Joomla uls. J'ai utilisé exactement le même code, je les ai mis côte à côte, mais le passer à travers le module de menu le casse. C'est complètement bizarre. Il n'y a pas de différence visible entre les deux. Lorsque je copie le menu UL et le déplace dans l'article tel quel, cela ne fonctionne pas. Lorsque je supprime le class = "item- #" du li, cela ne fonctionne pas. C'est hallucinant. Ils sont identiques !!!

navigation
3
Faye

J'ai résolu ça. C'est le fait que le menu Joomla liste le code en ligne.

c'est à dire.

<li>Item</li><li>Item</li><li>Item</li><li>Item</li>

au lieu de

<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>

Eh bien, voilà cette idée. Merci d'avoir joué tout le monde.

Amendement: nous avons découvert qu'il fallait laisser un espace entre chaque li, donc

<li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li>

va le réparer.

3
Faye

C'est parce que votre astuce repose sur la propriété inline-block. Lorsque vous appliquez inline-block, les espaces html apparaissent sous forme d'espace entre ces éléments, car ils comportent un espacement des lettres.

S'il n'y a pas d'espaces html, comme dans la sortie de mod_menu, vos blocs en ligne n'auront pas cet espace de lettres, pas plus que votre pseudo-élément.

5
Seth Warburton