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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Problème Slider image qui bug

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Problème Slider image qui bug

n°2151684
noxno
Posté le 31-07-2012 à 09:58:05  profilanswer
 

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 :-)

mood
Publicité
Posté le 31-07-2012 à 09:58:05  profilanswer
 

n°2151710
noxno
Posté le 31-07-2012 à 11:56:16  profilanswer
 

up!

n°2151765
egege
Posté le 31-07-2012 à 16:38:20  profilanswer
 

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

n°2151838
noxno
Posté le 01-08-2012 à 09:30:34  profilanswer
 

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
n°2151855
noxno
Posté le 01-08-2012 à 10:31:18  profilanswer
 

up!

n°2151983
egege
Posté le 01-08-2012 à 15:49:57  profilanswer
 

Et ton code html ?

n°2152130
noxno
Posté le 02-08-2012 à 10:35:21  profilanswer
 

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>

n°2152269
noxno
Posté le 02-08-2012 à 15:33:34  profilanswer
 

UP!

n°2152383
genghis77
-_-'
Posté le 02-08-2012 à 22:26:48  profilanswer
 

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


---------------
Je sais que je plais pas à tout le monde... mais quand je vois à qui je plais pas... je me demande si ça me dérange vraiment
n°2152461
noxno
Posté le 03-08-2012 à 15:37:19  profilanswer
 

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 :/

mood
Publicité
Posté le 03-08-2012 à 15:37:19  profilanswer
 

n°2152536
egege
Posté le 03-08-2012 à 21:36:26  profilanswer
 

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 :)


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

  Problème Slider image qui bug

 

Sujets relatifs
Problème référencement site sur Google (redirection chez gandi)problème d'utilisation de variable shell dans un script
Problème de mise en place d'image en bouton submitproblème dans l'ordre de chargement des images sur explorer
problème avec de manager.canvas.draw de matplotlib et gobject.idle_addtransmettre valeur à une image PHP
[MS SQL Server] Problème de volumétrie : changement de type de colonneProblème formulaire vb/access 2010
biseauter une image avec GD 
Plus de sujets relatifs à : Problème Slider image qui bug

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

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