Problème lors de la création d'un menu (html)

Fermé
Utilisateur anonyme - 6 févr. 2008 à 23:51
 Utilisateur anonyme - 8 févr. 2008 à 23:17
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>
A voir également:

6 réponses

atomy Messages postés 442 Date d'inscription jeudi 25 janvier 2007 Statut Membre Dernière intervention 11 août 2009 92
6 févr. 2008 à 23:55
Salut,

Je vois qu'il y a beaucoup de balises que tu ne ferment pas... vérifie les... ferment les... et on verra!
0
Utilisateur anonyme
7 févr. 2008 à 17:40
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....
0
Archeus01 Messages postés 1571 Date d'inscription mercredi 3 octobre 2007 Statut Membre Dernière intervention 9 juin 2022 449
7 févr. 2008 à 17:47
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>
0
Utilisateur anonyme
7 févr. 2008 à 18:08
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?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Archeus01 Messages postés 1571 Date d'inscription mercredi 3 octobre 2007 Statut Membre Dernière intervention 9 juin 2022 449
7 févr. 2008 à 18:25
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.
0
Utilisateur anonyme
8 févr. 2008 à 23:17
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!
0