Problème lors de la création d'un menu (html)
Utilisateur anonyme
-
Utilisateur anonyme -
Utilisateur anonyme -
Bonjour,
étant donné que ma dernière question a trouvé sa réponse très vite, je fais de nouveau appel à vos compétences!
en créant ma page web, j'ai tenté d'insérer un menu sur la gauche...
j'ai cherché sur beaucoup de sites web, avant de trouver ce qu'il me fallait...
donc je me lance, je copie/colle les balises du modèle, et je transpose avec mes items...
jusque là tout va bien.
mais quand je tente de voir le résultat en ouvrant la page, seul le premier item (et 2 sous items) s'affichent, et encore pas tout à fait correctement!
il me semble qu'en fait, sans faire exprès, j'ai effacé certaines lignes, et plus moyen de rretrouver la page de l'exemple... et pas moyen non plus de bidouiller, j'ai essayé plein de choses différentes, et tjs un seul item affiché!
je fais donc appel à vous, en joignant le code de ma page... peut etre trouverez vous une solution!
merci d'avance!
<!DOCTYPE html PUBLIC "_//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict dtd">
<html xmlns="http://w3.org/1999/xhtml" xml:lang=fr>
<meta http-equiv="Content-Type" Content="text/html;charset=iso-8859-1"/>
<head>
<title> ftp</title>
</head>
<body>
<style type="text/css">
body {background: #EEE; color: #000;
behavior: url(csshover.htc);} /* WinIE behavior call */
div#nav {float: left; width: 7em; margin: -1px 0 0 -1px;
background: #FDD;}
div#nav ul {margin: 0; padding: 0; width: 7em; background: white;
border: 1px solid #AAA;}
div#nav li {position: relative; list-style: none; margin: 0;
border-bottom: 1px solid #CCC;}
div#nav li:hover {background: #EBB;}
div#nav li.submenu {background: url(submenu.gif) 95% 50% no-repeat;}
div#nav li.submenu:hover {background-color: #EDD;}
div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em;
text-decoration: none; width: 6.5em;}
div#nav>ul a {width: auto;}
div#nav ul ul {position: absolute; top: 0; left: 7em;
display: none;}
div#nav ul.level1 li.submenu:hover ul.level2,
div#nav ul.level2 li.submenu:hover ul.level3 {display:block;}
</style>
</head>
<body>
<div id="nav">
<ul class="level1">
<li><a href="synopsis.html">Synopsis</a> (ça s'affiche correctement)
<li class="submenu">
<ul class="level2">
<li><a href="originales.html">Voix 1</a> (là ausi)
<li><a href="francaise.html">Voix 2</a> (idem)
(à partir de là plus rien!!!)
<ul class="level1">
<li><a href="personnages.html">Personnages</a>
<li class="submenu">
<ul class="level2">
<li><a href="principaux.html">Personnages principaux</a></li>
<li><a href="secondaires.html">Personnages secondaires</a></li>
<ul class="level1">
<li><a href="episodes.html">Episodes</a></li>
<ul class="level1">
<li><a href="univers.html">Univers </a></li>
<li class="submenu">
<ul class="level2">
<li><a href="relations.html">Relations</a></li>
<li><a href="politique.html">Politique</a></li>
<ul class="level1">
<li><a href="commentaires.html">Commentaires</a></li>
<li class="submenu">
<ul class="level2">
<li><a href="contexte.html">Contexte</a></li>
<li><a href="evenements.html">Evènements</a></li>
<li><a href="religion.html">Religion</a></li>
<li><a href="langues.html">Langues</a></li>
<li><a href="reprise.html">Reprise de la série</a></li>
<ul class="level1">
<li><a href="produits.html">Produits </a></li>
<li class="submenu">
<ul class="level2">
<li><a href="dvd.html">DVD</a></li>
<li><a href="jeu.html">Jeu vidéo</a></li>
<ul class="level1">
<li><a href="volumes.html">Volumes</a></li>
<ul class="level1">
<li><a href="notes.html.html">Notes et références</a></li>
<ul class="level1">
<li><a href="voir.html">Voir aussi</a></li>
<ul class="level1">
<li><a href="liens.html">Liens externes</a></li>
</div>
</body>
</html>
étant donné que ma dernière question a trouvé sa réponse très vite, je fais de nouveau appel à vos compétences!
en créant ma page web, j'ai tenté d'insérer un menu sur la gauche...
j'ai cherché sur beaucoup de sites web, avant de trouver ce qu'il me fallait...
donc je me lance, je copie/colle les balises du modèle, et je transpose avec mes items...
jusque là tout va bien.
mais quand je tente de voir le résultat en ouvrant la page, seul le premier item (et 2 sous items) s'affichent, et encore pas tout à fait correctement!
il me semble qu'en fait, sans faire exprès, j'ai effacé certaines lignes, et plus moyen de rretrouver la page de l'exemple... et pas moyen non plus de bidouiller, j'ai essayé plein de choses différentes, et tjs un seul item affiché!
je fais donc appel à vous, en joignant le code de ma page... peut etre trouverez vous une solution!
merci d'avance!
<!DOCTYPE html PUBLIC "_//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict dtd">
<html xmlns="http://w3.org/1999/xhtml" xml:lang=fr>
<meta http-equiv="Content-Type" Content="text/html;charset=iso-8859-1"/>
<head>
<title> ftp</title>
</head>
<body>
<style type="text/css">
body {background: #EEE; color: #000;
behavior: url(csshover.htc);} /* WinIE behavior call */
div#nav {float: left; width: 7em; margin: -1px 0 0 -1px;
background: #FDD;}
div#nav ul {margin: 0; padding: 0; width: 7em; background: white;
border: 1px solid #AAA;}
div#nav li {position: relative; list-style: none; margin: 0;
border-bottom: 1px solid #CCC;}
div#nav li:hover {background: #EBB;}
div#nav li.submenu {background: url(submenu.gif) 95% 50% no-repeat;}
div#nav li.submenu:hover {background-color: #EDD;}
div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em;
text-decoration: none; width: 6.5em;}
div#nav>ul a {width: auto;}
div#nav ul ul {position: absolute; top: 0; left: 7em;
display: none;}
div#nav ul.level1 li.submenu:hover ul.level2,
div#nav ul.level2 li.submenu:hover ul.level3 {display:block;}
</style>
</head>
<body>
<div id="nav">
<ul class="level1">
<li><a href="synopsis.html">Synopsis</a> (ça s'affiche correctement)
<li class="submenu">
<ul class="level2">
<li><a href="originales.html">Voix 1</a> (là ausi)
<li><a href="francaise.html">Voix 2</a> (idem)
(à partir de là plus rien!!!)
<ul class="level1">
<li><a href="personnages.html">Personnages</a>
<li class="submenu">
<ul class="level2">
<li><a href="principaux.html">Personnages principaux</a></li>
<li><a href="secondaires.html">Personnages secondaires</a></li>
<ul class="level1">
<li><a href="episodes.html">Episodes</a></li>
<ul class="level1">
<li><a href="univers.html">Univers </a></li>
<li class="submenu">
<ul class="level2">
<li><a href="relations.html">Relations</a></li>
<li><a href="politique.html">Politique</a></li>
<ul class="level1">
<li><a href="commentaires.html">Commentaires</a></li>
<li class="submenu">
<ul class="level2">
<li><a href="contexte.html">Contexte</a></li>
<li><a href="evenements.html">Evènements</a></li>
<li><a href="religion.html">Religion</a></li>
<li><a href="langues.html">Langues</a></li>
<li><a href="reprise.html">Reprise de la série</a></li>
<ul class="level1">
<li><a href="produits.html">Produits </a></li>
<li class="submenu">
<ul class="level2">
<li><a href="dvd.html">DVD</a></li>
<li><a href="jeu.html">Jeu vidéo</a></li>
<ul class="level1">
<li><a href="volumes.html">Volumes</a></li>
<ul class="level1">
<li><a href="notes.html.html">Notes et références</a></li>
<ul class="level1">
<li><a href="voir.html">Voir aussi</a></li>
<ul class="level1">
<li><a href="liens.html">Liens externes</a></li>
</div>
</body>
</html>
A voir également:
- Problème lors de la création d'un menu (html)
- Creation de compte google - Guide
- Creation de site web - Guide
- Menu déroulant excel - Guide
- Creation compte gmail - Guide
- Media creation tool - Télécharger - Systèmes d'exploitation
6 réponses
Salut,
Je vois qu'il y a beaucoup de balises que tu ne ferment pas... vérifie les... ferment les... et on verra!
Je vois qu'il y a beaucoup de balises que tu ne ferment pas... vérifie les... ferment les... et on verra!
bonjour,
les balises pour créer le menu, je les ai copiées sur un site, donc j'ai un peu de mal à voir les balises qui ne sont pas fermées!!!
j'ai juste rajouté des </li> à certains moments mais sinon....
et ça change rien....
les balises pour créer le menu, je les ai copiées sur un site, donc j'ai un peu de mal à voir les balises qui ne sont pas fermées!!!
j'ai juste rajouté des </li> à certains moments mais sinon....
et ça change rien....
Ferme les ul et tous les li.
Pour te montrer , tu peux supprimer le dysplai = none
Si tu remplaces ton style par celui-ci, tu verras tout.
Donc ferme bien tes balises ul surtout ^^^.
<style type="text/css">
body {background: #EEE; color: #000;
behavior: url(csshover.htc);} /* WinIE behavior call */
div#nav {float: left; width: 7em; margin: -1px 0 0 -1px;
background: #FDD;}
div#nav ul {margin: 0; padding: 0; width: 7em; background: white;
border: 1px solid #AAA;}
div#nav li {position: relative; list-style: none; margin: 0;
border-bottom: 1px solid #CCC;}
div#nav li:hover {background: #EBB;}
div#nav li.submenu {background: url(submenu.gif) 95% 50% no-repeat;}
div#nav li.submenu:hover {background-color: #EDD;}
div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em;
text-decoration: none; width: 6.5em;}
div#nav>ul a {width: auto;}
div#nav ul ul {position: absolute; top: 0; left: 7em;
}
div#nav ul.level1 li.submenu:hover ul.level2,
div#nav ul.level2 li.submenu:hover ul.level3 {display:block;}
</style>
Pour te montrer , tu peux supprimer le dysplai = none
Si tu remplaces ton style par celui-ci, tu verras tout.
Donc ferme bien tes balises ul surtout ^^^.
<style type="text/css">
body {background: #EEE; color: #000;
behavior: url(csshover.htc);} /* WinIE behavior call */
div#nav {float: left; width: 7em; margin: -1px 0 0 -1px;
background: #FDD;}
div#nav ul {margin: 0; padding: 0; width: 7em; background: white;
border: 1px solid #AAA;}
div#nav li {position: relative; list-style: none; margin: 0;
border-bottom: 1px solid #CCC;}
div#nav li:hover {background: #EBB;}
div#nav li.submenu {background: url(submenu.gif) 95% 50% no-repeat;}
div#nav li.submenu:hover {background-color: #EDD;}
div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em;
text-decoration: none; width: 6.5em;}
div#nav>ul a {width: auto;}
div#nav ul ul {position: absolute; top: 0; left: 7em;
}
div#nav ul.level1 li.submenu:hover ul.level2,
div#nav ul.level2 li.submenu:hover ul.level3 {display:block;}
</style>
bonjour,
merci pour la réponse archeus 01!
en mettant ton style, en effet je vois tout, mais en forme d'escalier...
pour fermer les ul.... c'est les <ul class...> que je ferme en </ul> c'est bien ça?
merci pour la réponse archeus 01!
en mettant ton style, en effet je vois tout, mais en forme d'escalier...
pour fermer les ul.... c'est les <ul class...> que je ferme en </ul> c'est bien ça?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Je suis en train de te le refaire de A à Z donc c assez long mais j'y bosse
[€dit] Je dosi partir, j'ai commencé
<!DOCTYPE html PUBLIC "_//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict dtd">
<html xmlns="http://w3.org/1999/xhtml" xml:lang=fr>
<meta http-equiv="Content-Type" Content="text/html;charset=iso-8859-1"/>
<head>
<title> ftp</title>
</head>
<body>
<style type="text/css">
body {background: #EEE; color: #000;
behavior: url(csshover.htc);} /* WinIE behavior call */
div#nav {float: left; width: 7em; margin: -1px 0 0 -1px;
background: #FDD;}
div#nav ul {margin: 0; padding: 0; width: 7em; background: white;
border: 1px solid #AAA;}
div#nav li {position: relative; list-style: none; margin: 0;
border-bottom: 1px solid #CCC;}
div#nav li:hover {background: #EBB;}
div#nav li.submenu {background: url(submenu.gif) 95% 50% no-repeat;}
div#nav li.submenu:hover {background-color: #EDD;}
div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em;
text-decoration: none; width: 6.5em;}
div#nav>ul a {width: auto;}
div#nav ul ul {position: absolute; top: 0; left: 7em;
display: none;}
div#nav ul.level1 li.submenu:hover ul.level2,
div#nav ul.level2 li.submenu:hover ul.level3 {display:block;}
</style>
</head>
<body>
<div id="nav">
<ul class="level1">
<li class="submenu">
<a href="synopsis.html">Synopsis</a>
<ul class="level2">
<li><a href="originales.html">Voix 1</a> </li>
<li><a href="francaise.html">Voix 2</a> </li>
</li></ul>
</ul>
<ul class="level1">
<li class="submenu"><a href="personnages.html">Personnages</a>
<ul class="level2">
<li><a href="principaux.html">Personnages principaux</a></li>
<li><a href="secondaires.html">Personnages secondaires</a></li>
</ul>
</li>
</ul>
<ul class="level1">
<li class="submenu"><a href="episodes.html">Episodes</a></li>
<li class="submenu"><a href="univers.html">Univers </a></li>
</ul>
<ul class="level2">
<li><a href="relations.html">Relations</a></li>
<li><a href="politique.html">Politique</a></li>
</ul>
<ul class="level1">
<li class="submenu"><a href="commentaires.html">Commentaires</a>
<ul class="level2">
<li><a href="contexte.html">Contexte</a></li>
<li><a href="evenements.html">Evènements</a></li>
<li><a href="religion.html">Religion</a></li>
<li><a href="langues.html">Langues</a></li>
<li><a href="reprise.html">Reprise de la série</a></li>
</ul>
</li>
</ul>
<ul class="level1">
<li class="submenu"><a href="produits.html">Produits </a>
<ul class="level2">
<li><a href="dvd.html">DVD</a></li>
<li><a href="jeu.html">Jeu vidéo</a></li>
</ul>
</li></ul>
<ul class="level1">
<li><a href="volumes.html">Volumes</a></li>
<li><a href="notes.html.html">Notes et références</a></li>
<li><a href="voir.html">Voir aussi</a></li>
<li><a href="liens.html">Liens externes</a></li>
</ul>
</div>
</body>
</html>
Si tu evux que je finisse, envoie moi un MP.
[€dit] Je dosi partir, j'ai commencé
<!DOCTYPE html PUBLIC "_//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict dtd">
<html xmlns="http://w3.org/1999/xhtml" xml:lang=fr>
<meta http-equiv="Content-Type" Content="text/html;charset=iso-8859-1"/>
<head>
<title> ftp</title>
</head>
<body>
<style type="text/css">
body {background: #EEE; color: #000;
behavior: url(csshover.htc);} /* WinIE behavior call */
div#nav {float: left; width: 7em; margin: -1px 0 0 -1px;
background: #FDD;}
div#nav ul {margin: 0; padding: 0; width: 7em; background: white;
border: 1px solid #AAA;}
div#nav li {position: relative; list-style: none; margin: 0;
border-bottom: 1px solid #CCC;}
div#nav li:hover {background: #EBB;}
div#nav li.submenu {background: url(submenu.gif) 95% 50% no-repeat;}
div#nav li.submenu:hover {background-color: #EDD;}
div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em;
text-decoration: none; width: 6.5em;}
div#nav>ul a {width: auto;}
div#nav ul ul {position: absolute; top: 0; left: 7em;
display: none;}
div#nav ul.level1 li.submenu:hover ul.level2,
div#nav ul.level2 li.submenu:hover ul.level3 {display:block;}
</style>
</head>
<body>
<div id="nav">
<ul class="level1">
<li class="submenu">
<a href="synopsis.html">Synopsis</a>
<ul class="level2">
<li><a href="originales.html">Voix 1</a> </li>
<li><a href="francaise.html">Voix 2</a> </li>
</li></ul>
</ul>
<ul class="level1">
<li class="submenu"><a href="personnages.html">Personnages</a>
<ul class="level2">
<li><a href="principaux.html">Personnages principaux</a></li>
<li><a href="secondaires.html">Personnages secondaires</a></li>
</ul>
</li>
</ul>
<ul class="level1">
<li class="submenu"><a href="episodes.html">Episodes</a></li>
<li class="submenu"><a href="univers.html">Univers </a></li>
</ul>
<ul class="level2">
<li><a href="relations.html">Relations</a></li>
<li><a href="politique.html">Politique</a></li>
</ul>
<ul class="level1">
<li class="submenu"><a href="commentaires.html">Commentaires</a>
<ul class="level2">
<li><a href="contexte.html">Contexte</a></li>
<li><a href="evenements.html">Evènements</a></li>
<li><a href="religion.html">Religion</a></li>
<li><a href="langues.html">Langues</a></li>
<li><a href="reprise.html">Reprise de la série</a></li>
</ul>
</li>
</ul>
<ul class="level1">
<li class="submenu"><a href="produits.html">Produits </a>
<ul class="level2">
<li><a href="dvd.html">DVD</a></li>
<li><a href="jeu.html">Jeu vidéo</a></li>
</ul>
</li></ul>
<ul class="level1">
<li><a href="volumes.html">Volumes</a></li>
<li><a href="notes.html.html">Notes et références</a></li>
<li><a href="voir.html">Voir aussi</a></li>
<li><a href="liens.html">Liens externes</a></li>
</ul>
</div>
</body>
</html>
Si tu evux que je finisse, envoie moi un MP.
Bonsoir,
je viens de revoir tout mon fichier html avec ton aide, et ça marche!!!!! merci beaucoup!!!!
mais pourrais tu juste m'aider pour 2 petites choses encore?
* quel endroit de tout ce code faut il modifier pour obtenir un menu légèrement plus large?
* avec ce menu à gauche, mon texte sur le reste de la page est collé à ce menu.... comment faire pour que ce texte soit légèrement expacé sur la droite?
encore merci pour toute ton aide Archeus!
je viens de revoir tout mon fichier html avec ton aide, et ça marche!!!!! merci beaucoup!!!!
mais pourrais tu juste m'aider pour 2 petites choses encore?
* quel endroit de tout ce code faut il modifier pour obtenir un menu légèrement plus large?
* avec ce menu à gauche, mon texte sur le reste de la page est collé à ce menu.... comment faire pour que ce texte soit légèrement expacé sur la droite?
encore merci pour toute ton aide Archeus!