XHTML : clear:both; deux colonnes.. et c la m....

XHTML : clear:both; deux colonnes.. et c la m.... - HTML/CSS - Programmation

Marsh Posté le 10-04-2006 à 11:02:34    

voila ! ce qui devait arriver arriva, depuis le début on me dit "oui le site doit etre en HTML 4.01 transitional".... puis suite à une réunion, la fameuse décision a été prise : "bah non finalement... on veut du XHTML 1.0 Strict !!!"...
 
... personnellement ça me pose pas trop de problèmes vu que ma syntaxe était déja tres proche du XHTML... simplement faut revoir les pages de façon à "séparer le contenu de la forme"... et par la même occasion... utiliser des div plutot que des tables... (chose que j'avais deja fait sur certaines pages assez simples... heureusement !)
 
donc en gros mis à par la homepage.. je n'aurais pas trop de probleme pour le moment à remettre tout en XHTML...
 
Le problème vient plus loin... ce sont les CSS... là c'est toujours le grand problème... ya toujours un truc qui cloche ! lol !
 
je vous explique mon probleme, j'ai deux colonnes (dans le conteneur central du site biensur), dans lesquelles se trouvent deux colonnes (une pour un image.. et une pour du texte) et pour couronner le tout j'ai une image (un lien) qui doit etre aligné avec celui de la colonne d'à côté !
 
En images ça donne ça : (j'ai laissé les repères de photoshop pour bien voir les alignements)
 
http://www.freedfromparis.com/temp/OR/_test/xhtml_home1.jpg
 
 
bon la bonne nouvelle c'est que j'y suis presque arrivé !! ça marche pas trop mal dans IE et FF sur pc... et sur Safari ça passe pas trop mal non plus....
 
Mais alors sur IE mac... c pas ça du tout ! et j'ose même pas essayer sur les autres ! et malheureusement je susi obligé de faire un truc qui marche absolument partout !
 
voici mon bout de code :
 

Code :
  1. <div id="nouveautes" style="margin-left:10px;">
  2.  <!-- debut nouveauté 1 -->
  3.  <div id="nouveaute_1" style="width:311px;height:114px;margin:left:10px;float:left;">
  4.   <a href="#" target="_self">
  5.   <img src="../img/1/images/home_image1.jpg" alt="image1" width="145" height="101"  style="margin-right:10px;float:left;" />
  6.   </a>
  7.   <p id="nouveautes_1_texte" style="width:145px;height:114px;float:left;">
  8.    <span class="texte_courant">
  9.    <strong>Votre fid&eacute;lit&eacute; r&eacute;compens&eacute;e ! </strong> <br />
  10.    Avec <strong>Mes points </strong>,&nbsp;Toto.com r&eacute;compense encore plus votre fid&eacute;lit&eacute;. C'est simple, chaque mois vous cumulez des points sans m&ecirc;me y penser !
  11.    </span>
  12.   </p>
  13.    <a href="#">
  14.    <img src="../img/1/boutons/bouton_en_savoir_plus.jpg" alt="En savoir plus" width="118" height="26" style="margin-left:155px;clear:both;" />
  15.    </a>
  16.  </div>
  17.  <!-- fin nouveauté 1 -->
  18.  <!-- debut nouveauté 2 -->
  19.  <div id="nouveaute_2" style="width:311px;height:114px;margin:left:10px;float:left;">
  20.   <a href="#">
  21.   <img src="../img/1/images/home_image2.jpg" alt="image1" width="145" height="101" style="margin-right:10px;float:left;" />
  22.   </a>
  23.   <p id="nouveautes_2_texte" style="width:145px;height:114px;float:left;">
  24.    <span class="texte_courant"><strong>Profitez de nos offres ! </strong> <br />
  25.    D&eacute;couvrez tout au long de l'ann&eacute;e, notre programme d'offres privil&egrave;ges.
  26.    Des offres exclusives n&eacute;goci&eacute;es pour vous, aupr&egrave;s de nos partenaires...</span>
  27.   </p>
  29.    <a href="#">
  30.    <img src="../img/1/boutons/bouton_en_savoir_plus.jpg" alt="En savoir plus" width="118" height="26" style="clear:both;margin-left:155px;" />
  31.    </a>
  33.  </div>
  34.  <!-- fin nouveauté 2 -->


 
PS :  j'ai (pour le moment) laissé les attribus "style" dans le code HTML... ça m'evite de switcher avec le fichier CSS.. je trouve que c une perte de temps monumentale.. en général une fois que ça bouge plus... je remets tout à sa place dans le fichier CSS
 
 
J'en profite pour poser une autre question :
Concernant les padding et les borders... quand je fais un "width:100px;padding5px;border:1px solid #FFFFFF" (par exemple)
au niveau du rendu... ma taille finale sera de width=110px ? width=112px? ou bien elle restera à 100px ?? parceque j'ai l'impression que parfois un padding ou un border va completement déformer mes marges et du coup ça rentre plus ! (c peut etre bon d'en etre sûr une bonne fois pour toutes)

Message cité 1 fois
Message édité par freed102 le 10-04-2006 à 11:06:36
Reply

Marsh Posté le 10-04-2006 à 11:02:34   

Reply

Marsh Posté le 10-04-2006 à 14:02:54    

Pour les marges des éléments tu as mis  

Code :
  1. * {
  2. margin:0;
  3. padding:0;
  4. }


 
dans ton CSS?

Reply

Marsh Posté le 10-04-2006 à 14:15:05    

oui ça y est toujours ! c le premier truc que je fais !
 

Code :
  1. /* CSS Document */
  2. /*-------------------------------------------------------------------------------------------------------*/
  3.                     /* Balises générales */
  4. *{
  5. border:0px solid #EEEEEE;
  6. margin: 0;
  7. padding: 0;
  8. }
  9. body {
  10. width:100%;
  11. font-family: Arial, Helvetica, sans-serif;
  12. font-size: 11px;
  13. color:#000000;
  14. font-weight:normal;
  15. }
  16. /*-------------------------------------------------------------------------------------------------------*/
  17.                     /* structure du site */
  18. #header {
  19. height: 85px;
  20. }
  21. img{
  22. border:0;
  23. margin:0;
  24. padding:0;
  25. }
  27. #page {
  28. width:100%;
  29. }
  30. #centre {
  31. position:relative;
  32. margin-left: 160px;
  33. }
  34. #menu_gauche {
  35. float:left;
  36. width: 150px;
  37. }
  39. #footer{
  40. position:relative;
  41. height:44px;
  42. border-top:3px solid #FF6600;
  43. margin-top:30px;
  44. clear:both;
  45. }
  46. /*-------------------------------------------------------------------------------------------------------*/
  47.                          /* titres */
  48. h1{
  49. margin:0;
  50. padding:0;
  51. }
  52. h2 {
  53. font-size: 16px;
  54. font-weight:bold;
  55. margin-top:0px;
  56. padding-bottom:5px;
  57. margin-left:3px;
  58. margin-bottom:10px;
  59. white-space:nowrap;
  60. border-bottom: 1px solid #EEEEEE;
  61. }
  63. h3{
  64. padding-top:20px;
  65. font-size:16px;
  66. font-weight:bold;
  67. }
  68. h4{
  69. margin-left:0;
  70. padding-top:10px;
  71. font-size:14px;
  72. font-weight:bold;
  73. color:#FF6600;
  74. }
  75. h5{
  76. margin-left:20px;
  77. padding-top:10px;
  78. padding-bottom:10px;
  79. font-size:12px;
  80. font-weight:bold;
  81. color:#666666;
  82. }
  84. /*-------------------------------------------------------------------------------------------------------*/
  85.                      /* Liens généraux*/
  86. /* Liens (sans class) */
  87. a:link{
  88. font-size: 11px;
  89. text-decoration:underline;
  90. font-weight:normal;
  91. color:#FF6600;
  92. }
  93. a:visited{
  94. font-size: 11px;
  95. text-decoration:underline;
  96. font-weight:normal;
  97. color:#FF6600;
  98. }
  99. a:hover{
  100. text-decoration: none;
  101. }
  102. a:active{
  103. text-decoration:none;
  104. color:#FF6600;
  105. font-weight:normal;
  106. }
  108. /* Liens (Libellés du catalogue) */
  109. a.lien_libelle:link {
  110. font-family: Arial, Helvetica, sans-serif;
  111. font-size: 14px;
  112. font-weight: bold;
  113. color:#000000;
  114. text-decoration:none;
  115. }
  116. a.lien_libelle:visited {
  117. font-family: Arial, Helvetica, sans-serif;
  118. font-size: 14px;
  119. font-weight: bold;
  120. color:#000000;
  121. text-decoration:none;
  122. }
  123. a.lien_libelle:hover {
  124. color:#000000;
  125. font-family: Arial, Helvetica, sans-serif;
  126. font-size: 14px;
  127. font-weight: bold;
  128. text-decoration:underline;
  129. }
  130. a.lien_libelle:active {
  131. font-family: Arial, Helvetica, sans-serif;
  132. font-size: 14px;
  133. font-weight: bold;
  134. text-decoration:none;
  135. color:#FF6600;
  136. }
  138. /*-------------------------------------------------------------------------------------------------------*/
  139.                       /* Textes généraux */
  140. .texte_courant {
  141. font-family: Arial, Helvetica, sans-serif;
  142. font-size: 11px;
  143.  color:#000000;
  144.  font-weight:normal;
  145. }
  147. .texte_noir_18px { font-family: Helvetica, Arial, sans-serif;
  148. font-size: 18px;
  149. }
  150. .texte_noir_14px { font-family: Helvetica, Arial, sans-serif;
  151. font-size: 14px;
  152. }
  153. .texte_orange_18px { font-family: Helvetica, Arial, sans-serif;
  154. font-size: 18px;color: #FF6600
  155. }
  157. .texte_courant_orange {
  158. font-family: Arial, Helvetica, sans-serif;
  159. font-size: 11px;
  160. color:#FF6600;
  161. }
  162. .texte_courant_orange_12px {
  163. font-family: Arial, Helvetica, sans-serif;
  164. font-size: 12px;
  165. color:#FF6600;
  166. }
  167. /*-------------------------------------------------------------------------------------------------------*/
  168.                     /* Navigation gauche */
  169. #nav_gauche{
  170. width:130px;
  171. list-style-position: inside;
  172. font-family:Arial, Helvetica, sans-serif;
  173. font-size:11px;
  174. font-weight:bold;
  175. display:inline;
  176. margin:0;
  177. }
  178. #nav_gauche li{
  179. list-style-position: inside;
  180. border-bottom: 1px solid #EEEEEE;
  181. padding-top:5px;
  182. padding-bottom:5px;
  183. list-style-type: none;
  184. }
  185. .nav_gauche_sous_menu{
  186. font-size:11px;
  187. margin-left:18px;
  188. text-decoration:none;
  189. }
  191. /* Liens pour la liste du menu gauche */
  192. #nav_gauche a:link{
  193. font-size:11px;
  194. text-decoration: none;
  195. font-weight:normal;
  196. white-space:nowrap;
  197. color:#000000;
  198. }
  199. #nav_gauche a:visited{
  200. font-size:11px;
  201. text-decoration: none;
  202. font-weight:normal;
  203. white-space:nowrap;
  204. color:#000000;
  205. }
  206. #nav_gauche a:hover{
  207. text-decoration:none;
  208. }
  209. #nav_gauche a:active{
  210. text-decoration:none;
  211. color:#FF6600;
  212. font-weight:normal;
  213. }
  215. .filet_menu_gauche{
  216. float:right;
  217. display:inline;
  218. }


Message édité par freed102 le 10-04-2006 à 14:16:19
Reply

Marsh Posté le 10-04-2006 à 14:37:44    

freed102 a écrit :

puis suite à une réunion, la fameuse décision a été prise : "bah non finalement... on veut du XHTML 1.0 Strict !!!"...


Question bête : pourquoi ?
Juste pour suivre la mode ? Y'a-t-il un réel besoin de suivre cette norme plutot qu'une autre dans ce cas de ce projet ?


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 10-04-2006 à 14:42:12    

bah c la charte du client.. c une grosse firme française et on va integrer une partie de leur site, et dans la doc c'est écrit qu'il est préférable de faire du XHTML 1.0 Strict (chose qui n'avait pas été précisée au départ)
 
Probablement pour rendre le site accessible sur des supports hors du commun dans le futur (mobiles, lecteurs d'ecrans, etc etc)

Message cité 1 fois
Reply

Marsh Posté le 10-04-2006 à 14:48:35    

freed102 a écrit :

Probablement pour rendre le site accessible sur des supports hors du commun dans le futur (mobiles, lecteurs d'ecrans, etc etc)


Justement. Aucun rapport : on peut très bien être très accessible et avoir une séparation fond/forme en HTML 4.01 bien conçu.
 
Le choix de XHTML Strict n'apporte ici aucun intérêt réel (je parle bien dans ce projet précis). L'intérêt est de séparer le contenu (HTML) de la mise en forme (CSS) afin de véhiculer ce contenu sur toutes les plateformes... et cet intérêt existe déjà en HTML 4.01
 
 
D'où ma question :) Je pense que c'est surtout par "mode", ils ont entendu parler de ce "super truc" qu'est le XHTML Strict et se disent que c'ets ce qu'ils leur faut.


Message édité par sibelius le 10-04-2006 à 15:02:18

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 10-04-2006 à 14:59:40    

bah moi je pense que vu l'envergure de la boite en question.. ils veulent tout simplement être véhiculés sur toutes les plateformes quelles qu'elles soient ! c pour ça que même le vieil IE sur Mac qui fait iech et bien ça doit marcher dessus ! lol !
 
à savoir que c un site qui existe deja et qui est utilisé par 3 millions de visiteurs
 
Vous allez me dire "Mais... pourquoi ont-ils mis un site pareil entre les mains de quelqu'un qui n'est pas une bete de CSS ?"
 
... je vous répondrai... "j'en sais rien ! mais quoi qu'il en soit... l'ancienne version du site c'est une catastrophe niveau code... je ne peux pas faire pire ! bien au contraire !"
 
... et je vais m'appliquer... c'est un challenge ! je connais les règles essentielles au XHTML (d'ailleurs c pour ça que j'ai commencé à taper du HTML très proche du XHTML) mes pages sont valides.. c déjà un bon point !! maintenant faut juste arriver à positionner des blocs les uns à coté des autres au pixel pres... et là c une autre paire de manche !! lol !

Reply

Marsh Posté le 10-04-2006 à 15:11:38    

Dis-leur qu'IEMac a vu son développement arrêté il y a 5 ans, et qu'il vaut mieux l'oublier...
 
C'est ce que fait yahoo (Browser Grades), le rendu sous IEMac se fait sans CSS...

Reply

Marsh Posté le 10-04-2006 à 15:19:50    

ouai je vais deja essayer de faire quelquechose de visible et si j'y arrive pas je vais leur envoyer ça dans les dents!  lol

Reply

Marsh Posté le 10-04-2006 à 15:57:10    

bon sinon pour en revenir au probleme principal... j'ai réussit regler le probleme.. en réduisant d'un pixel chaque paragraphe de texte... je pensais qu'avec les CSS on pouvait placer des objets au pixel pres et que 145(image)+10(marge)+145(texte) ça rentrait dans un bloc de 301 pixels... apparament non ! lol !
 
et puis d'ailleurs 301+10+301.. ça rentre pas dans 612pixels ! lol

Message cité 1 fois
Reply

Marsh Posté le 10-04-2006 à 15:57:10   

Reply

Marsh Posté le 10-04-2006 à 16:21:27    

freed102 a écrit :

et puis d'ailleurs 301+10+301.. ça rentre pas dans 612pixels ! lol


Si si, ça marche très bien :)
Il faut simplement bien comprendre le Modèle de Boites ;)
http://openweb.eu.org/articles/dimensions_boites_css/


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 10-04-2006 à 16:55:05    

oui si je lis bien, c bien ce que je disais, le padding elargit le bloc j'ai l'impression
 
dans un navigateur appliquant le modèle de boîte standard, les deux boîtes sont identiques : leur largeur apparente est égale à width+padding+border

Reply

Sujets relatifs:

Leave a Replay

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