28117 sujets

CSS et mise en forme, CSS3

[résolu] Galerie horizontale en css

bonjour,

depuis quelques semaines je cherche a réaliser pareil qu'ici -http://www.alexandrasophie.fr.nf/

dans la rubrique portrait, on defile les photos en horizontale. je vois cette methode un peu partout et ca m'interesse aussi

merci et bonne soirée
Modifié par dayassine (26 Mar 2010 - 15:14)
C'est une frame, rien de très intéressant, elle affiche la page :http://alexandrasophie.comxa.com/Website/pages/portraits.html
A choisir je te préfère plutôt une lightbox, bien plus jolie
bonjour,

merci pour ta réponse mais je parle pas du site dans l'iframe Smiley smile je parle plutot du defilement des images.

merci
Le défilement n'est que la conséquence de la taille trop importante du site contenu par rapport à la iframe
Re bonjour, en fait il suffit de créer un cadre (ici div="image") et de lui donner une taille importante en width (la somme de des width des images)

<html>
<head>
<style type="text/css">

#image{
width:2100px;}

</style>
</head>
<body>
<div id="image">
<img src="http://www.alsacreations.com/css/img/logo-alsacreations.png"/>
<img src="http://www.alsacreations.com/css/img/menu-apprendre.png"/>
<img src="http://www.alsacreations.com/css/img/menu-forum.png"/>
<img src="http://www.alsacreations.com/css/img/menu-emploi.png"/>
<img src="http://www.alsacreations.com/css/img/logo-alsacreations.png"/>
<img src="http://www.alsacreations.com/css/img/menu-apprendre.png"/>
<img src="http://www.alsacreations.com/css/img/menu-forum.png"/>
<img src="http://www.alsacreations.com/css/img/menu-emploi.png"/>
</div>
</body>
</html>

Rien de très compliqué, mais bon, ça reste une iframe...
(je préfère l'utilisation de lightbox)
Modifié par Heyoan (26 Mar 2010 - 14:28)
pkoi tu dis : Rien de très compliqué, mais bon, ça reste une iframe??

une div n'est pas une ifram

pour les lightbox je l'utilise pour un de mes sites, mais ca convient pas avec l'idée que j'ai pour mon site perso
C'est vrai, en fait sur l'autre page (http://www.alexandrasophie.fr.nf/) il y a une iframe (une fenêtre en quelque sorte) qui laisse apparaitre la page qui contient les images alignées et le scroll (http://alexandrasophie.comxa.com/Website/pages/portraits.html)

J'ai dit rien de compliqué car il n'y a pas besoin de beaucoup de connaissances pour mettre ceci en place
Modifié par coeos (26 Mar 2010 - 14:03)
Hello,

sur le principe tu peux faire ça :
#global {
	width: 800px;
	border: 1px solid #000;
	margin: 0 auto;
	overflow: auto;

}
#dipaorama {
	width: 2000px;
	padding: 10px;
}

#dipaorama img {
	padding: 0 4px;
}
<div id="global">
	<div id="dipaorama"> 
		<img src="http://www.alsacreations.com/css/img/logo-alsacreations.png"/> 
		<img src="http://www.alsacreations.com/css/img/menu-apprendre.png"/> 
		<img src="http://www.alsacreations.com/css/img/menu-forum.png"/> 
		<img src="http://www.alsacreations.com/css/img/menu-emploi.png"/> 
		<img src="http://www.alsacreations.com/css/img/logo-alsacreations.png"/> 
		<img src="http://www.alsacreations.com/css/img/menu-apprendre.png"/> 
		<img src="http://www.alsacreations.com/css/img/menu-forum.png"/> 
		<img src="http://www.alsacreations.com/css/img/menu-emploi.png"/> 
	</div>
</div>
Pour donner la largeur "exacte" à #diaporama dans le cas où les images sont ajoutées dynamiquement tu peux regarder du côté de getimagesize.
ok je test et vous tiendrai au courant, j'etais webmaster y'a qq années mais je suis plus les nouveautés.

donc mon but et de garder la largeur de ma page en 800px par exemple et dans une div mettre les images qui scrollent en horiz.

j'y vais de ce pas tester
merci
voila c'était bien ce que je cherchais, je savais que c'était possible sans iframe en css.
overflow m'avait échappé

merci a vous 2
Sujet clos
Aller à