Galerie html, avec scroll bar horizontal ...

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Galerie html, avec scroll bar horizontal ...

tabasko

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

Merci pour vos pistes !

Publicité

tabasko

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

toum_toum

Vivons masqués

Salut.

Pourquoi pas en flash ?

---------------
“Et maintenant, la météo" - Soloviev 2022-2024

tabasko

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

abais

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.

tpierron

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 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body, html { padding: 0; margin: 0; }
#header {
background-color: green;
height: 50px;
line-height: 50px;
text-align: center;
}
#images {
background-color: yellow;
padding: 5px;
overflow: auto;
position: absolute;
left: 0;
right: 0;
top: 50px;
bottom: 0;
white-space: nowrap;
}
.image {
background-color: white;
display: inline-block;
width: 300px;
height: 400px;
border: 1px solid black;
text-align: center;
line-height: 400px;
}
</style>
</head>
<body>
<div id="header">Zoli header</div>
<div id="images">
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
</div>
</body>
</html>

tabasko

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

abais

tabasko a écrit :

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.

tabasko

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 ?

abais

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.

Publicité

tabasko

exactement ce que je voulais ! Merci .

Pour archive je laisse le source de ta page d'exemple :

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body, html { padding: 0; margin: 0; background-color:#000000 }
#header {
background-color: white;
position:relative;
width : 910px;
height: 100px;
margin: 20px auto;
line-height: 50px;
text-align: center;
}
#images {
padding: 5px;
overflow: auto;
position: relative;
border: 1px dashed white;
width:900px;
margin:20px auto;
white-space: nowrap;
}
#commentaire {
position: relative;
width:910px;
color:white;
margin:auto;
}
.image {
background-color: white;
display: inline-block;
width: 300px;
height: 400px;
border: 1px solid black;
text-align: center;
line-height: 400px;
}
</style>
</head>
<body>
<div id="header">Zoli header</div>
<div id="images">
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
</div>
<div id="commentaire">
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.
</div>
</body>
</html>

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

mikloo

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

mikloo

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!

FORUM HardWare.fr

Programmation

HTML/CSS

Galerie html, avec scroll bar horizontal ...

Sujets relatifs
[HTML]Liens qui bypass une frame	faire un image et non pas un rendu HTML
Intrepretation du code Html dans Microsoft EXCEL	[HTML/Css/Javascript] Listes liées avec la librairie prototype
Problème de validation W3C (script pris pour du HTML)	html, simuler la touche ctrl sur un lien
PAGE HTML SANS CADRE POUR L INDEX ET TOUTE LES AUTRES PAGES	Protection contre injection HTML
Importer donné XML vers une page HTML	html et object image dans le lecteur avant visualisation
Plus de sujets relatifs à : Galerie html, avec scroll bar horizontal ...

Page générée en 0.095 secondes