besoin d'aide pour repérer argument css à modifier

[FlodAriege]

Bonjour les ami-es,

Alors voilà : j'ai installé un sous-domaine pour tester la mise en place d'un mega menu. Ça se passe plutôt bien, mais je me heurte à un petit problème de style : l'espace vertical entre les liens du niveau 1 (le main menu étant le niveau 0) est trop important.
J'ai fouillé et trifouillé, mais je n'arrive pas à identifier ce que je dois modifier pour réduire ce que je crois être un padding.
A force, j'ai un peu l'impression de devenir aveugle, et j'ai surtout le sentiment que je ne cherche pas là où il faut.

Est-ce qu'une bonne âme pourrait avoir la gentillesse de jeter un oeil sur mon sous-domaine de test pour voir s'il ou elle arrive à identifier l'argument css qui régit cette hauteur ou ce padding ?

Mon sous-domaine est ici (je ne donne pas le lien direct car je ne veux pas que Google puisse l'indexer, veillez à supprimer l'espace entre www. et le reste de l'URL) :
http://www. test.rouchenergies.fr/qui-sommes-nous.html

Vous trouverez ci-dessous une capture d'écran annotée pour vous aider à comprendre de quoi je parle.

Je vous donne aussi le lien du site demo de l'éditeur si ça peut aider à voir les différences : http://demo.joomlaux.com/extensions/...menu-demo.html

Et enfin, une petite question : est-ce que je cherche dans la bonne direction, ou bien est-ce que je devrais plutôt me préoccuper de changer la police et ou la taille de la police ?

Merci d'avance pour votre aide.

Flo

PS: je continue à travailler donc il est fort probable que l'ancien mainmenu ait disparu quand vous irez voir. il ne restera plus que le nouveau, ça sera plus simple (et rendra inutile une des annotations sur ma capture d'écran)

[pmleconte]

Bonjour,

Vous devriez essayer d'ajouter :

#megamenucss #js-mainnav.megamenu ul.megamenu.level1 { margin-top:0 !important;
}

C'est le margin:10px du fichier style.css en ligne 472 qui pose problème, car il ajoute 10px en haut et en bas.

Pascal

[FlodAriege]

Merci pmleconte Ca va beaucoup mieux maintenant

Est-ce que je peux abuser un peu ?
Les liens actifs sortent sur fond noir, c'est bien, par contre le texte est gris (voire peut-être même bordé d'une espèce de liséré blanc, mes yeux sont à leur limite pour bien le voir).
J'ai tenté d'ajouter (dans mon custom.css) !important à la ligne 124 de blackwhite.css:

#js-mainnav.megamenu.blackwhite .childcontent .js-moduletable a:hover,
#js-mainnav.megamenu.blackwhite .childcontent .js-moduletable a:focus,
#js-mainnav.megamenu.blackwhite .childcontent .js-moduletable a:active {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid #fff;
}

... mais ça reste sans effet ;(
Auriez-vous une autre idée pour que ce texte s'affiche en blanc ?

[pmleconte]

Je ne vois pas l'effet que vous souhaitez avoir le texte s'affiche toujours en blanc, car c'est la couleur que vous avez en ligne 124 du blackwhite.css.

Avez-vous essayé d'ajouter des !important en bout de chaque ligne ? cela force la prise en compte de votre css, s'il n'y en a pas d'autres avec cette directive.

cela donnerait

#js-mainnav.megamenu.blackwhite .childcontent .js-moduletable a:hover,
#js-mainnav.megamenu.blackwhite .childcontent .js-moduletable a:focus,
#js-mainnav.megamenu.blackwhite .childcontent .js-moduletable a:active {    
color: #fff !important;    
text-decoration: none !important;    
border-bottom: 1px solid #fff !important;
}

Pascal

[FlodAriege]

ah oui pardon, j'avais préparé une capture d'ecran et j'ai oublié de la joindre...
La voici.
Je suis d'accord avec vous, normalement le texte devrait être blanc, mais vous allez voir sur la capture que ce n'est pas le cas.

J'ai essayé d'ajouter !important aux 3 lignes indiquées, mais ça ne change pas l'aspect du texte.

EDIT : j'ajoute une 2ème capture = un zoom sur la zone active du menu. On voit, par contraste avec le texte blanc des liens de niveau 0, que le texte est gris et non blanc.

[pmleconte]

A la place de a:active, avez-vous essayé a.active, car active est aussi une classe css.

D'autre part, le text-shadow à none serait un peu mieux.

C'est un beau labyrinthe et les classes et css se superposent gentiment.....

Pascal

[FlodAriege]

Oh comme vous dites... un beau désordre ! (pour rester polie)
j'aurais bien aimé me contenter du mega menu inclus dans mon template, mais il n'est qu'à moitié responsive (les liens de niveau 1 seulement s'affichent).
pour sûr, quand je pourrai, je reprendrai mon site de fond en comble en choisissant un template léger et rapide, que j'éviterai le plus possible de surcharger.
le bouzin que vous me faites l'honneur d'ausculter est le résultat de la succession de mes expériences et de mon inexpérience...

Bon, alors, j'ai donc inséré :

#js-mainnav.megamenu.blackwhite .childcontent .js-moduletable a.active {
    color: #fff !important;
    text-shadow: none !important;
}

dans mon custom.css
et bizarrement j'ai l'impression que ça a marché pour la suppression de l'ombre.
les lettres ont l'air un peu plus nettes
... mais toujours aussi désespérément grises...

[pmleconte]

Je pense qu'il faut encore descendre d'un cran pour avoir l'affichage "blanc" en allant sur le texte affiché:

 #js-mainnav.megamenu.blackwhite .childcontent .js-moduletable a.active span.menu-title {  
  color: #fff !important;  
  text-shadow: none !important;
}

Pascal

PS: j'ai vu dans votre custom.css qu'il y avait du beau monde qui était déjà intervenu : PhilJ, LeFabdu51, Lomart, .....

[FlodAriege]

Bonjour Pascal (et tout le monde ici)

Je viens d'ajouter cette ligne à mon custom css, et rien à faire, ce satané lien actif s'obstine à rester gris sur fond noir, quasi illisible.

Je suis allée crooner un peu du côté du forum JUX, et j'ai trouvé cette recommandation :
2 Change color active menu item

#megamenucss .megamenu ul.level0>li.megacss:hover>a.megacss, #megamenucss #js-mainnav.megamenu ul.level0 li.active {
color: #014E72!important;
}

J'ai bien tenté de remplacer level0 par level1, mais sans succès...

Ca me rassure un peu de voir que ce problème semble difficile à résoudre. Sans doute l'intrication de différents css rend la tâche plus compliquée.
Mais de ce que je connais du css de mon template (qui gère normalement le main menu), je ne le vois pas s'exprimer dans mon nouveau main menu géré par JUX et son css.

Aurais-tu une autre idée ?
Merci, et pardon d'abuser autant de ta patience...

Flo

PS: en effet, j'ai trouvé de nombreuses fois de l'aide sur ce forum, et il me semble que la moindre des choses est d'indiquer dans le code qui est l'auteur de la solution mise en oeuvre. C'est pourquoi tu vois les noms de tous ces contributeurs dans mon custom.css

[pmleconte]

On peut essayer de simplifier un peu la commande:

#js-mainnav .megamenu>li a.active span.menu-title {
  color: #fff !important;
  text-shadow: none !important;
}

Il faut voir si cela ne perturbe pas les autres menus.

Pascal

[FlodAriege]

Ça n'a rien changé... C'est fou ça quand même, va savoir où se cache une ligne qui doit supplanter nos demandes et qui force ces liens actifs à s'écrire en lettres grises...
Bon.
Je ne peux pas continuer à te torturer comme ça éternellement et abuser ainsi de ta bonne volonté. Je vais faire autrement.
Je vais tenter un autre template du module.
J'essaie, et je vois ce que ça donne.
..........................
......................................
Bingo !
En choisissant le css 'dark blue' plutôt que le 'black and white', tous les liens de menus s'écrivent en lettres blanches.
Les liens actifs ne sont pas super visibles, mais ce n'est pas dramatique.
Et puis il va falloir que je trouve les bons réglages pour que les submenus s'affichent sans masquer partiellement le lien de menu lui-même (en réalité plutôt son attribut title).

Du coup j'ai l'impression de t"avoir embêté tout ce temps un peu pour rien : désolée