Probleme avec mon menu deroulant

Question

leblogduzouk

30 Aug 2010 à 17:14

bonjour à tous,

voila j'ai un menu déroulant que j'avais créer qui était bien en place et lors que j'ai voulu l'appliquer a l'ensemble du blog et la opss c pas bon et je comprend pas ce qui a sauter ?

en gros c un menu horizontale + déroulant sur chaque bock.

le site c http://leblogduzouk.net

en faite je pense qu'il y juste un petit bug un ligen ou un truc qui a été zapper lors de la copie?

pourquoi le déroulement des colonnes ne marche plus?

merci de votre aide

julien

le code html:

[#green]<!-- menu cliquable -->
        </td>
</tr>
<tr style="text-align: center;">
<td colspan="9" align="left">
<div id="conteneur-menu">
<div id="menu">
              <dl>
                <dt>
                  <a href="http://leblogduzouk.net">ACCEUIL</a>
                </dt>
                <dd>
                  
<ul>
<li>
                      <a href="http://leblogduzouk.net">ACCEUIL</a>
                    </li>
<li>
                      <a href="http://www.over-blog.com/profil/blogueur-3848.html">PRESENTATION</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/article-contact-blog-du-zouk-42425755.html">CONTACTS</a>
                    </li>
<li>
                      <a href="http://www.facebook.com/leblogduzouk">FACEBOOK</a>
                    </li>
<li>
                      <a href="http://www.myspace.com/leblogduzouk">MYSPACE</a>
                    </li>
<li>
                      <a href="http://twitter.com/leblogduzouk">TWITTER</a>
                    </li>
<li>
                      <a href="http://www.youtube.com/user/leblogduzouk2">Chaine Youtube</a>
                    </li>
<li>
                      <a>Chaine DailyMotion</a>
                    </li>
</ul>
</dd>
              </dl>
              <dl>
                <dt>
                  <a href="http://www.leblogduzouk.net/categorie-740294.html">MUSIQUES</a>
                </dt>
                <dd>
                  
<ul>
<li>
                      <a href="http://www.leblogduzouk.net/categorie-740294.html">ZOUK LOVE</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/categorie-740298.html">COMPAS</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/categorie-740357.html">CABO-KIZOMBA</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/categorie-740350.html">ZOUK RETRO</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/categorie-740297.html">AFRO-COUPE DECALE</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/categorie-740296.html">REGGAE-DANCEHALL</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/categorie-751164.html">SALSA-REGGAETON</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/categorie-750748.html">HipHop Rnb</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/categorie-10720965.html">Antilles Tradition</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/categorie-11488900.html">Electropical-Club</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/article-10011698.html">FUTURES SORTIES</a>
                    </li>
</ul>
</dd>
              </dl>
              <dl>
                <dt>
                  <a href="http://www.leblogduzouk.net/categorie-750784.html">CLIPS</a>
                </dt>
                <dd>
                  
<ul>
<li>
                      <a href="http://www.leblogduzouk.net/categorie-750784.html">CLIPS ZOUK</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/categorie-750784.html">AUTRES</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/article-29254392.html">LISTE DES CLIPS</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/article-video-wall-dailymotion-du-blog-du-zouk-55551198.html">Wall DailyMotion</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/article-jukebox-by-dailymotion-du-blog-du-zouk-55551854.html">JukeBox DailyMotion</a>
                    </li>
<li>
                      <a href="http://www.youtube.com/user/leblogduzouk">CLIP ELECTRO</a>
                    </li>
<li>
                      <a href="http://www.youtube.com/user/leblogduzouk">CLIP DIVERS</a>
                    </li>
</ul>
</dd>
              </dl>
              <dl>
                <dt>
                  <a href="http://www.leblogduzouk.net/categorie-4000682.html">SOIREES</a>
                </dt>
                <dd>
                  
<ul>
<li>
                      <a href="http://www.leblogduzouk.net/categorie-4000682.html">SOIREES</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/article-28763025.html">LISTES DES SOIREES</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/categorie-4000682.html">CONCERTS</a>
                    </li>
</ul>
</dd>
              </dl>
              <dl>
                <dt>
                  <a href="http://www.leblogduzouk.net/categorie-4000345.html">INTERVIEWS</a>
                </dt>
                <dd>
                  
<ul>
<li>
                      <a href="http://www.leblogduzouk.net/categorie-4000345.html">LIRE LES INTERVIEWS</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/article-12298609.html">LISTE DES INTERVIEWS</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/article-12298609.html">INTERVIEWS VIDEOS</a>
                    </li>
</ul>
</dd>
              </dl>
              <dl>
                <dt>
                  <a href="http://www.leblogduzouk.net/pages/HIT_DU_BLOG_DU_ZOUK-3312342.html">HIT TROPICALE</a>
                </dt>
                <dd>
                  
<ul>
<li>
                      <a href="http://www.leblogduzouk.net/pages/HIT_DU_BLOG_DU_ZOUK-3312342.html">TOP 50: SINGLE ZOUK</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/article-29129980.html">EXTRAITS EN ECOUTE</a>
                    </li>
</ul>
</dd>
              </dl>
              <dl>
                <dt>
                  <a href="http://www.leblogduzouk.net/article-13141854.html">LIENS</a>
                </dt>
                <dd>
                  
<ul>
<li>
                      <a href="http://leforumduzouk.net">Le Forum du Zouk</a>
                    </li>
<li>
                      <a href="http://www.antilles-mizik.com/boutique/index.php?ref=2">Antilles Mizik</a>
                    </li>
<li>
                      <a href="http://leblogduzouk.ssbstore.com/">Ssbstore</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/article-13141854.html">Liens</a>
                    </li>
</ul>
</dd>
              </dl>
              <dl>
                <dt>
                  <a href="http://ann.over-blog.com/blog-newsletter.php?ref=387414">NEWLETTER</a>
                </dt>
                <dd>
                  
<ul>
<li>
                      <a href="http://ann.over-blog.com/blog-newsletter.php?ref=387414">Inscription</a>
                    </li>
<li>
                      <a href="http://ann.over-blog.com/blog-contact.php?ref=387414">Formulaire Contact</a>
                    </li>
</ul>
</dd>
              </dl>
            </div>
</div>
</td>
</tr>
<tr>[/#]

et le css corespondant c'est :

[#orange]#conteneur-menu{
        z-index: 100;
        background-color:#B9121B;
        height:0px;
        color:#000000;
        position:relative;
        text-transform : uppercase; 
	}	
#menu{
        margin-left: auto; 
        margin-right: auto; 
        width:944px;        
        height:30px;
        background-color:#046380;
        color:#000000;
        font-weight : bold; /* on met le texte en gras */
        font-size : 14px;
        font-family : Times New Roman; /* on utilise Arial, c'est plus beau ^^ */
	position:relative;
        text-align: left; /* on rétablit l'alignement normal du texte */ 
        }
      
dl{
	height:28px;
	margin:0px; 
	padding:0px;
	display:block;
	float:left;
	}
dt{
	width:114px;
	display:block;
	height:28px;
	color:#000000;
	line-height:28px;
	text-align:center;
	border:groove 2px #01B0F0;
	cursor:pointer;
	}	
dd{
	height:28px;
	width:114px;
	display:block;
	margin:0;
	padding:0;
		}	
dd ul{
        background-color:#046380;
	width:114px;
	margin:0px;
	padding:0px;
	text-align:center;
	list-style:none;
	}
dd ul li{
	display:block;
	margin:0px;
	padding:0px;
	}
dd ul li a{
        background-color:#046380;
	width:114px;
	color:#ffffff;
	text-decoration:none;
	line-height:20px;
	border:groove 2px #01B0F0;
	display:block;
	}
dl      hover dd{
	display:block;
	}
dd ul li a:hover{
	background-color:#000000;
	color:#000000;
	}
dl dd{
	display:none;
	}
#cl_0_0 {overflow:visible;}/*permet à ce que les sous-menus puissent dépasser la celulle, ici la colonne article*/
[/#]

Modifié par leblogduzouk (30 Aug 2010 - 17:53)

dhjapan

30 Aug 2010 à 17:31

Il est sensé marcher sans javascript ?

pchlj

30 Aug 2010 à 17:48

Bonjour...

Je vais faire mon modérateur Smiley smile

Il y a certaines règles à respecter sur ces forums...

On dit bonjour... et on encadre le code avec les bonnes balises pour que ça soit lisible Smiley smile

tu peux éditer ton message très facilement pour le rendre correct Smiley cligne

leblogduzouk

30 Aug 2010 à 17:57

voile desolé... ou je je n'assure pas...

ben sur over blog di y a du java qui passe mais ce menu est fait sans java si je me trompe pas...

j'en ai refait un avec 123menu en java qui passe nikel:

http://sd-4.archive-host.com/membres/up/84152206344167997/menu_blog_du_zouk.swf

mais lorsque je le met en faite les block déroulant passent derrière les articles... donc je suis reparti pour modifier le précèdent.

mais avant que je place ça sur les articles et accueil ça passait bien ... je comprend pas...

pchlj

30 Aug 2010 à 19:27

bon j’avais 5 minutes à tuer j'ai regardé ton code...

t'as juste une erreur...

à la place de cette ligne :

dl      hover dd{

écris juste c'est tout con Smiley cligne

dl:hover dd{

et pour moi ça fonctionne Smiley smile

leblogduzouk

30 Aug 2010 à 19:58

yes ça marche un gros big up... en faite faut pas mettre espace entre dl:?

d'ailleur c quoi la focntion dl?

je pige pas trop je tatouilles les codes et j'aimerai vraiment faire un beau truc...

pchlj

30 Aug 2010 à 20:01

alors pour te répondre...

déjà jamais d'espace avec les pseudos classes de type :hover etc

et dl c'est une liste défini tout simplement (un peu comme UL)

Heyoan

30 Aug 2010 à 20:16

Salut,

pchlj a écrit :
dl c'est une liste défini tout simplement (un peu comme UL)

Pas tout à fait : l'élément DL introduit une liste de définitions et donc n'a rien à faire dans ce menu. Smiley cligne

A lire en complément : http://openweb.eu.org/articles/respecter_semantique

leblogduzouk

30 Aug 2010 à 20:22

merci encore ...je me suis pris la tête dessus un truc de dingue

Borak

30 Aug 2010 à 22:13

Heyoan a écrit :
Pas tout à fait : l'élément DL introduit une liste de définitions et donc n'a rien à faire dans ce menu.

Et pourtant, il y a quelques temps, il me semble qu'on avait des exemples de menu utilisant des listes de définition sur le site AlsaCréations Smiley smile

. On avait le titre du menu dans le dt et une liste de liens dans le dd.

Il doit me rester quelques menus qui respectaient cette idée de l'époque. Mais maintenant, j'évite...

Heyoan

30 Aug 2010 à 22:35

Oui tu as raison. Mais comme tu vois ce vieux tuto a été supprimé depuis. Smiley cligne

Sujet clos