Sujet Précédent Sujet Suivant

Fixer un menu qui décale le contenu

Fermé
CytosineR Messages postés 118 Date d'inscription mercredi 8 août 2012 Statut Membre Dernière intervention 20 mars 2020 - 25 nov. 2014 à 10:08
CytosineR Messages postés 118 Date d'inscription mercredi 8 août 2012 Statut Membre Dernière intervention 20 mars 2020 - 25 nov. 2014 à 13:21
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: 
<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.

1 réponse

Réponse 1 / 1
Kopros Messages postés 597 Date d'inscription mardi 25 septembre 2007 Statut Membre Dernière intervention 3 février 2020 89
25 nov. 2014 à 11:20
Salut !
Tu as mis les 2 mêmes liens pour les images.

Est-ce que tu peux nous donner le rendu html, sans le php (le code source de la page en fait) ?
0
CytosineR Messages postés 118 Date d'inscription mercredi 8 août 2012 Statut Membre Dernière intervention 20 mars 2020 40
25 nov. 2014 à 13:21
Bonjour,
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: 
<div id="header">
				<div id="menu-principal">
				<ul class='menu-principal'>
			<li id="menu-item-63" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-63"><a href="http://localhost/formations/">Formations</a>
<ul class="sub-menu">
	<li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-22 current_page_item menu-item-65"><a href="http://localhost/formations/dut/">Diplômes Universitaires de Technologie</a></li>
	<li id="menu-item-67" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67"><a href="http://localhost/formations/licences-professionnelles/">Licences Professionnelles</a></li>
	<li id="menu-item-64" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-64"><a href="http://localhost/formations/diplomes-universitaires/">Diplômes Universitaires</a></li>
	<li id="menu-item-66" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-66"><a href="http://localhost/formations/formations-personalisees/">Formations personalisées</a></li>
</ul>
</li>
			<li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-68"><a href="http://localhost/international/">International</a>
<ul class="sub-menu">
	<li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-69"><a href="http://localhost/international/etudiants-etrangers/">Étudiants étrangers</a></li>
	<li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-70"><a href="http://localhost/international/partir-etudier-a-letranger/">Partir étudier à l’étranger</a></li>
	<li id="menu-item-71" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-71"><a href="http://localhost/international/temoignages/">Témoignages</a></li>
</ul>
</li>
			<li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-72"><a href="http://localhost/liut/">L’IUT</a>
<ul class="sub-menu">
	<li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-74"><a href="http://localhost/liut/presentation/">Présentation</a></li>
	<li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75"><a href="http://localhost/liut/visite-guidee/">Visite guidée</a></li>
	<li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73"><a href="http://localhost/liut/lens-et-ses-environs/">Lens et ses environs</a></li>
</ul>
</li>
			<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-76"><a href="http://localhost/etudiants/">étudiants</a>
<ul class="sub-menu">
	<li id="menu-item-80" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-80"><a href="http://localhost/etudiants/vie-etudiante/">Vie étudiante</a></li>
	<li id="menu-item-79" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-79"><a href="http://localhost/etudiants/projets-etudiants/">Projets étudiants</a></li>
	<li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77"><a href="http://localhost/etudiants/infos-pratiques/">Infos pratiques</a></li>
	<li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78"><a href="http://localhost/etudiants/offre-de-stages-et-demplois/">Offre de stages et d’emplois</a></li>
</ul>
</li>
			<li id="menu-item-81" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-81"><a href="http://localhost/entreprises/">Entreprises</a>
<ul class="sub-menu">
	<li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"><a href="http://localhost/entreprises/des-formations-a-votre-service/">Des formations à votre service</a></li>
	<li id="menu-item-84" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-84"><a href="http://localhost/entreprises/taxe-dapprentissage/">Taxe d’apprentissage</a></li>
	<li id="menu-item-83" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-83"><a href="http://localhost/entreprises/ils-nous-font-confiance/">Ils nous font confiance…</a></li>
</ul>
</li>
		</ul>
	</div><!-- #menu-principal -->
0

Discussions similaires

Savoir de quel ville à été envoyé le message
pedro1209 -
Pierr10 -

7 réponses
les entrées et les sortées
oussman -
MarsuGL -

2 réponses
Youtube: Ce contenu n'est pasdisponible dans votre pays
nesrinedu30 -
Ref1 -

10 réponses
Contenue masqué
Hippolyte -
Hippolyte -

6 réponses