Problème Slider image qui bug

Problème Slider image qui bug - HTML/CSS - Programmation

Marsh Posté le 31-07-2012 à 09:58:05    

Bijour tout le monde !
 
Voici l’aperçu du pb l'image est multiplié et pas en 100% .Je sais que le pb viens du css car j'ai pas modifier le javascript si qql  à une idée  :)
 
http://imageshack.us/photo/my-imag [...] reaxw.png/
 
Merci d'avances :-)

Reply

Marsh Posté le 31-07-2012 à 09:58:05   

Reply

Marsh Posté le 31-07-2012 à 11:56:16    

up!

Reply

Marsh Posté le 31-07-2012 à 16:38:20    

Tu n'as pas un lien vers ton site?
 
Ou au moins ton code, parceque à partir d'une image c'est pas évident.

Reply

Marsh Posté le 01-08-2012 à 09:30:34    

Mon site n'est pas hébergé mais voici le css pour le slider :

Code :
  1. .nivoSlider {
  2. width:1080px;
  3. height:300px;
  4. overflow: hidden;
  5. margin:auto;
  6. }
  7. .nivoSlider img {
  8. top:0px;
  9. left:0px;
  10. }
  11. .nivo-main-image {
  12. display: block !important;
  13. position: relative !important;
  14. width: 100% !important;
  15. }
  16. .nivoSlider a.nivo-imageLink {
  17. top:0px;
  18. left:0px;
  19. margin:auto;
  20. border:0;
  21. padding:0;
  22. margin:0;
  23. z-index:6;
  24. display:none;
  25. }
  26. /.nivo-slice {
  27. height:100%;
  28. display:block;
  29. position:absolute;
  30. z-index:5;
  31. top:0;
  32. }
  33. .nivo-box {
  34. display:block;
  35. position:absolute;
  36. z-index:5;
  37. overflow:hidden;
  38. }
  39. .nivo-box img { display:block; }
  40. .nivo-caption {
  41. position:absolute;
  42. left:0px;
  43. bottom:0px;
  44. background:#000;
  45. color:#fff;
  46. width:100%;
  47. z-index:8;
  48. padding: 5px 10px;
  49. opacity: 0.8;
  50. overflow: hidden;
  51. display: none;
  52. -moz-opacity: 0.8;
  53. filter:alpha(opacity=8);
  54. -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  55. -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  56. box-sizing: border-box;         /* Opera/IE 8+ */
  57. }
  58. .nivo-caption p {
  59. padding:5px;
  60. margin:0;
  61. }
  62. .nivo-caption a {
  63. display:inline !important;
  64. }
  65. .nivo-html-caption {
  66.     display:none;
  67. }
  68. .nivo-html-caption {
  69.     display:none;
  70. }
  71. .nivo-directionNav a {
  72. position:absolute;
  73. top:45%;
  74. z-index:9;
  75. cursor:pointer;
  76. }
  77. .nivo-prevNav {
  78. left:0px;
  79. }
  80. .nivo-nextNav {
  81. right:0px;
  82. }
  83. .nivo-controlNav {
  84. text-align:center;
  85. padding: 10px 0;
  86. }
  87. .nivo-controlNav a {
  88. cursor:pointer;
  89. }
  90. .nivo-controlNav a.active {
  91. font-weight:bold;
  92. }
  94. .slider-wrapper theme-default {
  95. position:relative;
  96. }
  97. .theme-default .nivoSlider {
  98. margin-top:10px;
  99. position:relative;
  100. background:#fff url(loading.gif) no-repeat 50% 50%;
  101.     -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
  102.     -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
  103.     box-shadow: 0px 1px 5px 0px #4a4a4a;
  104. }
  105. .theme-default .nivoSlider img {
  106. position:absolute;
  107. top:0px;
  108. left:0px;
  109. display:none;
  110. }
  111. .theme-default .nivoSlider a {
  112. border:0;
  113. display:block;
  114. }
  115. .theme-default .nivo-controlNav {
  116. text-align: center;
  117. padding: 10px 0;
  118. }
  119. .theme-default .nivo-controlNav a {
  120. display:inline-block;
  121. width:22px;
  122. height:22px;
  123. background:url(bullets.png) no-repeat;
  124. text-indent:-9999px;
  125. border:0;
  126. margin: 0 2px;
  127. }
  128. .theme-default .nivo-controlNav a.active {
  129. background-position:0 -22px;
  130. }
  131. .theme-default .nivo-directionNav a {
  132. display:block;
  133. width:30px;
  134. height:30px;
  135. background:url(arrows.png) no-repeat;
  136. text-indent:-9999px;
  137. border:0;
  138. }
  139. .theme-default a.nivo-nextNav {
  140. background-position:-30px 0;
  141. right:15px;
  142. }
  143. .theme-default a.nivo-prevNav {
  144. left:15px;
  145. }
  146. .theme-default .nivo-caption {
  147.     font-family: Helvetica, Arial, sans-serif;
  148. }
  149. .theme-default .nivo-caption a {
  150.     color:#fff;
  151.     border-bottom:1px dotted #fff;
  152. }
  153. .theme-default .nivo-caption a:hover {
  154.     color:#fff;
  155. }
  156. .theme-default .nivo-controlNav.nivo-thumbs-enabled {
  157. width: 100%;
  158. }
  159. .theme-default .nivo-controlNav.nivo-thumbs-enabled a {
  160. width: auto;
  161. height: auto;
  162. background: none;
  163. margin-bottom: 5px;
  164. }
  165. .theme-default .nivo-controlNav.nivo-thumbs-enabled img {
  166. display: block;
  167. width: 120px;
  168. height: auto;
  169. }


Message édité par noxno le 01-08-2012 à 09:31:24
Reply

Marsh Posté le 01-08-2012 à 10:31:18    

up!

Reply

Marsh Posté le 01-08-2012 à 15:49:57    

Et ton code html ?

Reply

Marsh Posté le 02-08-2012 à 10:35:21    

Code :
  1. <div class="slider-wrapper theme-default">
  2.    <div id="slider" >
  3.     <img src="/templates/combination/nivo-slider/images/toystory.jpg" data-thumb="/templates/combination/nivo-slider/images/toystory.jpg" alt="" />
  4.     <a href="http://dev7studios.com"><img src="/templates/combination/nivo-slider/images/up.jpg" data-thumb="/templates/combination/nivo-slider/images/up.jpg" alt="" title="This is an example of a caption" /></a>
  5.     <img src="/templates/combination/nivo-slider/images/walle.jpg" data-thumb="/templates/combination/nivo-slider/images/walle.jpg" alt="" data-transition="slideInLeft" />
  6.     <img src="/templates/combination/nivo-slider/images/nemo.jpg" data-thumb="/templates/combination/nivo-slider/images/nemo.jpg" alt="" title="#htmlcaption" />
  7.    </div>
  9.   </div>

Reply

Marsh Posté le 02-08-2012 à 15:33:34    

UP!

Reply

Marsh Posté le 02-08-2012 à 22:26:48    

je pense que c'est au niveau de la transition que ca bug et pas du html/css :spamafote:


---------------
Genghis achat/vente
Reply

Marsh Posté le 03-08-2012 à 15:37:19    

nope c'est bien le css j'ai pas ouvert le fichier Js :/
 
J'ai modifier le css du slider pour changer la taille et ça fait ce problème par la suite mais impossible de trouver le truc :/

Reply

Marsh Posté le 03-08-2012 à 15:37:19   

Reply

Marsh Posté le 03-08-2012 à 21:36:26    

Essaye de définir la taille de ton ".nivoslider img"
 
Tu as pas moyen de mettre en ligne, c'est beaucoup plus simple poir t'aider :)

Reply

Sujets relatifs:

Leave a Replay

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