HandCoder : extension Nvu pour Tidy et PHP

Kazé · Message par **Kazé** » 21 nov. 2005, 19:09

HandCoder-20051121-fr
J'ai supprimé la boite de dialogue "disabled" (résidu de débug...) et vérifié qu'elle fonctionnait avec la dernière beta de NsmConText.

Do-IT · Message par **Do-IT** » 21 nov. 2005, 20:07

hancoder 1121 seul.
C'est l'appel a tidy qui lance la transformation des url ?
feuille interne :
/*<![CDATA[*/ me fera toujours le meme effet. Mais ca part a la sauvegarde !
Les rgb restent en rgb.

Kazé · Message par **Kazé** » 21 nov. 2005, 20:17

Do-IT a écrit :C'est l'appel a tidy qui lance la transformation des url ?

Oui, pour les URLs de la page HTML courante.
Pour les feuilles de style externes, c'est en les modifiant avec l'éditeur CSS (CaScadeS) que la transformation est faite (j'ai corrigé la sérialisation des feuilles de style).

Je préfèrerais inclure ça dans le nettoyeur de balises de Nvu. Peut-être un jour...

Do-IT a écrit :feuille interne :
/*<![CDATA[*/ me fera toujours le meme effet. Mais ca part a la sauvegarde !

Et ça revient après avoir lancé Tidy

Ceci dit, j'avais lu il y a quelque temps que c'était une "bonne pratique" du web que d'inclure les feuilles de style et scripts dans des CDATA.

Do-IT a écrit :Les rgb restent en rgb.

Même après avoir édité la feuille avec CaScadeS ?

Do-IT · Message par **Do-IT** » 21 nov. 2005, 20:27

Kaze a écrit :Même après avoir édité la feuille avec CaScadeS ?

Oui, créer puis modifier avec cascade, ca reste desesperément en rgb. (Feuille interne).

Do-IT · Message par **Do-IT** » 21 nov. 2005, 20:31

idem feuille externe

Code : Tout sélectionner

/* Generated by CaScadeS, a stylesheet editor for Mozilla Composer */

  h1 { border-color: rgb(51, 51, 255);
    color: rgb(255, 0, 0);
    background-color: rgb(255, 204, 51);
    }

Kazé · Message par **Kazé** » 23 nov. 2005, 10:28

J'hésite encore à faire une extension indépendante pour le nettoyage des URLs locales... je ne voudrais pas surcharger HandCoder et en faire une usine à gaz comme NsmConText 0.2.5.

J'ai déplacé les messages concernant le problème d'installation qu'à rencontré Mongo Bob dans le sujet : installation d'une extension (HandCoder).

PS: j'ai visiblement scindé le sujet au mauvais moment !

Mais je crois que la question des fichiers XPI pourra intéresser des utilisateurs qui n'ont aucun besoin de HandCoder... et qui n'ont pas forcément la patience de parcourir 8 pages.

Kazé · Message par **Kazé** » 01 déc. 2005, 11:09

Nouvelle beta : HandCoder-20051201-fr

Cette version permet de lancer le nettoyeur de balises avant Tidy (nouvelle préférence).
La préférence qui permet de recharger automatiquement un document modifié par un éditeur externe me plait particulièrement ; elle est là depuis quelque temps, mais je commence juste à oser l'activer !
J'ai amélioré les performances en supprimant pas mal d'accès disque, mais ça reste perfectible, notamment pour la détection PHP qui prend trop de temps à mon goût.

Cette semaine, j'ai figé une version 0.3.0 de HandCoder. Cette version correspond à peu près à l'avant-dernière beta, avec quelques fonctionnalités en moins pour pouvoir conserver les locales actuelles. Le but était essentiellement de fournir une version "stable", compatible avec NsmConText 0.3.0, pour que les utilisateurs "non-PHP" puissent profiter des progrès effectués dans HandCoder.

Dans cette branche 0.3.x, j'ai désactivé les fonctionnalités PHP ; pour les réactiver, il faut aller modifier une préférence cachée, via about:config :

extensions.HandCoder.phpEnabled = true

Il suffit de faire un Outils > about:config, de taper "php" dans le filtre, et de double-cliquer sur la préférence "phpEnabled" pour la passer à "true", et ainsi récupérer l'onglet ASP/JSP/PHP.

Pour la suite, il va falloir que je retouche (encore !) la détection PHP, et surtout que je commence à faire un marquage des fichiers éditables par Nvu. Je vais en profiter pour rajouter un item "Enregistrer sous..." dans le menu contextuel de la barre d'état, pour pouvoir sauvegarder facilement un fragment de document (cf. utilisation de <?php include('menu.tpl'); ?>).

Message par **chinon37** » 06 déc. 2005, 13:15

ho, rage, oh désespoir, ho Kazé,... un bug n'est-il point venu dans Nvu à travers l'extension Handcoder version 0.3.0? ... ou plutôt Tidy?

Voilà le problème:
Ci dessous le code d'une page avec un menu déroulant (bon d'accord, y'a du javascript, mais le menu me plaît comme ça)

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="fr-fr">
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 1st July 2004), see www.w3.org">
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    <title>
      pascal et alain lorieux,viticulteurs situation touraine
    </title>
    <meta name="robots" content="follow">
    <meta name="robots" content="all">
    <meta name="description" content=
    "Pascal et Alain Lorieux presentent leurs vins, leur domaine et leurs vignes de Chinon et de St Nicolas de Bourgueil en Touraine dans le val de Loire">
    <meta name="keywords" content=
    "vin, vins, wine, vigne vigneron, domaine, chinon, st nicolas de bourgueil, cabernet franc, breton, touraine, val de loire, loire valley, cuvees, theleme, agnes sorel, cave, chai, tourisme, guide hachette">

<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" media="screen">
  body { margin: 0pt;
    text-align: center;
    background-color: rgb(255, 255, 245);
    }

  #fonddepage { border: 1px solid rgb(192, 192, 192);
    background-color: rgb(255, 255, 224);
    text-align: left;
    visibility: visible;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    top: 3%;
    width: 800px;
    height: auto;
    }

  .texte { background-color: rgb(245, 245, 245);
    position: absolute;
    top: 100px;
    left: 200px;
    width: 500px;
    height: auto;
    }

  #texte { border: thin none rgb(128, 128, 128);
    visibility: visible;
    position: absolute;
    top: 330px;
    left: 210px;
    width: 520px;
    height: auto;
    }

  #texte2 { border: thin none rgb(128, 128, 128);
    visibility: visible;
    left: 210px;
    width: 284px;
    height: auto;
    position: absolute;
    top: 520px;
    }

  #texte3 { border: thin none rgb(128, 128, 128);
    visibility: visible;
    position: absolute;
    top: 790px;
    left: 309px;
    width: 475px;
    height: auto;
    }

  #appellations { color: rgb(245, 245, 245);
    font-size: 15px;
    font-family: "Comic Sans MS";
    font-style: normal;
    font-weight: 600;
    font-size-adjust: inherit;
    text-decoration: none;
    background-color: rgb(139, 0, 0);
    text-align: center;
    visibility: visible;
    position: absolute;
    top: 202px;
    left: 2px;
    width: 612px;
    height: 30px;
    }

  #bourgeon { visibility: visible;
    position: absolute;
    top: 512px;
    left: 495px;
    width: 296px;
    height: 203px;
    }

  td { border-right: thin solid rgb(169, 169, 169);
    border-bottom: thin solid rgb(128, 128, 128);
    font-size: 14px;
    text-align: center;
    color: rgb(105, 105, 105);
    }

  td a { text-decoration: none;
    color: rgb(105, 105, 105);
    }

  td:hover { background-color: rgb(0, 130, 0);
    color: rgb(204, 204, 204);
    }

  td a:hover {  }

  .tableau { position: absolute;
    top: 100px;
    left: 189px;
    }

  p { color: rgb(0, 0, 0);
    font-size: 15px;
    font-family: "Comic Sans MS";
    font-style: normal;
    text-align: justify;
    text-indent: 12px;
    overflow: auto;
    vertical-align: 12px;
    padding-left: 10px;
    padding-right: 10px;
    }

  #cadremenu { border: 1px solid rgb(204, 204, 204);
    background-color: rgb(255, 255, 245);
    position: absolute;
    width: 12em;
    margin-left: 0.5em;
    top: 1em;
    height: 300px;
    margin-top: 230px;
    }

  dl, dt, dd, ul, li { margin: 0pt;
    padding: 0pt;
    list-style-type: none;
    }

  #menu { position: absolute;
    top: 1em;
    left: 1em;
    float: left;
    margin-top: 400px;
    font-family: Comic Sans MS;
    color: rgb(102, 0, 0);
    text-decoration: none;
    background-color: transparent;
    width: 11em;
    margin-left: 7px;
    font-size: 85%;
    }

  #menu dt { border: 1px solid gray;
    margin: 2px 0pt;
    color: rgb(102, 0, 0);
    font-size: 85%;
    font-family: "Comic Sans MS";
    font-weight: normal;
    line-height: 20px;
    text-decoration: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: left center;
    text-align: center;
    cursor: pointer;
    height: 20px;
    }

  #menu dd { border: 1px solid gray;
    background: rgb(225, 238, 221) none repeat scroll 0pt 50%;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    font-weight: normal;
    margin-top: -1.4em;
    position: absolute;
    z-index: 100;
    left: 8em;
    width: 10em;
    }

  #menu ul { padding: 2px;
    }

  #menu li { text-align: center;
    font-size: 85%;
    height: 18px;
    line-height: 18px;
    background-position: left center;
    background-repeat: repeat-x;
    }

  #menu li a, #menu dt a { color: rgb(0, 0, 0);
    display: block;
    text-decoration: none;
    }

  #menu li a:hover { font-weight: normal;
    background-position: left center;
    background-repeat: repeat-x;
    background-color: rgb(153, 153, 153);
    color: rgb(255, 255, 204);
    }

  #menu dt:hover { background-color: rgb(181, 192, 183);
    color: rgb(51, 102, 102);
    background-position: left center;
    background-repeat: no-repeat;
    text-decoration: none;
    }

  #titrepage { visibility: visible;
    position: absolute;
    top: 250px;
    left: 127px;
    width: 220px;
    height: 52px;
    }

  #basdepage { visibility: visible;
    position: absolute;
    top: 947px;
    left: 2px;
    width: 800px;
    height: 28px;
    }

  #conception { visibility: visible;
    position: absolute;
    top: 989px;
    left: 3px;
    width: 800px;
    height: 84px;
    }

  #legende { font-size: 10px;
    text-align: center;
    visibility: visible;
    position: absolute;
    left: 537px;
    width: 186px;
    height: 39px;
    top: 745px;
    }

  #orchis { visibility: visible;
    position: absolute;
    top: 784px;
    left: 197px;
    width: 100px;
    height: 133px;
    }

  #legendeorchis { font-size: 10px;
    text-align: center;
    visibility: visible;
    position: absolute;
    top: 801px;
    left: 86px;
    width: 100px;
    height: 80px;
    }

  #unesco { border: 1px solid rgb(169, 169, 169);
    font-size: 20px;
    text-align: center;
    visibility: visible;
    position: absolute;
    top: 1px;
    left: 591px;
    width: 198px;
    font-family: Arial,Helvetica,sans-serif;
    height: 172px;
    }

  #webmaster { visibility: visible;
    position: absolute;
    top: 14px;
    left: 0pt;
    height: auto;
    width: 735px;
    }


</style>
  </head>
  <body style="direction: ltr;">
    <div style="top: 21px; height: 1002px;" id="fonddepage">
      <img src="Photosgrd-chp-pano-et-nom.jpg" alt="" border="0" height="231" width="500">
      <div id="titrepage">
        <img src="image/les-cuvees.png" alt="les différentes cuvées" style=
        "border: 0px solid ; width: 468px; height: 60px;">
      </div>
      <div id="texte">
        <p>
          A quelques encablures de la confluence de la Loire et de la Vienne, notre domaine est situé à l'extrème ouest
          de la Touraine, à 20 minutes de Saumur, 40 minutes de Tours et d'Angers.<br>
        </p>
        <p>
          A St Nicolas de Bourgueil, nos vignes sont exposées sur deux grands type de sols:
        </p>
        <p>
          - des sols de graves sur la terrasse située à l'est de la commune,entre  Bourgueil et St Nicolas
        </p>
        <p>
          <br>
        </p>
      </div>
      <div id="unesco">
        La Touraine, au coeur du Val de Loire<img src="PNR.gif" alt="France touraine" style=
        "border: 0px solid ; width: 80px; height: 117px;">
      </div>
      <div id="texte2">
        <p>
          - des sols plus sableux, au nord-ouest de la commune, au pied du coteau ouvert vers le sud. Le sable est le
          résultat de l'érosion du coteau boisé.
        </p>
        <p>
          A Cravant les Coteaux, les vignes sont situées sur le coteau argilo-calcaire, à proximité du chai, et sur la
          terrasse argilo-siliceuse dominant l'ancien lit de la Vienne.
        </p>
      </div>
      <div id="bourgeon">
        <img src="montsoreau.jpg" alt="montsoreau" style=
        "border: 0px solid ; left: 766px; width: 241px; top: 280px; height: 235px;">
      </div>
      <div id="legende">
        le chateau de Montsoreau<br>
        photo: <a href="http://www.winephotos.com" rel="friend" target="_blank">Patrick Cronemberger</a>
      </div>
      <div id="texte3">
        <p>
          La présence du coteau au Nord de chaque vignoble protège efficacement les vignes des froids les plus vifs.
          Quant aux vallées de la Loire et de la Vienne, ce sont des portes d'entrée à l'air maritime.
        </p>
        <p>
          Le climat océanique pénètre par les deux vallées et apporte la douceur réputée à notre région.
        </p>
      </div>
      <div id="orchis">
        <img src="orchidee-016.jpg" alt="" border="0" height="133" width="100">
      </div>
      <div id="legendeorchis">
        Orchidée (Ophris abeille) présente sur nos terrains argilo-calcaires<br>
        (à protéger car en voie de disparition)<br>
        Photo: P et A Lorieux
      </div>
      <div style=
      "color: rgb(245, 245, 245); font-size: 15px; font-family: "Comic Sans MS"; font-style: normal; font-weight: 600; line-height: normal; font-size-adjust: none; text-decoration: none; background-color: rgb(139, 0, 0); text-align: center; visibility: visible; display: block; position: absolute; top: 202px; left: 0pt; width: 500px; height: 30px;"
      id="appellations">
        vins de St Nicolas de Bourgueil et Chinon
      </div>
      <dl id="menu">
        <li style="font-weight: bold; color: rgb(0, 102, 0); font-size: 95%;">MENU
        </li>
            <dt onmouseover="javascript:montre('smenu1');">
              Le vignoble
            </dt>
            <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
              <ul>
                <li>
                  <a href="la%20situationtouraine.html">La situation</a>
                </li>
                <li>
                  <a href="terroirs.html">Les terroirs</a>
                </li>
                <li>
                  <a href="vigne.html">La vigne</a>
                </li>
                <li>
                  <a href="culture.html">La culture</a>
                </li>
                <li>
                  <a href="vendanges.html">Les vendanges</a>
                </li>
                <li>
                  <a href="vinif.html">La vinification</a>
                </li>
              </ul>
            </dd>
            <dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
              Le domaine
            </dt>
            <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
              <ul>
                <li>La situation
                </li>
                <li>
                  <a href="histoire.html">L'histoire</a>
                </li>
                <li>
                  <a href="portraits.html">Portraits</a>
                </li>
                <li>
                  <a href="exploitation.html">L'exploitation</a>
                </li>
              </ul>
            </dd>
            <dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
              Les vins
            </dt>
            <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
              <ul>
                <li>
                  <a href="menuseul.html">St Nicolas de Bourgueil</a>
                </li>
                <li>
                  <a href="menuseul.html">Chinon</a>
                </li>
                <li>
                  <a href="menuseul.html">Les millésimes</a>
                </li>
                <li>
                  <a href="menuseul.html">Sous-Menu 3.1</a>
                </li>
                <li>
                  <a href="menuseul.html">Sous-Menu 3.1</a>
                </li>
                <li>
                  <a href="menuseul.html">Sous-Menu 3.1</a>
                </li>
              </ul>
            </dd>
            <dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
              Revue de presse
            </dt>
            <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
              <ul>
                <li>
                  <a href="menuseul.html">Sous-Menu 4.1</a>
                </li>
                <li>
                  <a href="menuseul.html">Sous-Menu 4.1</a>
                </li>
              </ul>
            </dd>
            <dt onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();">
              Contacts
            </dt>
            <dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();">
              <ul>
                <li>
                  <a href="coordonnees.html">Nos coordonnées</a>
                </li>
                <li>
                  <a href="coordonnees.html">Courrier électronique</a>
                </li>
              </ul>
            </dd>
            <dt onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre();">
              Le tourisme
            </dt>
            <dd id="smenu6" onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre();">
              <ul>
                <li>
                  <a href="tourisme.html">à visiter</a>
                </li>
                <li>
                  <a href="menuseul.html">Où se loger</a>
                </li>
              </ul>
            </dd>
            <dt onmouseover="javascript:montre('smenu7');" onmouseout="javascript:montre();">
              Les collègues
            </dt>
            <dd id="smenu7" onmouseover="javascript:montre('smenu7');" onmouseout="javascript:montre();">
              <ul>
                <li>
                  <a href="menuseul.html">Muscadet</a>
                </li>
                <li>
                  <a href="menuseul.html">Touraine Azay le Rideau</a>
                </li>
                <li>
                  <a href="menuseul.html">Pouilly Fumé</a>
                </li>
                <li>
                  <a href="menuseul.html">Bourgueil</a>
                </li>
              </ul>
            </dd>
          </dl>
          <div id="basdepage">
            <table style=
            "background-color: rgb(238, 232, 170); width: 80%; text-align: left; margin-left: auto; margin-right: auto;"
            border="1" cellpadding="0" cellspacing="2">
              <tbody>
                <tr>
                  <td style="background-color: rgb(238, 232, 170);">
                    accueil
                  </td>
                  <td>
                    <a href="domaine.html">domaine</a>
                  </td>
                  <td>
                    <a href="cuvees.html">cuvées</a>
                  </td>
                  <td>
                    <a href="presse.html">presse</a>
                  </td>
                  <td>
                    <a href="mailto:infos@lorieux.fr">contact</a>
                  </td>
                  <td>
                    <a href="plansite.html">plan du site</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div id="conception">
            <div align="center">
              <div id="webmaster">
                site conçu par nos soins   <a href="http://www.nvu.com"><img src="madewithNvu80x15clear.png" alt=
                "Document made with Nvu" border="0"></a>       et optimisé pour le navigateur    <a href=
                "http://www.mozilla-europe.org/fr/products/firefox/"><img style=
                "border: 0px solid ; width: 109px; height: 35px;" src="firefox.gif" alt=""></a>
                <p>
                  <a href="http://validator.w3.org/check?uri=referer"><img src="valid-html401" alt="Valid HTML 4.01!"
                  border="0" height="31" width="88"></a>
                </p>
              </div>
              <address class="adresse"></address>
            </div>
          </div>
    </div>
  </body>
</html>

si je fais un F7 (tidy) ou si je cliques sur éditeur en ayant paramétré dans Handmachin lancer « tidy avant édition », mon code source est modifié par ajout de lignes, de balises et fermetures autoritaires de balises à de mauvais endroits.

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="fr-fr">
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 1st July 2004), see www.w3.org">
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    <title>
      pascal et alain lorieux,viticulteurs situation touraine
    </title>
    <meta name="robots" content="follow">
    <meta name="robots" content="all">
    <meta name="description" content=
    "Pascal et Alain Lorieux presentent leurs vins, leur domaine et leurs vignes de Chinon et de St Nicolas de Bourgueil en Touraine dans le val de Loire">
    <meta name="keywords" content=
    "vin, vins, wine, vigne vigneron, domaine, chinon, st nicolas de bourgueil, cabernet franc, breton, touraine, val de loire, loire valley, cuvees, theleme, agnes sorel, cave, chai, tourisme, guide hachette">

<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" media="screen">
  body { margin: 0pt;
    text-align: center;
    background-color: rgb(255, 255, 245);
    }

  #fonddepage { border: 1px solid rgb(192, 192, 192);
    background-color: rgb(255, 255, 224);
    text-align: left;
    visibility: visible;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    top: 3%;
    width: 800px;
    height: auto;
    }

  .texte { background-color: rgb(245, 245, 245);
    position: absolute;
    top: 100px;
    left: 200px;
    width: 500px;
    height: auto;
    }

  #texte { border: thin none rgb(128, 128, 128);
    visibility: visible;
    position: absolute;
    top: 330px;
    left: 210px;
    width: 520px;
    height: auto;
    }

  #texte2 { border: thin none rgb(128, 128, 128);
    visibility: visible;
    left: 210px;
    width: 284px;
    height: auto;
    position: absolute;
    top: 520px;
    }

  #texte3 { border: thin none rgb(128, 128, 128);
    visibility: visible;
    position: absolute;
    top: 790px;
    left: 309px;
    width: 475px;
    height: auto;
    }

  #appellations { color: rgb(245, 245, 245);
    font-size: 15px;
    font-family: "Comic Sans MS";
    font-style: normal;
    font-weight: 600;
    font-size-adjust: inherit;
    text-decoration: none;
    background-color: rgb(139, 0, 0);
    text-align: center;
    visibility: visible;
    position: absolute;
    top: 202px;
    left: 2px;
    width: 612px;
    height: 30px;
    }

  #bourgeon { visibility: visible;
    position: absolute;
    top: 512px;
    left: 495px;
    width: 296px;
    height: 203px;
    }

  td { border-right: thin solid rgb(169, 169, 169);
    border-bottom: thin solid rgb(128, 128, 128);
    font-size: 14px;
    text-align: center;
    color: rgb(105, 105, 105);
    }

  td a { text-decoration: none;
    color: rgb(105, 105, 105);
    }

  td:hover { background-color: rgb(0, 130, 0);
    color: rgb(204, 204, 204);
    }

  td a:hover {  }

  .tableau { position: absolute;
    top: 100px;
    left: 189px;
    }

  p { color: rgb(0, 0, 0);
    font-size: 15px;
    font-family: "Comic Sans MS";
    font-style: normal;
    text-align: justify;
    text-indent: 12px;
    overflow: auto;
    vertical-align: 12px;
    padding-left: 10px;
    padding-right: 10px;
    }

  #cadremenu { border: 1px solid rgb(204, 204, 204);
    background-color: rgb(255, 255, 245);
    position: absolute;
    width: 12em;
    margin-left: 0.5em;
    top: 1em;
    height: 300px;
    margin-top: 230px;
    }

  dl, dt, dd, ul, li { margin: 0pt;
    padding: 0pt;
    list-style-type: none;
    }

  #menu { position: absolute;
    top: 1em;
    left: 1em;
    float: left;
    margin-top: 400px;
    font-family: Comic Sans MS;
    color: rgb(102, 0, 0);
    text-decoration: none;
    background-color: transparent;
    width: 11em;
    margin-left: 7px;
    font-size: 85%;
    }

  #menu dt { border: 1px solid gray;
    margin: 2px 0pt;
    color: rgb(102, 0, 0);
    font-size: 85%;
    font-family: "Comic Sans MS";
    font-weight: normal;
    line-height: 20px;
    text-decoration: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: left center;
    text-align: center;
    cursor: pointer;
    height: 20px;
    }

  #menu dd { border: 1px solid gray;
    background: rgb(225, 238, 221) none repeat scroll 0pt 50%;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    font-weight: normal;
    margin-top: -1.4em;
    position: absolute;
    z-index: 100;
    left: 8em;
    width: 10em;
    }

  #menu ul { padding: 2px;
    }

  #menu li { text-align: center;
    font-size: 85%;
    height: 18px;
    line-height: 18px;
    background-position: left center;
    background-repeat: repeat-x;
    }

  #menu li a, #menu dt a { color: rgb(0, 0, 0);
    display: block;
    text-decoration: none;
    }

  #menu li a:hover { font-weight: normal;
    background-position: left center;
    background-repeat: repeat-x;
    background-color: rgb(153, 153, 153);
    color: rgb(255, 255, 204);
    }

  #menu dt:hover { background-color: rgb(181, 192, 183);
    color: rgb(51, 102, 102);
    background-position: left center;
    background-repeat: no-repeat;
    text-decoration: none;
    }

  #titrepage { visibility: visible;
    position: absolute;
    top: 250px;
    left: 127px;
    width: 220px;
    height: 52px;
    }

  #basdepage { visibility: visible;
    position: absolute;
    top: 947px;
    left: 2px;
    width: 800px;
    height: 28px;
    }

  #conception { visibility: visible;
    position: absolute;
    top: 989px;
    left: 3px;
    width: 800px;
    height: 84px;
    }

  #legende { font-size: 10px;
    text-align: center;
    visibility: visible;
    position: absolute;
    left: 537px;
    width: 186px;
    height: 39px;
    top: 745px;
    }

  #orchis { visibility: visible;
    position: absolute;
    top: 784px;
    left: 197px;
    width: 100px;
    height: 133px;
    }

  #legendeorchis { font-size: 10px;
    text-align: center;
    visibility: visible;
    position: absolute;
    top: 801px;
    left: 86px;
    width: 100px;
    height: 80px;
    }

  #unesco { border: 1px solid rgb(169, 169, 169);
    font-size: 20px;
    text-align: center;
    visibility: visible;
    position: absolute;
    top: 1px;
    left: 591px;
    width: 198px;
    font-family: Arial,Helvetica,sans-serif;
    height: 172px;
    }

  #webmaster { visibility: visible;
    position: absolute;
    top: 14px;
    left: 0pt;
    height: auto;
    width: 735px;
    }


</style>
  </head>
  <body style="direction: ltr;">
    <div style="top: 21px; height: 1002px;" id="fonddepage">
      <img src="Photosgrd-chp-pano-et-nom.jpg" alt="" border="0" height="231" width="500">
      <div id="titrepage">
        <img src="image/les-cuvees.png" alt="les différentes cuvées" style=
        "border: 0px solid ; width: 468px; height: 60px;">
      </div>
      <div id="texte">
        <p>
          A quelques encablures de la confluence de la Loire et de la Vienne, notre domaine est situé à l'extrème ouest
          de la Touraine, à 20 minutes de Saumur, 40 minutes de Tours et d'Angers.<br>
        </p>
        <p>
          A St Nicolas de Bourgueil, nos vignes sont exposées sur deux grands type de sols:
        </p>
        <p>
          - des sols de graves sur la terrasse située à l'est de la commune,entre  Bourgueil et St Nicolas
        </p>
        <p>
          <br>
        </p>
      </div>
      <div id="unesco">
        La Touraine, au coeur du Val de Loire<img src="PNR.gif" alt="France touraine" style=
        "border: 0px solid ; width: 80px; height: 117px;">
      </div>
      <div id="texte2">
        <p>
          - des sols plus sableux, au nord-ouest de la commune, au pied du coteau ouvert vers le sud. Le sable est le
          résultat de l'érosion du coteau boisé.
        </p>
        <p>
          A Cravant les Coteaux, les vignes sont situées sur le coteau argilo-calcaire, à proximité du chai, et sur la
          terrasse argilo-siliceuse dominant l'ancien lit de la Vienne.
        </p>
      </div>
      <div id="bourgeon">
        <img src="montsoreau.jpg" alt="montsoreau" style=
        "border: 0px solid ; left: 766px; width: 241px; top: 280px; height: 235px;">
      </div>
      <div id="legende">
        le chateau de Montsoreau<br>
        photo: <a href="http://www.winephotos.com" rel="friend" target="_blank">Patrick Cronemberger</a>
      </div>
      <div id="texte3">
        <p>
          La présence du coteau au Nord de chaque vignoble protège efficacement les vignes des froids les plus vifs.
          Quant aux vallées de la Loire et de la Vienne, ce sont des portes d'entrée à l'air maritime.
        </p>
        <p>
          Le climat océanique pénètre par les deux vallées et apporte la douceur réputée à notre région.
        </p>
      </div>
      <div id="orchis">
        <img src="orchidee-016.jpg" alt="" border="0" height="133" width="100">
      </div>
      <div id="legendeorchis">
        Orchidée (Ophris abeille) présente sur nos terrains argilo-calcaires<br>
        (à protéger car en voie de disparition)<br>
        Photo: P et A Lorieux
      </div>
      <div style=
      "color: rgb(245, 245, 245); font-size: 15px; font-family: "Comic Sans MS"; font-style: normal; font-weight: 600; line-height: normal; font-size-adjust: none; text-decoration: none; background-color: rgb(139, 0, 0); text-align: center; visibility: visible; display: block; position: absolute; top: 202px; left: 0pt; width: 500px; height: 30px;"
      id="appellations">
        vins de St Nicolas de Bourgueil et Chinon
      </div>
      <dl id="menu"></dl>
      <ul class="noindent">
        <li style="font-weight: bold; color: rgb(0, 102, 0); font-size: 95%;">MENU
        </li>
        <li style="list-style: none">
          <dl>
            <dt onmouseover="javascript:montre('smenu1');">
              Le vignoble
            </dt>
            <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
              <ul>
                <li>
                  <a href="la%20situationtouraine.html">La situation</a>
                </li>
                <li>
                  <a href="terroirs.html">Les terroirs</a>
                </li>
                <li>
                  <a href="vigne.html">La vigne</a>
                </li>
                <li>
                  <a href="culture.html">La culture</a>
                </li>
                <li>
                  <a href="vendanges.html">Les vendanges</a>
                </li>
                <li>
                  <a href="vinif.html">La vinification</a>
                </li>
              </ul>
            </dd>
            <dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
              Le domaine
            </dt>
            <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
              <ul>
                <li>La situation
                </li>
                <li>
                  <a href="histoire.html">L'histoire</a>
                </li>
                <li>
                  <a href="portraits.html">Portraits</a>
                </li>
                <li>
                  <a href="exploitation.html">L'exploitation</a>
                </li>
              </ul>
            </dd>
            <dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
              Les vins
            </dt>
            <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
              <ul>
                <li>
                  <a href="menuseul.html">St Nicolas de Bourgueil</a>
                </li>
                <li>
                  <a href="menuseul.html">Chinon</a>
                </li>
                <li>
                  <a href="menuseul.html">Les millésimes</a>
                </li>
                <li>
                  <a href="menuseul.html">Sous-Menu 3.1</a>
                </li>
                <li>
                  <a href="menuseul.html">Sous-Menu 3.1</a>
                </li>
                <li>
                  <a href="menuseul.html">Sous-Menu 3.1</a>
                </li>
              </ul>
            </dd>
            <dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
              Revue de presse
            </dt>
            <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
              <ul>
                <li>
                  <a href="menuseul.html">Sous-Menu 4.1</a>
                </li>
                <li>
                  <a href="menuseul.html">Sous-Menu 4.1</a>
                </li>
              </ul>
            </dd>
            <dt onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();">
              Contacts
            </dt>
            <dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();">
              <ul>
                <li>
                  <a href="coordonnees.html">Nos coordonnées</a>
                </li>
                <li>
                  <a href="coordonnees.html">Courrier électronique</a>
                </li>
              </ul>
            </dd>
            <dt onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre();">
              Le tourisme
            </dt>
            <dd id="smenu6" onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre();">
              <ul>
                <li>
                  <a href="tourisme.html">à visiter</a>
                </li>
                <li>
                  <a href="menuseul.html">Où se loger</a>
                </li>
              </ul>
            </dd>
            <dt onmouseover="javascript:montre('smenu7');" onmouseout="javascript:montre();">
              Les collègues
            </dt>
            <dd id="smenu7" onmouseover="javascript:montre('smenu7');" onmouseout="javascript:montre();">
              <ul>
                <li>
                  <a href="menuseul.html">Muscadet</a>
                </li>
                <li>
                  <a href="menuseul.html">Touraine Azay le Rideau</a>
                </li>
                <li>
                  <a href="menuseul.html">Pouilly Fumé</a>
                </li>
                <li>
                  <a href="menuseul.html">Bourgueil</a>
                </li>
              </ul>
            </dd>
          </dl>
          <div id="basdepage">
            <table style=
            "background-color: rgb(238, 232, 170); width: 80%; text-align: left; margin-left: auto; margin-right: auto;"
            border="1" cellpadding="0" cellspacing="2">
              <tbody>
                <tr>
                  <td style="background-color: rgb(238, 232, 170);">
                    accueil
                  </td>
                  <td>
                    <a href="domaine.html">domaine</a>
                  </td>
                  <td>
                    <a href="cuvees.html">cuvées</a>
                  </td>
                  <td>
                    <a href="presse.html">presse</a>
                  </td>
                  <td>
                    <a href="mailto:infos@lorieux.fr">contact</a>
                  </td>
                  <td>
                    <a href="plansite.html">plan du site</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div id="conception">
            <div align="center">
              <div id="webmaster">
                site conçu par nos soins   <a href="http://www.nvu.com"><img src="madewithNvu80x15clear.png" alt=
                "Document made with Nvu" border="0"></a>       et optimisé pour le navigateur    <a href=
                "http://www.mozilla-europe.org/fr/products/firefox/"><img style=
                "border: 0px solid ; width: 109px; height: 35px;" src="firefox.gif" alt=""></a>
                <p>
                  <a href="http://validator.w3.org/check?uri=referer"><img src="valid-html401" alt="Valid HTML 4.01!"
                  border="0" height="31" width="88"></a>
                </p>
              </div>
              <address class="adresse"></address>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </body>
</html>

Sont modifiées les lignes (dans scite)
370 : fermeture de la balise </dl>
371: ajout de : <ul class="noindent">
374: ajout de <li style="list-style: none">
375: ajout de <dl>
et fermetures de balises en 543 <ul> et 544 <li>
Conclusion: mon menu n'a plus de mise en page.
Je reproduis ce bug sur l'ensemble de mes pages.

Qui m'expliquera?
NVU 1.0, Handcoder 0.3.0, Tidy (à partir de tidy_win.zip du 06/07/2004), scite 1.66

Kazé · Message par **Kazé** » 07 déc. 2005, 09:50

Décidément, il me faudra toujours une heure avant de m'y retrouver dans tes menus ! Mais bon, vu la tronche de mon site, et vu que ces menus sont inspirés d'Alsacréations, je vais éviter de critiquer. Tes menus utilisent donc une liste de définition :

Code : Tout sélectionner

<dl id="menu">

    <li style="font-weight: bold; color: rgb(0, 102, 0); font-size: 95%;">MENU</li>

    <dt onmouseover="..."> ... </dt>
    <dd id="..." onmouseover="..." onmouseout="..."> ... </dd>

    <dt onmouseover="..." onmouseout="..."> ... </dt>
    <dd id="..." onmouseover="..." onmouseout="..."> ... </dd>

    <dt onmouseover="..." onmouseout="..."> ... </dt>
    <dd id="..." onmouseover="..." onmouseout="..."> ... </dd>

</dl>

Je pense que la ligne <li ...>MENU</li> est une erreur. A ma connaissance, la balise <li> est nécessairement dans une liste <ol> ou <ul> ; et Tidy le "corrige" en créant une liste <ul>, ce qui casse toute la structure de ta fin de page.

Questions / suggestions :

N'utilise pas de <li> dans une liste <dl> ! Je suis surpris que Nvu puisse insérer une balise <li> dans une liste <dl> ; s'agit-il d'un bug de Nvu, ou bien as-tu trafiqué le code source à la main ?
Pourquoi ne pas utiliser une simple liste imbriquée, comme tout menu haut de gamme qui se respecte ?

L'avantage du menu en liste imbriquée "simple", c'est que tu n'as pas à recopier du code JavaScript pour chaque item : juste une feuille de style, un patch JavaScript pour IE (dans l'en-tête) et zou ! Plus simple = moins de risques d'erreur (il manque un "onmouseout" dans le premier <dt>).

Pour en revenir à HandCoder : normalement, Tidy ne perturbe jamais la structure d'une page faite avec Nvu, puisque celui-ci la construit à partir du DOM. S'il y a des pages créées avec Nvu (non "trafiquées") qui sont corrompues par Tidy, c'est à corriger dans HandCoder (comme pour le coup des balises <br /> dans les blocs <pre>).

Do-IT · Message par **Do-IT** » 07 déc. 2005, 12:18

Mon coeur balance entre le menu pop-open et celui là

Un menu que j'ai aussi adopté, mais faut quand meme mettre la main dans le cambouis.
Décidement on en apprend tout les jours,je vais me coucher moins bete ce soir.

Message par **chinon37** » 07 déc. 2005, 16:01

Merci à tous les deux.... Je regarderais cela demain... Je dois m'absenter... pour une raison pas très drôle.

Message par **chinon37** » 09 déc. 2005, 10:40

Mille excuses à vous deux du beotien que je suis!
La balise <li> était de mon fait et c'était bien elle qui perturbait tidy et le (la?) mettait en colère. En remplaçant par <dt> avec un style interne pour modifier l'aspect du mot menu par rapport à la liste de choix, tout va pour le mieux! (l'autodidacte a toujours plein de choses à apprendre!)

Je me pencherais vers vos différents exemples de menus... mais comme je n'ai pas le courage de le changer sur chaque page et que je n'ai pas réussi à faire fonctionner l'"include" en php

(le résultat est un emplacement blanc à la place du menu), le changement attendra un peu... (sauf si une bonne âme me fait la page php ( du tout cuit, quoi) on peut rêver

)
<hs> pour info, j'ai transforme mon fichier en fichier.php; j'ai fait un fichier menu.htm brut du code du menu sans body, doctype, html...; j'ai mis à la place du menu mon include("menu.htm"); en respectant l'arborescence du fichier ...et nada, le vide, le flop, le néant, la page blanche...)

</hs>

Kazé · Message par **Kazé** » 09 déc. 2005, 11:24

Je ne crois pas que ce soit hors-sujet... C'est même LA raison pour laquelle je tiens à pouvoir éditer des fragments HTML avec Nvu (i.e. des bouts de code HTML sans <html>, <head> ni <body>), via HandCoder bien sûr.

Sous Nvu on ne peut ni utiliser les cadres (framesets), ni appliquer une logique de modèles similaire à DW ; résultat : pour les menus, on ne peut qu'avoir recours à un

Code : Tout sélectionner

<?php include('menu.tpl'); ?>

où 'menu.tpl' contient le menu à inclure (une liste imbriquée dans mon cas).

Nota :

Contrairement à une page complète, l'extension 'tpl' du menu n'a aucune importance : on peut aussi bien utiliser html, php, txt, xml ou dieu sait quoi encore. Personnellement je n'aime pas utiliser html ni php comme extension pour un fragment HTML...
"include" fontionne en relatif par rapport à la page où il est appelé. Attention, il utilise une adresse de fichier : /menu.tpl fait référence à la racine du disque sur le serveur web, et non à la racine du site. Nuance !
Pour beaucoup d'hébergeurs, une page contenant du code PHP doit porter l'extension 'php' (et non html).
Pour faire fonctionner un "include" ou tout autre code serveur (PHP), il faut disposer d'un serveur PHP ! En clair, si on fait une prévisualisation avec Firefox :
- à l'adresse file:///C:/Monsite/index.php, on ne voit rien (le code PHP est ignoré) ;
- à l'adresse http://monsite.com/index.php, ça marche !
Pour travailler localement tout en utilisant du PHP, on peut installer EasyPHP sous Windows : c'est un serveur WAMP (Apache + MySQL + PHP sous Win32) prêt à l'emploi.

En espérant que ça t'aide un peu ! Le top serait qu'une bonne âme fasse un tutoriel pour inclure un menu en PHP avec HandCoder...

Message par **chinon37** » 09 déc. 2005, 12:01

Merci de toutes ces explications qui éclaire grandement ma lanterne de leur précision.
La grossière erreur que je faisais était... de vouloir faire un aperçu dans FF à partir de mon disque dur.
Je pense que je vais installer easyphp... La question me tarabuste d'ailleurs depuis ce matin après un passage à Framasoft.

kaz[b]é[/b] a écrit :En espérant que ça t'aide un peu !

Non, beaucoup!

Do-IT · Message par **Do-IT** » 09 déc. 2005, 13:08

S'installer un serveur sur son pc, pour previsualiser ces include, c'est un peu disproportionné.
Executer du php 'localement' ne va pas forcement te rendre service. Ton serveur n'aura jamais la meme config que le serveur de l'hebergeur, et chaque hebergeur a sa propre config. (sans parler des problemes win=>unix)
Moi je previsualise uniquement sur le net, apres avoir transferer les fichiers. L'inconvenient c'est que tu te tapes toujours des upload, l'avantage c'est que tu voies 'presque immediatement' si ton php fonctionne chez ton hebergeur.

Geckozone

HandCoder : extension Nvu pour Tidy et PHP

Qui est en ligne ?