Responsive <li> + <span> et ratio largeur / hauteur

(reprise du message précédent)

Me semble que la techno flexbox n'est pas compatible avec tous les navigateurs, versions. Alors attention...

Sinon, tu as apparemment résolu ton problème non ?
Modifié par ThierryDC (27 Apr 2016 - 12:56)

Bonjour à tous et merci pour ces nombreux indices.

Je découvres à l'instant vos infos et débats car le temps m'a manqué.
Donc avant tout, merci à tous et à dans quelques jours(si tout ce passe comme prévu) pour la suite de cette problèmatique.

Encore un grand merci à tous !
Fluide

Olivier C a écrit :

Mieux que cela : voici une modification du script proposant un nombre de colonnes différent selon la résolution [...] inline justement pour permettre de changer toutes les images des carrés indépendamment les unes des autres.

Olivier, merci !

Ta solution me semble correspondre de trés prés à ce que je cherche, mais avant de me lancer da

Olivier C a écrit :

Mieux que cela : voici une modification du script proposant un nombre de colonnes différent selon la résolution [...] inline justement pour permettre de changer toutes les images des carrés indépendamment les unes des autres.

Olivier, merci !

Ta solution me semble correspondre de trés prés à ce que je cherche, mais avant de me lancer dans la modification de mon code, une question majeur subsiste.

Encore un fois le résultat souhaité, doit être (à part le responsive) exactement le même que sur mon brouillon. www.fabienluciendesign.com
Ta méthode étant nouvelle pour moi, je me demande si l'image avec un over icon+txt+couleur est possible ?
Désolé de chipoter mais le temps m'est compté et sans certitude je ne pourrais me plonger dans les modifs.
Une nouvelle fois, un grand merci.
Fluide

ThierryDC a écrit :
Me semble que la techno flexbox n'est pas compatible avec tous les navigateurs, versions.

@ThierryDC : À ce propos, un site à connaitre absolument : Can I use

Fluideweb a écrit :
Je me demande si l'image avec un over icon+txt+couleur est possible ?

Bien sûr, il faut simplement contourner le problème :
- Étant donné que les éléments en css inline ne supportent pas le :hover il faut gruger en mettant un background-color sur la div enfant qui prendra le dessus.
- Cette div, qui existe déjà dans le code, ne prend pas toute la place de l'élément parent, on va donc la mettre en position absolute avec des valeurs top, bottom, left et right à 0. Ne pas oublier un position relative sur l'élément parent.
- On va lui ajouter un opacity à 0 ou 1 en fonction du survol + un effet de transition.
- Finalement on va remplacer cette div par un link vide (pas de problème en html5, rien n'empêchera de le remplir d'ailleur) afin de bénéficier non seulement du :hover, mais aussi du :focus.

Et voilà : CodePen
Modifié par Olivier C (28 Apr 2016 - 08:03)