Créer un overflow horizontal
Résolu
Noy
-
ikna -
ikna -
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 !
A voir également:
- Créer un overflow horizontal
- Créer un compte google - Guide
- Comment créer un groupe whatsapp - Guide
- Créer un lien pour partager des photos - Guide
- Créer un compte gmail - Guide
- Créer un compte instagram sur google - Guide
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 ».
Si un retour à la ligne est créé, c'est à cause de l'espace.
Mais ce soucis est résolu 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 !
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
CSS
Et voilà ! :)
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à ! :)
J'ai peut être loupé un truc ?
Merci !