Sujet Précédent Sujet Suivant

Créer un overflow horizontal

Résolu/Fermé
Noy - 10 sept. 2011 à 16:24
 ikna - 14 août 2012 à 07:05
Bonjour,
J'essaye de créer un overflow horizontal mais sans succès : les images ce positionnent les unes en dessous des autres alors qu'elles devraient se positionner les unes a coté des autres.

HTML 
 <div id="contenu">
       	  <div id="gradient"></div>
        
        	<div id="galerie">
                <img src="images/1.jpg" alt="" width="500px" height="500px"/>
                <img src="images/2.jpg" alt=""  width="771px" height="500px" />
                <img src="images/3.jpg" alt=""  width="747px"   height="500px"/>
        </div>


CSS 
#contenu {
	height: 505px;
	width: 1000px;
	padding-top: 5px;
	float: left;
}

#gradient {
	float: left;
	height: 500px;
	width: 50px;
	background-image: url(images/gradient.png);
	background-repeat: repeat-y;
	position: absolute;
	top: 225px;
	z-index: 10;
}
#galerie {
	width:1000px;
	height:500px;
	overflow-y: hidden;
	overflow-x: auto;
	white-space: nowrap;
}

#galerie img {
	float: left;
	padding-left: 5px;
}



Je ne suis pourtant pas débutant mais c'est la première fois que je me pose ce genre de problème et j'avoue que je colle sur ce coup là :)

Merci !

A voir également:

4 réponses

Réponse 1 / 4
avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 504
10 sept. 2011 à 16:56
Le float est inutile, les balises <img /> sont déjà de type inline, donc elles se suivent sans créer un retour à la ligne.

Si un retour à la ligne est créé, c'est à cause de l'espace.
Mais ce soucis est résolu avec « white-space: nowrap ».
1
Noy
10 sept. 2011 à 17:10
J'ai également essayé en ajoutant cette propriété a '#galerie img' mais çà ne fonctionne pas.
J'ai peut être loupé un truc ?
0
Noy
10 sept. 2011 à 17:14
Autant pour moi ! il fallait l'appliquer a #galerie mais aussi a #galerie img !!! Cette solution et meilleure car dans ma solution de la liste ci dessous, on est obligé d'appliquer une largeur a #galerie ul, ce qui n'est pas pratique lorsqu'on fait un site administrable.
Merci !
0
Réponse 2 / 4
avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 504
10 sept. 2011 à 16:37
Salut,

Essaie avec « white-space:nowrap; »
0
Réponse 3 / 4
Noy
10 sept. 2011 à 16:45
Bonjour,
Oui dans #galerie il y a bien cette propriété. C'est pour cela que je ne sais plus vers quoi me tourner !
0
Réponse 4 / 4
Noy
10 sept. 2011 à 17:03
Finalement j'ai revu la structure en mettant les images a l'intérieur d'une liste et çà fonctionne bien.
Voici mes codes corrigés si çà peut aider quelqu'un :

HTML 
 <div id="contenu">
       	  <div id="gradient"></div>
        
        	<div id="galerie">
            	<ul>
                <li><img src="images/1.jpg" alt="" width="500px" height="500px"/></li>
                <li><img src="images/2.jpg" alt=""  width="771px" height="500px" /></li>
                <li><img src="images/3.jpg" alt=""  width="747px"   height="500px"/></li>
                </ul>
            </div>
        </div>


CSS 
#contenu {
	height: 525px;
	width: 1000px;
	padding-top: 5px;
	float: left;
}

#gradient {
	float: left;
	height: 500px;
	width: 50px;
	background-image: url(images/gradient.png);
	background-repeat: repeat-y;
	position: absolute;
	top: 230px;
	z-index: 10;
}
#galerie {
	width:1000px;
	height:520px;
	overflow-y: hidden;
	overflow-x: auto;
	white-space: nowrap;
}
#galerie ul{
	width:3000px;
}
#galerie li{
	float:left;
	padding-left:5px;
	list-style:none;
}


Et voilà ! :)
0
avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 504
10 sept. 2011 à 17:07
Ça fonctionne aussi bien sans les listes :
https://gist.github.com/bde0130b943290fe3129
0
Noy
10 sept. 2011 à 17:22
Ouip, je n'avais pas vu ta deuxième réponse avant de publier ceci !
0
ikna
14 août 2012 à 07:05
C'est exactement ce que je cherchais, merci beaucoup :)
0

Discussions similaires

Comment créer un compte torrent ?
Gotdann2003 -
Redbart -

1 réponse
créer une adresse gmail pour une autre personne
Emma33000 -
Emma33000 -

2 réponses