ListeDeDefinitionCss3ProbMiseEnPage

zezinand0 Messages postés 5 Date d'inscription Statut Membre Dernière intervention -
zezinand0 Messages postés 5 Date d'inscription Statut Membre Dernière intervention - 19 janv. 2012 à 10:33

Bonjour,

Je dois faire un site en php + sql pour un projet de l'école.

Dans ce site j'ai crée un menu déroulante a l'aide du css3. Le problème que j'ai c'est qu'il s'aligne pas sur une ligne, il fait chaque fois un retour a la ligne. Je vous laisse le code css + le menu déroulante.

J'ai deja essayé:

-de mettre par tout dans le css: display:inline;
-de mettre par tout dans le css: display:inline-block;
-de mettre par tout dans le css: display:block;

J'avais des <dt> pour chaque image(menu) et alors j'ai décidé juste de le mettre sur le menu déroulant mais sans succès.

Je viens de remarquer que c'est vraiment difficile de bien indenter sur cet éditeur texte alors j'ai fait mon mieux.

CODE MENU DEROULANT

<nav id='menu'>
<a href='page_user.php?conteneur=accueil'><img src="images/bouton /Accueil.jpg" alt="Accueil" /></a>

<dl>
<dt><img src="images/boutons/Modules.jpg" ></dt>
<dd>
<ul>
<li> <a href='page_user.php?conteneur=modules_ich'>Modules ICH</a></li>
<li> <a href='page_user.php?conteneur=modules_mas'>Modules MAS</a></li>
<li> <a href='page_user.php?conteneur=modules_mah'>Modules MAH</a></li>
<li> <a href='page_user.php?conteneur=modules_iel'>Modules IEL</a></li>
</ul>
</dd>
</dl>

<a href='page_user.php?conteneur=forum'><img src="images/boutons/Forum_cpnv.jpg" alt="forum" /></a>
<a href='page_user.php?conteneur=contact'><img src="images/boutons/Contact.jpg"alt="Contact"/></a>

</nav>

CODE CSS:

#user{
font-family:"Comic Sans MS", cursive;
padding:5px;
font-family: "Comic Sans MS";
}
#menu{
display:inline;
margin: auto;
width:960px;

}
#menu dl{
display:inline;
}
#menu dt{
display:inline;
height:20px;
color:#FFF;
cursor:pointer;

}
#menu dd{
display:inline;

}

#menu dd ul{

margin:0;
padding:0;
list-style:none;
display:inline;
}
#menu dd ul li{

text-align:center;
padding:0;
display:inline;
}
#menu dd ul li a {
text-decoration:none;
display:inline;
height:30px;
line-height:30px;

}
#menu dd ul li a:hover {

text-decoration:none;
display:inline;
height:30px;
line-height:30px;

}

#menu dl:hover dd{
display:inline;

}
#menu dl dd{
display:inline;
}

Merci bcp d'avance ;)

Afficher la suite

2 réponses

Réponse 1 / 2

soft1ne

Salut, je viens de voir ton code, alord j'ai quasiment rien fait, mais je t'ai modifier 2-3 lignes, en fait tu doit faire au SURVOL de ton <dt> tu AFFICHE le <dd> a l'INTERIEUR, regarde je te l'ai fait la, inspire toi :

<style>
#user{ 
font-family:"Comic Sans MS", cursive; 
padding:5px; 
font-family: "Comic Sans MS"; 
} 
#menu{ 
display:inline; 
margin: auto; 
width:960px; 
} 
#menu dl{ 
display:inline; 
} 
#menu dt{ 
display:inline; 
height:20px; 
color:#FFF; 
cursor:pointer; 
} 



#menu dd{ 
display:none; 
} 
#menu dt:hover dd{ 
display:inline; 

} 

#menu dd ul{ 
margin:0; 
padding:0; 
list-style:none; 
display:inline; 
} 
#menu dd ul li{ 
text-align:center; 
padding:0; 
display:inline; 
} 
#menu dd ul li a { 
text-decoration:none; 
display:inline; 
height:30px; 
line-height:30px; 
} 
#menu dd ul li a:hover { 
text-decoration:none; 
display:inline; 
height:30px; 
line-height:30px; 
} 
#menu dl:hover dd{ 
display:inline; 
} 



<nav id='menu'> 
<a href='page_user.php?conteneur=accueil'><img src="images/bouton /Accueil.jpg" alt="Accueil" /></a> 
<dl> 
	<dt><img src="images/boutons/Modules.jpg" >
		<dd> 
			<ul> 
				<li> <a href='page_user.php?conteneur=modules_ich'>Modules ICH</a></li> 
				<li> <a href='page_user.php?conteneur=modules_mas'>Modules MAS</a></li> 
				<li> <a href='page_user.php?conteneur=modules_mah'>Modules MAH</a></li>	
				<li> <a href='page_user.php?conteneur=modules_iel'>Modules IEL</a></li>	
			</ul> 
		</dd> 
	</dt>
</dl> 
<a href='page_user.php?conteneur=forum'><img src="images/boutons/Forum_cpnv.jpg" alt="forum" /></a> 
<a href='page_user.php?conteneur=contact'><img src="images/boutons/Contact.jpg"alt="Contact"/></a> 
</nav>

Réponse 2 / 2

zezinand0 Messages postés 5 Date d'inscription Statut Membre Dernière intervention

Salut,

Merci bcp pour l'aide mais en fête le problème n'est pas dans l'affichage du menu.
Le problème c'est que les 4 menus ne s'alignent pas sur une ligne

A la fois de se disposer come ceci: Menu 1 Menu2 Menu3 menu4

Il se dispose comme ça: Menu1
Menu2
Menu3
Menu4

et le plus chiant c'est que j'ai mis des display:inline; par tout...

Si vous avez une idée...

merci beaucoup =)

Votre réponse