Menu déroulant HTML/CSS

skizi Messages postés 3 Date d'inscription   Statut Membre Dernière intervention   -  
skizi Messages postés 3 Date d'inscription   Statut Membre Dernière intervention   -
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   Statut Membre Dernière intervention   208
 
hello sarah, pourrait-on voir le code?
0
Réponse 2 / 4
skizi Messages postés 3 Date d'inscription   Statut Membre Dernière intervention  
 
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 23731 Date d'inscription   Statut Modérateur Dernière intervention   2 409
 
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   Statut Membre Dernière intervention  
 
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
menu caché
laurent -
ChariduP -

7 réponses
Effacer le contenue d'une cellule avec liste déroulante
lebutters -
lebutters -

7 réponses