Discussion :

[bloups0]

Bonjour,

Je viens ici car j'ai un petit souci. J'ai du faire un menu avec un effet hover sur chaque élément, pour sa, j'ai joué avec le line height, et padding top etc..., mon menu marché très bien, jusque là.

J'ai du ajouté, pour les besoins un nouvelle élément dans le menu, qui ne rentre pas sur deux lignes, et je me retrouve bloqué, à cause de line height, il se retrouve à l'extérieur de mon menu, à vrai dire, je ne sais pas comment faire autrement...

Voilà le liens :

http://codepen.io/anon/pen/JWPJWm

Merci d'avance.

[loic5015]

Bonjour Bloups,

En rajoutant, le parametre width: 130%; dans ton code css. L'affichage se fait sur une seule ligne. Je pense que tu peux gerer le pourcentage en fonction du nombre de caractères que tu veux pour chaque menu.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
.navbar-custom .nav-justified > li > a {
    color: #1e1e1e;
    width: 130%;
    height: 70px;
    line-height: 95px;
    padding-top: 0;
    text-align: center;
    top: -4px;
    font-size: 16px;
    font-weight: 500;
    border-top: 4px solid transparent;
}

J'espere que cela pourra t'aider.

Cdt

[bloups0]

Cela ne m'aide pas trop en faite, dans l'exemple j'ai limiter à 1000px, mais sur mon site, si un élément dépasser 100%, je me retrouve avec mon menu qui va à la ligne. Je ne peux pas jouer avec width malheureusement.

[JefReb]

Salut,
Le codepen, c'est bien mais, je suis peut être stupide et pas trop le temps de comprendre, mais aurais-tu un exemple codepen avec ce problème:

J'ai du ajouté, pour les besoins un nouvelle élément dans le menu, qui ne rentre pas sur deux lignes

De plus, le code html et css est compliqué,compliqué ... une simplification ne serait-elle pas plus facile à lire.
Ainsi je peux lire:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<nav class="navbar navbar-custom">

mais je ne vois nulle part la class .navbar dans le css
De plus au lieu, n'est-il pas plus simple de définir un css:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
nav {
    background-color: #ffffff;
    border: none;
    border-top: 9px solid #f08a88;
    border-bottom: 4px solid #373737;
    border-radius: 0;
    margin-bottom: 0;
    height: 100px;
    max-width: 1000px;
}

Quand même plus facile à lire ...

De la même manière:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<ul id="menu-menu" class="nav nav-justified">
                <li id="menu-item-958" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-958">

Je n'ose pas dire ce que j'en pense, mais il ne faudra pas s'étonner si peu désire te répondre.
Mais ceci très amicalement, pour un ancien qui a lui aussi galéré à ses débuts!

[bloups0]

Bonjour,

à vrai dire, je ne voie pas ou est le souci dans le code html.

navbar, si tu fais inspecter l'élément, tu voies qu'il y a bien des règles appliqué, celle de bootstrap, j'ai inclue un fichier CSS.

En effet, le code html peut être lourd, mais c'est l'effet Wordpress et bootstrap, il faut suivre les règles de chacun, et wordpress a tendance à ajouter ces propres classe et id.

Il ne s'agit pas de problème de balise, si les id ajouté par wordpress te dérangent, je peux les supprimer, mais cela ne réglera absolument pas mon problème.

http://codepen.io/anon/pen/oZNbBg

En précisant la max-width à 770px, on se rend bien compte du problème.

[JefReb]

Ha d'accord, mais il n'y a jamais été question dans le post qu'il s'agissait de wordpress ou bootstrap.
Donc ça reste complexe ... qui dit règles, dit rigidité. Bon désolé, peut rien faire. Si quelqu'un a le courage de regarder...

[bloups0]

Je pense, sans trop m'avancer, quand jouant sur les règles que j'ai mis dans le CSS du codepen, il est possible de réglé le souci, seulement, je ne trouve pas la solution, bootstrap et wordpress ne jouent pas sur mon hover, focus, mon transform, mes couleurs. Wordpress me permet juste d'insérer mon menu dynamiquement, bootstrap d'avoir un menu responsive.

[NoSmoking]

Bonjour,
ton problème vient de l'héritage, la cascade, les éléments <a> héritent du line-height de leur parent en l’occurrence les <li>.
Pour y remédier il te faut réaffecter une valeur à tes balises pour annuler l'héritage.

Ton CSS me paraissant un peu compliqué pour ce que tu fais je vais repartir de ce code HTML épuré

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<ul id="menu">
   <li><a href="#">Liens 1</a></li>
   <li><a href="#">Liens 2</a></li>
   <li><a href="#">Liens sur deux lignes</a></li>
   <li><a href="#">Liens 3</a></li>
   <li><a href="#">Liens 4</a></li>
   <li><a href="#">Liens 5</a></li>
   <li><a href="#">Liens 6</a></li>
</ul>

tu devrais obtenir ton résultat en appliquant ce CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#menu {
  display: table;
  margin: 0;
  padding: 0;
  max-width: 770px;
  list-style: none;
  background: #EEF;
}
#menu li {
  display: table-cell;
  width: 1%;
  height: 6em;
  text-align: center;
  line-height: 6em;
  vertical-align: middle; /* centrage vertical */
}
li a {
  display: block;     /* important */
  text-decoration: none;
  line-height: 1.5em; /* rétabli la hauteur de ligne normale */
  word-wrap: break-word;
}

Si tu n'es pas « allergique » au dernière techno, tu peux régler cela en utilisant les flex-box et pour le coup le CSS s'en retrouve allégé.
Avec le même HTHL et le CSS suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#menu {
  display: flex;
  align-items: center;
  height: 6em;
  margin: 0;
  padding: 0;
  max-width: 770px;
  list-style: none;
  background: #EEF;
}
#menu li {
  width: 25%;     /* largeur + grande */
}
li a {
  display: block; /* important */
  text-align: center;
  text-decoration: none;
}

tu devrais obtenir le même résultat.

Je te laisse gérer tes effets visuels.

[bloups0]

Bonjour,

Merci NoSmoking pour l'aide, en effet, cela marche bien mieux !

J'aurai un tout dernier petit souci :

http://codepen.io/anon/pen/NpqjYB

Je ne sais pas comment faire en sorte que mon hover fasse exactement comme tu mon menu précédent, sans jouer sur le height, hors, mon height fais bouger mon élément, donc, les éléments de mon menu ne sont plus alignée :/.

Merci d'avance !

[bloups0]

Bonjour,

Je me permet de faire un double poste, j'ai trouvé une solution, j'ai mie un padding:30px 0px; pour résoudre mon problème !

Merci à ceux qui ont répondu .