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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Diaporama en page d'accueil

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Diaporama en page d'accueil

n°2125498
jeje6275
Posté le 08-02-2012 à 20:44:45  profilanswer
 

Bonjour à tous,
Bon je n'ai pas vue de rubrique présentation, donc je me présente ici même, Jérôme, j'habite dans le 62, 39 ans  
une passion qu'est la photo animalière
J'ai un site perso hébergé chez Piwigo et j'ai un soucis avec la page d'accueil
j'explique:
Lors que je me connecte sur la page d'accueil, j'ai donc un diaporama avec quelques photos et divers chose  
le soucis est que lors de la connexion au site, le diaporama apparaît d'abord à gauche pour de suite passer au centre
Mon souhait est que ce diaporama apparaissent de suite en milieu de page  
est possible ou pas et je précise que les photos sont toute de la même taille (800x547)
Voici le lien du site,  
 
http://jerome62w.piwigo.com/index? [...] _d_accueil
 
Merci d'avance
Voici le code de la page comme il est actuellement

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Photographie Jérôme Watel</title>
  6. <style type="text/css">
  7. .Police {
  8. font-family: "Freestyle Script";
  9. text-align: center;
  10. font-size: 24px;
  11. }
  12. .taille {
  13. font-size: 24px;
  14. }
  15. .Police .taille {
  16. font-size: 36px;
  17. color: #FFF;
  18. }
  19. body {
  20. background-color: #333;
  21. }
  23. .jDiaporama{
  24. position:relative;
  25.         margin:0 auto;
  26. }
  28. .jDiaporama ul{
  29. -moz-box-shadow:1px 1px 0.5em #222;
  30. overflow:hidden;
  31. }
  33. .jDiaporama li{
  34. list-style-type:none;
  35. overflow:hidden;
  36. position:absolute
  37. }
  39. .jDiaporama li img{
  40. display:block
  41. }
  43. .jDiaporama li .desc{
  44. position:absolute;
  45. bottom: 0; left: 0;
  46. display:none;
  47. margin:0;
  48. color:#fff;
  49. font-size:12px;
  50. font-family: Arial;
  51. padding:5px;
  52. background:url(themes/default/js/plugins/jDiaporama_img/back_desc.png) repeat;
  53. _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/back_desc.png',sizingMethod='scale');  _background-image:none;
  54. width:100%;
  55. height:30px
  56. }
  58. .jDiaporama li .title{
  59. position:absolute;
  60. top: 0; left: 0;
  61. display:none;
  62. margin:0;
  63. color:#fff;
  64. font-size:12px;
  65. font-family: Arial;
  66. padding:5px;
  67. }
  69. .jDiaporama li .count{
  70. position:absolute;
  71. top: 0; right: 0;
  72. display:none;
  73. margin:0;
  74. color:#fff;
  75. font-size:12px;
  76. font-family: Arial;
  77. padding:5px;
  78. }
  80. .jDiaporama_controls{
  81. display:none;
  82. }
  84. .jDiaporama_controls a{
  85. font-weight:normal;
  86. width:10px;
  87. height:13px;
  88. text-indent:-9999px;
  89. display:block;
  90. margin:0 3px;
  91. position:absolute;
  92. }
  94. .jDiaporama_controls .prev{
  95. background:url(themes/default/js/plugins/jDiaporama_img/controls2.png) no-repeat bottom;
  96. _background:url(themes/default/js/plugins/jDiaporama_img/controls.gif) no-repeat bottom;
  97. top:50%;
  98. margin-top:-16px;
  99. height:32px;
  100. width:32px;
  101. left: 0px
  102. }
  104. .jDiaporama_controls .next{
  105. background:url(themes/default/js/plugins/jDiaporama_img/controls2.png) no-repeat top;
  106. _background:url(themes/default/js/plugins/jDiaporama_img/controls.gif) no-repeat top;
  107. top:50%;
  108. margin-top:-16px;
  109. height:32px;
  110. width:32px;
  111. right: 0px
  112. }
  114. .jDiaporama_controls .pause{
  115. background:url(themes/default/js/plugins/jDiaporama_img/playpause.png) no-repeat top;
  116. _background:url(themes/default/js/plugins/jDiaporama_img/playpause.gif) no-repeat top;
  117. width:64px;
  118. height:48px;
  119. left:50%;
  120. top:50%;
  121. margin-left:-32px;
  122. margin-top:-24px;
  123. }
  125. .jDiaporama_controls .play{
  126. background:url(themes/default/js/plugins/jDiaporama_img/playpause.png) no-repeat bottom;
  127. _background:url(themes/default/js/plugins/jDiaporama_img/playpause.gif) no-repeat bottom;
  128. width:64px;
  129. height:48px;
  130. left:50%;
  131. top:50%;
  132. margin-left:-32px;
  133. margin-top:-24px;
  134. }
  136. /**** Status ****/
  138. .jDiaporama_status{
  139. text-align:center;
  140. margin-top:10px;
  141. position:absolute;
  142. left:50%;
  143. display:none
  144. }
  146. .jDiaporama_status a{
  147. background:url(themes/default/js/plugins/jDiaporama_img/bullets.png) no-repeat left;
  148. _background:url(themes/default/js/plugins/jDiaporama_img/bullets.gif) no-repeat left;
  149. float:left;
  150. width:10px;
  151. height:10px;
  152. text-indent:-9999px;
  153. margin-right:5px;
  154. }
  156. .jDiaporama_status a.active, .jDiaporama_status a:hover{
  157. background:url(themes/default/js/plugins/jDiaporama_img/bullets.png) no-repeat right;
  158. _background:url(themes/default/js/plugins/jDiaporama_img/bullets.gif) no-repeat right;
  159. }
  160. .Police a {
  161. color: #FFF;
  162. font-family: "Freestyle Script";
  163. font-size: 36px;
  164. }
  165. .police {
  166. font-size: 36px;
  167. color: #FFF;
  168. }
  169. .policea {
  170. color: #FFF;
  171. }
  172. </style>
  173. <script type="text/javascript" src="themes/default/js/jquery.min.js"></script>
  174. <script type="text/javascript" src="themes/default/js/plugins/jquery.jDiaporama.js"></script>
  175. <script type="text/javascript">
  176. $(document).ready(function(){
  177.   $(".diaporama1" ).jDiaporama({
  178.     animationSpeed: "slow",
  179.     delay:5
  180.   });
  181. });
  182. </script>
  183. </head>
  185. <body class="Police">
  186. <p class="taille">Bonjour et bienvenue sur mon site dédié à la photographie animalière</p>
  189. <ul class="diaporama1" style="">
  190.   <li><img class="thumbnail" src="./uploads/n/d/h/ndhf7yu2ag/2012/02/05/20120205113829-c4188db7.jpg"/></li>
  191.   <li><img class="thumbnail" src="./uploads/n/d/h/ndhf7yu2ag/2012/02/05/20120205131056-e93d6cc3.jpg"/></li>
  192.   <li><img class="thumbnail" src="./uploads/n/d/h/ndhf7yu2ag/2012/02/05/20120205131107-fa591062.jpg"/></li>
  193.   <li><img class="thumbnail" src="./uploads/n/d/h/ndhf7yu2ag/2012/02/05/20120205131103-21b4ffcb.jpg"/></li>
  194.   <li><img class="thumbnail" src="./uploads/n/d/h/ndhf7yu2ag/2012/02/05/20120205131100-f39829c4.jpg"/></li>
  195.   <li><img class="thumbnail" src="./uploads/n/d/h/ndhf7yu2ag/2012/02/05/20120205131053-2b1b2727.jpg"/></li>
  196.   <li><img class="thumbnail" src="./uploads/n/d/h/ndhf7yu2ag/2012/02/05/20120205131033-80dd5c0f.jpg"/></li>
  197.   <li><img class="thumbnail" src="./uploads/n/d/h/ndhf7yu2ag/2012/02/05/20120205131035-48ca251c.jpg"/></li>
  198.   <li><img class="thumbnail" src="./uploads/n/d/h/ndhf7yu2ag/2012/02/05/20120205131046-cad668aa.jpg"/></li>
  199.   <li><img class="thumbnail" src="./uploads/n/d/h/ndhf7yu2ag/2012/02/05/20120205193246-6b8b8b6d.jpg"/></li>
  200. </ul>
  201. <!--
  202. <p class="taille"><a href="http://jerome62w.piwigo.com/index?"><img src="http://jerome62w.piwigo.com/uploads/n/d/h/ndhf7yu2ag//2011/06/25/20110625102421-cd6b5663.jpg" width="770" height="524" /></a></p>
  203. -->
  204. <p class="taille">&nbsp;</p>
  205. <a href="http://jerome62w.piwigo.com/">Entrer</a> <span class="policea"> - </span><a href="http://jerome62w.piwigo.com/index?/contact">Me contacter</a>
  206. </body>
  207. </html>

mood
Publicité
Posté le 08-02-2012 à 20:44:45  profilanswer
 

n°2125715
jeje6275
Posté le 09-02-2012 à 18:54:13  profilanswer
 

Bonjour,  
Personne n'a rencontrer ce genre de problème  :??:

n°2125930
jeje6275
Posté le 10-02-2012 à 20:50:39  profilanswer
 

Problème résolu merci


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

  Diaporama en page d'accueil

 

Sujets relatifs
[Resolu] Refresh page évènement onClick Datatables[HTML] Livre d'or / commentaires sur page perso
Un diaporama interactif2 formulaires dans une même page html
[HTML/PHP] Page d'accueil dynamique wordpressappliquer une police à une page PHP
Un espace entre ma page et mon header : comment le virer ?Actualisation d'une div sur une même page
Afficher une page HTML dans une autre 
Plus de sujets relatifs à : Diaporama en page d'accueil

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

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