[HTML/CSS/Jevascript] Validation d'un site agréée Hache&Fer

Validation d'un site agréée Hache&Fer [HTML/CSS/Jevascript] - HTML/CSS - Programmation

Marsh Posté le 09-03-2006 à 20:50:49    

Hello !
 
J'ai pas besoin d'une aide sur un point précis, mais plutôt d'une espèce de "validation" globale de ce que j'ai fait jusqu'à présent.  
J'ai donc fait un site en html/css, il y a sûrement du code qui peut être faux, à éviter, à remplacer, à améliorer, vu que c'est la première fois que je touche à ça :D
 
Donc si vous pouviez en gros me dire où ça chie, ou j'pourrais faire mieux (foutre une classe à la place d'un identifiant unique, regrouper des classes, changer une propriété, etc...) ce serait cool [:super chinois]
 
Pour le site c'est là : http://godbout.free.fr
 
Pour le code html :
 

Code :
  1. <!doctype html public "-//w3c//dtd html 4.0//en">
  2. <html>
  3. <head>
  4.  <title>L'Exode HachKaïen :-)</title>
  5.  <link rel="stylesheet" type="text/css" href="style.css"/>
  6. </head>
  7. <body>
  8.  <div id="page">
  9.   <a href="http://godbout.free.fr/index.html" class="headband"></a>
  10.   <div id="column1">
  11.    <div class="menu">
  12.     <h2>Catégories</h2>
  13.     <ul>
  14.      <li><a href="#">Site</a></li>
  15.      <li><a href="#">Musique</a></li>
  16.      <li><a href="#">Cuisine</a></li>
  17.      <li><a href="#">Voyage</a></li>
  18.     </ul>
  19.    </div>
  20.   </div>
  21.   <div id="share">
  22.    <h2>09 Mars 2006</h2>
  23.    <h3>Ma lettre préférée</h3>
  24.    <p>J'aime le zed.</p>
  25.    <div class="signature">00:35 - Ecrit par Guillaume dans <a href="#">Site</a></div>
  26.    <div class="comment"><a href="#">2 commentaire(s)</a></div>
  27.    <h2>08 Mars 2006</h2>
  28.    <h3>Toujours le problème de colonne</h3>
  29.    <p>C'est pas très esthétique ce problème de colonne. Va falloir trouver un bon moyen de régler ça.</p>
  30.    <div class="signature">18:47 - Ecrit par Guillaume dans <a href="#">Site</a></div>
  31.    <div class="comment"><a href="#">0 commentaire(s)</a></div>
  32.    <h2>07 Mars 2006</h2>
  33.    <h3>Ca commence à prendre forme</h3>
  34.    <p>C'est quand même pas trop tôt. Ca faitsait un bout de temps que j'étais sur ce truc, alors faudrait quand meme qu'au final ça donne un truc potable</p>
  35.    <p>Brec c'est cool</p>
  36.    <div class="signature">18:47 - Ecrit par Guillaume dans <a href="#">Site</a></div>
  37.    <div class="comment"><a href="#">3 commentaire(s)</a></div>
  38.    <h2>06 Mars 2006</h2>
  39.    <h3>Comment faire une bonne soupe</h3>
  40.    <p>Salut les enfants comment-allez vous?<br \>Aujourd'hui on va apprendre à faire une bonne soupe aux patates!</p>
  41.    <div class="signature">18:43 - Ecrit par Guillaume dans <a href="#">Cuisine</a></div>
  42.    <div class="comment"><a href="#">1 commentaire(s)</a></div>
  43.   </div>
  44.   <div id="column2">
  45.    <div class="menu">
  46.     <h2>Partages récents</h2>
  47.     <ul>
  48.      <li>
  49.       <a href="#">Comment faire une bonne soupe</a>
  50.      </li>
  51.      <li>
  52.       <a href="#">Ca commence à prendre forme</a>
  53.      </li>
  54.     </ul>
  55.    </div>
  56.    <div class="menu">
  57.     <h2>Commentaires récents</h2>
  58.     <ul>
  59.      <li>
  60.       <a href="#">C'est ou la recette ? par Guillaume</a>
  61.      </li>
  62.      <li>
  63.       <a href="#">Pas bon par Papa</a>
  64.      </li>
  65.      <li>
  66.       <a href="#">J'ai faim par Moi</a>
  67.      </li>
  68.     </ul>
  69.    </div>
  70.    <div class="menu">
  71.     <h2>Archives</h2>
  72.     <ul>
  73.      <li>
  74.       <a href="#">Mars 2006</a>
  75.      </li>
  76.      <li>
  77.       <a href="#">Février 2006</a>
  78.      </li>
  79.      <li>
  80.       <a href="#">Janvier 2006</a>
  81.      </li>
  82.     </ul>
  83.    </div>
  84.   </div>
  85.  </div>
  86. </body>
  87. </html>


 
Pour le css :  
 

Code :
  1. /*
  2. Balises  par défaut  
  3. */
  4. body
  5. {
  6. color:#1F1824;
  7. background-color:#EEE5F9;
  8. text-align:center;
  9. margin:0;
  10. margin-bottom:20px;
  11. padding:0;
  12. width:100%;
  13. height:100%;
  14. }
  16. /*
  17. Eléments de mise en page
  18. */
  19. #page
  20. {
  21. position:relative;
  22. width:780px;
  23. height:100%;
  24. margin-left:auto;
  25. margin-right:auto;
  26. border:1px solid #DCD5E4;
  27.  /*border:thin solid orange;*/
  28. }
  30. a.headband
  31. {
  32. background-color:#725693;
  33. width:100%;
  34. height:150px;
  35. background:url(images/headband.jpg) no-repeat fixed;
  36. display:block;
  37. }
  39. #column1
  40. {
  41. float:left;
  42. width:140px;
  43. height:100%;
  44. text-align:left;
  45. background-color:#725693;
  46.  /*border:thin solid red;*/
  47. }
  49. #column2
  50. {
  51. float:right;
  52. width:140px;
  53. /*height:100%;*/
  54. text-align:left;
  55. background-color:#C7B4DD;
  56.  /*border:thin solid yellow;*/
  57. }
  59. #share
  60. {
  61. float:left;
  62. text-align:left;
  63. width:430px;
  64. padding:0px 30px 35px 20px;
  65. height:100%;
  66. background-color:#EEE5F9;
  67. font-family:Verdana;
  68. font-size:12px;
  69. font-weight:normal;
  70.  /*border:thin solid green;*/
  71. }
  73. #share h2
  74. {
  75. font-size:16px;
  76. font-weight:bolder;
  77. padding-top:15px;
  78. padding-bottom:6px;
  79. border-bottom-style:solid;
  80. border-bottom-width:1px;
  81. }
  83. #share h3
  84. {
  85. font-size:14px;
  86. font-weight:bolder;
  87. }
  89. div.signature, div.comment
  90. {
  91. font-size:x-small;
  92. }
  94. div.comment
  95. {
  96. text-align:right;
  97. padding-bottom:15px;
  98. border-bottom-style:dashed;
  99. border-bottom-width:1px;
  100. }
  102. div.menu
  103. {
  104. float:left;
  105. width:100%;
  106. padding:20px 5px 0 5px;
  107. margin-bottom:5px;
  108.  /*border:thin solid black;*/
  109. }
  111. div.menu h2
  112. {
  113. font-family:Verdana;
  114. font-size:12px;
  115. padding-bottom:5px;
  116. border-bottom-style:solid;
  117. border-bottom-width:1px;
  118. }
  120. div.menu ul
  121. {
  122. list-style-type:none;
  123. font-family:Verdana;
  124. font-size:x-small;
  125. margin-left:5px;
  126. margin-top:-5px;
  127. }
  129. div.menu ul li
  130. {
  131. margin-top:5px;
  132. }
  134. a
  135. {
  136. color:#1F1824;
  137. text-decoration:none;
  138. }
  140. #column1 a:hover, #column2 a:hover, #share a:hover
  141. {
  142. text-decoration:underline;
  143. }


 
 
 
EDIT: J'ai pas géré les caractères spéciaux en html pour l'instant, ce sera fait en php. Pour ce qui est du css, j'me suis aidé des exemples de Gatsu35 (merci bcp [:super chinois]).


Message édité par godbout le 09-03-2006 à 20:51:46
Reply

Marsh Posté le 09-03-2006 à 20:50:49   

Reply

Marsh Posté le 10-03-2006 à 00:09:01    

tu as un <br \>
 
qui devrait être <br/>

Message cité 3 fois
Reply

Marsh Posté le 10-03-2006 à 00:15:15    

c'est quoi l'interet de ton #page ? il est équivalent à body.


---------------
brisez les rêves des gens, il en restera toujours quelque chose...  -- laissez moi troller sur discu !
Reply

Marsh Posté le 10-03-2006 à 00:22:48    

ça permet de pouvoir réduire ou agrandir l'affichage de son site...
 
dire si il veux en 100%, 800px etc....
 
EDIT: mais c'est vrai qu'on peux sans doute styler le body...mais bon si tu met le body en 800px, va y avoir quoi autour...le vide sidéral :pt1cable:  :pt1cable:


Message édité par xtof_83 le 10-03-2006 à 00:24:16
Reply

Marsh Posté le 10-03-2006 à 00:23:30    

Ah, ok


---------------
brisez les rêves des gens, il en restera toujours quelque chose...  -- laissez moi troller sur discu !
Reply

Marsh Posté le 10-03-2006 à 07:48:52    

nan en fait le body agit comme un élément (un DIV pour simplifier)
le bestion tu peux lui donner les dimensions que tu veux.
Si tu lui fous 800px de large, ben derrière c'est pas le vide sidéral que tu as mais HTML auquel tu peux coller une image de fond ou bien une couleur de fond.
 
Mais moi aussi j'englobe mon site d'un div #page car sous IE5.5 ca foire tout l'affichage (ce con ne reconnait pas le body en tant qu'élément stylable)

Reply

Marsh Posté le 10-03-2006 à 09:55:39    

xtof_83 a écrit :

tu as un <br \>
 
qui devrait être <br/>


Merci [:super chinois]
 
C'est pas catastrophique alors s'il n'y a que ça comme remarques pour le moment :D

Reply

Marsh Posté le 10-03-2006 à 10:07:51    

Ca caca

Code :
  1. <div id="column2"> 
  2. <div class="menu"> 
  3. <h2>Partages récents</h2> 
  4. <ul> 
  5. <li> 
  6. <a href="#">Comment faire une bonne soupe</a> 
  7. </li> 
  8. <li> 
  9. <a href="#">Ca commence à prendre forme</a> 
  10. </li> 
  11. </ul> 
  12. </div> 
  13. <div class="menu"> 
  14. <h2>Commentaires récents</h2> 
  15. <ul> 
  16. <li> 
  17. <a href="#">C'est ou la recette ? par Guillaume</a> 
  18. </li> 
  19. <li> 
  20. <a href="#">Pas bon par Papa</a> 
  21. </li> 
  22. <li> 
  23. <a href="#">J'ai faim par Moi</a> 
  24. </li> 
  25. </ul> 
  26. </div> 
  27. <div class="menu"> 
  28. <h2>Archives</h2> 
  29. <ul> 
  30. <li>  
  31. <a href="#">Mars 2006</a> 
  32. </li> 
  33. <li> 
  34. <a href="#">Février 2006</a> 
  35. </li> 
  36. <li> 
  37. <a href="#">Janvier 2006</a> 
  38. </li> 
  39. </ul> 
  40. </div> 
  41. </div>


Ca mieux, beaucoup mieux

Code :
  1. <dl id="menu2"> 
  2.     <dt>Partages récents</dt> 
  3.         <dd><a href="#">Comment faire une bonne soupe</a></dd> 
  4.         <dd><a href="#">Ca commence à prendre forme</a></dd> 
  5.     <dt>Commentaires récents</dt> 
  6.         <dd><a href="#">C'est ou la recette ? par Guillaume</a></dd> 
  7.         <dd><a href="#">Pas bon par Papa</a></dd> 
  8.         <dd><a href="#">J'ai faim par Moi</a></dd> 
  9.     <dt>Archives</dt> 
  10.         <dd><a href="#">Mars 2006</a></dd> 
  11.         <dd><a href="#">Février 2006</a></dd> 
  12.         <dd><a href="#">Janvier 2006</a></dd> 
  13. </dl>

Message cité 3 fois
Message édité par gatsu35 le 10-03-2006 à 10:09:27
Reply

Marsh Posté le 10-03-2006 à 10:21:11    

Ah ben zut alors, j'avais choppé ça sur un système de blog justement :D
Ok merci, je changerai :jap:

Reply

Marsh Posté le 10-03-2006 à 11:25:43    

xtof_83 a écrit :

tu as un <br \>
 
qui devrait être <br/>


Même pas, ça doit être <br> parce qu'il a un doctype HTML 4

Message cité 2 fois
Reply

Marsh Posté le 10-03-2006 à 11:25:43   

Reply

Marsh Posté le 10-03-2006 à 17:15:40    

FlorentG a écrit :

Même pas, ça doit être <br> parce qu'il a un doctype HTML 4


 
 
 :ange: Même pas regardé....:D

Reply

Marsh Posté le 13-03-2006 à 20:01:09    

xtof_83 a écrit :

tu as un <br \>
 
qui devrait être <br/>


 
 

FlorentG a écrit :

Même pas, ça doit être <br> parce qu'il a un doctype HTML 4


 
Plusieurs fois j'ai lu qu'il valait mieux utiliser le <br /> plutôt que <br> afin d'être plus proche des normes XHTML. Vous en pensez quoi ?

Message cité 1 fois
Reply

Marsh Posté le 13-03-2006 à 20:17:24    

gatsu35 a écrit :

Ca mieux, beaucoup mieux

Code :
  1. <dl id="menu2"> 
  2.     <dt>Partages récents</dt> 
  3.         <dd><a href="#">Comment faire une bonne soupe</a></dd> 
  4.         <dd><a href="#">Ca commence à prendre forme</a></dd> 
  5.     <dt>Commentaires récents</dt> 
  6.         <dd><a href="#">C'est ou la recette ? par Guillaume</a></dd> 
  7.         <dd><a href="#">Pas bon par Papa</a></dd> 
  8.         <dd><a href="#">J'ai faim par Moi</a></dd> 
  9.     <dt>Archives</dt> 
  10.         <dd><a href="#">Mars 2006</a></dd> 
  11.         <dd><a href="#">Février 2006</a></dd> 
  12.         <dd><a href="#">Janvier 2006</a></dd> 
  13. </dl>



 
J'ai besoin de pouvoir bouger les menus comme je veux, est-ce que c'est toujours aussi propre de faire :
 

Code :
  1. <dl id="menu2"> 
  2.     <dt>Partages récents</dt> 
  3.         <dd><a href="#">Comment faire une bonne soupe</a></dd> 
  4.         <dd><a href="#">Ca commence à prendre forme</a></dd> 
  5. </dl> 
  6. <dl id="menu2"> 
  7.     <dt>Commentaires récents</dt> 
  8.         <dd><a href="#">C'est ou la recette ? par Guillaume</a></dd> 
  9.         <dd><a href="#">Pas bon par Papa</a></dd> 
  10.         <dd><a href="#">J'ai faim par Moi</a></dd> 
  11. </dl> 
  12. <dl id="menu2"> 
  13.     <dt>Archives</dt> 
  14.         <dd><a href="#">Mars 2006</a></dd> 
  15.         <dd><a href="#">Février 2006</a></dd> 
  16.         <dd><a href="#">Janvier 2006</a></dd> 
  17. </dl>


 
?

Reply

Marsh Posté le 13-03-2006 à 21:25:29    

godbout a écrit :

Plusieurs fois j'ai lu qu'il valait mieux utiliser le <br /> plutôt que <br> afin d'être plus proche des normes XHTML. Vous en pensez quoi ?


 
 
On en pense  
 
que <br> c'est pour HTML
 
et <br /> pour le XHTML
 
Voilà, il n'y a pas a penser, c'est les normes ;)

Reply

Marsh Posté le 13-03-2006 à 21:54:04    

Bon, du coup j'ai gardé <br />, vous m'en voulez pas hein ? :D
 
Sinon j'ai changé les menu avec les dl/dt/dd. J'ai pas réussi à avoir exactement le même layout mais j'en suis pas loin, bon on va dire que ça va.  
 
Y a d'autres gros problèmes ou c'est potable ? Genre dans la partie du milieu avec les titres, les div, etc... ?

Reply

Marsh Posté le 13-03-2006 à 22:20:27    

Met un vrai Doctype  
 
et dans ton code tu as oublié un </a>

Reply

Marsh Posté le 16-03-2006 à 09:31:44    

Bon, ok, mais j'suis étonné qu'il n'y ait pas des trucs plus graves quoi :D

Reply

Marsh Posté le 16-03-2006 à 13:54:24    

gobout dans ton cas pour les menu j'aurai alors utilisé <ul><li> imbriqués
ensuite pour les bouger avec un peu de Javascript et basta
sache qu'un id c'est unique dans une page

Reply

Marsh Posté le 16-03-2006 à 13:59:29    

Tu rigoles ? :D
J'ai changé tous les <ul><li> en <dt><dd> comme tu le m'as dit :D
 
Oui, j'avais compris le principe [:ocube]
class pour le réutilisable, id pour les trucs uniques. T'as vu des problèmes de ce point de vue là ?

Reply

Marsh Posté le 16-03-2006 à 17:15:25    

uhmmm l'id ca sert à pleins pleins de choses
 
identifiant pour les CSS
ancre pour les adresse type pagE.html#ancre
identifiant pour le javascript (document.getElementById)
identifiant sur un input pour l'associé à un label
 
après je sèche :o

Reply

Marsh Posté le 10-04-2006 à 16:20:16    

Bon, cool [:ocube]
J'ai fait une autre page d'admin, que vous ne verrez pas :D
J'espère que mon html/css est toujours assez propre :o
Maintenant faut que j'attaque le php pour faire tout ça dynamiquement [:xfred4]

Reply

Marsh Posté le 12-05-2006 à 22:44:24    

J'ai installé Firefox pour voir un peu ce que ça donnait, y a tout qui est de travers :??:
J'capte vraiment pas, je change un truc y a tout qui fout le camp dans ie ou dans Firefoxe, et ça se ressemble pas du tout. Un truc par super à droite dans Firefox et tout à gauche dans ie, etc... [:mlc]


Message édité par godbout le 12-05-2006 à 22:44:58
Reply

Marsh Posté le 12-05-2006 à 22:49:10    

valide un peu ta CSS, une ligne en erreur de syntaxe est ignorée sous firefox, pas forcément sous IE

Message cité 1 fois

---------------
brisez les rêves des gens, il en restera toujours quelque chose...  -- laissez moi troller sur discu !
Reply

Marsh Posté le 12-05-2006 à 23:21:40    

gatsu35 a écrit :

Ca caca
[code=html]


 
+1  :jap:  


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
Reply

Marsh Posté le 12-05-2006 à 23:34:00    

kadreg a écrit :

valide un peu ta CSS, une ligne en erreur de syntaxe est ignorée sous firefox, pas forcément sous IE


Ca a l'air assez ok. Juste quelques "encouragements" :D
Apparemment ça vient des box qui sont pas gérées pareil sous ie et firefox, mais ça me fout un sacré bordel :/
Par exemple j'ai une colonne dans laquelle je tire un trait de 100% de la taille de la colonne, puis je fais un paddind à gauche et à droite. Sous ie nickel, sous firefox, le padding est seulement à gauche, alors qu'à droite ça sort même de la colonne :/

Reply

Marsh Posté le 14-05-2006 à 18:41:12    

Code :
  1. body
  2. {
  3.     color:#1F1824;
  4.     background-color:#EEE5F9;
  5.     text-align:center;
  6.     margin:0;
  7.     margin-bottom:20px;
  8.     padding:0;
  9.     width:100%;
  10.     height:100%;
  11. }


 
pas bon ton 2x margin car là tu définis 2x ton margin-bottom. Fais plutot

Code :
  1. margin: 0 0 20px;


et tu supprimes ta ligne margin-bottom comme ca
 
++


---------------
N'oubliez pas de mettre [RESOLU] dans le titre quand c'est fini - Pour poster vos sources : http://paste.clicksources.com/
Reply

Marsh Posté le 14-05-2006 à 20:32:28    

Ah, ouais, merci, cool.

Reply

Marsh Posté le 15-05-2006 à 17:56:49    

gatsu35 a écrit :

Ca caca

Code :
  1. blabla


Ca mieux, beaucoup mieux

Code :
  1. encoreplusdeblabla



 
ah ?

Reply

Marsh Posté le 15-05-2006 à 18:37:21    

Ben oui :/ tu reduis le chteumeuleu et les classes en te basant juste sur l'élément
de plus moi j'aime bien dl dt dd
même si sémantiquement parlant le bestiau est détourné au profit d'un menu

Message cité 1 fois
Reply

Marsh Posté le 15-05-2006 à 20:15:03    

gatsu35 a écrit :

Ben oui :/ tu reduis le chteumeuleu et les classes en te basant juste sur l'élément
de plus moi j'aime bien dl dt dd
même si sémantiquement parlant le bestiau est détourné au profit d'un menu


 
+1
C'est quand même beaucoup plus simple pour la maintenance, et ça permet de créer des sections même si le <dt> n'est pas visible.
 
C'est plus léger que les listes en cascade.


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
Reply

Marsh Posté le 16-05-2006 à 06:57:46    

je suis d accord dans le fond mais je fais plus allusion a l accessibilite qu a la semantique
c est peut etre parce que je connais quelqu un qui navigue sous lynx :/
 
 
 

Reply

Marsh Posté le 16-05-2006 à 07:09:05    

Niveau accessibilité c'est surement mieux que niveau sémantique, je teste mes sites avec un lecteur d'écran alors j'ai eu l'occasion de tester ^^

Message cité 1 fois

---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
Reply

Marsh Posté le 16-05-2006 à 09:27:08    

Arrêtez, vous me faites peur [:god]


Message édité par godbout le 16-05-2006 à 09:27:17
Reply

Marsh Posté le 16-05-2006 à 14:08:09    

Shinuza a écrit :

Niveau accessibilité c'est surement mieux que niveau sémantique, je teste mes sites avec un lecteur d'écran alors j'ai eu l'occasion de tester ^^


 
toutes mes confuses :sweat:  

Reply

Marsh Posté le 16-05-2006 à 22:36:47    

Dites moi que c'est pas vrai :ouch:
Je règle mes pbs avec Firefox, je fais un test de commentaire, et tout à coup mes apostrophes sont précédées d'un antislash, alors que ça fait 4 mois que bosse sur free et que j'ai jamais eu de pb. Ils auraient pu changer l'option du magic quote eux mêmes comme ça ? :??:
 
Bon, ça marchait "normalement" jusqu'au 11 mai, j'ai rien changé en ce qui concerne les escape_string, mais ça marche plus, super :D
Alors qu'apparemment le magic_quote_gpc a toujours été activé sur free :lol: :cry:
 
J'demande pas une solution, j'vais trouver quelque chose, mais juste une explication, j'comprends rien :cry:

Message cité 1 fois
Message édité par godbout le 16-05-2006 à 23:31:34
Reply

Marsh Posté le 17-05-2006 à 05:35:38    

godbout a écrit :

Dites moi que c'est pas vrai :ouch:
Je règle mes pbs avec Firefox, je fais un test de commentaire, et tout à coup mes apostrophes sont précédées d'un antislash, alors que ça fait 4 mois que bosse sur free et que j'ai jamais eu de pb. Ils auraient pu changer l'option du magic quote eux mêmes comme ça ? :??:
 
Bon, ça marchait "normalement" jusqu'au 11 mai, j'ai rien changé en ce qui concerne les escape_string, mais ça marche plus, super :D
Alors qu'apparemment le magic_quote_gpc a toujours été activé sur free :lol: :cry:
 
J'demande pas une solution, j'vais trouver quelque chose, mais juste une explication, j'comprends rien :cry:


Il faut que tu traites la chaine de texte à la main avec stripslashes();
 
Il me semble qu'il est recommandé de le faire avant l'appel des données dans la page dynamique.


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
Reply

Marsh Posté le 17-05-2006 à 09:21:33    

Merci ouais, j'avais trouvé [:super chinois]
Ce qui m'inquiète c'est que je comprends pas pourquoi ça déconne depuis apparemment 5 jours alors que j'ai rien changé de ce côté là :/

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed