Petit problème de menu déroulant

Fuvola · Message par **Fuvola** » 13 nov. 2008, 10:03

Bonjour, j'aurais encore besoin d'un peu d'aide:
Je cherche à faire un menu déroulant. Comme je ne sais pas du tout comment faire, j'ai trouvé sur Internet un script gentiment mis à disposition par son auteur. Je suis en train d'essayer de l'adapter, mais je n'arrive pas à comprendre pourquoi il est impossible de mettre plus de quatre éléments côte à côte (les suivants viennent se placer en-dessous).
Du coup je suis en train de sécher là-dessus sans trouver ce qui ne va pas, alors qu'il y a probablement un truc idiot du genre balise mal placée.
Voilà le code:

</head><body><ul
id="menu"><li><a href="index.htlm">Accueil</a></li>
<li><a href="Agenda.html">Agenda</a>
<ul> <li><a href="2007.html">2007</a></li>
<li><a href="2008.html">2008</a></li><li><a
href="2009.html">2009</a> </li></ul></li>
<li><a href="album/album/index.html">Photos</a></li>
<li><a href="programmes.html">Programmes</a> <ul>
<li><a href="mathieu.html">Duo
flûte et orgue</a></li>
<li><a href="autres.html">Autres programmes</a></li></ul>
</li><li><a href="Presse.html">Presse</a></li>
<li><a href="contact.html">Liens et contact</a></li>
</ul><script type="text/javascript">
initMenu();
</script>

Merci beaucoup d'avance pour votre aide!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.17) Gecko/20080829 Firefox/2.0.0.17

Message par **chinon37** » 13 nov. 2008, 10:25

Bonjour,

Il faudrait voir aussi la feuille de style.
Le mieux serait de mettre en ligne la page avec le menu qui pose problème. On aura une vue d'ensemble et tous les éléments pour répondre.

Fuvola · Message par **Fuvola** » 13 nov. 2008, 10:34

Bonjour Chinon,
Dans l'intervalle, j'ai réussi à résoudre toute seule le problème:
Dans la feuille de style, la largeur était limitée à 500px, c'est pourquoi les éléments supplémentaires se placaient au-dessous.
(et moi, j'étais en train de chercher une indication du style "4 éléments, pas plus, dans la largeur")
Merci beaucoup!
Cordialement

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.17) Gecko/20080829 Firefox/2.0.0.17

Mongo Bob · Message par **Mongo Bob** » 13 nov. 2008, 10:43

Dommage qu'on puisse pas le faire sans javascript et que avec du css, à cause de IE6 encore trop présent :
http://forum.alsacreations.com/topic-6- ... ml#p175331
Je n'arrive pas bien à lire ton code, un petit coup de Tidy serait bienvenu

! que voici que voilà :

Code : Tout sélectionner


<body>
<ul id="menu">
      <li>
        <a href="index.htlm">Accueil</a>
      </li>
      <li>
        <a href="Agenda.html">Agenda</a>
        <ul>
          <li>
            <a href="2007.html">2007</a>
          </li>
          <li>
            <a href="2008.html">2008</a>
          </li>
          <li>
            <a href="2009.html">2009</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="album/album/index.html">Photos</a>
      </li>
      <li>
        <a href="programmes.html">Programmes</a>
        <ul>
          <li>
            <a href="mathieu.html">Duo flûte et orgue</a>
          </li>
          <li>
            <a href="autres.html">Autres programmes</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="Presse.html">Presse</a>
      </li>
      <li>
        <a href="contact.html">Liens et contact</a>
      </li>
    ??????????????????????????????????????
</body>

Il y a 3 <ul> et 2 </ul>, il manque donc un </ul>, il devrait être à la place des "?".

Message par **chinon37** » 13 nov. 2008, 10:52

Fuvola a écrit : Dans la feuille de style, la largeur était limitée à 500px, c'est pourquoi les éléments supplémentaires se placaient au-dessous.

C'est bien ce que je pensais: c'est pourquoi je te demandais la feuille de style

Fuvola · Message par **Fuvola** » 13 nov. 2008, 13:42

Rebonjour,
Pour la balise: merci, c'est corrigé!
Je reviens avec mes questions: j'ai placé les menus à l'intérieur de la balise d'en-tête. Comment se fait-il que le menu déroulant soit décalé par rapport aux autres?
Questions subsidiaire: comment centrer les menus à l'intérieur de l'en-tête (je me perds avec les balises <li> et <ul>!)

Voilà le code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml" lang="fr"><head><title>Index</title><meta
content="text/html; charset=iso-8859-1"
http-equiv="Content-Type" /><meta content="fr"
http-equiv="Content-Language" /><meta content="follow"
name="Robots" /><meta content="TRUE"
name="MSSmartTagsPreventParsing" /><link title="menu"
media="all" rel="stylesheet" href="menu.css"
type="text/css" /></head>
<body><div style=""
id="en_tete"><script src="dynMenu.js"
type="text/javascript"></script><script
src="browserdetect.js" type="text/javascript"></script><ul
id="menu"><li><a href="index.htlm">Accueil</a></li>
<li><a href="Agenda.html">Agenda</a>
<ul> <li><a href="2007.html">2007</a></li>
<li><a href="2008.html">2008</a></li><li><a
href="2009.html">2009</a> </li></ul></li>
<li><a href="album/album/index.html">Photos</a></li>
<li><a href="programmes.html">Programmes</a> <ul>
<li><a href="mathieu.html">Duo
flûte et orgue</a></li>
<li><a href="autres.html">Autres programmes</a></li></ul>
</li><li><a href="Presse.html">Presse</a></li>
<li><a href="contact.html">Liens et contact</a></li>
</ul><script type="text/javascript">
initMenu();
</script></div></body></html>

Ainsi que le css:

/* Generated by KaZcadeS */
.menu {
margin: 10px 0 0;
padding: 0;
display: inline;
background-image: url(flutepic.jpg);
}
.menu ul {
margin: 0;
padding: 0;
background-color: #9ecb95;
position: absolute;
display: inline;
background-image: url(flutepic.jpg);
}
.menu li ul {
visibility: hidden;
background-color: #ffff66;
}
.menu li li ul {
position: absolute;
margin-left: 124px;
margin-top: -23px;
background-color: #cc33cc;
}
.menu li {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
display: block;
float: left;
width: 150px;
background-color: #339999;
height: auto;
}
.menu li li {
width: 150px;
background-color: #ccccff;
display: block;
}
* html .menu li li {
display: inline;
}
.menu a {
border: 1px solid #666666;
margin: 1px;
padding: 2px 0;
text-align: center;
display: block;
text-decoration: none;
color: #ffffff;
font-weight: bold;
}
.menu a:hover {
border: 1px solid #aaaaaa;
background-color: #9ecb95;
}
.menu a:focus {
background-color: #ffcc66;
}
a.linkOver {
background-color: #b6d8b0;
}
body {
font-family: Arial,Helvetica,sans-serif;
font-size: medium;
margin-top: auto;
background-color: #000000;
color: #9ecb95;
font-style: normal;
width: 950px;
margin-left: auto;
margin-right: auto;
}
#en_tete {
border: 1px solid #ffffff;
text-align: center;
background-image: url(banniere.jpg);
background-repeat: no-repeat;
margin-left: 0px;
background-color: #9eca95;
margin-bottom: 50px;
height: 150px;
font-size: large;
}

(les couleurs sont provisoires, elles me servent à différencier les balises)
Merci d'avance!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.17) Gecko/20080829 Firefox/2.0.0.17

Mongo Bob · Message par **Mongo Bob** » 13 nov. 2008, 16:56

Je ne peux pas être trop précis, parce que je ne comprends rien à ton code : c'est pour ça que tu t'y retrouves pas!

exemple de règles css que tu utilises :
Code : Tout sélectionner
```
.menu li li
```
Code : Tout sélectionner
```
* html .menu li li
```
Code : Tout sélectionner
```
.menu li ul
```
Code : Tout sélectionner
```
.menu li li ul
```
Je ne dis pas que ce n'est pas conforme, c'est peut-être des règles de regroupements que je ne comprends pas, mais c'est sûrement inutile!
Ca devrait être beaucoup plus simple : tu as un menu principal et des sous-menus, donc :
pour le menu tes règles peuvent s'appeler :
Code : Tout sélectionner
```
#menu ul et .menu li
```
une id pour le <ul> principal, vu qu'il n'y en aura qu'un dans la page et
pour les sous-menus déroulants :
Code : Tout sélectionner
```
.sousmenu ul et .sousmenu li
```
une classe pour les <ul> sous-menus, vu qu'il y en aura plusieurs...
n'utilises pas de position:absolute tant que ce n'est pas justifié, ça crée plein de problèmes de positionnement, reste dans le flux (=position Non définie dans Cascades)
De même, comme tu veux un menu vertical, inutile de forcer l'affichage des <ul> et <li> en "en ligne", ce sont des blocs par défaut, laisse-les en affichage par défaut il s'aligneront verticalement comme tous les blocs sans avoir besoin de rattraper ça par position absolute ou autre (=Affichage non défini dans Cascades).
Essaie de travailler en Html Transitionnel, plutôt qu'en xhtml strict, surtout au début pour contrôler ton positionnement

Après toutes ces simplifications, ça m'étonnerait que tu n'arrives pas à recaler ton menu déroulant par rapport aux autres. Je vais quand même revoir ton code en plus simple pour te donner une idée plus concrète de toutes ces remarques.

Mongo Bob · Message par **Mongo Bob** » 13 nov. 2008, 17:29

Je crois qu'il y a un problème à ce qu'un <ul> contienne un autre <ul>, à ce que je vois? j'avais jamais essayé... Quelqu'un a un avis?

Message par **chinon37** » 13 nov. 2008, 17:47

j'ai rarement vu une feuille de style aussi alambiquée. Super pour avoir des règles qui annulent les autres au fur et à mesure.
Je plussoie l'avis de MB: deux règles pour le menu: une pour ul et une pour li. Ensuite utiliser des classes.

GAUNCE · Message par **GAUNCE** » 13 nov. 2008, 18:52

Mongo Bob a écrit :Je crois qu'il y a un problème à ce qu'un <ul> contienne un autre <ul>, à ce que je vois? j'avais jamais essayé... Quelqu'un a un avis?

Au hasard, il y a bien des div dans les div, pourquoi un ul dans un autre ul, pour rester dans le même menu, le second ayant des paramètres différents

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Fuvola · Message par **Fuvola** » 13 nov. 2008, 18:55

...bon, j'ai simplifié au maximum, mais ce n'est pas encore ça (c'est le moins qu'on puisse dire!). Il doit manquer quelque chose??...

Le code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html

xmlns="http://www.w3.org/1999/xhtml" lang="fr"><head><title>Index</title><meta
content="text/html; charset=iso-8859-1" http-equiv="Content-Type" /><meta
content="fr" http-equiv="Content-Language" /><meta content="follow"
name="Robots" /><meta content="TRUE" name="MSSmartTagsPreventParsing" /><link
title="menu" media="all" rel="stylesheet" href="menu.css"
type="text/css" /></head>
<body><div style="" id="en_tete"><script
src="dynMenu.js" type="text/javascript"></script><script
src="browserdetect.js" type="text/javascript"></script><ul id="menu"><li><a
href="index.htlm">Accueil</a></li>
<li>Agenda
<ul> <li><a href="2007.html">2007</a></li>
<li><a href="2008.html">2008</a></li><a href="2009.html">2009</a> </ul></li>
<li><a href="album/album/index.html">Photos</a></li>

<li><a href="programmes.html">Programmes</a> <ul>
<li><a href="mathieu.html">Duo
flûte et orgue</a></li>
<li><a href="autres.html">Autres programmes</a></li></ul>
</li><li><a href="Presse.html">Presse</a></li>
<li><a href="contact.html">Liens et contact</a></li>
</ul><script type="text/javascript">
initMenu();
</script></div></body></html>

Et le css:

/* Generated by KaZcadeS */
body {
font-family: Arial,Helvetica,sans-serif;
font-size: medium;
margin-top: auto;
background-color: #000000;
color: #9ecb95;
font-style: normal;
width: 950px;
margin-left: auto;
margin-right: auto;
}
#en_tete {
border: 1px solid #ffffff;
text-align: center;
background-image: url(banniere.jpg);
background-repeat: no-repeat;
margin-left: 0px;
background-color: #9eca95;
margin-bottom: 50px;
height: 150px;
font-size: large;
}
.menu li {
border: 1px solid #ffffff;
margin: 0;
padding: 3px 3px 0;
background-color: #565693;
list-style-type: none;
list-style-image: none;
float: left;
width: 150px;
height: auto;
text-align: center;
display: block;
color: #ffffff;
font-weight: bold;
}
#menu ul {
visibility: hidden;
background-color: #565693;
color: #ffffff;
}
.menu a {
text-decoration: none;
}
.menu a:hover {
border: 1px solid #aaaaaa;
background-color: #7272a5;
}
.menu a:focus {
background-color: #70878e;
}
#corps {
border: 1px solid #ffffff;
padding: 10px 30px 10px 20px;
background-color: #9ecb95;
color: #000000;
font-style: normal;
text-align: justify;
font-weight: bold;
}
#corps a {
font-style: normal;
text-decoration: none;
}
#corps a:hover {
color: #9ecb95;
background-color: #7272a5;
}
#corps img {
border: 1px solid #ffffff;
margin: 0px 20px 10px 0px;
float: left;
}
#pied_de_page {
text-align: center;
font-size: x-small;
}
#corps table {
color: #ffffff;
overflow: scroll;
}
.menu {
margin: 10px;
padding: 10px;
display: inline;
}

Merci d'avance de votre aide, car là, je ne m'en sors pas...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.17) Gecko/20080829 Firefox/2.0.0.17

Mongo Bob · Message par **Mongo Bob** » 13 nov. 2008, 21:20

GAUNCE a écrit :Au hasard, il y a bien des div dans les div, pourquoi un ul dans un autre ul, pour rester dans le même menu, le second ayant des paramètres différents

tu veux dire "pourquoi pas"?
un menu déroulant, c'est en effet un sous-menu, donc un menu contenu dans un autre menu, donc un <ul> contenu dans un autre <ul>.
Ca doit être possible, oui, je me suis interrompu en tentant de refaire le code de Fuvola, et j'ai émis l'hypothèse que ce n'était pas possible, un peu fatigué, sans doute.
>Fuvola : ah, ben là, c'est nettement mieux, le css, bravo! Par contre, euh, je vais pas regarder tout de suite, mais GAUNCE et chinon sont là!

Mongo Bob · Message par **Mongo Bob** » 14 nov. 2008, 09:48

bonjour
il manque un <li> là où j'ai mis les "????????????" :

Code : Tout sélectionner

<li><a href="2008.html">2008</a>?????????????????</li><a href="2009.html">2009</a> </ul></li>

Mongo Bob · Message par **Mongo Bob** » 14 nov. 2008, 10:46

J'ai simplifié au maximum du maximum (

), il n'y a plus de div #en_tete, qui ne servait à rien puisque le ulmenu est un bloc et peut remplir le même rôle.
Css et html dans la même feuille :

Code : Tout sélectionner

<html>
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>
      fuvolageckobis
    </title>
    <style type="text/css">
body {
    background-color: #000000;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 100%;
    }
    #ulmenu {
    border: 1px solid #ffffff;
    background-color: #9eca95;
    width: 70%;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    }
    .ulsousmenu {
    text-align: center;
    width: 100%;
    padding-left: 0;
    }
    </style>
  </head>
  <body>
    <ul id="ulmenu">
      <li>
        <a href="index.htlm">Accueil</a>
      </li>
      <li>
        <a href="agenda.html">Agenda</a>
        <ul class="ulsousmenu">
          <li>
            <a href="2007.html">2007</a>
          </li>
          <li>
            <a href="2008.html">2008</a>
          </li>
          <li>
            <a href="2009.html">2009</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="album/album/index.html">Photos</a>
      </li>
      <li>
        <a href="programmes.html">Programmes</a>
        <ul class="ulsousmenu">
          <li>
            <a href="mathieu.html">Duo flûte et orgue</a>
          </li>
          <li>
            <a href="autres.html">Autres programmes</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="Presse.html">Presse</a>
      </li>
      <li>
        <a href="contact.html">Liens et contact</a>
      </li>
    </ul>
  </body>
</html>

si tu dois styler la police de texte, tu le fais dans le <body>, ça se répercute partout, pas la peine de faire 36 règles, je ne crois pas que ce soit la peine de faire des règles pour les <li>, mais si oui, pas la peine de faire des règles séparées pour les <li> du menu principal et pour ceux des sous-menus, a-priori.
Pour moi, on obtient exactement le même aspect visuel, avec 50 lignes de code en css en moins!
Simplifions, simplifions! à+

Fuvola · Message par **Fuvola** » 14 nov. 2008, 11:52

Bonjour Mongo Bob,
Eh bien, quel travail!...
De mon côté, je ne suis pas restée inactive, j'ai trouvé quelque chose qui commence à bien me plaire. Le problème à résoudre est: comment n'afficher les sous-menus qu'au passage de la souris? (et incidemment, j'ai du mal à positionner correctement l'image lettre.gif)

Voilà le code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml" lang="fr"><head><title>Index</title><meta
content="text/html; charset=iso-8859-1" http-equiv="Content-Type" /><meta
content="fr" http-equiv="Content-Language" /><meta content="follow"
name="Robots" /><meta content="TRUE" name="MSSmartTagsPreventParsing" /><link
title="menu" media="all" rel="stylesheet" href="menu.css"
type="text/css" /></head>
<body><div style="" id="en_tete"></div><div id="corps"><div><ul
id="menu"><li><a href="index.htlm">Accueil</a></li>
<li>Agenda
<ul> <li><a href="2007.html">2007</a></li>
<li><a href="2008.html">2008</a></li><li><a href="2009.html">2009</a> </li></ul></li>
<li><a href="album/album/index.html">Photos</a></li>
<li>Programmes <ul>

<li><a href="mathieu.html">Duo
flûte et orgue</a></li>
<li><a href="autres.html">Autres programmes</a></li></ul>
</li><li><a href="Presse.html">Presse</a></li>
<li><a href="contact.html">Liens</a></li>
</ul><p><a href="#"
onclick="window.open
('popups/email.html','_blank','toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=1, copyhistory=0, menuBar=0, width=600, height=210, top=10');return(false)"><img
style="width: 38px; height: 18px;" alt="" src="img/lettre.gif" /></a></p><br />
</div><p><img style="width: 320px; height: 248px;" alt=""
src="img/Mathilde010.jpg" />paragraphe</p>
</div><div id="pied_de_page">Copyright:
Obéron 2008, tous droits réservés<p></p><p>

<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a></p><br /></div></body></html>

Et le css:

/* Generated by KaZcadeS */
body {
font-family: Arial,Helvetica,sans-serif;
font-size: medium;
margin-top: auto;
background-color: #000000;
color: #9ecb95;
font-style: normal;
margin-left: auto;
margin-right: auto;
width: 750px;
}
#en_tete {
border: 1px solid #ffffff;
text-align: center;
background-image: url(banniere.jpg);
background-repeat: no-repeat;
margin-left: 0px;
background-color: #9eca95;
margin-bottom: 50px;
height: 150px;
font-size: large;
}
#corps {
border: 1px solid #ffffff;
padding: 10px 30px 10px 20px;
background-color: #9ecb95;
color: #000000;
font-style: normal;
text-align: justify;
font-weight: bold;
}
#corps a {
color: #ffffff;
font-style: normal;
text-decoration: none;
}
#corps a:hover {
color: #9ecb95;
background-color: #7272a5;
}
#corps img {
border: 1px solid #ffffff;
margin: -180px -50px 10px 20px;
float: right;
}
#pied_de_page {
text-align: center;
font-size: x-small;
}
#corps table {
color: #ffffff;
overflow: scroll;
}
#corps div {
border-style: double;
border-width: 3px;
padding: 20px;
color: #9eca95;
height: auto;
margin-left: -250px;
width: 220px;
float: left;
background-color: #000000;
margin-right: 30px;
text-align: left;
line-height: 45px;
font-family: Staccato222 BT;
font-size: xx-large;
}
#corps div a {
color: #9eca95;
}
#corps div ul {
}
#corps div img {
float: left;
margin-left: 60px;
position: relative;
}

Merci encore!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.18) Gecko/20081029 Firefox/2.0.0.18

Geckozone

Petit problème de menu déroulant

Petit problème de menu déroulant

Qui est en ligne ?