ImageFlow : Remonter slide dans la page

ImageFlow : Remonter slide dans la page - HTML/CSS - Programmation

Marsh Posté le 27-03-2011 à 19:13:20    

Bonjour,
 
Je m'adresse aux experts en CSS, Javascript, PHP ou personne ayant déjà utilisé ImageFlow.
 
J'ai réalisé un slider via ImageFlow, cependant j'aimerais le centrer dans ma page pour que l'ensemble tienne sur mon écran.
 
Voici la page incriminée : http://minu.me/42yq
 
Voici mon code HTML

Code :
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  <meta charset="utf-8" />
  5.  <title>...</title>
  6.  <link rel="stylesheet" href="style.css" type="text/css" />
  7.  <link rel="stylesheet" href="imageflow.css" type="text/css" />
  8.  <script type="text/javascript" src="imageflow.packed.js"></script>
  9. </head>
  11. <body>
  13.  <div id="logo">
  14.  <a href="http://www.cafplasticien.fr"><img src="img/logo.png" width="100" height="100" style="border:none" /></a>
  15.  </div>
  18.  <div id="circular_3" class="imageflow">
  19.   <img src="img/act.jpg" longdesc="img/act.jpg" width="750" height="250" alt="act" />
  20.   <img src="img/fight.jpg" longdesc="img/fight.jpg" width="750" height="250" alt="fight" />
  21.   <img src="img/wish.jpg" longdesc="img/wish.jpg" width="750" height="250" alt="wish" />
  22.   <img src="img/push.jpg" longdesc="img/push.jpg" width="750" height="250" alt="push" />
  23.  </div>
  25.  <div id="menu-title"></div>
  26.  <div id="menu" class="menu1">
  27.  <a href="index1.html" title="FIGHT"><img src="img/croixrouge.png" width="20" height="20" style="border:none" /></a>
  28.  <a href="index2.html" title="ITI"><img src="img/croixnoire.png" width="20" height="20" style="border:none" /></a>
  29.  <a href="index3.html" title="LIPS"><img src="img/croixnoire.png" width="20" height="20" style="border:none" /></a>
  30.  <a href="index4.html" title="TOY"><img src="img/croixnoire.png" width="20" height="20" style="border:none" /></a>
  31.  <a href="index5.html" title="VOITURES"><img src="img/croixnoire.png" width="20" height="20" style="border:none" /></a>
  32.  </div>
  34.  <div id="menu" class="menu2">
  35.  <a href="index1.html" title="GALERIE"><img src="img/croixrouge.png" width="20" height="20" style="border:none" /></a>
  36.  <a href="video1.html" title="VIDEOS"><img src="img/croixnoire.png" width="20" height="20" style="border:none" /></a>
  37.  <a href="actualites.html" title="ACTUALITES"><img src="img/croixnoire.png" width="20" height="20" style="border:none" /></a>
  38.  <a href="contact.html" title="CONTACT"><img src="img/croixnoire.png" width="20" height="20" style="border:none" /></a>
  39.  </div>
  41. </body>
  42. </html>


 
Le fichier imageflow.css

Code :
  1. .imageflow {
  2.  overflow:hidden;
  3.  position:relative;
  4.  text-align:left;
  5.  visibility:hidden;
  6.  width:100%;
  7. }
  8. .imageflow img {
  9.  border:none;
  10.  position:absolute;
  11.  top:0px;
  12.  visibility:hidden;
  13.  -ms-interpolation-mode:bicubic; /* Enables bicubic image resampling for the IE7 */
  14. }
  15. .imageflow p {
  16.  margin:0 auto;
  17.  text-align:center;
  18. }
  19. .imageflow .loading {
  20.  border:1px solid white;
  21.  height:15px;
  22.  left:50%;
  23.  margin-left:-106px;
  24.  padding:5px;
  25.  position:relative;
  26.  visibility:visible;
  27.  width:200px;
  28. }
  29. .imageflow .loading_bar {
  30.  background:#fff;
  31.  height:15px;
  32.  visibility:visible;
  33.  width:1%;
  34. }
  35. .imageflow .navigation{
  36.  z-index:10000;
  37. }
  38. .imageflow .caption {
  39.  font-weight:bold;
  40.  position:relative;
  41.  text-align:center;
  42.  z-index:10001;
  43. }
  44. .imageflow .scrollbar {
  45.  border-bottom:1px solid #b3b3b3;
  46.  position:relative;
  47.  visibility:hidden;
  48.  z-index:10002;
  49.  height:1px;
  50. }
  51. .imageflow .slider {
  52.  background:url(slider.png) no-repeat;
  53.  height:14px;
  54.  margin:-6px 0 0 -7px;
  55.  position:absolute;
  56.  width:14px;
  57.  z-index:10003;
  58. }
  59. .imageflow .slideshow {
  60.  cursor:pointer;
  61.  height:14px;
  62.  margin:20px 0 0 20px;
  63.  position:absolute;
  64.  width:14px;
  65.  z-index:10003;
  66. }
  67. .imageflow .slideshow.pause {
  68.  background:url(button_pause.png) no-repeat;
  69. }
  70. .imageflow .slideshow.play {
  71.  background:url(button_play.png) no-repeat;
  72. }
  73. .imageflow .images {
  74.  overflow:hidden;
  75.  white-space:nowrap;
  76. }
  77. .imageflow .button {
  78.  cursor:pointer;
  79.  height:17px;
  80.  position:relative;
  81.  width:17px;
  82. }
  83. .imageflow .previous {
  84.  background: url(button_left.png) top left no-repeat;
  85.  float:left;
  86.  margin: -7px 0 0 -30px;
  87. }
  88. .imageflow .next {
  89.  background: url(button_right.png) top left no-repeat;
  90.  float:right;
  91.  margin:-7px -30px 0 30px;
  92. }
  93. }


 
Je ne vous joins pas le fichier .js. En sachant qu'il s'agit d'une version "packed". Je ne sais pas s'il vous sera très utile.
En sachant que l'imageflow ne fonctionne pas quand j'utilise la version de développement du javascript. (je ne sais pas pourquoi !).
 
Je vous en remercie !
 
PS : Je suis malheureusement très pressée. Dans la mesure où il ne me reste que quelques heures pour mettre le site en ligne ... :(

Reply

Marsh Posté le 27-03-2011 à 19:13:20   

Reply

Sujets relatifs:

Leave a Replay

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