Galerie html, avec scroll bar horizontal ...

Galerie html, avec scroll bar horizontal ... - HTML/CSS - Programmation

Marsh Posté le 08-01-2010 à 15:55:11    

Bonjour !
 
Je voudrai refaire l'un de mes sites web en présentant les images sur un espace glissant horizontalement ...
Rien de plus beau, ni performant, je souhaite juste ceci :
 
 
Voilà une illustration, cela sera plus simple pour me comprendre :)
 
http://www.tabasko.net/tmp-forum/slide.jpg
 
Merci pour vos pistes !

Reply

Marsh Posté le 08-01-2010 à 15:55:11   

Reply

Marsh Posté le 11-01-2010 à 09:04:15    

je pensais pas avoir autant de mal à trouver la moindre chose ...
je suis toujours preneur de vos pistes :)
merci.

Reply

Marsh Posté le 12-01-2010 à 18:04:52    

Salut.
 
Pourquoi pas en flash ?


---------------
"2025 : Stupid is now Norm"
Reply

Marsh Posté le 12-01-2010 à 18:58:44    

Parce que j'ai déjà une partie flash dans ma galerie, et je voudrai en avoir une en plus en html ...
Mais bon ma question c'est une solution par en flash .... mais j'attendais qu'on me la pose la question "pourquoi sans flash" .
Merci pour ta contribution  :D

Reply

Marsh Posté le 12-01-2010 à 19:32:33    

Ce que tu demande est possible avec du javascript...
Enfin, si tu veux que ce soit dynamique (que le conteneur des vignettes s'adapte en largeur en fonction du contenu).
Si c'est "fixe" ou que ça ne te gêne pas de modifier manuellement la largeur nécessaire, en théorie, le CSS suffit...
Je dis ça dans le cas ou tu ne souhaite pas dépendre de javascript pour des raisons d'accecibilité, car il s'agirait de faire un script tout bête...

 

Sinon oui, il y a le flash, mais c'est autre chose... Enfin, si tu as deja fait le choix d'en intégrer partiellement, ce n'est pas un problème si tu fait un site full flash hein !


Message édité par abais le 12-01-2010 à 19:45:43

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 12-01-2010 à 21:00:13    

En fait on peut aussi se démerder en CSS pur. Quelques bémols toutefois :

  • Le header est de taille fixe, le faire en taille variable uniquement en CSS  (enfin autrement qu'avec des em et des %), va donner du code probablement imbitable.
  • J'ai mis inline-block sur les div, pour "imiter" le comportement d'une balise <img>. Si tu utilises img directement, pas besoin de inline-block.
  • IE6 va sans doute faire son caca nerveux habituel.


Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
  2.        "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <style type="text/css">
  6. body, html { padding: 0; margin: 0; }
  7. #header {
  8.    background-color: green;
  9.    height: 50px;
  10.    line-height: 50px;
  11.    text-align: center;
  12. }
  13. #images {
  14.    background-color: yellow;
  15.    padding: 5px;
  16.    overflow: auto;
  17.    position: absolute;
  18.    left: 0;
  19.    right: 0;
  20.    top: 50px;
  21.    bottom: 0;
  22.    white-space: nowrap;
  23. }
  24. .image {
  25.    background-color: white;
  26.    display: inline-block;
  27.    width: 300px;
  28.    height: 400px;
  29.    border: 1px solid black;
  30.    text-align: center;
  31.    line-height: 400px;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <div id="header">Zoli header</div>
  37. <div id="images">
  39. <div class="image">Zoli image</div>
  40. <div class="image">Zoli image</div>
  41. <div class="image">Zoli image</div>
  42. <div class="image">Zoli image</div>
  43. <div class="image">Zoli image</div>
  44. <div class="image">Zoli image</div>
  45. <div class="image">Zoli image</div>
  46. <div class="image">Zoli image</div>
  47. <div class="image">Zoli image</div>
  48. <div class="image">Zoli image</div>
  49. <div class="image">Zoli image</div>
  50. <div class="image">Zoli image</div>
  51. <div class="image">Zoli image</div>
  52. <div class="image">Zoli image</div>
  53. <div class="image">Zoli image</div>
  54. <div class="image">Zoli image</div>
  55. <div class="image">Zoli image</div>
  56. <div class="image">Zoli image</div>
  57. <div class="image">Zoli image</div>
  58. <div class="image">Zoli image</div>
  59. <div class="image">Zoli image</div>
  61. </div>
  62. </body>
  63. </html>

Reply

Marsh Posté le 12-01-2010 à 21:56:00    

Merci tpierron ... je vais garder précieusement tes lignes, et j'essayerai.
Par contre ce que mentionne abais semble plus proche de ce que je voudrai.
 
Abais, aurais tu un exemple, un site à me filer ... ?
 
Merci !

Message cité 1 fois
Reply

Marsh Posté le 13-01-2010 à 11:06:05    

tabasko a écrit :

Merci tpierron ... je vais garder précieusement tes lignes, et j'essayerai.
Par contre ce que mentionne abais semble plus proche de ce que je voudrai.
 
Abais, aurais tu un exemple, un site à me filer ... ?
 
Merci !


Non non !
La solution de tpierron fonctionne nickel, tu peux l'utiliser ! (en adaptant à ton besoin bien sûre)
Je ne connaissais pas du tout la propriété white-space, j'ai appris un truc chouette aujourd'hui !


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 13-01-2010 à 11:23:53    

Alors ! avant toute chose : merci !
Je viens de prendre le script.
 
j'aurai souhaité la scroll  bar dans la page elle même et non directement celle du bas de page du navigateur ... et j'aurai aimé être en mesure de mettre un paragraphe en dessous de l'encart photo.
 
Est ce possible ?

Reply

Marsh Posté le 13-01-2010 à 12:42:16    

oui c'est possible, il te suffit de modifier les propriété CSS de #image (l'id de la <div> qui contient les images)...
Libre à toi de rajouter d'autre <div> ailleurs pour du texte...
Il faut par contre que tu plonge un minimum dans le CSS, c'est inévitable
 
en reprenant l'exemple de tpierron :
http://urfman.free.fr/testEmboite.html


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 13-01-2010 à 12:42:16   

Reply

Marsh Posté le 13-01-2010 à 12:53:44    

exactement ce que je voulais ! Merci .
 
Pour archive je laisse le source de ta page d'exemple :
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   
  2.        "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <style type="text/css">
  6. body, html { padding: 0; margin: 0; background-color:#000000 }
  7. #header {
  8.    background-color: white;
  9.   position:relative;
  10.   width : 910px;
  11.    height: 100px;
  12.   margin: 20px auto;
  13.    line-height: 50px;
  14.    text-align: center;
  15. }
  16. #images {
  17.    padding: 5px;
  18.    overflow: auto;
  19.    position: relative;
  20.   border: 1px dashed white;
  21.    width:900px;
  22.   margin:20px auto;
  23.    white-space: nowrap;
  24. }
  25. #commentaire {
  26.    position: relative;
  27.    width:910px;
  28.   color:white;
  29. margin:auto;
  30.  
  31. }
  32. .image {
  33.    background-color: white;
  34.    display: inline-block;
  35.    width: 300px;
  36.    height: 400px;
  37.    border: 1px solid black;
  38.    text-align: center;
  39.    line-height: 400px;
  40. }
  41. </style>
  42. </head>
  43. <body>
  44. <div id="header">Zoli header</div>
  45. <div id="images">
  46. <div class="image">Zoli image</div>
  47. <div class="image">Zoli image</div>
  48. <div class="image">Zoli image</div>
  49. <div class="image">Zoli image</div>
  50. <div class="image">Zoli image</div>
  51. <div class="image">Zoli image</div>
  52. <div class="image">Zoli image</div>
  53. <div class="image">Zoli image</div>
  54. <div class="image">Zoli image</div>
  55. <div class="image">Zoli image</div>
  56. <div class="image">Zoli image</div>
  57. <div class="image">Zoli image</div>
  58. <div class="image">Zoli image</div>
  59. <div class="image">Zoli image</div>
  60. <div class="image">Zoli image</div>
  61. <div class="image">Zoli image</div>
  62. <div class="image">Zoli image</div>
  63. <div class="image">Zoli image</div>
  64. <div class="image">Zoli image</div>
  65. <div class="image">Zoli image</div>
  66. <div class="image">Zoli image</div>
  67. </div>
  68. <div id="commentaire">
  69. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  70. </div>
  71. </body>
  72. </html>


Message édité par tabasko le 13-01-2010 à 12:54:16
Reply

Marsh Posté le 18-04-2012 à 16:32:41    

Bonjour à tous,
 
Déjà merci pour ces codes, ça m'aide énormément.
Je vais faire un site aussi dans cette idée.
Ma cliente veut par contre 2 choses qui me paraissent compliqué pour moi :
- Elle veut un affichage d'info sur chaque image au fur et à mesure que la souris passe.. genre ex ce site : http://www.dimitristheocharis.com/gallery/3/
- et puis elle veut également une façon de grossir ou bien de diminuer à souhait la taille du portofolio genre : http://studiochanel.chanel.com/fr_FR.
 
Je s

Reply

Marsh Posté le 18-04-2012 à 16:34:56    

La suite, sorry.. mes débuts!!!!
 
Je sais pas si c'est possible en code css..
Elle veut pas de flash. car sa cible est branché ipod et iphone..
 
Je vous remercie beaucoup, si jamais des cerveaux sont plus éclairés que le petit mien!

Reply

Sujets relatifs:

Leave a Replay

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