Créer un overflow horizontal
Résolu
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
CSS
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 !
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 !
4 réponses
-
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 ». -
Salut,
Essaie avec « white-space:nowrap; » -
Bonjour,
Oui dans #galerie il y a bien cette propriété. C'est pour cela que je ne sais plus vers quoi me tourner ! -
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à ! :)
