Espaces vertical entres les images sur internet explorer.

Espaces vertical entres les images sur internet explorer. - HTML/CSS - Programmation

Marsh Posté le 25-10-2004 à 19:05:58    

Salut, bon alors voila, j'essaye d'adapter ce design en CSS: http://www.manganimes.com/prez.jpg et bon j'ai un petit problème, quand je fais la partie MENU, ca marche bien sur mozilla mais sur Internet Explorer ca donne ca: http://www.manganimes.com/ie_de_merde.jpg
 
Vous sauriez pas comment enlever ces espaces tout pas beau entre les images?
 
Je précise que je travaille avec des div mais que cette partie la, ce n'est que des images l'une dessous l'autre dans un div, il n'y a pas un div pour chaque image.
 
Merci d'avance.

Reply

Marsh Posté le 25-10-2004 à 19:05:58   

Reply

Marsh Posté le 25-10-2004 à 19:09:42    

pas de chance j'ai oublier ma boule de cristal au boulot :/


---------------
Nos estans firs di nosse pitite patreye...
Reply

Marsh Posté le 25-10-2004 à 19:12:09    

Code :
  1. img {
  2.     display: block;
  3. }


 
Et tu vires les <br /> entre.
 
A moins que le tirage des cartes ne m'ait menti, ce doit être ça.

Reply

Marsh Posté le 25-10-2004 à 19:16:56    

Euuh non la ca me fait un truc tout bizarre: http://www.manganimes.com/test2.jpg
 
Si vous voulez la source (avec le display: block;) la voici:
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>Document sans titre</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <style type="text/css">
  7. <!--
  8. body {
  9. background-color: #DDDDDD;
  10. font-family: Verdana;
  11. font-size: 12px;
  12. }
  14. /*----------------------------------------------------*/
  16. .entete {
  17. padding: 0px;
  18. height: 100px;
  19. width: 750px;
  20. border: 1px solid #000000;
  21. background-image: url(banner.jpg);
  22. background-repeat: no-repeat;
  23. position: absolute;
  24. left: 10px;
  25. top: 10px;
  26. }
  28. /*----------------------------------------------------*/
  30. .menuhaut {
  31. background-color: #E4E6F0;
  32. background-image: url(menu_haut_fin.jpg);
  33. background-repeat: no-repeat;
  34. background-position: right center;
  35. height: 19px;
  36. width: 750px;
  37. border-right-width: 1px;
  38. border-bottom-width: 1px;
  39. border-left-width: 1px;
  40. border-right-style: solid;
  41. border-bottom-style: solid;
  42. border-left-style: solid;
  43. border-right-color: #000000;
  44. border-bottom-color: #000000;
  45. border-left-color: #000000;
  46. vertical-align: middle;
  47. position: absolute;
  48. left: 10px;
  49. top: 110px;
  50. text-align: center;
  51. }
  53. /*----------------------------------------------------*/
  55. .contenu {
  56. padding: 0px;
  57. width: 750px;
  58. height: 654px;
  59. border-right-width: 1px;
  60. border-bottom-width: 1px;
  61. border-left-width: 1px;
  62. border-right-style: solid;
  63. border-bottom-style: solid;
  64. border-left-style: solid;
  65. border-right-color: #000000;
  66. border-bottom-color: #000000;
  67. border-left-color: #000000;
  68. position: absolute;
  69. left: 10px;
  70. top: 129px;
  71. }
  72. .menugauche {
  73. background-color: #E4E6F0;
  74. height: 650px;
  75. width: 149px;
  76. border-right-width: 1px;
  77. border-right-style: solid;
  78. border-right-color: #000000;
  79. position: absolute;
  80. left: 0px;
  81. top: 3px;
  82. }
  83. .centre {
  84. background-color: #FFFFFF;
  85. background-image: url(main.jpg);
  86. background-repeat: no-repeat;
  87. background-position: center bottom;
  88. height: 649px;
  89. width: 450px;
  90. position: absolute;
  91. left: 150px;
  92. top: 3px;
  93. }
  94. .menudroit {
  95. background-color: #E4E6F0;
  96. position: absolute;
  97. height: 649px;
  98. width: 148px;
  99. left: 600px;
  100. top: 3px;
  101. border-left-width: 1px;
  102. border-left-style: solid;
  103. border-left-color: #000000;
  104. }
  106. /*----------------------------------------------------*/
  108. .menu {
  109. background-color: #FFFFFF;
  110. text-align: center;
  111. border: 1px solid #000000;
  112. position: absolute;
  113. left: 4px;
  114. top: 7px;
  115. height: 274px;
  116. width: 139px;
  117. background-image: url(bas_menu.jpg);
  118. background-repeat: no-repeat;
  119. vertical-align: top;
  120. background-position: center bottom;
  121. }
  122. .search {
  123. background-color: #FFFFFF;
  124. text-align: center;
  125. border: 1px solid #000000;
  126. position: absolute;
  127. left: 1px;
  128. top: 288px;
  129. height: 117px;
  130. width: 145px;
  131. }
  132. .site {
  133. background-color: #FFFFFF;
  134. text-align: center;
  135. border: 1px solid #000000;
  136. position: absolute;
  137. left: 1px;
  138. top: 413px;
  139. height: 217px;
  140. width: 145px;
  141. }
  142. img {
  143.     display: block;
  144. }
  145. -->
  146. </style>
  147. </head>
  149. <body bgcolor="#CEDCFB">
  150.  
  151. <div class="entete"></div>
  152.  
  153. <div class="menuhaut"> <img src="menu_haut_1.jpg" alt=""> <img src="a_propos.jpg" alt="A propos" border="0">
  154.   <img src="menu_haut_inter.jpg" alt=""> <img src="aide_faq.jpg" alt="Aide/FAQ" border="0">
  155.   <img src="menu_haut_inter.jpg" alt=""> <img src="forum.jpg" alt="Forum" border="0">
  156.   <img src="menu_haut_inter.jpg" alt=""> <img src="contact.jpg" alt="Contact" border="0">
  157.   <img src="menu_haut_2.jpg" alt="">
  158. </div>
  159.  
  160. <div class="contenu">
  161.   <div class="menugauche">
  162.      <div class="menu">
  163.     <img src="menu.jpg" width="139" height="19" alt="">
  164.  <img src="spacer.gif" width="139" height="1" alt="">
  165.     <img src="animes.jpg" width="139" height="20"  alt="Animés">
  166.  <img src="spacer.gif" width="139" height="1"  alt="">
  167.  <img src="manga.jpg" width="139" height="19"  alt="Manga">
  168.  <img src="spacer.gif" width="139" height="1"  alt="">
  169.  <img src="bdd.jpg" width="139" height="19"  alt="Base de Données">
  170.  <img src="spacer.gif" width="139" height="1"  alt="">
  171.  <img src="download.jpg" width="139" height="19"  alt="Téléchargements">
  172.  <img src="spacer.gif" width="139" height="1"  alt="">
  173.  <img src="liens.jpg" width="139" height="19"  alt="Liens">
  174.  <img src="spacer.gif" width="139" height="1"  alt="">
  175.  <img src="fansub.jpg" width="139" height="19"  alt="Fansub">
  176.  <img src="spacer.gif" width="139" height="1"  alt="">
  177.  <img src="lexique.jpg" width="139" height="19"  alt="lexique">
  178.  <img src="spacer.gif" width="139" height="1"  alt="">
  179.  </div>
  180.  <div class="search">
  182.  </div>
  183.  <div class="site">
  185.  </div>
  186.   </div>
  187.   <div class="centre">blabla</div>
  188.   <div class="menudroit">blabla</div>
  189. </div>
  190.   <div class="pied"> </div>
  192. </body>
  193. </html>


Message édité par Cheinz le 25-10-2004 à 19:19:09
Reply

Marsh Posté le 25-10-2004 à 20:15:53    

Au lieu de mettre la source, met la page à disposition qu'on puisse tester un peu chez soi...

Reply

Marsh Posté le 25-10-2004 à 20:46:53    

Voila: http://www.manganimes.com/test/index.htm
 
C'est nickel sous mozilla (a part kkes espaces qui chient du aux positions qui ont pas l'air d'être les mêmes sur ie et mozi) mais sous ie...
 
PS: j'ai enlever la redéfinition de la balise img.


Message édité par Cheinz le 25-10-2004 à 20:50:40
Reply

Marsh Posté le 25-10-2004 à 21:18:51    

Code :
  1. <div class="menu">
  2.     <img src="menu.jpg" width="139" height="19" alt="">
  3.  <img src="spacer.gif" width="139" height="1" alt="">
  4.     <img src="animes.jpg" width="139" height="20"  alt="Animés">
  5.  <img src="spacer.gif" width="139" height="1"  alt="">
  6.  <img src="manga.jpg" width="139" height="19"  alt="Manga">
  7.  <img src="spacer.gif" width="139" height="1"  alt="">
  9.  <img src="bdd.jpg" width="139" height="19"  alt="Base de Données">
  10.  <img src="spacer.gif" width="139" height="1"  alt="">
  11.  <img src="download.jpg" width="139" height="19"  alt="Téléchargements">
  12.  <img src="spacer.gif" width="139" height="1"  alt="">
  13.  <img src="liens.jpg" width="139" height="19"  alt="Liens">
  14.  <img src="spacer.gif" width="139" height="1"  alt="">
  15.  <img src="fansub.jpg" width="139" height="19"  alt="Fansub">
  16.  <img src="spacer.gif" width="139" height="1"  alt="">
  17.  <img src="lexique.jpg" width="139" height="19"  alt="lexique">
  19.  <img src="spacer.gif" width="139" height="1"  alt="">
  20.  </div>


kaka :o
un menu ca se fait à coup de listes :o (pareil en haut)
 
Et tes classes, tu pourrais les remplacer par des ids ca serait plus logique (vu que tu ne les utilises que pour un élément à chaque fois)
 
Sépare l'information (html) et le style (css) dans deux fichiers séparés
Ton information (html donc) n'est pas construite de manière logique/rationnelle, c'est imbitable
 
Ah oui, j'allais oublier, les spacers tu devrait pas en avoir besoin [:aloy]


Message édité par masklinn le 25-10-2004 à 21:19:24

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

Marsh Posté le 25-10-2004 à 22:19:58    

Code :
  1. Et tes classes, tu pourrais les remplacer par des ids ca serait plus logique (vu que tu ne les utilises que pour un élément à chaque fois)


 
Oui je sais, mais bon c'est un test temporaire, voir comment donne ma prez' HTMLé.
 

Code :
  1. Sépare l'information (html) et le style (css) dans deux fichiers séparés
  2. Ton information (html donc) n'est pas construite de manière logique/rationnelle, c'est imbitable


 
Idem.
 

Code :
  1. Ah oui, j'allais oublier, les spacers tu devrait pas en avoir besoin


 
Et comment tu fais pour faire une ligne grise d'un pixel qui fait la largeur du div?
 
Sinon en utilisant <li> bah: http://www.manganimes.com/test/index2.htm
 
Par contre sur mozilla ca passe pu.


Message édité par Cheinz le 25-10-2004 à 22:23:20
Reply

Marsh Posté le 25-10-2004 à 22:33:30    

Cheinz a écrit :

Et comment tu fais pour faire une ligne grise d'un pixel qui fait la largeur du div?


border-bottom: gray solid 1px; ?


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 25-10-2004 à 22:35:58    

tu joues sur le margin des <li> [:spamafote]
 
et j'ai du mal a voir pourquoi tu encapsules le <ul> dans un <div>
 
tu prends ton <ul>, tu lui colles un background gris, margin-bottom de 1px pour les <li>, tu modifies leur taille pour faire celle des images (tu peux même coller les images en background :o)
 
edit: le border ca marche aussi (gm style ;))
 
et faut vraiment que tu repenses ton html, parce qu'il est super mal foutu (me dit pas que tu le feras quand ton layout sera terminé, c'est un mensonge [:spamafote] )


Message édité par masklinn le 25-10-2004 à 22:37:34

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

Marsh Posté le 25-10-2004 à 22:35:58   

Reply

Marsh Posté le 25-10-2004 à 23:32:15    

Voila j'ai essayé de modifier un peu, ca passe pas trop mal sur Internet Explorer (a part toujours un petit espace entre les images...) mais sous firefox c'est la cata...
 
http://www.manganimes.com/test/index3.htm

Reply

Marsh Posté le 25-10-2004 à 23:42:37    

Bah c'est juste un padding ou une marge par défaut à faire sauter sur UL ou LI...


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 25-10-2004 à 23:47:31    

Viens de tester, c'est pareil, autant margin que padding et que ce soit sur ul ou li, et il n'y a que sur ie qu'il y a un espace. Sur fire c'est décalé sur la droite mais il n'y a pas d'espace.

Reply

Marsh Posté le 26-10-2004 à 00:22:49    

Reply

Marsh Posté le 26-10-2004 à 00:30:49    

http://www.manganimes.com/test/index4.htm
 
Voila, pour moi c'est pareil, sur ie il y a un espace de quelques pixels et sur firefox ca merdouille.


Message édité par Cheinz le 26-10-2004 à 00:32:06
Reply

Marsh Posté le 26-10-2004 à 00:32:29    


 

gm_superstar a écrit :

Bah c'est juste un padding ou une marge par défaut à faire sauter sur UL ou LI...


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 26-10-2004 à 00:39:53    

comme gm, et le div est bien inutile, et faudrait vraiment nettoyer le CSS et compacter un peut tout ca
non parce que genre

Code :
  1. background-color: #E4E6F0;
  2. background-image: url(menu_haut_fin.jpg);
  3. background-repeat: no-repeat;
  4. background-position: right center;


ca, ca se fait en 1 ligne

Code :
  1. border-right-width: 1px;
  2. border-bottom-width: 1px;
  3. border-left-width: 1px;
  4. border-right-style: solid;
  5. border-bottom-style: solid;
  6. border-left-style: solid;
  7. border-right-color: #000000;
  8. border-bottom-color: #000000;
  9. border-left-color: #000000;


2 lignes pour ca
etc etc


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

Marsh Posté le 26-10-2004 à 01:00:29    

Masklinn: Oui mais ca je m'en fou un peu pour le moment, c'est pour voir comment faire et comment ca donne, c'est la première fois que j'essaye le css.
 
Une fois fini je recommence tout proprement. Voila.
 
Sinon gm_superstar j'ai sur les 2 class des UL, padding: 0px; je vois pas ce que tu veut dire d'autres par faire sauter.

Reply

Marsh Posté le 26-10-2004 à 01:02:18    

Reply

Marsh Posté le 26-10-2004 à 01:05:41    

Ben.... vi je suis d'accord mais j'ai pas mit O mais 0 donc... (et si j'avais mi des O je viens de tester en mettant bien des 0 bah c'est pareil)...

Reply

Marsh Posté le 26-10-2004 à 01:06:28    

gm_superstar a écrit :

Opx != 0px


whoa :ouch:


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

Marsh Posté le 26-10-2004 à 01:16:33    

Cheinz a écrit :

Ben.... vi je suis d'accord mais j'ai pas mit O mais 0 donc...


Ah ouais ?  
 
http://www.manganimes.com/test/index4.htm
 

Code :
  1. .liste_menu {
  2. background-color: #FFFFFF;
  3. border: 1px solid #000000;
  4. height: 273px;
  5. width: 139px;
  6. background-image: url(bas_menu.jpg);
  7. background-repeat: no-repeat;
  8. background-position: center bottom;
  9. margin-left: 4px;
  10. margin-top: 4px;
  11. margin-bottom: 0px;
  12. padding: Opx;
  13. }


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 26-10-2004 à 01:24:52    

avec un vrai editeur ce genre d'erreur n'arrive jamais...


---------------
Nos estans firs di nosse pitite patreye...
Reply

Marsh Posté le 26-10-2004 à 01:27:46    

Oui c'est possible que la je me sois gourré mais j'ai retester en mettant bien des 0 et pas des O (vais pas réup a chaque fois que je modif' un caractère) et c'est pareil, si tu veut voir: http://www.manganimes.com/test/index5.htm
 
Et si quelqu'un pouvait me dire pourquoi ca merde complet sur firefox aussi.


Message édité par Cheinz le 26-10-2004 à 01:31:49
Reply

Marsh Posté le 26-10-2004 à 01:38:27    

Cheinz a écrit :

Et si quelqu'un pouvait me dire pourquoi ca merde complet sur firefox aussi.


Mytho mytho maaaan :whistle:  
ksss, ban d'image, cliquez ici pour screenshot site sous Firefox
 
Et si ca merde, c'est parce que c'est codé comme un porc bordel, commence par faire ca bien t'auras largement moins de problèmes [:spamafote]


Message édité par masklinn le 26-10-2004 à 01:38:57

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

Marsh Posté le 26-10-2004 à 02:06:08    

Oui désolé, c'est l'index 4 qui merdé, le 5 ca passe. Mais il y a toujours ces #%$£ d'espaces sous ie.
 
Masklinn, je ne pense pas que faire un .css a part et optimiser les lignes de codes arrange le problème.
Pour l'html je ne vois pas vraiment ce qui merde, un div pour l'entete (entete), un div pour le menu d'en haut (menuhaut), un autre englobant la partie droite, la partie centrale et la partie gauche (contenu) et enfin un pour le footer (pied) c'est clair et ca correspond a mon design d'origine...
 
Maintenent si tu a d'autres idées d'arrangement...


Message édité par Cheinz le 26-10-2004 à 02:07:26
Reply

Marsh Posté le 26-10-2004 à 02:13:08    

tous les divs de menus doivent être remplacés par des listes [:sisicaivrai]
 
Le design, quand on crée un fichier html on s'en branle, le fichier (x)html c'est la structuration logique de l'information, ensuite arrive le CSS pour mettre la dite information en forme.
 
Et faire un CSS à part, ca permettrait déjà de clarifier le machin et d'avoir à moins scroller
Et accessoirement ca te donnerait l'occasion de reprendre le CSS pour voir si il n'y a pas de redondances ou de conflits


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

Marsh Posté le 26-10-2004 à 02:23:30    

Bon, puisque tu insistes..., referait ca demain, sur ce, vais dodo moi, bonne nuit.

Reply

Marsh Posté le 26-10-2004 à 20:58:20    

Reply

Marsh Posté le 26-10-2004 à 23:28:42    

Bon voila:
 
http://www.manganimes.com/test/index6.htm (style.css sans display: block; )
 
http://www.manganimes.com/test/index7.htm (style2.css avec display: block; )
 
Résultat: c'est pareil sauf le menu en haut qui merde complet.  
 
Sinon pour les menus sur le coté, pour les 2 pages, sur Firefox c'est nickel, sur IE il y a toujours les espaces.
La ou il n'y a n'a pas sur IE c'est que les images sont mises en background, mais je peut pas le faire pour le menu principal car il y aura un rollover.


Message édité par Cheinz le 26-10-2004 à 23:32:54
Reply

Marsh Posté le 26-10-2004 à 23:33:14    

Et histoire de simplifier le machin, ca te dirait pas de prendre ton image de je sais pas qui, de la coller en fond et d'ajouter les boutons (texte ou png8/gifs avec transparency) par dessus?
 
Comme ca tu t'en fous des erreurs d'interprétations des lists


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

Marsh Posté le 27-10-2004 à 01:55:08    

Bon voila j'ai a peu prés réussit a faire ce que je voulais pour les menus mais j'ai un autre problème:
 
http://www.manganimes.com/test/index8.htm
 
Est ce que c'est possible de faire descendre tout les div (les 2 menus et le centre) en même temps que le texte descends?

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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