Menu déroulant horizontal - enlever le déplacement de texte
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Menu déroulant horizontal - enlever le déplacement de texte
Bonjour !
Alors j'ai installé les supers codes pour faire un menu déroulant horizontal sur ma page d'accueil. Le seul problème, c'est que les sous-menus, une fois ouverts, décalent le texte qui est en dessous vers la droite. Comment enlever cette propriété pour que les sous-menus passent simplement au dessus du texte ?
Voici des screens de mon problème :
Mon code CSS associé :
Et mon script :
Merci de votre attention,
Ciela
Alors j'ai installé les supers codes pour faire un menu déroulant horizontal sur ma page d'accueil. Le seul problème, c'est que les sous-menus, une fois ouverts, décalent le texte qui est en dessous vers la droite. Comment enlever cette propriété pour que les sous-menus passent simplement au dessus du texte ?
Voici des screens de mon problème :
Mon code CSS associé :
- Code:
/* PA MENU DEROULANT */
/*liste des menus*/
#menu ul { padding: 2px;
list-style-type: none;
margin: 2px; }
/*positionnement des menus*/
#menu dl { float: left;
width: 25% }
/*menus*/
#menu dt { font-size: 11px;
color: blue;
text-align: center;
cursor: pointer;
font-weight: bold;
background: yellow;
border: 1px solid black;
margin: 2px; }
/*liste des sous-menus*/
#menu dd { position: relative;
z-index: 20;
width: 100%;
margin-left: -25px;
margin-right: -25px;
list-style-type: none;}
#menu div { text-align: center;
margin: 1px;
list-style-type: none;}
#menu li { text-align: center;
margin: 1px;
list-style-type: none;}
/* liens des sous-menus*/
#menu li a, #menu dt a { color: red;
background: magenta;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
margin: 3px;
padding: 1px;
list-style-type: none; }
/*liens des sous-menus au survol*/
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus { color: white;
background: blue; }
Et mon script :
- Code:
$(function(){ $("#menu dl").hover(function(){$("#menu dl dd").slideUp("500");$(this).find("dd").stop(true,true).slideDown("500");},function(){$(this).find("dd").slideUp("500");}); });
Merci de votre attention,
Ciela
Re: Menu déroulant horizontal - enlever le déplacement de texte
Bonsoir,
Je pense savoir d'où vient le problème mais il me faudrait le code de votre page d'accueil
Cordialement.
Re: Menu déroulant horizontal - enlever le déplacement de texte
Voilà le code de ma page d'accueil :
Merci
- Code:
<div class="dimensionpa"><div class="bienvenue">Bienvenue sur Alter Mundus, {USER&#8288;NAME}</div><div id="menu">
<dl>
<dt>» Section Introduction</dt>
<dd style="display:none;">
<li><a href="http://alter-mundus.superforum.fr/t247-reglement-d-alter-mundus">Règlement</a></li>
<li><a href="http://alter-mundus.superforum.fr/t230-histoire-version-longue">Histoire version longue</a></li>
<li><a href="http://alter-mundus.superforum.fr/t252-l-univers-d-alter-mundus">L'Univers d'Alter-Mundus</a></li>
<li><a href="http://alter-mundus.superforum.fr/t265-les-differents-systemes-de-jeu-uc">Systèmes de jeu</a></li>
<li><a href=http://alter-mundus.superforum.fr/t263-staff-et-credits"">Staff & Crédits</a></li>
</dd>
</dl>
<dl>
<dt>» Section Invités</dt>
<dd style="display:none;">
<li><a href="http://alter-mundus.superforum.fr/register">S'inscrire</a></li>
<li><a href="http://alter-mundus.superforum.fr/f53-fac">Foire aux questions</a></li>
<li><a href="http://alter-mundus.superforum.fr/t259-demande-de-partenariat">Partenariat</a></li>
<li><a href="http://alter-mundus.superforum.fr/t269-l-actualite-de-nos-partenaires">Actualiser votre partenariat</a></li>
<li><a href="http://alter-mundus.superforum.fr/t270-fiche-d-alter-mundus">Notre fiche</a></li>
</dd>
</dl>
<dl>
<dt>« Section Membre</dt>
<dd style="display:none;">
<li><a href="http://alter-mundus.superforum.fr/t254-formulaire-de-presentation">Présentation</a></li>
<li><a href="http://alter-mundus.superforum.fr/f58-diurnales">Journal de bord</a></li>
<li><a href="http://alter-mundus.superforum.fr/f40-absentiae">Absence</a></li>
<li><a href="http://alter-mundus.superforum.fr/t250-demande-de-liens">Demande de liens</a></li>
<li><a href="http://alter-mundus.superforum.fr/f12-parabolare-rp">Topic d'appels</a></li>
</dd>
</dl>
<dl>
<dt>» Section Assistance</dt>
<dd style="display:none;">
<li><a href="http://alter-mundus.superforum.fr/t268-aide-pour-les-debutants">Aide pour les débutants</a></li>
<li><a href="http://alter-mundus.superforum.fr/t236-liste-des-gardiens-et-des-heritiers">Liste des Gardiens & des Héritiers</a></li>
<li><a href="http://alter-mundus.superforum.fr/t262-liste-des-noms-pris">Liste des noms</a></li>
<li><a href="http://alter-mundus.superforum.fr/t235-listes-des-pouvoirsi">Liste des pouvoirs</a></li>
<li><a href="http://alter-mundus.superforum.fr/f3-clanna">Clans & grades libres</a></li>
</dd>
</dl></div>Forum en construction<br />Crédit codage Never Utopia : http://www.never-utopia.com/<br />Recherchés :<br />- Réviseur/nettoyeur de codage<br />- Graphiste<br />- Correcteur de latin/langues anciennes<br />- Modérateurs<br />- Modérateurs spécialisés dans les systèmes de jeu / Animateurs<br />- Partenaires</div>
Merci
Re: Menu déroulant horizontal - enlever le déplacement de texte
Bonsoir,
Donc ici:
Vous remplacez le relative par absolute.
Et après c'est à vous de régler au niveau des valeurs pour que le tout soit bien placé
Cordialement.
Donc ici:
- Code:
/*liste des sous-menus*/
#menu dd { position: relative;
z-index: 20;
width: 100%;
margin-left: -25px;
margin-right: -25px;
list-style-type: none;}
Vous remplacez le relative par absolute.
Et après c'est à vous de régler au niveau des valeurs pour que le tout soit bien placé
Cordialement.
Re: Menu déroulant horizontal - enlever le déplacement de texte
Ça a réglé mon problème, merci !
Sujets similaires
» Menu déroulant horizontal
» Texte et menu déroulant
» Enlever le texte du menu.
» Outils de mise en forme du texte et menu déroulant des smiley invisible sur smartphone Apple
» Enlever le texte dans le menu pour ne laisser que les images
» Texte et menu déroulant
» Enlever le texte du menu.
» Outils de mise en forme du texte et menu déroulant des smiley invisible sur smartphone Apple
» Enlever le texte dans le menu pour ne laisser que les images
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum