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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Décalage à droite.(résolus)

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Décalage à droite.(résolus)

n°1137960
julien2b
Posté le 02-07-2005 à 11:27:41  profilanswer
 

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
mood
Publicité
Posté le 02-07-2005 à 11:27:41  profilanswer
 

n°1138686
dmc2
Posté le 03-07-2005 à 16:59:20  profilanswer
 

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

n°1138692
masklinn
í dag viðrar vel til loftárása
Posté le 03-07-2005 à 17:18:35  profilanswer
 

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
n°1138701
plainsofpa​in
Pingouino's lover
Posté le 03-07-2005 à 18:29:59  profilanswer
 

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
n°1139179
julien2b
Posté le 04-07-2005 à 11:35:49  profilanswer
 

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.

n°1140485
julien2b
Posté le 05-07-2005 à 15:07:04  profilanswer
 

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

n°1140502
plainsofpa​in
Pingouino's lover
Posté le 05-07-2005 à 15:14:14  profilanswer
 

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
n°1140515
julien2b
Posté le 05-07-2005 à 15:19:55  profilanswer
 

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.

n°1140547
julien2b
Posté le 05-07-2005 à 15:31:29  profilanswer
 

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. }

n°1140599
plainsofpa​in
Pingouino's lover
Posté le 05-07-2005 à 15:57:04  profilanswer
 

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
mood
Publicité
Posté le 05-07-2005 à 15:57:04  profilanswer
 

n°1140667
julien2b
Posté le 05-07-2005 à 16:35:27  profilanswer
 

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

n°1140669
plainsofpa​in
Pingouino's lover
Posté le 05-07-2005 à 16:37:23  profilanswer
 

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

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

  Décalage à droite.(résolus)

 

Sujets relatifs
Pb CSS pour un affichage de menus fixe à droitealignement à droite, au milieu et à gauche sur la même ligne
afficher une date gmt en y ajoutant un décalage horaireOuvrir fenetre à droite de l'écran
Décalage de mes bloc quand je rétrécisma fenetre IEdéfilement de caractères de gauche à droite
problème de décalage aléatoire[RESOLU] [CSS] bug IE : texte invisible et décalage bizarre
probleme de decalage d'un sous menu en javascript avec IE[CSS] Aligner une partie d'un <p> à droite ?
Plus de sujets relatifs à : Décalage à droite.(résolus)

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

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