Bandeau d'images

Bandeau d'images - HTML/CSS - Programmation

Marsh Posté le 11-10-2005 à 16:37:28    

Salut ;)
 
Je vous l'accorde je ne sais pas si c'est la bonne catégorie puisque je ne sais pas vraiment quel langage va me faire trouver mon bonheur! :d
 
Voila le probleme :
 
Sur cette page, vous pouvez voir que lorsqu'il ya trop de photos (miniatures) a afficher, l'afficahge se dégrade et evidement les photos s'affiche sur plusieurs lignes..
Je voudrais éviter cela en mettant toutes les photos sur la meme ligne horizontal et que le visiteur est possibilité de les faire défiler..
 
J'ai penser à mettre un "ascensceur" horizontal (celui de windows) mais cela va me faire recourir aux frames non? (bouh  :non: )
Je preferais aussi que l'utilisateur doivent cliquer pour faire defiler les images, les bandeau réactive a la souris sont tres souvent mal foutu
ps: il faut que le rendu soit "classe" , en accord aec le design du site.. donc presque invisible ( a part les boutons de defilement, ou une barre?)
 
Voila, j'espere que vous allez pouvoir m'aider a m'orienter vers une solution (je ne demande pas a ce qu'on me le fasse!)
javascript? flash? java? html tout bete?
 
Merci


Message édité par bixibu le 11-10-2005 à 19:59:24
Reply

Marsh Posté le 11-10-2005 à 16:37:28   

Reply

Marsh Posté le 11-10-2005 à 20:36:35    

avec un overflow

Reply

Marsh Posté le 11-10-2005 à 21:37:40    

Hum..
 
.espace_bandeau {padding-top:3px; float:left; width:100%;  height:90px; border-top: 1px solid #a9a9a9; overflow:auto; display:inline
}
 
Ca ne marche pas, je pige pas pourquoi :(
 
meme avec overflow:scroll


Message édité par bixibu le 11-10-2005 à 21:38:00
Reply

Marsh Posté le 11-10-2005 à 21:59:28    

Je pense qu'il faut que tu fixes ta width en absolu, cad avec des pixels.

Reply

Marsh Posté le 12-10-2005 à 15:25:50    

marche toujours pas :(
 
.espace_bandeau {padding-top:3px; float:left;width:750px;  height:90px; border-top: 1px solid #a9a9a9; overflow:scroll; display:inline;
}
 
bouh merci pour l'aide en tous cas

Reply

Marsh Posté le 12-10-2005 à 16:29:38    

"display:inline" indique que c'est un élément sans taille définis et sans taille définissable. Donc vire ça, ca empéche les width et height d'agir.

Reply

Marsh Posté le 12-10-2005 à 16:35:01    

Ok bon..
 
.espace_bandeau {padding-top:3px; float:left;width:750px;  height:90px; border-top: 1px solid #a9a9a9; overflow:scroll;
}
 
Ca ne marche pas, j'ai bien la width et height de fixe mais l'ascenseur est vertical et non horizontla.. mes photos passent toujours a la ligne :(
 
Comment faire? j'ai vraiment essayer plein de truc et display, overflow.. je vois pas

Reply

Marsh Posté le 11-11-2005 à 13:42:09    

Salut ;)
 
J'ai toujours le meme probleme (que j'avais laissé tombé) mais j'espere bien y arrivé!
 
J'ai testé vraiment beaucoup de choses et j'y arrive pas!  
A savoir que j'aimerais : avoir un ascensseur horizontal pour faire defiler les photos que j'ai (donc sur une seule ligne !).
 
voici le code html :

Code :
  1. <div class="corps">       
  2.          <div class="espace_photo">             //div d'affichage de la photo grandeur nature
  3.                           <br class="clearall" /> 
  4.                           <img src="max_a.jpg" id="pouet" />
  5.          </div>     
  6.          <div class="espace_bandeau">            //div contenant les vignette, c'est sur cette div qu'il faudrait un ascensceur        
  7.               <a href="#NULL" OnClick="document.getElementById('pouet').src='max_a.jpg'">           //vignette 1  
  8.                           <img border="0" class="vignette" src="mini_a.jpg" />
  9.               </a>
  10.               <a href="#NULL" OnClick="document.getElementById('pouet').src='max_b.jpg'">           //vignette 2 ..etc  
  11.                           <img border="0" class="vignette" src="mini_b.jpg" />
  12.               </a>
  13.         </div>
  14. </div>


ps:le javascript ici n'est pas important il me sert juste a afficher (au dessus) en grand la vignette sur laquelle on clik
 
le css:

Code :
  1. .corps {background:white; color: black}
  2. .espace_bandeau {padding-top:3px; float:left;width:750px;  height:90px; border-top: 1px solid #a9a9a9; overflow:scroll;
  3. }
  4. .espace_photo {float:left; height:425px; width:100%}
  5. .vignette {border-right:1px solid #a9a9a9;}


 
le site est visible ici si vous voulez : http://www.annabelletiaffay.com
 
Merci beaucoup de votre aide

Reply

Marsh Posté le 11-11-2005 à 15:09:24    

c con, je peux pas afficher les images en "grand sur ton site" ....
 
( ps: j'ai le JS de desactivé )

Reply

Marsh Posté le 11-11-2005 à 15:46:27    

Okay je vais regler ca ;) merci  
 
Sinon pour mon probleme si quelqu'un veut bien se pencher dessus avec moi
 
;) merci

Reply

Marsh Posté le 11-11-2005 à 15:46:27   

Reply

Marsh Posté le 11-11-2005 à 16:19:38    

bl@p_psx peut tu essayer de regarder mes pages?
 
je pense avoir regler le probleme du javascript mais je suis pas sur de mes tests avec et sans javascript
 
merci

Reply

Marsh Posté le 12-11-2005 à 01:54:28    

là, c'est bien mieux ! fonctionel sans JS ! c bien cool ! ca aurais ete domage de faire du JS pour charger une image alors que tu as des pages assez legere, facilement en cache, et en php !
 
@+

Reply

Marsh Posté le 12-11-2005 à 20:00:13    

Effectivement ;)
 
J'essaye de mettre mes pages top compatible avec tout!
 
merci de ton coup de main

Reply

Sujets relatifs:

Leave a Replay

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