<div> et responsive

Bonjour à tous,

Je rencontre des difficultés pour avoir un div et des images à l’intérieur de celui-ci en responsive...
Voici le résultat sur un affiche de bureau :



Et sur Ipad, le problème, les images ne se réduisent pas afin de rester sur une seule ligne :



Voici le code :

<div class="block-selection">
      <div class="product5">
           <a href="#"><img src="/images/canne-dr-house.png" style="max-width:150px; min-width:50px;"></a>
           <h2>Canne flammes - 59€</h2>
           <span>Pour avancer plus vite !</span>
           </a>                        
       </div>
      <div class="product5">
 <a href="#"><img src="/images/canne-carbone.png" style="max-width: 150px; min-width: 25%;"></a>
          <h2>Canne carbone - 46€</h2>
          <span>Ultra légère !</span>
          </a>
      </div>
etc...

Et le CSS:

.block-selection {
	float:center;
	width:100%;
	margin:30px 0 50px;
	}
	
.block-selection img { width: 100%; height: auto; }
	
.product5 {
  float:left;
  padding:0px 0 31px 5px;
  color: #58585A;
  height:auto;
  text-align:left;
}

Merci d'avance pour votre aide
Yo
Modifié par jacraquejacroque (01 Sep 2015 - 11:39)

Salut,

Le problème ici est que tu ne donne pas de taille à tes images.

.block-selection img { width: 100%; }

Avec ce code tes images prennent 100% de leurs parents. Hors, le premier parent est un a (donc en inline) et le parent au dessus est en float... du coup ils sont censés prendre la taille de leur contenu on tourne un peu en rond !

Pour faire simple il faudrait que ce soit tes blocs .product5 qui se partagent la largeur du conteneur block-selection. Les images suivront en conséquence vu qu'elles prennent la largeur de leur parent (attention toutefois au <a> qui entoure les image il faudra peut etre lui donner un display block ou inline-block pour qu'il englobe bien l'image).

Pour faire ça tu à de multiples solution (autre que le float qui est un peu bancale pour cette utilisation) :
- FlexBox
- display:table; et là aussi
- display:inline-block;
- ...

Bon code !
Modifié par _laurent (01 Sep 2015 - 14:09)

Bonjour Laurent,

Merci pour ton aide.
Malgré cela, je n'arrive toujours pas à réduire les images et elles continuent donc à s'afficher sur deux lignes..

<ul style="padding: 0;margin: 45px 0 0;">
      <li style="min-width: 50px; width: 33.3333%; max-width: 189px; display: inline-block;">
           <img src="/images/canne-dr-house.png" style="display: block; height: auto; width: 100%;">
       </li>
      <li style="min-width: 50px; width: 33.3333%; max-width: 189px; display: inline-block;">
<img src="/images/canne-carbone.png" style="display: block; height: auto; width: 100%;">
      </li>
      <li style="min-width: 50px; width: 33.3333%; max-width: 189px; display: inline-block;">
          <img src="/images/canne-confort.png" style="display: block; height: auto; width: 100%;">                       
      </li>
      <li style="min-width: 50px; width: 33.3333%; max-width: 189px; display: inline-block;">
<img src="/images/canne-camouflage.png" style="display: block; height: auto; width: 100%;">
      </li>
      <li style="min-width: 50px; width: 33.3333%; max-width: 189px; display: inline-block;">    
 <img src="/images/canne-cheval.png" style="display: block; height: auto; width: 100%;;">
      </li>     
</ul>

Modifié par jacraquejacroque (01 Sep 2015 - 17:01)

Re,

Alors déjà on oublie le style inline au profit de class et d'un css léger !

Donc on repart simple avec un html comme ça :

<ul class="wrapper">
    <li class="col">
        <img class="image" src="path/img/kiwi.png" />
    </li>
    <!-- Avec X fois le bloc <li> -->
</ul>

Pour les .images, tu es bon mais tu peux te passer du height:auto; et du display:block; ce sont des comportement déjà adoptés. Donc un simple :

.image{
      width:100%;
}

Suffit.
Du coté du wrapper t'es bon aussi (faut effectivement faire attention aux margin et padding par défaut). Tu pourrais peut etre rajouter un list-style-type:none; si tu ne veux pas avoir les puces de la liste.

Maintenant le gros du problème, les .col
Premier soucis tu à 5 block à 33.3333% de largeur. Hop on prend la calculatrice :
5 x 33.3333 = 166.6665 %
Pas mal, bien tenté... mais loupé !
Si tu veux que X colonnes se partagent la largeur totale qui est de 100%, il va falloir diviser la largeur par X... et tu peu même directement demander au CSS de le faire pour toi :

.col{
      display:inline-block;
      width:calc(100% / 6); /*Ou 6 est ton nombre de colonne*/
}

Et puis... bah c'est tout. On a besoin de rien d'autre.
Fixer un max-width si tu veux, ca arrêtera les colonnes à une certaine taille (bien que je préfère donner une limite au wrapper plutôt qu'aux colonnes).
Si tu fixe un min-width par contre tu tombera sur la cas ou la somme de ces min-width sera supérieur à la largeur du .wrapper et les blocs tomberont.

Bon, si tu tente ça tu verra que je mens, il manque un truc car rien qu'avec ça le "bug des inline-block" crée des espaces insécables qui font tomber la derniere colonne. Il te suffit de piocher une solution dans cet article (après l'avoir lu bien sur ! ) http://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html

Et voila le travail : https://jsfiddle.net/d2kgmh56/
Modifié par _laurent (01 Sep 2015 - 21:30)

Bonjour Laurent,

Tout simplement Merci !
Tout est plus claire grâce à toi.

il y a la class .img-responsive avec bootstrap qui est facile d'utilisation