Sujet Précédent Sujet Suivant

Menu déroulant HTML/CSS

Fermé
skizi Messages postés 3 Date d'inscription mercredi 15 août 2012 Statut Membre Dernière intervention 15 août 2012 - 15 août 2012 à 17:30
skizi Messages postés 3 Date d'inscription mercredi 15 août 2012 Statut Membre Dernière intervention 15 août 2012 - 15 août 2012 à 23:23
Bonjour,
je suis nouvelle en programmation html et css et j'ai un problème. J'ai créer mon menu déroulant via les balises dl, dl etc... Tout fonctionne correctement sauf qu'a certains "onglets" du menu si je clique dessus rien ne se passe alors que je voudrais rediriger sur une autre page.
Je m'explique avec un exemple : j'ai plusieurs onglets : accueil, forum, films. Dans l'onglet films je mets plusieurs sous onglets : science fiction, dramatique, aventure etc...
Pour les onglets qui ont des sous onglets il n'y a pas de problème pour rediriger la page dessus. Mais lorsque je clique sur l'onglet "Accueil" rien ne se passe. Alors y aurai t-il une option dans les balises <dl> pour que lorsque je clique sur l'onglet "Accueil" je sois rediriger vers "index.html" par exemple ou dois-je mettre des ul dans d'autres ul. Si ce n'est pas très clair faite le moi savoir j'essayerai de m'expliquer plus clairement.
Je vous remercie d'avance pour l'aide quelconque que vous porterez a mon sujet :)
Sarah,

A voir également:

4 réponses

Réponse 1 / 4
@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription dimanche 1 juillet 2012 Statut Membre Dernière intervention 14 décembre 2012 208
15 août 2012 à 19:25
hello sarah, pourrait-on voir le code?
0
Réponse 2 / 4
skizi Messages postés 3 Date d'inscription mercredi 15 août 2012 Statut Membre Dernière intervention 15 août 2012
15 août 2012 à 19:55
Bonsoir, voici le code HTML : 

<!DOCTYPE html>
<html>
<p id="top"> </p>
    <head>
        <meta charset="utf-8" />
		<link rel="stylesheet" href="style.css" type="text/css" media="screen">
        <title>jap-animaton</title>
		
    </head>
    <body>
		<div id="bloc_page">
		
		<header>
			<img src="images\logo.jpg" alt="bann" width="800px"/>
		</header>
		<div id="conteneur">
		<div id="menu">
		<dl>
			<dt a href="index.html">Accueil</dt>
			<dd>
				<ul>
					
				</ul>
			</dd>
		</dl>
		<dl>
			<dt>Forum</dt>
			<dd>
				<ul>
					<li><a href="#">Lien 1</a></li>
					<li><a href="#">Lien 2</a></li> 
				</ul>
			</dd>
		</dl>
		<dl>
			<dt>Manga</dt>
			<dd>
				<ul>
					<li><a href="shonen.html">Shonen</a></li>
					<li><a href="#">Lien 2</a></li>
				</ul>
			</dd>
		</dl>
		<dl>
			<dt>Goodies</dt>
			<dd>
				<ul>
					<li><a href="#">Lien 1</a></li>
					<li><a href="#">Lien 2</a></li>
				</ul>
			</dd>
		</dl>
		<dl>
			<dt>Achat</dt>
			<dd>
				<ul>
					<li><a href="#">Lien 1</a></li>
					<li><a href="#">Lien 2</a></li>
				</ul>
			</dd>
		</dl>
		<dl>
			<dt>Vente</dt>
			<dd>
				<ul>
					<li><a href="#">Lien 1</a></li>
					<li><a href="#">Lien 2</a></li>
				</ul>
			</dd>
		</dl>
		<dl>
			<dt>Contact</dt>
			<dd>
				<ul>
					<li><a href="#">Lien 1</a></li>
					<li><a href="#">Lien 2</a></li>
				</ul>
			</dd>
		</dl>
		<dl>
			<dt>Livre d'or</dt>
			<dd>
				<ul>
					<li><a href="#">Lien 1</a></li>
					<li><a href="#">Lien 2</a></li>
				</ul>
			</dd>
		</dl>
		</div>
		</div>
		<section>
			<article>
				<p
			</p>
			</article>
			<div id="top"><a href="#top">Haut de page</a></div>
		</section>
		<hr></hr>
		<footer>
			2012 - Tous droits réservés <br />
			 Copyright ©
		</footer>
		</div>
    </body>
</html>


Et le code CSS : 
body{
background-image: url(images/fnd.png) ;
}
#bloc_page{
margin: auto;
width: 800px;
background: rgb(240,240,240);
border-style: solid;
border-color:black;
border-width: medium;
}

header {
	text-align: center;
	 border-style:solid;
	border-width:0px;
	border-color:black;
}
img {
}
footer{
text-align: center;
font-style: italic;
margin-top:5px;
margin-bottom:5px;
}
section{


}
article{
margin-left:10px;
margin-right:10px;
}
#menu{
background-image: url(images/blue2.gif);
height:40px;
position:absolute;
}
#top{
text-align:right;
margin-right:10px;
font-size: 12px;
}
dl {
height:40px;
margin:0;padding:0;
display:block;
float:left;
}
dt {
width:99px;
display:block;
height:40px;
color:#FFF;
font-weight:bold ;
line-height:40px;
text-align:center;
border-right:groove 1px rgb(41,136,204);
cursor:pointer;
 font-family: 'Trebuchet MS';
}
dd{
display:block;
margin:0; padding:0;
background:url(images/menu.png);
}
dd ul {
margin:0;padding:0;
text-align:center;
list-style:none;

}
dd ul li a{
color:rgb(32,102,179);
text-decoration:none;
height:30px;
line-height:30px;
display:block;
border-right:solid 1px rgb(41,136,204);
border-left:solid 1px rgb(41,136,204);
border-bottom:solid 1px rgb(41,136,204);
}
dd ul li a:hover{
background:url(images/rouge2.png);
color:white;
}
dl dd{
display:none;
}
dl:hover dd {
display:block;
}
#conteneur{
background:black;
height:40px;
position:relative;
}
a[href]{
text-decoration: none;
}

a:link { 
color: rgb(32,102,179) ;
}
#menu a:visited {
color: white ; 
}
a:visited{
color:rgb(32,102,179);
}
a:hover { 
color: rgb(32,102,179) ; text-decoration: none ; 
font-weight:bold ; 
}
dl:hover{
background:url(images/rouge.gif);
}
#top a {
color:rgb(32,102,179);
}
0
Réponse 3 / 4
bg62 Messages postés 23652 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 29 octobre 2024 2 384
15 août 2012 à 20:10
vois si tu peux trouver ton bonheur ici, en adaptant un peu au niveau 'look' ... il y a le codage :
https://www.unesourisetmoi.info/menus/menus.php
;)
0
Réponse 4 / 4
skizi Messages postés 3 Date d'inscription mercredi 15 août 2012 Statut Membre Dernière intervention 15 août 2012
15 août 2012 à 23:23
Re-bonsoir,
j'ai réussi a peu près a faire avec les méthode ul mais j'ai un autre problème je vous montre un screenshot. Par contre ce n'est pas le même code que celui du dessus.
Screenshot: http://img16.imageshack.us/img16/9292/bugydg.png
Merci,
Sarah
0

Discussions similaires

Suppression listes déroulantes
Archa -
Sam -

5 réponses
Supprimer liste déroulante Excel
SamAlex -
b@bd -

8 réponses
Effacer liste déroulante
gabrielle -
jmps -

3 réponses
supprimer une liste déroulante
fred94 -
m@rina -

3 réponses