Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
893 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [RESOLU] DIVs, IE et positionnement : je vais claquer un fusible ...

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[RESOLU] DIVs, IE et positionnement : je vais claquer un fusible ...

n°542671
Gilbert Go​sseyn
Dr Liara T'Soni
Posté le 17-10-2003 à 22:07:41  profilanswer
 

Bon, j'explique : j'utilise un script nommé Wordpress en version .71 pour gérer mon blog. l'interface de mon blog fait abondamment usage des DIVs (pas une table utilisée) et des CSS. Jusque la, tout va bien car j'arrive à faire ce que je veux ...
 
Du moins avec Mozilla car avec Internet Explorer, tout se retrouve en vrac : c'est à dire que le positionnement des DIVs en absolu ne fonctionne pas (le menu n'est plus à droite par exemple et en plus il n'a plus de fond).
 
Voici le CSS de mon blog :
 

Code :
  1. /* Default WordPress by Matthew Mullenweg http://photomatt.net
  2.     This is just a basic layout, with only the bare minimum defined.
  3.  Please tweak this and make it your own. :)
  4. */
  6. a {
  7. color: #069;
  8. }
  10. a:visited {
  11. color: #039;
  12. }
  14. a:hover {
  15. color: #39c;
  16. }
  18. acronym, abbr {
  19. border-bottom: 1px dashed #333;
  20. }
  22. acronym, abbr, span.caps {
  23. cursor: help;
  24. font-size: 90%;
  25. letter-spacing: .07em;
  26. }
  28. blockquote {
  29. border-left: 5px solid #ccc;
  30. margin-left: 1.5em;
  31. padding-left: 5px;
  32. }
  34. body {
  35. font-family: Verdana, Arial, Helvetica, sans-serif;
  36. margin: 0;
  37. background-color: #E2EAF7;
  38. background-image: url("/b2-img/fond-base.jpg" );
  39. background-position: top left;
  40. background-repeat: no-repeat;
  41. font-size: 12px;
  42. }
  44. /*
  45. div {
  46. white-space: normal;
  47. font-size: 12px;
  48. }
  49. */
  51. h2 {
  52. border-bottom: 2px solid #3a6ea5;
  53. margin-bottom: 5px;
  54. font-size: 16px;
  55. font-weight: bolder;
  56. }
  58. h3 {
  59. font-size: 14px;
  60. font-weight: bold;
  61. border: 1px dashed #000;
  62. background-color: #eef;
  63. margin-left: -20px;
  64. margin-right: 0px;
  65. margin-top: 2px;
  66. margin-bottom: 2px;
  67. padding: 3px;
  68. }
  70. img {
  71. border: 0px;
  72. }
  74. p, li {
  75. line-height: 130%;
  76. font-size: 12px;
  77. }
  79. .b2calendarcell {
  80. color: #000;
  81. }
  83. .b2calendaremptycell {
  84. }
  86. .b2calendarheadercell {
  87. background: #808080;
  88. color: #ccc;
  89. }
  91. .b2calendarlinkpost {
  92. color: #f00;
  93. text-decoration: none;
  94. }
  96. .b2calendarmonth {
  97. color: #aaa;
  98. }
  100. .b2calendarrow {
  101. color: #0f0;
  102. }
  104. .b2calendartable {
  105. background: #fff;
  106. border: 1px solid #000;
  107. }
  109. .b2calendartoday {
  110. color: #00f;
  111. }
  113. .cit {
  114. border: 1px dashed #000;
  115. background-color: #fff;
  116. padding: 3px;
  117. margin-left: 15px;
  118. margin-right: 15px;
  119. }
  121. .credit {
  122. font-size: 9px;
  123. text-align: center;
  124. border-top: 1px dashed #000;
  125. border-right: 1px dashed #000;
  126. width: 200px;
  127. }
  129. .feedback {
  130. text-align: right;
  131. color: #ccc;
  132. font-size: 10px;
  133. }
  135. .meta {
  136. color: #000;
  137. font-size: 9px;
  138. }
  140. .meta a {
  141. color: #000;
  142. font-size: 9px;
  143. }
  146. .texte-info {
  147. font-size: 12px;
  148. }
  150. .commentaires {
  151. font-size: 12px;
  152. margin-top: "px;
  153. }
  155. .postage {
  156. border-top : dashed 1px #000;
  157. border-left: dashed 1px #000;
  158. border-bottom: solid 1px #E2EAF7;
  159. border-right: solid 1px #E2EAF7;
  160. padding: 5px;
  161. background-image: url("/b2-img/fond-content-2.png" );
  162. background-repeat: repeat;
  163. }
  165. .storytitle {
  166. font-size: 14px;
  167. }
  169. .storytitle a {
  170. text-decoration: none;
  171. font-size: 14px;
  172. }
  174. .storycontent {
  175. font-size: 12px;
  176. }
  178. #content {
  179. margin: 0 165px 0 200px;
  180. }
  182. #header {
  183. background-color: #3a6ea5;
  184. background-image: url("/b2-img/fond-logo.gif" );
  185. background-repeat: repeat-x;
  186. height: 54px;
  187. margin: 0;
  188. padding: 0px;
  189. }
  191. #header a {
  192. color: #fff;
  193. text-decoration: none;
  194. }
  196. #header a:hover {
  197. color: #ccc;
  198. }
  200. #menu {
  201. background-color: #3a6ea5;
  202. background-image: url("/b2-img/fond-menu.png" );
  203. background-repeat: repeat;
  204. border-left: 1px dashed #000;
  205. border-bottom: 1px dashed #000;
  206. padding-bottom: 10px;
  207. padding-right: 4px;
  208. position: absolute;
  209. right: 0;
  210. top: 65px;
  211. width: 150px;
  212. }
  214. #menu form {
  215. margin: 0 0 0 13px;
  216. }
  218. #menu input {
  219. background-color: #ccc;
  220. border: 1px solid #000;
  221. }
  223. #menu ul {
  224. color: #ccc;
  225. font-variant: normal;
  226. font-weight: bold;
  227. list-style-type: none;
  228. margin: 0;
  229. padding-left: 3px;
  230. }
  232. #menu ul ul {
  233. font-variant: normal;
  234. font-weight: normal;
  235. line-height: 100%;
  236. list-style-type: none;
  237. margin: 0;
  238. padding: 0;
  239. text-align: left;
  240. }
  242. #menu ul ul li {
  243. line-height: 115%;
  244. padding-left: 11px;
  245. list-style-type: none;
  246. }
  248. #menu ul ul li a {
  249. color: #fff;
  250. height: 13px;
  251. text-decoration: none;
  252. list-style-type: none;
  253. }
  255. #menu ul ul li a:hover {
  256. border-bottom: 1px solid #ccc;
  257. }


 
 
J'ai également modifié une fonction incluse qui sert à parser à l'affichage le contenu de la BDD de manière à éviter d'utiliser comme auparavant la balise <></p> à l'intérieur d'une balise <div></div>, le validator du W3C n'aimant pas cela ...
Voici la fonction :
 

Code :
  1. function wpautop($pee, $br=1) {
  3. $pee = preg_replace('|<br />\s*<br />|', "\n\n", $pee);
  5. $pee = preg_replace("/(\r\n|\n|\r)/", "\n", $pee); // cross-platform newlines  
  7. // $pee = preg_replace("/\n\n+/", "\n\n", $pee); // take care of duplicates
  9. $pee = preg_replace('/\n?(.+?)(\n\n|\z)/s', "<br />$1\n", $pee); // make paragraphs, including one at the end  
  11. $pee = str_replace('<br /></p>', '</p>', $pee);
  13. $pee = str_replace('<p><p>', '<p>', $pee);
  15. $pee = str_replace('</p></p>', '</p>', $pee);
  17. $pee = preg_replace('!<p>\s*(</?(?:table|ul|ol|li|pre|select|form|blockquote)> )!', "$1", $pee);
  19. $pee = preg_replace('!(</?(?:table|ul|ol|li|pre|select|form|blockquote)> )\s*</p>!', "$1", $pee);
  21. if ($br) $pee = preg_replace('|(?<!<br /> )\s*\n|', "<br />\n", $pee); // optionally make line breaks
  23. $pee = preg_replace('!(</?(?:table|ul|ol|li|pre|select|form|blockquote|p)> )<br />!', "$1", $pee);
  25. $pee = preg_replace('|<p><blockquote([^>]*)>|i', "<blockquote$1><p>", $pee);
  27. $pee = str_replace('</blockquote></p>', '</p></blockquote>', $pee);
  29. $pee = preg_replace('/&([^#])(?![a-z]{1,8};)/', '&#038;$1', $pee);
  33. return $pee;


 
Qui peut m'indiquer comment je pourrais faire pour forcer Internet Explorer à positionner correctement les DIVs ?


Message édité par Gilbert Gosseyn le 18-10-2003 à 11:29:57

---------------
Tant que la couleur de la peau sera plus importante que celle des yeux, nous ne connaitrons pas la paix. ● L'écriture, c'est la mémoire du futur. ● Mods FO4
mood
Publicité
Posté le 17-10-2003 à 22:07:41  profilanswer
 

n°542685
sibelius
Vous êtes sûr ?
Posté le 17-10-2003 à 22:34:07  profilanswer
 

Gilbert Gosseyn a écrit :

de manière à éviter d'utiliser comme auparavant la balise <></p> à l'intérieur d'une balise <div></div>, le validator du W3C n'aimant pas cela ...


Ben c'est nouveau ça  :heink:  
Les blocs acceptent très bien les blocs.


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°542694
Gilbert Go​sseyn
Dr Liara T'Soni
Posté le 17-10-2003 à 23:18:24  profilanswer
 

Sauf que les paragraphes sont peut des blocs mais les DIVs sont eux des boites ...
 
Fais le test toi même et tu verras ce que te dira le validateur W3 ... (une erreur par balise <p></p> )


---------------
Tant que la couleur de la peau sera plus importante que celle des yeux, nous ne connaitrons pas la paix. ● L'écriture, c'est la mémoire du futur. ● Mods FO4
n°542698
sibelius
Vous êtes sûr ?
Posté le 17-10-2003 à 23:24:22  profilanswer
 

les div sont des blocs comme les autres, ils peuvent contenir n'importe quel autre bloc.
Ton erreur vient d'ailleurs


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°542704
sibelius
Vous êtes sûr ?
Posté le 17-10-2003 à 23:28:39  profilanswer
 

PS : je viens de tester quand-même (même si je ne sais pas pourquoi) : "This Page Is Valid XHTML 1.0 Strict!"
 
Le code :
<div><p>toto</p></div>


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°542711
Gilbert Go​sseyn
Dr Liara T'Soni
Posté le 17-10-2003 à 23:41:38  profilanswer
 

Alors qpourquoi il me chiait une erreur à chaque utilisation de cette foutue balise <p> ? J'aimerais bien le savoir ...
 
Mais cela ne me renseigne pas pourquoi IE décide d'un coup de claquer un fusible ainsi ...


---------------
Tant que la couleur de la peau sera plus importante que celle des yeux, nous ne connaitrons pas la paix. ● L'écriture, c'est la mémoire du futur. ● Mods FO4
n°542717
sibelius
Vous êtes sûr ?
Posté le 17-10-2003 à 23:45:51  profilanswer
 

Comme dit, ton erreur vient d'ailleurs (un formulaire peut-être), mais à cette heure-ci je n'ai pas du tout envie de lire tout ton code en détail.
 
Pour IE, je suppose que tu connais déjà ce lien : http://openweb.eu.org/articles/dimensions_boites_css/


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°542727
Gilbert Go​sseyn
Dr Liara T'Soni
Posté le 17-10-2003 à 23:55:26  profilanswer
 

Bon, j'ai remodifié la fonction pour remettre les balises <p></p> et ce n'est pas mieux. Donc l'erreur n'est pas la. Maintenant, faut la trouver ...


---------------
Tant que la couleur de la peau sera plus importante que celle des yeux, nous ne connaitrons pas la paix. ● L'écriture, c'est la mémoire du futur. ● Mods FO4
n°542764
cerel
Posté le 18-10-2003 à 01:29:05  profilanswer
 

Il me semble que j'ai trouve ton erreur ...
 
C'est normal que tu petes un fusible ...  
 
C'est une petite erreur de rien du tout ...
Regarde dans ton css, le style de classe .commentaires ...
tu ne remarques rien de bizzare ??
 

Citation :


.commentaires {
font-size: 12px;
margin-top: "px;
}  


 
Et oui, c'est tout con, mais il faudrait mettre un chiffre :P
 
En tout cas je te rassure je ne l'ai pas vu tout de suite, j'ai du passer par une methode de "barbares" ... :P
 
J'ai rajoute une ligne a la fin de ton css
" /*  */ "
Ensuite j'ai commencer par mettre un "/*" devant les styles, comme cela tous les styles jusqu'a la ligne de fin etaient mis en commentaire. Ensuite il ne restait plus qu'a reinclure les styles les uns apres les uns (ou 2 par 2). Avec cette methode "barbare" tu peux voir ou ca coince :P.
 
Pour une fois que c'est IE qui ne tolere pas les erreurs, oui d'habitude IE est bcp plus laxiste que les autres navigateurs en ce qui concerne les erreurs d'html... :P
 
Allez a plouche.


Message édité par cerel le 18-10-2003 à 01:31:45
n°542795
Gilbert Go​sseyn
Dr Liara T'Soni
Posté le 18-10-2003 à 11:09:01  profilanswer
 

:ouch: ! Je corrige cela de suite ! Merci :jap: (clavier de portable :/).


---------------
Tant que la couleur de la peau sera plus importante que celle des yeux, nous ne connaitrons pas la paix. ● L'écriture, c'est la mémoire du futur. ● Mods FO4
mood
Publicité
Posté le 18-10-2003 à 11:09:01  profilanswer
 

n°542797
Gilbert Go​sseyn
Dr Liara T'Soni
Posté le 18-10-2003 à 11:15:23  profilanswer
 

Merci, c'était bien cela ...


---------------
Tant que la couleur de la peau sera plus importante que celle des yeux, nous ne connaitrons pas la paix. ● L'écriture, c'est la mémoire du futur. ● Mods FO4
n°542799
sibelius
Vous êtes sûr ?
Posté le 18-10-2003 à 11:31:19  profilanswer
 

Tu vois, je te l'avais dit ! LOL


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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [RESOLU] DIVs, IE et positionnement : je vais claquer un fusible ...

 

Sujets relatifs
[VC++] ouvrir une requete au lieu d'une table...?<<<RESOLUformatage de texte avec include[résolu]
[résolu]approximation... (débutant)[VB] "Erreur 2004" ? [RESOLU]
[C++][Résolu]Recupérer la taille d'un fichier de plus de 4 GoAfficher une info bulle sur un lien [resolu]
[c++] vector sort (Résolu)ORACLE PL/SQL Déclaration de tigger [RESOLU]
[TOMCAT] Déclencher l'appel de la méthod init d'une servlet. [RESOLU]Faire 1 recherche sur 1 frame dans 1 autre frame [Résolu, code déposé]
Plus de sujets relatifs à : [RESOLU] DIVs, IE et positionnement : je vais claquer un fusible ...

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.072 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR