Menu déroulant HTML/CSS
skizi
Messages postés
3
Statut
Membre
-
skizi Messages postés 3 Statut Membre -
skizi Messages postés 3 Statut Membre -
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,
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:
- Menu déroulant HTML/CSS
- Menu déroulant excel - Guide
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Editeur html - Télécharger - HTML
- Canon quick menu - Télécharger - Utilitaires
4 réponses
Bonsoir, voici le code HTML :
Et le code CSS :
<!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);
}
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
;)
https://www.unesourisetmoi.info/menus/menus.php
;)