Fixer un menu qui décale le contenu
CytosineR
Messages postés
118
Date d'inscription
Statut
Membre
Dernière intervention
-
CytosineR Messages postés 118 Date d'inscription Statut Membre Dernière intervention -
CytosineR Messages postés 118 Date d'inscription Statut Membre Dernière intervention -
Bonjour à tous,
Je suis en train de travailler sur le nouveau site web de mon école. J'ai récupéré le travail d'un ancien élève et suis chargé de l'adapter. Cependant, il y a un problème que je ne parviens pas à fixer....
Lorsque je déroule le menu principal, il "pousse" le contenu de la page au lieu de s'ouvrir par dessus comme la plupart des menus. J'ai fouillé, modifié chaque morceau du CSS, touché à tout, mais je ne sais pas quelle est la modification à faire.....
Je ne peux pas vous communiquer l'adresse car je travaille sur serveur local.
Voici un aperçu du menu fermé:
https://i.imgur.com/gpJUuoo.jpg
Et un aperçu du menu ouvert:
https://i.imgur.com/gpJUuoo.jpg
Il n'y a donc pas de superposition.... Le contenu est décalé vers le bas. De plus, tous les sous-menus s'ouvrent. Seul le sous-menu correspondant au hover devrait s'ouvrir.
Concernant les détails techniques:
Le site est réalisé sous wordpress. Ce menu est en fait un assemblage de cinq menus posés côte à côte. Ils partagent les mêmes classes et la même architecture.
Mes menus sont générés de la façon suivante:
Et voici (en partie) le CSS associé:
J'ai retiré tout ce qui me semblait purement décoratif afin d'alléger mon message.
Si quiconque se prend le temps de se plonger dans mon code afin de voir ce qu'il faudrait changer pour que le menu se superpose au contenu lors de son ouverture, et n'ouvre que la catégorie demandée, je lui en serais très reconnaissant....
D'avance, un grand merci.
Je suis en train de travailler sur le nouveau site web de mon école. J'ai récupéré le travail d'un ancien élève et suis chargé de l'adapter. Cependant, il y a un problème que je ne parviens pas à fixer....
Lorsque je déroule le menu principal, il "pousse" le contenu de la page au lieu de s'ouvrir par dessus comme la plupart des menus. J'ai fouillé, modifié chaque morceau du CSS, touché à tout, mais je ne sais pas quelle est la modification à faire.....
Je ne peux pas vous communiquer l'adresse car je travaille sur serveur local.
Voici un aperçu du menu fermé:
https://i.imgur.com/gpJUuoo.jpg
Et un aperçu du menu ouvert:
https://i.imgur.com/gpJUuoo.jpg
Il n'y a donc pas de superposition.... Le contenu est décalé vers le bas. De plus, tous les sous-menus s'ouvrent. Seul le sous-menu correspondant au hover devrait s'ouvrir.
Concernant les détails techniques:
Le site est réalisé sous wordpress. Ce menu est en fait un assemblage de cinq menus posés côte à côte. Ils partagent les mêmes classes et la même architecture.
Mes menus sont générés de la façon suivante:
<div id="menu-principal"> <?php //wp_nav_menu( array( 'container' => false, 'theme_location' => 'menu' ) ); ?> <ul class='menu-principal'> <?php wp_nav_menu( array( 'container' => false, 'theme_location' => 'menua' , 'items_wrap' => '%3$s') ); ?> <?php wp_nav_menu( array( 'container' => false, 'theme_location' => 'menub' , 'items_wrap' => '%3$s') ); ?> <?php wp_nav_menu( array( 'container' => false, 'theme_location' => 'menuc' , 'items_wrap' => '%3$s') ); ?> <?php wp_nav_menu( array( 'container' => false, 'theme_location' => 'menud' , 'items_wrap' => '%3$s') ); ?> <?php wp_nav_menu( array( 'container' => false, 'theme_location' => 'menue' , 'items_wrap' => '%3$s') ); ?> </ul> </div>
Et voici (en partie) le CSS associé:
#menu-principal>ul{
margin:25px auto 15px auto;
position: relative;
width:70%;
min-width:960px;
}
#menu-principal ul li {
display:inline-block;
list-style: none;
width:15%;
vertical-align:top;
text-align: center;
margin-right:1%;
}
#menu-principal ul li a {
z-index: 10;
display:inline;
position: relative;
margin: 0;
padding:0 10px;
}
#menu-principal ul ul{
overflow:hidden;
max-height:0;
padding:30px 0 0 0; margin:0;
}
#menu-principal ul ul li{
padding:20px 0 0 4%;margin:0;
display:block;
width:95%;
}
#menu-principal ul ul li a{
padding:0; margin:0;
display:block;
}
#menu-principal ul ul li a:hover{
position:relative;
left:3%;
}
#menu-principal>ul>li>a{
position:relative;
padding:3px 8px;
}
J'ai retiré tout ce qui me semblait purement décoratif afin d'alléger mon message.
Si quiconque se prend le temps de se plonger dans mon code afin de voir ce qu'il faudrait changer pour que le menu se superpose au contenu lors de son ouverture, et n'ouvre que la catégorie demandée, je lui en serais très reconnaissant....
D'avance, un grand merci.
A voir également:
- Fixer un menu qui décale le contenu
- Menu déroulant excel - Guide
- Le fichier à télécharger correspond au contenu brut d’un courrier électronique. de quel pays a été envoyé ce message ? - Guide
- Fusionner deux cellules excel en gardant le contenu - Guide
- Word a trouvé du contenu illisible - Guide
- Canon quick menu - Télécharger - Utilitaires
Je te remercie pour ta réponse.
Je n'avais pas remarqué que j'ai fail mon c/c pour les images..... Je ne sais pas si je peux éditer mon premier post? Voici le rendu du menu ouvert : https://i.imgur.com/siDZGom.jpg
Et voici le rendu HTML du menu: