Décalage à droite.(résolus)

Décalage à droite.(résolus) - HTML/CSS - Programmation

Marsh Posté le 02-07-2005 à 11:27:41    

Bonjour à tous,
 
j'ai un souci avec des décalages à droite. Avec firefox tout va très bien.
Là où j'ai un problème c'est avec Internet explorer, (qui devrait être interdit).
J'en deviens chèvre à force de manipulation, mais je ne vois pas comment faire.
Quand Internet Explorer avec les favoris affichés ne donnent par exemples :
Nocario. 1. Parfait
Nocario 2. Parfait
Nocario 3. Décalée à droite.
pietricaggio 1. Décalée à droite
pietricaggio 2. Décalée à droite
pietricaggio 3. Parfait  
 
 
Internet Explorer sans les favoris.
 
Nocario. 1 décalé à droite
Nocario 2 décalées à droite
Nocario 3. Décalée à droite. Mais sous menu.
pietricaggio 1. Décalée à droite sous le menu
pietricaggio 2. Décalée à droite sous le menu
pietricaggio 3 décalées à droite sous le menu
 
si quelqu'un avait quelques petites indications sur ce problème, je l'en remercie.
Julien
http://ile.chrispat.free.fr/nocario1.php
 

Code :
  1. /***********************************************/
  2. /* CONTENEUR */
  3. /***********************************************/
  4. body {
  5. padding:0px;
  6. margin:0px
  7. }
  8. #template {
  9. position: absolute;
  10. font: 12px arial, helvetica, verdana, sans-serif;
  11. font: 'times new roman', times, serif;/* ajouté */
  12. color: #000;
  13. margin: 0px 7%;/* 7 % */
  14. width: 86%;/* 86*/
  15. border-top: 5px solid #333;
  16. background: #c00;
  17. font-size: small;
  18. line-height: 160%;
  19. }
  21. /***********************************************/
  22. /* ENTETE */
  23. /***********************************************/
  24. #header {
  25. background: #c00c;
  26. border: 1px solid #000;
  27. height: 70px;
  28. text-align: center;
  29. color: #000;
  30. font-weight: bold;
  31. font-size: 2em;
  32. margin: 0px;
  33. }
  34. #logomairie {
  35. float: left;
  36. margin-left: 140px;
  37. background-image: url(design/mairie.gif);
  38. }
  40. #testamaura {
  41. float: right;
  42. margin-right: 150px;
  43. background-image: url(design/logog.gif);
  45. }
  46. #chataig {
  47. float: right;
  48. margin-right: 15px;
  49. }
  51. #afficheg {
  52. position: absolute;
  53. left: 0px;
  54. width: 140px;
  55. height: 70px;
  56. background-color: #fc0;
  57. font: 12px arial, helvetica, verdana, sans-serif;
  58. font-weight: bold;
  59. }
  60. #affiched {
  61. position: absolute;
  62. right: 0px;
  63. width: 150px;
  64. height: 70px;
  65. background-color: #fc0;
  66. font: 12px arial, helvetica, verdana, sans-serif;
  67. font-weight: bold;
  68. }
  69. /***********************************************/
  70. /* MENU GAUCHE */
  71. /***********************************************/
  72. #menu{
  73. position: absolute;
  74. width: 116px;
  75. left: 0px;
  76. background-color: #fc0;
  77. color: black;
  78. font: 12px arial, helvetica, verdana, sans-serif;
  79. font-weight: bold;
  80. }
  81. #menu ul{
  82. list-style-type: none;
  83. margin: 0px;
  84. padding: 0px;
  85. }
  86. #menu li a{
  87. margin: 0px;
  88. padding: 5px;
  89. display: block;
  90. height: 1em;
  91. color: #000;
  92. text-decoration: none;
  93. }
  94. #menu a:hover{
  95. background-color: #add8e6;
  96. }
  97. #menu p{
  98. font-weight: bold;
  99. font-size: 1em;
  100. border: 1px solid #6495ED;
  101. background-color: #6495ed;
  102. color: #fff;
  103. text-align: center;
  104. margin: 0px;
  105. }
  106. /* propriétés communes à l'ensemble des 4 coins */
  107. #hautgauche, #hautdroit, #basgauche, #basdroit {
  108. height: 19px; width: 19px;
  109. background-repeat: no-repeat;
  110. font-size:1px; /* correction d'un bug IE */
  111. }
  112. /* propriétés spécifiques à chaque coin */
  113. #hautgauche {
  114. background: url(hautgauche.gif);
  115. }
  116. #hautdroit {
  117. float: right;
  118. background: url(hautdroit.gif);
  119. }
  120. #basgauche {
  121. background: url(basgauche.gif);
  122. }
  123. #basdroit {
  124. float: right;
  125. background: url(basdroit.gif);
  126. }
  127. #contenu p {
  128. color: white;
  129. margin: 0em; /*gestion des espaces interparagraphes */
  130. }
  132. /***********************************************/
  133. /* MENU DROITE */
  134. /***********************************************/
  135. #Rmenu{
  136. position: absolute;
  137. right: 0px;
  138. width: 116px;
  139. background-color: #fc0;
  140. color: black;
  141. font: 12px arial, helvetica, verdana, sans-serif;
  142. font-weight: bold;
  143. }
  144. #Rmenu ul{
  145. list-style-type: none;
  146. margin: 0px;
  147. padding: 0px;
  148. }
  149. #Rmenu li a{
  150. margin: 0px;
  151. padding: 5px;
  152. display: block;
  153. height: 1em;
  154. color: #000;
  155. text-decoration: none;
  156. }
  157. #Rmenu a:hover{
  158. background-color: #add8e6;
  159. }
  160. #Rmenu p{
  161. font-weight: bold;
  162. font-size: 1em;
  163. border: 1px solid #6495ED;
  164. background-color: #6495ed;
  165. color: #fff;
  166. text-align: center;
  167. margin: 0px;
  168. }
  170. /***********************************************/
  171. /* PARTIE CENTRALE */
  172. /***********************************************/
  173. #content {
  174. background: #fc6;
  175. margin-left: 116px;
  176. margin-top: 0px;
  177. margin-right: 116px;
  178. margin-bottom: 0px;
  179. padding: 10px;
  180. border: 2px solid green;
  181. }
  182. /***********************************************/
  183. /* PIED DE PAGE */
  184. /***********************************************/
  185. #footer {
  186. background: #f00;
  187. border-top: 2px dotted #ddd;
  188. padding: 5px 0;
  189. text-align: center;
  190. margin-top: 2px;
  191. }
  192. #footer p{
  193. margin: 0px;
  194. padding: 0px;
  195. }
  196. /********?????***************************************/
  197. /* GALERIE PHOTO */
  198. /***********************************************/
  199. dl.gallery{
  200. float:left;
  201. border: 1px solid #000;
  202. background-color: #93f;
  203. width: 102px;
  204. text-align: center;
  205. padding: 5px;
  206. margin: 1em;
  207. }
  208. .gallery dt { font-weight: bold; }
  210. .gallery dt img
  211. {
  212. border: 1px solid #000;
  213. width: 100px;
  214. height: 100px;
  215. }
  217. .gallery dd
  218. {
  219. margin: 0;
  220. padding: 0;
  221. }
  222. .clearboth
  223. {
  224. clear: both;
  225. }
  226. a img/* supprime la bordures bleu autour des vignettes*/
  227. {
  228. border: none ;
  229. }


Message édité par julien2b le 05-07-2005 à 16:36:55
Reply

Marsh Posté le 02-07-2005 à 11:27:41   

Reply

Marsh Posté le 03-07-2005 à 16:59:20    

Salut
A mon avis tu te devrais pas te prendre la tete
Fais un tableau de 3 colonnes cela n'alourdira pas ton code.

Reply

Marsh Posté le 03-07-2005 à 17:18:35    

julien2b a écrit :

Bonjour à tous,
 
j'ai un souci avec des décalages à droite. Avec firefox tout va très bien.
Là où j'ai un problème c'est avec Internet explorer, (qui devrait être interdit).
J'en deviens chèvre à force de manipulation, mais je ne vois pas comment faire.
Quand Internet Explorer avec les favoris affichés ne donnent par exemples :
Nocario. 1. Parfait
Nocario 2. Parfait
Nocario 3. Décalée à droite.
pietricaggio 1. Décalée à droite
pietricaggio 2. Décalée à droite
pietricaggio 3. Parfait  
 
 
Internet Explorer sans les favoris.
 
Nocario. 1 décalé à droite
Nocario 2 décalées à droite
Nocario 3. Décalée à droite. Mais sous menu.
pietricaggio 1. Décalée à droite sous le menu
pietricaggio 2. Décalée à droite sous le menu
pietricaggio 3 décalées à droite sous le menu


Je présumme que tu parlais du menu de gauche, je ne vois rien de spécial avec IE6SP1, c'est identique au rendu de Firefox ou Opera, par contre la partie centrale est méchamment borkée
 
Et ton source HTML pourrait être pas mal amélioré accessoirement [:petrus75]


Message édité par masklinn le 03-07-2005 à 17:19:44

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 03-07-2005 à 18:29:59    

dmc2, si tu as d'autres bêtises à dire tu ... ne peux pas :D


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 04-07-2005 à 11:35:49    

Bonjour à tous,  
 
Et pourtant j'ai toujours ce décalage à droite quand je regarde avec Internet Explorer, à je me comprends vraiment pas de quoi cela pourrait venir.
J'ai sp2 et Internet Explorer six.
Merci pour votre aide.

Reply

Marsh Posté le 05-07-2005 à 15:07:04    

toujours personnes pour me donner un coup de main ?.
Je commence vraiment à désespérer...
Cordialement

Reply

Marsh Posté le 05-07-2005 à 15:14:14    

essaie de donner des largeurs fixes à tes éléments, car la tu ne le fais que sur le menu, choisis une largeur genre 770px de large pour le site, et calcules avec les menus, les marges et cie pour arriver à ca.
 
Car sous ie, si le centre ne prenait pas plus de place qu'il ne faudrait, ton site s'afficherait bien.
 
Sinon, je peux essayer de te faire un squelette qui fontionne sur la majorité des navigateurs.


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 05-07-2005 à 15:19:55    

Bonjour,
Le problème c'est que j'ai déjà essayé avec un squelette pris sur le alsacreations.com, mais des que je veux mettre ma galerie d'images, mes images se décalent vers la droite et je n'arrive pas à les empêcher de déborder.
Si tu veux bien essayer de faire un squelette à partir de ce que j'ai déjà fait, j'en serais très heureux.  
Encore merci.

Reply

Marsh Posté le 05-07-2005 à 15:31:29    

J'ai refait un peu le code. En spécifiant la largeur du site. Mais rien n'y fait.

Code :
  1. /***********************************************/
  2. /* CONTENEUR */
  3. /***********************************************/
  4. body {
  5. padding:0px;
  6. margin:0px
  7. }
  8. #template {
  9. position: absolute;
  10. font: 12px arial, helvetica, verdana, sans-serif;
  11. font: 'times new roman', times, serif;/* ajouté */
  12. color: #000;
  13. width: 750px;
  14. left: 50%;
  15. margin-left: -375px;
  16. border-top: 5px solid #333;
  17. background: #c00;
  18. font-size: small;
  19. line-height: 160%;
  20. }
  22. /***********************************************/
  23. /* ENTETE */
  24. /***********************************************/
  25. #header {
  26. background: #c00c;
  27. border: 1px solid #000;
  28. height: 70px;
  29. text-align: center;
  30. color: #000;
  31. font-weight: bold;
  32. font-size: 2em;
  33. margin: 0px;
  34. }
  35. #logomairie {
  36. float: left;
  37. margin-left: 140px;
  38. background-image: url(design/mairie.gif);
  39. }
  41. #testamaura {
  42. float: right;
  43. margin-right: 150px;
  44. background-image: url(design/logog.gif);
  46. }
  47. #chataig {
  48. float: right;
  49. margin-right: 15px;
  50. }
  52. #afficheg {
  53. position: absolute;
  54. left: 0px;
  55. width: 140px;
  56. height: 70px;
  57. background-color: #fc0; 
  58. font: 12px arial, helvetica, verdana, sans-serif;
  59. font-weight: bold;
  60. }
  61. .marquee {
  62. margin: 0px;
  63. padding: 5px;
  65. }
  66. #affiched {
  67. position: absolute;
  68. right: 0px;
  69. width: 150px;
  70. height: 70px;
  71. background-color: #fc0;
  72. font: 12px arial, helvetica, verdana, sans-serif;
  73. font-weight: bold;
  74. }
  75. /***********************************************/
  76. /* MENU GAUCHE */
  77. /***********************************************/
  78. #menu{
  79. position: absolute;
  80. width: 116px;
  81. left: 0px;
  82. background-color: #fc0;
  83. color: black;
  84. font: 12px arial, helvetica, verdana, sans-serif;
  85. font-weight: bold;
  86. }
  87. #menu ul{
  88. list-style-type: none;
  89. margin: 0px;
  90. padding: 0px;
  91. }
  92. #menu li a{
  93. margin: 0px;
  94. padding: 5px;
  95. display: block;
  96. height: 1em;
  97. color: #000;
  98. text-decoration: none;
  99. }
  100. #menu a:hover{
  101. background-color: #add8e6;
  102. }
  103. #menu h5{
  104. font-weight: bold;
  105. font-size: 1em;
  106. border: 1px solid #6495ED;
  107. background-color: #6495ed;
  108. color: #fff;
  109. text-align: center;
  110. margin: 0px;
  111. }
  112. /***********************************************/
  113. /* MENU DROITE */
  114. /***********************************************/
  115. #Rmenu{
  116. position: absolute;
  117. right: 0px;
  118. width: 116px;
  119. background-color: #fc0;
  120. color: black;
  121. font: 12px arial, helvetica, verdana, sans-serif;
  122. font-weight: bold;
  123. }
  124. #Rmenu ul{
  125. list-style-type: none;
  126. margin: 0px;
  127. padding: 0px;
  128. }
  129. #Rmenu li a{
  130. margin: 0px;
  131. padding: 5px;
  132. display: block;
  133. height: 1em;
  134. color: #000;
  135. text-decoration: none;
  136. }
  137. #Rmenu a:hover{
  138. background-color: #add8e6;
  139. }
  140. #Rmenu h5{
  141. font-weight: bold;
  142. font-size: 1em;
  143. border: 1px solid #6495ED;
  144. background-color: #6495ed;
  145. color: #fff;
  146. text-align: center;
  147. margin: 0px;
  148. }
  150. /***********************************************/
  151. /* PARTIE CENTRALE */
  152. /***********************************************/
  153. #content {
  154. background: #fc6;
  155. margin: 0px 116px;
  156. padding: 0px;
  157. border: 2px solid green;
  158. }
  159. /***********************************************/
  160. /* PIED DE PAGE */
  161. /***********************************************/
  162. #footer {
  163. background: #f00;
  164. border-top: 2px dotted #ddd;
  165. padding: 5px 0;
  166. text-align: center;
  167. margin-top: 2px;
  168. }
  169. #footer p{
  170. margin: 0px;
  171. padding: 0px;
  172. }
  173. /********?????***************************************/
  174. /* GALERIE PHOTO  */
  175. /***********************************************/
  176. dl.gallery{
  177. float:left;
  178. border: 1px solid #000;
  179. background-color: #93f;
  180. width: 102px;
  181. text-align: center;
  182. padding: 5px;
  183. margin: 1em;
  184. }
  185. .gallery dt {
  186. font-weight: bold;
  187. }
  188. .gallery dt img
  189. {
  190. border: 1px solid #000;
  191. width: 100px;
  192. height: 100px;
  193. }
  194. .gallery dd
  195. {
  196. margin: 0;
  197. padding: 0;
  198. }
  199. .clearboth {
  200. clear: both;
  201. }

Reply

Marsh Posté le 05-07-2005 à 15:57:04    

http://test.roane-irkana.net/3_cols_fixe.htm
 
Un compromis qui passe partout.
 
Bien sur, ayant fait ca a la va vite, on peut largement mieux faire ...
 
Quand aux problèmes que tu as, soit tu fais comme moi, et tu essaies d'éviter de tomber dans des cas ou IE cafouille, soit tu utilises des hacks IE.


Message édité par plainsofpain le 05-07-2005 à 16:29:49

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 05-07-2005 à 15:57:04   

Reply

Marsh Posté le 05-07-2005 à 16:35:27    

Un grand merci, j'ai spécifié une largeur à ma page centrale, et maintenant sa marche.
Je te remercie encore pour ce petit coup de mains.
Cordialement

Reply

Marsh Posté le 05-07-2005 à 16:37:23    

Accesoirement, de manière fluide ca donne :  
 
http://test.roane-irkana.net/3_cols_fluide.htm
 
Mais la j'ai pas recopié ton contenu. Les menus font 150 px de large (et sont en float), le centre a une marge de 155 px de chaque coté, et le footer a un clear:both.
 
Et la, ca roule :D


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Sujets relatifs:

Leave a Replay

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