[XHTML] Mise en place de doctype XHTML Strict : plein d'erreurs

**marcel marie** · 04/03/2009, 21h32

Bonjour,
Quand on lit les ouvrages de NEBRA, ENGELS ou que l'on suit d'autres conseilleurs éminents, il y a un code source minimal pour une page XHTML.
Alors je me suis dit "je vais faire bien, moi aussi," et là c'est la "catastrophe" tout au moins ... pour le moment.

J'ai une procédure qui réalise ce dont j'ai besoin et que l'on trouve à l'adresse http://touteladanse.com. On va se préoccuper de la fenêtre (frame dans le programme complet) en bas à droite qui contient elle-même une petite fenêtre correctement positionnée, à la fin. J'ai légèrement modifié mon script pour l'exemple test , mais l'essentiel est identique.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
  <meta http-equiv="Content-Language" content="fr"/>
  <title>Test de positionnement d'une fenêtre.</title>
  <meta name="Keywords" content="danse,salon,th&eacute;,repas,cours,orchestre,orchestres,date,dates,apr&egrave;s-midi,soir&eacute;e,dansante,dancing,fest_noz,dansant, danse de salon, th&eacute;dansant,bal r&eacute;tro,d&icirc;ner dansant, bal" lang="fr"/>
   <link rel="stylesheet" media="screen" type="text/css" title="Mon style Essai" href="style.css" />
</head>
 
 
<body>
<script type="text/javascript">
function showLayer(sName) {
        if (self.document.all)
                self.document.all[sName].style.visibility = "visible"   //hidden
        else
                self.document.layers[sName].visibility = "show"; //hide
}
function hideLayer(sName) {
        if (self.document.all)
                self.document.all[sName].style.visibility = "hidden"
        else
                self.document.layers[sName].visibility = "hide";
}
</script>
 
<div id="MonCalque" style="position: absolute; top: 400; left: 100; width: auto; height: auto">
  <table border="1">
    <tr>
      <td bgcolor="#7CFC00"><font color="#000000">On met ce qu'on veut</font></td>
    </tr>
    <tr>
      <td colspan="2" bgcolor="#7CFC00" bordercolor="#FF0000"><font color="#00FF00"><a style="color: red" href="javascript:hideLayer('MonCalque');"><b><p align="center">Cliquer ICI supprime cette Fenêtre </p></b></a></font></td>
    </tr>
  </table>
</div>
 
<h1>BIENVENUE sur VOTRE SITE, vous les danseurs et danseuses passionnés de danse de salon.</h1>
 
<p> A Très Bientôt. Merci.</p>
</body>
 
</html>

Premier point : Dès lors que je mets les deux lignes DOCTYPE et le html non simple, ma fenêtre s'affiche en haut à gauche ce qui ne correspnd pas au positionnement demandé. Comment faire pour un positionnement de la fenêtre comme je le souhaite?

Second point : si je passe le script à la moulinette de contrôle W3C, il reste de nombreuses erreurs ou warnings dont la plupart concernent les spécifications ou attributs (couleur de fond, du texte,des bordures) de <tr> et <td> qui peuvent être mises par HTML et par CSS mais apparemment pas par XHTML pur.
Pour ce faire, peut-on se passer de CSS?
Adresse de la vérification : http://www.touteladanse.com/essais/page_1.htm

Je vous remercie.
M.M.

**12monkeys** · 04/03/2009, 22h04

Bonsoir

Tout d'abord tu utilises des frames (déconseillés) avec un doctype strict, ceci à a base n'est déjà pas valide : si tu utilises des frames tu as un doctype précis à utliser, c'est le doctype Frameset http://xhtml.developpez.com/faq/?pag...#html_doctypes

Ensuite avec ton doctype strict il y a tout un nombre de choses qui ne sont plus autorisés : la balise font par exemple, les attributs tels que bgcolor par exemple.

Je te conseille vivement de lire ce tutoriel : http://a-pellegrini.developpez.com/tutoriels/xhtml/

Envoyé par marcel marie

Pour ce faire, peut-on se passer de CSS?

Bien au contraire, un des but du doctype strict est de séparer le contenu de la présentation : la gestion de la police, des couleurs... ne doivent plus être traités dans le document html (par font, bgcolor...) mais gérés par CSS...

**GihefBey** · 04/03/2009, 22h12

Bonjour,

Aïe, aïe, aïe.
Si ce que tu nous montres est du mieux, je suis curieux de voir ce qu'était le bien (-;

Avec CSS, il faut préciser des unités dans les dimensions : top: 400px; left: 100px;
Ici, ce sont des px qui ont été ajoutés.
Et puis, ce bloc possède un id, enlève le style de la balise et place-le dans la feuille de styles.

La bonne question n'est pas "Pour ce faire, peut-on se passer de CSS ?" mais plutôt "Comment passer aux CSS ?".**
Ton code est correspond à quelque chose d'archaïque (frameset [lui-même incorrect. Dans un frameset, aucun <body>, pas même un..], table, formatage en HTML) et c'est incompatible avec le XHTML que tu as choisi.
Passe au HTML et tu auras moins d'erreurs. Mais que ça ne t'empêche pas d'utiliser les balises correctement.

Ton script (Javascript) ne fonctionne pas chez moi.

**
Compare

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="MonCalque" style="position: absolute; top: 400px; left: 100px; width: auto; height: auto">
  <table border="1">
    <tr>
      <td bgcolor="#7CFC00">
        <font color="#000000">On met ce qu'on veut</font>
      </td>
    </tr>
    <tr>
      <td colspan="2" bgcolor="#7CFC00" bordercolor="#FF0000">
        <font color="#00FF00">
          <a style="color: red" href="javascript:hideLayer('MonCalque');">
            <b>
              <p align="center">Cliquer ICI supprime cette Fenêtre </p>
            </b>
          </a>
        </font>
      </td>
    </tr>
  </table>
</div>

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div id="MonCalque2">
  <p id="veut">On met ce qu'on veut</p>
  <p id="ferme">
    <a href="javascript:hideLayer('MonCalque2');">Cliquer ICI supprime cette fenêtre</a>
  </p>
</div>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#MonCalque2 {
  position: absolute;
  top: 200px;
  left: 200px;
  background-color : #fff;
  border : 4px double #000;
  }
#veut {
  margin : 0;
  font-family : Arial, Helvetica, sans-serif;
  color : #fff;
  background-color : #0131b4;
  border-bottom : 1px solid #fff;
  }
#ferme {
  margin : 0;
  padding : 1em;
  background-color : #7cfc00;
  border : 1px solid #f00;
  }
#ferme a {
  font-weight : bold;
  color : #f00;
  }

-

**marcel marie** · 05/03/2009, 08h14

Bonjour, (il y a les gens du soir et ceux du matin !!!)
J'ai bien pris en note vos remarques très pertinentes que je vais essayer bien entendu de mettre en oeuvre.
* pour le frameset je sais qu'il y a un problème et c'est pourquoi je laisse tel quel (pour le moment) le programme opérationnel dans mon application sur mon site, et qui est en HTML, puisque tout fonctionne comme je le souhaite. C'est pourquoi j'ai réalisé le petit programme indépendant joint à mes questions, qui se voulait être du XHTML sans frameset (c'est raté! mais grâce à vous ça va venir)
* j'y vais doucement, parce que je ne suis pas très doué et que je me pose souvent des questions, parfois inutiles. Dans le cas présent je mets les programmes au point en local dans l'environnement Easyphp. (Y a-t-il mieux?) et je me demande si là aussi je peux travailler sans ennui en XHTML. Je vais faire des tests d'approche.
* ce n'est pas évident de savoir ce qu'il est possible de faire en XHTML pur et par conséquent, de surcroît, de rester dans le cadre de ce forum où le CHEF semble prêt à taper sur les doigts si on parle CSS !! (mais j'ai peut-être mal lu? et je blague)
Comme, une fois n'est pas coutume!, il pleut en Bretagne je vais avancer sur ce sujet dans la journée.
Merci encore. Bonne journée et Bravo.
Marcel Marie

**marcel marie** · 05/03/2009, 19h18

Message à Gihelbey,
Grâce à l'exemple que vous m'avez fourni j'ai pu mettre la petite fenêtre d'information sur le site http://touteladanse.com, à la bonne place et grâce à CSS.
D'accord j'ai encore les frames mais on verra plus tard pour leur suppression.

Deux questions cependant, si je puis me permettre :
* la petite fenêtre n'est pas dimensionnée, peut-on le faire ?
* le bas de la fenêtre possède un saut de ligne avant et après le texte. Ce serait mieux sans ces sauts de ligne. Divers essais me font perdre couleur ou centrage !! lorsque ces deux lignes blanches disparaissent.

Merci, je vais clore la discussion.
MM.M.

**12monkeys** · 05/03/2009, 22h05

Envoyé par marcel marie

* la petite fenêtre n'est pas dimensionnée, peut-on le faire ?

Oui, tu peut utiliser width pour la largeur et height pour la hauteur :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
#MonCalque2 {
        position: absolute;
        top: 420px;
        left: 400px;
        background-color : #fff;
        border : 4px double #000;
        width: 200px;/* pour une largeur de 200px */
        height: 150px;/* pour une hauteur de 150px */
}

Envoyé par marcel marie

* le bas de la fenêtre possède un saut de ligne avant et après le texte. Ce serait mieux sans ces sauts de ligne. Divers essais me font perdre couleur ou centrage !! lorsque ces deux lignes blanches disparaissent.

C'est une question de marges du paragraphe, mets ceci dans ton css :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
p#ferme {
        margin: 0;
}

**12monkeys** · 05/03/2009, 19h38

Envoyé par marcel marie

* j'y vais doucement, parce que je ne suis pas très doué et que je me pose souvent des questions, parfois inutiles. Dans le cas présent je mets les programmes au point en local dans l'environnement Easyphp. (Y a-t-il mieux?) et je me demande si là aussi je peux travailler sans ennui en XHTML. Je vais faire des tests d'approche.

Easyphp est un bon programme, il y en a d'autres comme wamp... cependant je ne vois pas à quoi il te sert ici ? Ces programmes t'installent un environnement sur ton ordinateur qui te permet de simuler un serveur, notamment pour pouvoir utiliser php. Alors bien sur il te permet de travailler avec des pages XHTML, mais si tu ne fait que du html et du css tu n'en as pas besoin...

Un exemple : fais un fichier .html sur ton ordinateur et double clique dessus, ton navigateur ouvre cette page web... Insère y du php et renomme le en .php -> windows ne sais plus avec quoi l'ouvrir, et si tu l'ouvre quand même avec un navigateur ne sera pas interprété.

http://g-rossolini.developpez.com/tu.../web-debutant/

Envoyé par marcel marie

* ce n'est pas évident de savoir ce qu'il est possible de faire en XHTML pur

Tu peut déjà commencer par lire les tutoriels sur le sujet, ils sont très instructifs : http://xhtml.developpez.com/cours/#xhtml

Envoyé par marcel marie

Deux questions cependant, si je puis me permettre :
* la petite fenêtre n'est pas dimensionnée, peut-on le faire ?
* le bas de la fenêtre possède un saut de ligne avant et après le texte. Ce serait mieux sans ces sauts de ligne. Divers essais me font perdre couleur ou centrage !! lorsque ces deux lignes blanches disparaissent.

Désolé je ne vois pas de quoi tu parles, peut tu préciser quelle zone exactement.

Envoyé par marcel marie

Merci, je vais clore la discussion.

voir la citation précédente...

**marcel marie** · 05/03/2009, 21h44

Bonsoir,
Merci.
Effectivement je suis plus "programmeur" en php et mysql, d'où l'utilisation de easyphp pour la mise au point des programmes en local. C'est vrai, XHTML et CSS y sont bien acceptés. HTML (XHTML maintenant) et CSS ont et vont essentiellement me servir en présentation des résultats.

La petite "fenêtre" qui m'a amené à reposer deux questions est celle qui est en deux morceaux mi-bleu mi-vert en bas à droite (milieu) de la page d'accueil du site http://touteladanse.com.

Donc si réponses vous avez, et sans trop vous déranger ou vous prendre trop de temps, je suis preneur.
Bonne nuit. A demain!?
Marcel Marie

**GihefBey** · 05/03/2009, 23h16

Je ne vois pas non plus de quoi il est question.

Cependant essaye

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<div id="pop_info">
  <p id="ferme">
    <a href="javascript:hideLayer('pop_info');">Fermer cette fenêtre <span>x</span></a>
  </p>
  <div id="veut">
    <h3>Information</h3>
    <p>Aujourd'hui, le 05/03/2009 à Nort-sur-Erdre<br />
    l'orchestre Isabelle Debarre anime la danse.</p>
    <p>Mais il y a peut-être d'autres activités dansantes ailleurs.<br />
    Faites une recherche.</p>
  </div>
</div>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
#pop_info {
  position: absolute;
  top: 420px;
  left: 400px;
/*  width: 400px;  = largeur
  height: 400px; = hauteur */
  font-family : Arial, Helvetica, sans-serif;
  background-color : #fff;
  border : 4px double #000;
  }
#ferme {
  margin : 0;
  text-align : right;
  padding : .2em;
  background-color : #0131b4;
  border-bottom : 1px solid #fff;
  }
#ferme a {
  color : #fff;
  }
#ferme a:hover {
  color : #f00;
  }
#ferme a span {
  padding : 2px 6px;
  color : #f00;
  background-color : #fff;
  }
#veut {
  margin : 0;
  text-align : center;
  color : #e0d;
  background-color : #5f4;
  overflow : hidden;
  }
#veut p {
  margin : .5em 1em;
  }

Code Javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<script type="text/javascript">
function hideLayer(sName) {
  document.getElementById(sName).style.visibility = "hidden";
}
</script>

-

[XHTML] Mise en place de doctype XHTML Strict : plein d'erreurs

HTML

Vue hybride

Discussions similaires

Partager

Partager