Alors comme dis dans le sous-titre, je n'arrive pas à créer une sous partie d'une div (carte) qui soit scrollable sans que toute la div elle aussi devienne scrollable... Une image vaut mieux qu'un grand discours donc voila mon problème en image : image de gauche avant le scroll image de droite après le scoll. Vous voyez bien le truc qui cloche, j'essaie simplement que les termes du bas soit scrollable et non pas toute la carte. Cette effet est du a overflow auto sur l'ensemble de la carte.
Merci de ton aide mais la l'ensemble des termes sont visibles, ce que je voudrais c'est qu'il y en ai que 3 et qu'ensuite les autres soit visibles par un défilement horizontal. La il n'y a plus de scroll.
FaTalR, d'après ce que je viens de comprendre tu veux réaliser un slider qui affiche tes éléments 3 par 3, si tu veux ça sache que c'est réalisable avec le javaScript, je pense pas que c'est réalisable par le css seulement,
si non le code que je vais te donner affiche les 3 premiers div et tu peux défiler pour voir les autres :
ajouter aux tes termes ce style :
display: inline-block;
width: 33%;
border: 1px solid #000; /* c'est juste pour voir les limites des div */
puis modifier le style de cadre-bottom comme suit :
/*display: flex;*/
width: 100%;
height: 81px; /* tu peux mettre ici height: auto; */
overflow-x: auto;
/*align-items: center;*/
/*justify-content: space-between;*/
/* j'ai laissé les commentaires pour que tu vois ce j'ai enlevé */
Re, merci pour ta réponse mais ça marche toujours pas, tout les termes sont visibles... Je vais surement me tourner comme tu l'as dis du coté de javascript même si je sais pas vraiment en quoi il pourrait m'être utile pour ce problème. Merci de ton aide en tout cas. Le seul moyen que j'ai trouvé pour faire ce genre de carrousel c'est avec webkit-box mais à ce que j'ai pu voir ce type de display n'est pas supporté par tous les navigateurs donc bon, je sèche...
rhooManu : je vois pas trop ce que tu veux dire par la, si tu pouvais un peu plus expliquer ton idée de solution ça serait sympa
manoranx si je peux encore user un peu de ta gentillesse, saurais tu comment faire pour centrer verticalement le texte une fois que le tout est en inline-block ? Comme le texte peut être de longueur variable je ne préfère pas utiliser de line-height. Merci encore en espérant que le message soit lu !
Les termes du bas de la carte ne sont pas centrer verticalement, je voudrais savoir si une technique existe pour les centrer au milieu de la div card_bottom sans utiliser de position relative quelque soit la longueur du texte. Voila une image, peut être que ça rendra les choses plus claires :
Plutôt que d'attribuer un height sur le conteneur, laisse-lui faire la taille de son contenu. Tu n'auras ensuite qu'à mettre un padding sur les liens.
Ceci dit, pour faciliter la question du multi-lignes, autant utiliser flexbox (ce que tu aurais peut-être dû faire pour tout le reste de ta carte en fait. Un peu comme ça : https://codepen.io/EmmanuelBeziat/pen/aVGWme )
- Edité par EmmanuelBeziat 25 novembre 2017 à 15:45:19
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
j'ai réussi à faire aligner les termes verticalement mais toujours je garde le height fixe,
j'ai ajouté un div (display: flex) au milieu du ton terme et je lui ai donné un height fixe (au lieu card-bottom fixe), et au milieu de div ajoutée on peut centrer le contenu verticalement avec align-items: center
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !