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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  ImageFlow : Remonter slide dans la page

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

ImageFlow : Remonter slide dans la page

n°2066367
tweetoox
Posté le 27-03-2011 à 19:13:20  profilanswer
 

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>
  10. <body>
  11.  <div id="logo">
  12.  <a href="http://www.cafplasticien.fr"><img src="img/logo.png" width="100" height="100" style="border:none" /></a>
  13.  </div>
  14.  <div id="circular_3" class="imageflow">
  15.   <img src="img/act.jpg" longdesc="img/act.jpg" width="750" height="250" alt="act" />
  16.   <img src="img/fight.jpg" longdesc="img/fight.jpg" width="750" height="250" alt="fight" />
  17.   <img src="img/wish.jpg" longdesc="img/wish.jpg" width="750" height="250" alt="wish" />
  18.   <img src="img/push.jpg" longdesc="img/push.jpg" width="750" height="250" alt="push" />
  19.  </div>
  20.  <div id="menu-title"></div>
  21.  <div id="menu" class="menu1">
  22.  <a href="index1.html" title="FIGHT"><img src="img/croixrouge.png" width="20" height="20" style="border:none" /></a>
  23.  <a href="index2.html" title="ITI"><img src="img/croixnoire.png" width="20" height="20" style="border:none" /></a>
  24.  <a href="index3.html" title="LIPS"><img src="img/croixnoire.png" width="20" height="20" style="border:none" /></a>
  25.  <a href="index4.html" title="TOY"><img src="img/croixnoire.png" width="20" height="20" style="border:none" /></a>
  26.  <a href="index5.html" title="VOITURES"><img src="img/croixnoire.png" width="20" height="20" style="border:none" /></a>
  27.  </div>
  28.  <div id="menu" class="menu2">
  29.  <a href="index1.html" title="GALERIE"><img src="img/croixrouge.png" width="20" height="20" style="border:none" /></a>
  30.  <a href="video1.html" title="VIDEOS"><img src="img/croixnoire.png" width="20" height="20" style="border:none" /></a>
  31.  <a href="actualites.html" title="ACTUALITES"><img src="img/croixnoire.png" width="20" height="20" style="border:none" /></a>
  32.  <a href="contact.html" title="CONTACT"><img src="img/croixnoire.png" width="20" height="20" style="border:none" /></a>
  33.  </div>
  34. </body>
  35. </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 ... :(

mood
Publicité
Posté le 27-03-2011 à 19:13:20  profilanswer
 


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

  ImageFlow : Remonter slide dans la page

 

Sujets relatifs
Centrer video Flash dans page htmlouverture automatique d'une page web sur cd
[Résolu] Alerte SANS bloquer la pagemacro excel qui passe sur plusieurs page
Convertir une page web en fichier PDF ou DOC[Résolu] Changer le contenu d'une page html
ouvertutre dun iframe au dessus de ma pagecentralisation de liens sur une page Web
adapté la taille d'un div contenant un include a sa page "appelée"[Rémunération]Cherche Programmeur pour une simple page
Plus de sujets relatifs à : ImageFlow : Remonter slide dans la page


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