Menu déroulant horizontal - enlever le déplacement de texte

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Menu déroulant horizontal - enlever le déplacement de texte

Message par Arc-En-Ciela Mar 04 Sep 2012, 16:11

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 :
Menu déroulant horizontal - enlever le déplacement de texte Menudroulant

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
avatar

Arc-En-Ciela
***

Messages : 120
Inscrit(e) le : 22/08/2010

http://alter-mundus.superforum.fr/portal.htm
Arc-En-Ciela a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu déroulant horizontal - enlever le déplacement de texte

Message par Arc-En-Ciela Ven 07 Sep 2012, 04:24

Upinou !
avatar

Arc-En-Ciela
***

Messages : 120
Inscrit(e) le : 22/08/2010

http://alter-mundus.superforum.fr/portal.htm
Arc-En-Ciela a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu déroulant horizontal - enlever le déplacement de texte

Message par Arc-En-Ciela Mar 11 Sep 2012, 16:16

Upinou !
avatar

Arc-En-Ciela
***

Messages : 120
Inscrit(e) le : 22/08/2010

http://alter-mundus.superforum.fr/portal.htm
Arc-En-Ciela a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu déroulant horizontal - enlever le déplacement de texte

Message par Arc-En-Ciela Ven 14 Sep 2012, 04:01

Upinou !
avatar

Arc-En-Ciela
***

Messages : 120
Inscrit(e) le : 22/08/2010

http://alter-mundus.superforum.fr/portal.htm
Arc-En-Ciela a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu déroulant horizontal - enlever le déplacement de texte

Message par Arc-En-Ciela Dim 16 Sep 2012, 17:30

Upinou !
avatar

Arc-En-Ciela
***

Messages : 120
Inscrit(e) le : 22/08/2010

http://alter-mundus.superforum.fr/portal.htm
Arc-En-Ciela a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu déroulant horizontal - enlever le déplacement de texte

Message par Anzu Dim 16 Sep 2012, 20:42


Bonsoir,

Je pense savoir d'où vient le problème mais il me faudrait le code de votre page d'accueil Smile

Cordialement.
Anzu

Anzu
Membre actif

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

https://forum.forumactif.com/
Anzu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu déroulant horizontal - enlever le déplacement de texte

Message par Arc-En-Ciela Dim 16 Sep 2012, 22:30

Voilà le code de ma page d'accueil :

Code:
<div class="dimensionpa"><div class="bienvenue">Bienvenue sur Alter Mundus, {USER&amp;#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
avatar

Arc-En-Ciela
***

Messages : 120
Inscrit(e) le : 22/08/2010

http://alter-mundus.superforum.fr/portal.htm
Arc-En-Ciela a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Menu déroulant horizontal - enlever le déplacement de texte

Message par Anzu Lun 17 Sep 2012, 17:13

Bonsoir,

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é Smile

Cordialement.
Anzu

Anzu
Membre actif

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

https://forum.forumactif.com/
Anzu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu déroulant horizontal - enlever le déplacement de texte

Message par Arc-En-Ciela Lun 17 Sep 2012, 17:23

Ça a réglé mon problème, merci !
avatar

Arc-En-Ciela
***

Messages : 120
Inscrit(e) le : 22/08/2010

http://alter-mundus.superforum.fr/portal.htm
Arc-En-Ciela a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum