menu deroulant vertical

zazo · Message par **zazo** » 07 févr. 2008, 07:40

bonjour,

je suis super debutante et j'ai besoin d'un site que je fais plus par necessité que par plaisir. J'ai lu et a peu pres compris "info.sio2" et "le site du zero".
J'aimerai un menu vertical déroulant avec un niveau de sous menu qui apparait au survol de la souris...et je ne sais pas comment faire.
J'ai lu le site d'alsacréation mais j'arrive pas à faire le rapport avec kpz.J'imagine qu'il ne faut pas les coder à la main en recopiant...Comme vous pouvez le constater je pars de très loin...
merci des pistes que vous pourrez me donner...si il existait qq part un "pas à pas", ça m'aiderait.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; Creative)

Message par **Ymai** » 07 févr. 2008, 07:56

Bonjour

zazo a écrit : J'ai lu le site d'alsacréation mais j'arrive pas à faire le rapport avec kpz.J'imagine qu'il ne faut pas les coder à la main en recopiant...

C'est sans doute exact.
De préférence dans un éditeur externe, ouvrir la page HTML.
A l'endroit où le menu doit apparaître, copier/coller le code
Enregistrer
Retourner sous KpZ et vérifier le résultat.
Certains détails ne pourront sans doute pas être résolus sous KpZ.

Si on pouvait avoir le code correspondant, on pourrait sans doute donner des informations plus précises.

zazo · Message par **zazo** » 07 févr. 2008, 09:36

re,

http://css.alsacreations.com/xmedia/exe ... smenu4.htm#

voici ce que je souhaite.
Je n'avais pas pensé au copier/coller du code...( sans commentaires). j'ai fais un essai rapide en intercalant de <dl id menu> à </dl> c'est OK pour les sous menus : j'ariverais à en déduire comment en rajouter et les modifier mais je n'ai pas la fonction liée au survol de la souris.Que dois prendre du code d'alsacreation ? et ou le mettre dans mon code?
Sinon j'envisage de travailler sur les balises dans la barre d'état mais ça risque d'etre un peu à l'aveuglette !
Je suis désolée d'être aussi nulle , peut etre que ça ira mieux petit à petit !

voici ma propre page actuellement avant l'insertion du code de alsacréation

Merci mille fois de votre aide.

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html
 lang="fr-fr"><head><meta
 content="text/html; charset=ISO-8859-1"
 http-equiv="content-type"><title>index</title><meta
 content="laurence Amblard" name="author"><meta
 content="présentation du travail de la ceramiste comtemporaine laurence Amblard:art de la table, sculpture, art religieux,bijoux"
 name="description"><link media="all"
 rel="stylesheet" href="mestyles.css" type="text/css"></head>
<body><div style="text-align: center;" id="entete"><h1>Laurence
Amblard </h1><h1>&nbsp;Céramiste</h1></div><div
 id="menu"><h2>menu</h2><ul type="none"><li>Accueil</li><li>Art
de la table</li><li>Décoration</li><li>Bijoux</li><li>Art
religieux</li><li>Sculptures</li><li>Agendas</li><li>Contact</li></ul><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div
 id="texte"><h2>Présentation</h2><p
 style="text-align: justify;"><img
 style="width: 164px; height: 196px;" class="imagegauche"
 alt="à l'atelier" src="images/fratrie%20dos%20reduite.JPG">La
terre, le
feu sont ses passions et vous allez trouver ici tout ce
qu'elle&nbsp; réalise
en les mariant.</p><p style="text-align: justify;">Les
créations de Laurence Amblard sont très éclectiques , elles vont de
l'utilitaire classique aux installations complètement inutiles et
comtemporaines.</p><p style="text-align: justify;">
Elle utilise
des terres variées et&nbsp;explore tout ce que la céramique peut
permettre en réadaptant&nbsp;chaque domaine à sa personnalité et à
son environnement.</p><br>
<p>Les <span style="font-weight: bold;">arts de la
table</span>
sont inspirés de l'ile de la Réunion où&nbsp;elle réside et
crée.&nbsp;<br>Vifs
ou naturels,les <span style="font-weight: bold;">bijoux</span>
sont marqués par l'empreinte
unique du feu de bois.<br>Les <span style="font-weight: bold;">sculptures</span>
très souvent
animalières&nbsp;sont
également marquées par le feu par la technique d'enfumage après
application de sigillée.<br>L'<span style="font-weight: bold;">art
religieux</span> est très contemporain,on peut&nbsp;le
regarder autant pour son coté esthétique que pour son coté symbolique.</p><div
 style="text-align: justify;"><p>Laurence
Amblard ne s'interdit aucun domaine, sa seule règle étant de s'amuser à
modeler, à cuire et à faire partager son travail en
espérant vous transmettre une partie de son plaisir.</p></div><br><br><div
 style="text-align: center;"><img
 style="width: 200px; height: 267px;" alt="a l'atelier"
 src="images/photo.jpg" align="top"><br><br><br></div></div></body></html>

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; Creative)

Message par **chinon37** » 07 févr. 2008, 10:44

Bonjour,

ci-dessous, l'intégration du menu dans la page avec un semblant de mise en page puisque nous n'avons pas la feuille de style externe.
La mise en page est faite avec une feuille de style intégrée dans la page qu'il est souhaitable d'exporter de façon à ce qu'elle soit dans la feuille messtyles.css

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>
      index
    </title>
    <meta content="laurence Amblard" name="author">
    <meta content="présentation du travail de la ceramiste comtemporaine laurence Amblard:art de la table, sculpture, art religieux,bijoux" name="description">
    <link media="all" rel="stylesheet" href="mestyles.css" type="text/css">
    <script type="text/javascript">
<!--
    window.onload=montre;
    function montre(id) {
    var d = document.getElementById(id);
    for (var i = 1; i<=10; i++) {
    if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
    }
    if (d) {d.style.display='block';}
    }
    //-->
    </script>
    <style type="text/css">
body {
    margin: 0;
    padding: 0;
    background: white none repeat scroll 0%;
    font-family: verdana,arial,sans-serif;
    font-size: 90%;
    color: black;
    }
    dl, dt, dd, ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    #menu {
    top: 1em;
    left: 1em;
    width: 10em;
    float: left;
    }
    #menu dt {
    border: 1px solid gray;
    margin: 2px 0;
    background: #a9bfcb none repeat scroll 0%;
    cursor: pointer;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-weight: bold;
    }
    #menu dd {
    border: 1px solid gray;
    background: #a9bfcb none repeat scroll 0%;
    position: absolute;
    z-index: 100;
    left: 8em;
    margin-top: -1.4em;
    width: 10em;
    }
    #menu ul {
    padding: 2px;
    }
    #menu li {
    text-align: center;
    font-size: 85%;
    height: 18px;
    line-height: 18px;
    }
    #menu li a, #menu dt a {
    color: #000000;
    text-decoration: none;
    display: block;
    }
    #menu li a:hover {
    text-decoration: underline;
    }


    *#corps {
    width: 750px;
    margin-left: 160px;
    }
    </style>
  </head>
  <body>
    <div style="text-align: center;" id="entete">
      <h1>
        Laurence Amblard
      </h1>
      <h1>
         Céramiste
      </h1>
    </div>
    <div id="menu">
      <h2>
        menu
      </h2><!-- Menu -->
      <dl id="menu">
        <dt onmouseover="javascript:montre('smenu1');">
          <a href="#">Menu 1</a>
        </dt>
        <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
          <ul>
            <li>
              <a href="#">Sous-Menu 1.1</a>
            </li>
            <li>
              <a href="#">Sous-Menu 1.2</a>
            </li>
            <li>
              <a href="#">Sous-Menu 1.3</a>
            </li>
          </ul>
        </dd>
        <dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
          Menu 2
        </dt>
        <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
          <ul>
            <li>
              <a href="#">Sous-Menu 2.1</a>
            </li>
            <li>
              <a href="#">Sous-Menu 2.2</a>
            </li>
          </ul>
        </dd>
        <dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
          Menu 3
        </dt>
        <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
          <ul>
            <li>
              <a href="#">Sous-Menu 3.1</a>
            </li>
            <li>
              <a href="#">Sous-Menu 3.1</a>
            </li>
            <li>
              <a href="#">Sous-Menu 3.1</a>
            </li>
            <li>
              <a href="#">Sous-Menu 3.1</a>
            </li>
            <li>
              <a href="#">Sous-Menu 3.1</a>
            </li>
            <li>
              <a href="#">Sous-Menu 3.1</a>
            </li>
          </ul>
        </dd>
        <dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
          Menu 4
        </dt>
        <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
          <ul>
            <li>
              <a href="#">Sous-Menu 4.1</a>
            </li>
            <li>
              <a href="#">Sous-Menu 4.1</a>
            </li>
          </ul>
        </dd>
      </dl>
      <div id="corps">
        <p style="text-align: justify;">
          <img style="width: 164px; height: 196px;" class="imagegauche" alt="à l'atelier" src="images/fratrie%20dos%20reduite.JPG">La terre, le feu sont ses passions et vous allez trouver ici tout ce qu'elle  réalise en les mariant.
        </p>
        <p style="text-align: justify;">
          Les créations de Laurence Amblard sont très éclectiques , elles vont de l'utilitaire classique aux installations complètement inutiles et comtemporaines.
        </p>
        <p style="text-align: justify;">
          Elle utilise des terres variées et explore tout ce que la céramique peut permettre en réadaptant chaque domaine à sa personnalité et à son environnement.
        </p><br>
        <p>
          Les <span style="font-weight: bold;">arts de la table</span> sont inspirés de l'ile de la Réunion où elle réside et crée. <br>
          Vifs ou naturels,les <span style="font-weight: bold;">bijoux</span> sont marqués par l'empreinte unique du feu de bois.<br>
          Les <span style="font-weight: bold;">sculptures</span> très souvent animalières sont également marquées par le feu par la technique d'enfumage après application de sigillée.<br>
          L'<span style="font-weight: bold;">art religieux</span> est très contemporain,on peut le regarder autant pour son coté esthétique que pour son coté symbolique.
        </p>
        <div style="text-align: justify;">
          <p>
            Laurence Amblard ne s'interdit aucun domaine, sa seule règle étant de s'amuser à modeler, à cuire et à faire partager son travail en espérant vous transmettre une partie de son plaisir.
          </p>
        </div><br>
        <br>
        <div style="text-align: center;">
          <img style="width: 200px; height: 267px;" alt="a l'atelier" src="images/photo.jpg" align="top"><br>
          <br>
          <br>
        </div>
      </div>
    </div>
  </body>
</html>

C'est du vite fait, mais cela permet d'avancer un peu

Le menu déroulant est provoqué par du javascript qui n'est pas opérant dans KpZ, mais dans l'aperçu dans le navigateur. (testé avec Firefox)
Bon courage

zazo · Message par **zazo** » 08 févr. 2008, 15:00

bonjour,

merci chinon pour ta proposition, mais chez moi ça ne fonctionnait pas (IE)(tout les sous menus étaient toujours ouverts et se superposaient), alors j'ai essayé de bidouiller en me servant de ta proposition.Voilà ce que j'ai fait

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html
 lang="fr-fr"><head><meta
 content="text/html; charset=ISO-8859-1"
 http-equiv="content-type"><title>index</title><meta
 content="laurence Amblard" name="author"><meta
 content="présentation du travail de la ceramiste comtemporaine laurence Amblard:art de la table, sculpture, art religieux,bijoux"
 name="description"><link media="all"
 rel="stylesheet" href="mestyles.css" type="text/css"><script
 type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script><style type="text/css"></style><link
 title="messtylesamoi" media="all" rel="stylesheet"
 hre="messtyles.css" type="text/css"></head>
<body><div style="text-align: center;" id="entete"><h1>Laurence
Amblard </h1><h1>&nbsp;Céramiste</h1></div><div
 id="menu"><h2>menu</h2><a href="#">Accueil</a><dt
 onmouseover="javascript:montre('smenu1');"
 onmouseout="javascript:montre();">Art de la table</dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');"
 onmouseout="javascript:montre();"><ul><li><a
 href="lambrequin%20dentelle.html">Lambrequin
dentelle</a></li>
<li><a href="#">Lambrequin triangle</a></li>
<li><a href="#">Grand lambrequin</a></li>
<li><a href="#">Goni</a></li><li><a
 href="#">Végétaux</a></li>
</ul></dd><dt><a href="d%E9coration.htm">Décoration</a></dt><dt
 onmouseover="javascript:montre('smenu2');"
 onmouseout="javascript:montre();">Bijoux</dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');"
 onmouseout="javascript:montre();"><ul><li><a
 ="" href="#">Colliers
zen</a></li>
<li><a href="#">Bagues zen</a></li>
<li><a href="#">Colliers masques</a></li>
</ul></dd><dt onmouseover="javascript:montre('smenu3');"
 onmouseout="javascript:montre();">Art religieux</dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');"
 onmouseout="javascript:montre();"><ul><li><a
 href="#">Crêches</a></li>
<li><a href="#">Croix</a></li><li><a
 href="#">Vierges&nbsp;</a></li>
</ul></dd><dt onmouseover="javascript:montre('smenu4');"
 onmouseout="javascript:montre();">Sculptures</dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');"
 onmouseout="javascript:montre();"><ul><li><a
 href="#">Oiseaux</a></li>
<li><a href="#">Chats</a></li>
<li><a href="#">Autres</a></li>
</ul></dd><dt><a href="#">Agendas</a></dt><dt><a
 href="#">Contact</a></dt>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div
 id="texte"><h2>Présentation</h2><p
 style="text-align: justify;"><img
 style="width: 164px; height: 196px;" class="imagegauche"
 alt="fratrie" src="images/fratrie%20dos%20reduite.JPG">La
terre, le
feu sont ses passions et vous allez trouver ici tout ce
qu'elle&nbsp; réalise
en les mariant.</p><p style="text-align: justify;">Les
créations de Laurence Amblard sont très éclectiques , elles vont de
l'utilitaire classique aux installations complètement inutiles et
comtemporaines.</p><p style="text-align: justify;">
Elle utilise
des terres variées et&nbsp;explore tout ce que la céramique peut
permettre en réadaptant&nbsp;chaque domaine à sa personnalité et à
son environnement.</p><br>
<p>Les <span style="font-weight: bold;">arts de la
table</span>
sont inspirés de l'ile de la Réunion où&nbsp;elle réside et
crée.&nbsp;<br>Vifs
ou naturels,les <span style="font-weight: bold;">bijoux</span>
sont marqués par l'empreinte
unique du feu de bois.<br>Les <span style="font-weight: bold;">sculptures</span>
très souvent
animalières&nbsp;sont
également marquées par le feu par la technique d'enfumage après
application de sigillée.<br>L'<span style="font-weight: bold;">art
religieux</span> est très contemporain,on peut&nbsp;le
regarder autant pour son coté esthétique que pour son coté symbolique.</p><div
 style="text-align: justify;"><p>Laurence
Amblard ne s'interdit aucun domaine, sa seule règle étant de s'amuser à
modeler, à cuire et à faire partager son travail en
espérant vous transmettre une partie de son plaisir.</p></div><br><br><div
 style="text-align: center;"><img
 style="width: 200px; height: 267px;" alt="a l'atelier"
 src="images/photo.jpg" align="top"><br></div></div></body></html>

voici mon css:

Code : Tout sélectionner

/* Generated by KaZcadeS */
h1 {
  font-weight: bold;
  color: #fffd7f;
  font-size: 2em;
}
#entete {
  border: 3px solid #efee55;
  color: #fffd7f;
  background-color: #666666;
}
#menu {
  color: #000000;
  background-color: #999999;
  float: left;
  margin-right: 20px;
  border-bottom-color: #ffffff;
  border-bottom-style: none;
  font-size: 1em;
  width: 160px;
}
body {
  font-family: comic-sans-ms,arial,helvetica,sans-serif;
  font-size: 1.2em;
}
h2 {
  border-bottom: 3px dotted #eae33f;
  font-weight: bold;
  margin-top: 0px;
  font-size: 1.5em;
  padding-top: 10px;
  padding-bottom: 10px;
}
#texte {
  background-color: #cccccc;
  margin-top: 0;
  margin-bottom: 0;
  text-align: justify;
  margin-left: 160px;
}
.imagegauche {
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
}
p {
  margin-right: 20px;
  text-align: justify;
}
.imagedroite {
  float: right;
  margin-left: 20px;
}
a {
  color: #000000;
  text-decoration: none;
  font-weight: normal;
  font-style: normal;
}

Et apres tout ça voici les problemes:

1)le sous menu s'ouvre au survol, mais on ne peut atteindre les liens, parcequ'ils se referment des qu'on quitte la rubrique pour aller sur le lien
2)le premier lien de chaque sous menu est décalé
3)j'aimerai que chaque lien du sous menu soit sur une seule ligne: mais sans elargir le bloc menu.

J'ai hate d'y arriver parce que j'ai l'impression qu'apres ce sera du gateau...enfin presque.
Si il y a d'autres commentaires, tant qu'il sont compréhensibles à mon niveau ....je prends !
Merci ( je ne le dirais jamais assez !)

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; Creative)

zazo · Message par **zazo** » 12 févr. 2008, 07:03

bonjour,

c'était la largeur de la boite des sous menus qui était insuffisante. le probleme est règlé.
Mais d'autres suivront !
a bientot donc

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; Creative)

Geckozone

menu deroulant vertical

menu deroulant vertical

Re: menu deroulant vertical

Qui est en ligne ?