page adaptée à tous les ecrans

Le premier forum francophone sur l'éditeur de pages Web multiplateforme (Linux, Mac OS X, Windows) qui monte… KompoZer, héritier de Nvu, permet de créer vos pages Web graphiquement (wysiwyg) sans aucune connaissance du langage HTML.

Modérateur : chinon37

Invité

page adaptée à tous les ecrans

Message par Invité »

Bonjour
J'ai un site avec NVU et je voudrais s'avoir comment adapter mes pages sur toutes les grandeures d'ecran
Aparement ma page apparait plus petite
Merci pour une éventuelle info. :lol:
mon site www.poteriebochaton.fr

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1
chinon37
Animal mythique
Messages : 5319
Inscription : 21 mars 2005, 10:17

Message par chinon37 »

bonjour,

J'ai légèrement modifiée la page pour permettre le centrage de celle-ci afin de rendre le contenu moins "décalé"
modif de la feuille de style:
J'ai ajouté:

Code : Tout sélectionner

body {
  text-align: center;
  background-color: #d8a235;
}#fond {
  width: 756px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
et j'ai ajouté une balise <div> qui contient l'ensemble du site.
J'ai appliqué à ce <div> l'id #fond.
Ci dessous le code source de la page pour avoir le résultat:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
  <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">
    <meta name="keywords" content=
    "poterie,ceramique,artisan,artisanat,Dieulefit,Bochaton,Beauchaton,Francoise Laverdure,Françoise laverdure,Françoise Laverdure,terre vernissée,vernisse,grès,gres,faience,dieulefit,artisan, fontaine,fontaines, grès émaillé,grès emaille,émail, poli enfumé,vaisselle,,">
    <meta name="description" content=
    "Poterie Christian Bochaton,Francoise Laverdure,création de ceramique a Dieulefit en Drome provencale">
    <meta name="Identifier-URL" content="http://www.poteriebochaton.fr">
    <meta name="Author" content="Christian Bochaton" lang="fr">
    <meta name="revist-after" content="7 days">
    <meta name="robots" content="all">
    <title>
      Poterie Bochaton Accueil
    </title>
    <script language="javascript" type="text/javascript">
<!--
    /*////////////////////////////////////////////////////////////////////
    / Diaporama (Version 1.0 - 31/07/00) /
    / Copyright Applicanet (1999/2000) /
    / WEB: http://applicanet.com /
    / Mail: webmestre@applicanet.com /
    / !!! Tous droits réservés. Aucune partie de ce script ne peut êtr e /
    / modifiée sans la permission préalable de l'auteur. /
    ////////////////////////////////////////////////////////////////////*/
    var img1=new Image(200,150);img1.src="image/accueil-magasin-diapo.gif";
    var img2=new Image(200,150);img2.src="image/accueil-diapo-goutte-d'eau.gif";
    var img3=new Image(200,150);img3.src="image/accueil-diapo-gratin-bleu.gif";
    var img4=new Image(200,150);img4.src="image/accueil-diapo-pers-oiseau.gif";
    var img5=new Image(200,150);img5.src="image/accueil-diapo-gratin-bleu-fr.gif";
    var img6=new Image(200,150);img6.src="image/accueil-diapo-ensemble-blanc.png";
    var img7=new Image(200,150);img7.src="image/accueil-diapo-boutique-fr.gif";
    var img8=new Image(200,150);img8.src="image/accueil-diapo-salle-de-bain.gif";
    /* etc ...etc ... rajouter autant de lignes que d'images, (200,150) sont les dimensions des images en pixels, la hauteur puis la largeur, à définir.*/
    Total = 8; /*Nombres d'images, à définir*/
    Temporisation = 1; /*Temporisation du diaporama en secondes, à définir.*/
    /* Ne rien éditer sous cette ligne ...!
    //////////////////////////////////////////////////////////////////
    */
    Temps = Temporisation * 1000;
    Flag = false;
    //-->
    </script>
    <link type="text/css" rel="stylesheet" id="webdeveloper-outline-table-cells" href=
    "Poterie%20Bochaton%20Accueil_fichiers/outline_table_cells.css">
  </head>
  <body linkifytime="15" linkified="0" linkifying="false">
    <div id="fond">
      <table style="text-align: left; width: 755px; height: 353px;" border="1" cellpadding="2" cellspacing="2">
        <tbody>
          <tr>
            <td style="vertical-align: top; text-align: left; background-color: rgb(187, 140, 46);">
              <table style="text-align: left; height: 459px; width: 728px;" border="1" cellpadding="2" cellspacing="2">
                <tbody>
                  <tr>
                    <td style="width: 80px;" align="undefined" valign="undefined" width="83">
                      <img style="width: 80px; height: 107px;" alt="" src=
                      "Poterie%20Bochaton%20Accueil_fichiers/fontaine-personnage-medaill.gif" height="100" width=
                      "75"><br>
                    </td>
                    <td style="width: 79px;" align="undefined" valign="undefined" width="83">
                      <img style="width: 80px; height: 107px;" alt="" src=
                      "Poterie%20Bochaton%20Accueil_fichiers/nichoir-medaillon.gif" height="100" width="75"><br>
                    </td>
                    <td style="width: 80px;" align="undefined" valign="middle" width="83">
                      <img style="width: 80px; height: 107px;" alt="" src=
                      "Poterie%20Bochaton%20Accueil_fichiers/cafetire-medaillon.gif" height="100" width="75"><br>
                    </td>
                    <td style="text-align: left; vertical-align: top; width: 459px;" width="511">
                      <font size="+3">Christian Bochaton       Poterie<br>
                       <a href="#Accueuil_Haut" name="Accueuil_Haut" id="Accueuil_Haut"></a>   Françoise Laverdure<br>
                      2 rue du bourg 26220 Dieulefit</font><br>
                    </td>
                  </tr>
                  <tr>
                    <td style="background-color: rgb(192, 192, 192); text-align: center;" width="83">
                      <a href="http://www.poteriebochaton.fr/index.html">Accueil</a><br>
                    </td>
                    <td style="text-align: center; background-color: rgb(204, 204, 204);" width="83">
                      <a href="http://www.poteriebochaton.fr/site/presentation.html">Présentation</a><br>
                    </td>
                    <td style="background-color: rgb(192, 192, 192); text-align: center;" width="83">
                      <a href="http://www.poteriebochaton.fr/site/atelier.html">Atelier</a><br>
                    </td>
                    <td align="undefined" valign="undefined" width="511">
                      <table style="text-align: left; width: 435px; height: 26px;" border="1" cellpadding="2"
                      cellspacing="2">
                        <tbody>
                          <tr>
                            <td style="text-align: center; width: 80px; background-color: rgb(204, 204, 204);">
                              <big><a style="font-weight: bold;" href=
                              "http://www.poteriebochaton.fr/site/Nos-Produits.html">nos Produits</a></big><br>
                            </td>
                            <td style="background-color: rgb(192, 192, 192); text-align: center; width: 80px;">
                              <a href="http://www.poteriebochaton.fr/site/Nos-Invit%E9s.html">nos Invités</a><br>
                            </td>
                            <td style="text-align: center; width: 79px; background-color: rgb(204, 204, 204);">
                              <small><a href="mailto:christian.bochaton@tele2.fr">M'envoyer un mail</a></small>
                            </td>
                            <td style="text-align: center; width: 143px; background-color: rgb(192, 192, 192);">
                              <span style="font-weight: bold;">Tel : 04-75-46-30-10</span><br>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="2" bgcolor="#C0C0C0" width="83">
                      <a href="http://www.poteriebochaton.fr/site/nos-March%E8s-et-Expo.html">Nos marchés et
                      expositions</a>
                    </td>
                    <td style="text-align: center; background-color: rgb(204, 204, 204);" valign="undefined" width=
                    "83">
                      <small><a href="http://www.poteriebochaton.fr/site/Aller-%E0-Dieulefit.html"><span style=
                      "text-decoration: underline;">Aller à Dieulefit</span></a></small><br>
                    </td>
                    <td colspan="3" style="background-color: rgb(214, 128, 0); text-align: left;" width="511">
                                                                                                 <big style=
                      "font-weight: bold;"><big>Accueil</big></big><br>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="4" bgcolor="#999999" height="53" width="511">
                      <img alt="" src="Poterie%20Bochaton%20Accueil_fichiers/texte-Bienvenue-sur-le-site-de.png"
                      height="50" width="600">
                    </td>
                  </tr>
                  <tr>
                    <td colspan="4" height="73" width="511">
                      <table style="height: 265px; width: 780px; margin-left: 0px;" border="0" cellpadding="2"
                      cellspacing="2" width="100%">
                        <tbody>
                          <tr>
                            <td height="157" valign="top" width="202">
                              <center>
                                <a href="#" onmouseover="Flag = true;" onmouseout="Flag = false;"><img src=
                                "Poterie%20Bochaton%20Accueil_fichiers/accueil-magasin-diapo.gif" name="Vue" id="Vue"
                                border="0" height="150" width="200"></a>
                              </center><script language="javascript" type="text/javascript">
<!--
                              var IncremenTation = 1;
                              function Afficher(){
                              if (!document.images){
                              alert("Votre navigateur ne supporte pas un SCRIPT inclus dans cette page Web \nVous devriez en télécharger une version plus récente.");
                              return;
                              }
                              if (!Flag) {
                              document.images.Vue.src=eval("img"+IncremenTation+".src")}
                              if (IncremenTation < Total)
                              {
                              IncremenTation = IncremenTation + 1;
                              }
                              else
                              {
                              IncremenTation = 1;}
                              setTimeout("Afficher()",Temps);
                              }
                              Afficher();
                              //-->
                              </script>
                            </td>
                            <td height="157" valign="top" width="496">
                              <center style="height: 2px;">
                                <a href="#" onmouseover="Flag = true;" onmouseout="Flag = false;"><br></a>
                              </center>
                              <table style="width: 564px; margin-left: 0px; height: 118px;" border="0" cellpadding="2"
                              cellspacing="2" width="100%">
                                <tbody>
                                  <tr>
                                    <td colspan="2" bgcolor="#999999" height="118" width="413">
                                      <img alt="" src=
                                      "Poterie%20Bochaton%20Accueil_fichiers/Texte-Francoise-et-christian.png" height=
                                      "42" width="550">
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                            </td>
                          </tr>
                          <tr>
                            <td colspan="2" height="64" width="202">
                              <table style="width: 100%; height: 480px;" border="0" cellpadding="2" cellspacing="2">
                                <tbody>
                                  <tr>
                                    <td align="center" height="429" valign="top" width="377">
                                      <br>
                                      <img style="width: 325px; height: 433px;" alt="" src=
                                      "Poterie%20Bochaton%20Accueil_fichiers/accueil-francoise-retouche.jpg"><br>
                                    </td>
                                    <td style=
                                    "width: 307px; height: 429px; text-align: center; vertical-align: bottom;">
                                      <table style="text-align: left; width: 100%; height: 439px;" border="0"
                                      cellpadding="2" cellspacing="2">
                                        <tbody>
                                          <tr>
                                            <td style="height: 275px;">
                                              <img style="width: 257px; height: 343px;" alt="" src=
                                              "Poterie%20Bochaton%20Accueil_fichiers/accueil-christian.jpg">
                                            </td>
                                          </tr>
                                          <tr>
                                            <td style="height: 158px; text-align: right; vertical-align: top;">
                                              <table style=
                                              "text-align: left; height: 100px; width: 220px; margin-left: 27px;"
                                              border="0" cellpadding="2" cellspacing="2">
                                                <tbody>
                                                  <tr>
                                                    <td style=
                                                    "height: 71px; text-align: center; background-color: rgb(204, 204, 204); width: 210px;">
                                                    Dernière mise à<br>
                                                      jour :8 FEVRIER 2007
                                                      <table style=
                                                      "text-align: left; height: 72px; margin-left: 7px; width: 197px;"
                                                      border="1" cellpadding="2" cellspacing="2">
                                                        <tbody>
                                                          <tr>
                                                            <td style=
                                                            "text-align: center; background-color: rgb(204, 102, 0); width: 180px;">
                                                            Raccourci pour voir les dernières mise à jour:<br>
                                                              <a href=
                                                              "http://www.poteriebochaton.fr/site/Nos-Produits.html#1">Nos
                                                              Produits</a><br>
                                                              <a href=
                                                              "http://www.poteriebochaton.fr/site/Aller-%E0-Dieulefit.html#1">
                                                              Aller à Dieulefit</a><br>
                                                              <a href=
                                                              "http://www.poteriebochaton.fr/site/nos-March%E8s-et-Expo.html#1">
                                                              Nos marchés et Expositions</a><br>
                                                              <br>
                                                              <a style="color: rgb(0, 0, 0);" href=
                                                              "http://www.poteriebochaton.fr/site/nos-March%E8s-et-Expo.html">
                                                              <br></a>
                                                            </td>
                                                          </tr>
                                                        </tbody>
                                                      </table><br>
                                                    </td>
                                                  </tr>
                                                  <tr>
                                                    <td style="text-align: center; width: 210px;">
                                                      <img alt="" src=
                                                      "Poterie%20Bochaton%20Accueil_fichiers/logo-poterie-bochaton.gif"
                                                      height="95" width="100">
                                                    </td>
                                                  </tr>
                                                </tbody>
                                              </table><br>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>Pour circuler sur notre site,cliquer en haut de page
                                    </td>
                                  </tr>
                                  <tr>
                                    <td height="13"></td>
                                    <td style="background-color: rgb(195, 146, 48);" align="left" bgcolor="#999999"
                                    height="13"></td>
                                  </tr>
                                  <tr>
                                    <td colspan="2" align="center" height="30">
                                      <table border="1" cellpadding="2" cellspacing="2" width="100">
                                        <tbody>
                                          <tr>
                                            <td align="center" bgcolor="#C36100">
                                              Voir aussi
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td colspan="2" align="center">
                                      <table style="margin-left: 0px; height: 66px; width: 691px;" border="0"
                                      cellpadding="2" cellspacing="2" width="100">
                                        <tbody>
                                          <tr>
                                            <td height="93" width="76">
                                              <a href="http://www.maison-de-la-terre.org/" target="_blank"><img alt=""
                                              src="Poterie%20Bochaton%20Accueil_fichiers/Logo-Maison-Terre.jpg" height=
                                              "77" width="132"></a>
                                            </td>
                                            <td height="93" width="61"></td>
                                            <td height="93" width="51">
                                                <a href="http://www.tourisme-paysdieulefit.com/" target=
                                              "_blank"><img alt="" src=
                                              "Poterie%20Bochaton%20Accueil_fichiers/Logo-office-tourisme.gif" height=
                                              "60" width="60"></a>
                                            </td>
                                            <td height="93"></td>
                                            <td height="93" width="191">
                                              <a href="http://www.pays-de-dieulefit.com/" target="_blank"><img alt=""
                                              src=
                                              "Poterie%20Bochaton%20Accueil_fichiers/logo-pays%2520-de%2520-Dieulefit.jpg"
                                              height="43" width="200"></a>
                                            </td>
                                            <td height="93" width="91">
                                              <a href="http://codplatre.free.fr/" target="_blank"><img alt="" src=
                                              "Poterie%20Bochaton%20Accueil_fichiers/logo-Devaud.jpg" height="50"
                                              width="100"></a>
                                            </td>
                                          </tr>
                                          <tr>
                                            <td height="53" width="76">
                                              <a href="http://www.nvu.com/"><img alt="Document fait avec Nvu" src=
                                              "Poterie%20Bochaton%20Accueil_fichiers/fait_avec_Nvu.png" border="0"></a>
                                            </td>
                                            <td height="53" width="61"></td>
                                            <td height="53"></td>
                                            <td height="53"></td>
                                            <td height="53">
                                              <a href="http://www.poteriepichetto.com/" target="_blank"><img style=
                                              "width: 141px; height: 106px;" alt="" src=
                                              "Poterie%20Bochaton%20Accueil_fichiers/logo-pichetto.jpg"></a>
                                            </td>
                                            <td height="53">
                                              <a href="http://www.expo-bernard-besson.com/" target="_blank"><img alt=""
                                              src="Poterie%20Bochaton%20Accueil_fichiers/logo_site-bernard.gif" height=
                                              "75" width="76"></a>
                                            </td>
                                            <td align="center" height="53">
                                              <a href="#Accueuil_Haut"><button type="reset"><a href=
                                              "#Accueuil_Haut"></a><a href="#Accueuil_Haut"></a><a href=
                                              "#Accueuil_Haut"></a><a href="#Accueuil_Haut"></a><a href=
                                              "#Accueuil_Haut">Haut de page</a></button></a>
                                            </td>
                                          </tr>
                                          <tr>
                                            <td height="43" width="76">
                                              <a href="http://www.xiti.com/xiti.asp?s=198131" target=
                                              "_top"><script language="JavaScript1.1" type="text/javascript">
<!--
                                              Xt_param = 's=198131&p=';
                                              Xt_r = document.referrer;
                                              Xt_h = new Date();
                                              Xt_i = '<img width="39" height="25" border=0 ';
                                              Xt_i += 'src="http://logv27.xiti.com/hit.xiti?'+Xt_param;
                                              Xt_i += '&hl=' + Xt_h.getHours() + 'x' + Xt_h.getMinutes() + 'x' + Xt_h.getSeconds();
                                              if(parseFloat(navigator.appVersion)>=4)
                                              {Xt_s=screen;Xt_i += '&r=' + Xt_s.width + 'x' + Xt_s.height + 'x' + Xt_s.pixelDepth + 'x' + Xt_s.colorDepth;}
                                              document.writeln(Xt_i + '&ref='+Xt_r.replace(/[<>"]/g, '').replace(/&/g, '$')+'" title="Mesurez votre audience">');
                                              //-->
                                              </script><img src="Poterie%20Bochaton%20Accueil_fichiers/hit.gif" title=
                                              "Mesurez votre audience" border="0" height="25" width="39">
                                              <noscript>Mesure d'audience ROI frequentation par <img width="39" height=
                                              "25" border="0" src=
                                              "http://logv27.xiti.com/hit.xiti?s=198131&p=&" title=
                                              "Mesurez votre audience"></noscript></a>
                                            </td>
                                            <td height="43" width="61"></td>
                                            <td height="43"></td>
                                            <td height="43"></td>
                                            <td height="43"></td>
                                            <td height="43"></td>
                                            <td height="43"></td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>
et la feuille de style "outline_table_cells.css:

Code : Tout sélectionner

* Generated by KompoZer */
table {
  border-collapse: separate ! important;
}td, th {
  border: 1px solid #ff0000 ! important;
}table table td, table table th {
  border-color: #00ff00 ! important;
}table table table td, table table table th {
  border-color: #0000ff ! important;
}table table table table td, table table table table th {
  border-color: #ff0000 ! important;
}table table table table table td, table table table table table th {
  border-color: #00ff00 ! important;
}table table table table table table td, table table table table table table th {
  border-color: #0000ff ! important;
}body {
  text-align: center;
  background-color: #d8a235;
}#fond {
  width: 756px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
quelques remarques:
- mise en page par tableaux: à éviter, les tableaux étant réservés à des données tabulaires. Il ne voius viendrait pas à l'idée de faire un courrier avec un tableur comme excel ou opencalc?
cette mise en page par tableau empèche de faire un site adaptable à la taille de l'écran.
- de nombreux styles (mise en page, texte) sont déclarés en styles internes et directement appliqués à chaque balise: il eut été mieux d'utiliser la feuille de style: un style est défini une seule fois quelque soit le nombre d'éléments qui recoivent le même style.


Ce n'est pas un jugement de valeur pour le site qui est sympa
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Invité

Message par Invité »

Merci
je vais essayer de faire les modifs :roll:
:lol:

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 3 invités