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

Bonjour à tous,

Je me tourne aujourd'hui vers vous car je fais face un problème pour lequel je ne trouve aucune solution.
Je travail depuis quelques temps à la création d'un portfolio en html/css et ai utilisé un élément <li> doublé d'une <span> affichant un texte au survol, pour la navigation au sein des projets.

Je m'explique (et voici le lien vers la-dite galerie : www.fabienluciendesign.com) :
Mes projets sont présentés sous la forme d'une image carré (élément <li>) sur laquelle une couleur + un texte + un icon s'affiche au survol (la <span>).
Mon problème est de réussir à occuper toute la largeur d'un écran quelque soit la résolution, avec toujours des carrés à touche-touche. Seulement, lorsque j'applique une largeur et une hauteur en % la span ne recouvre plus l'intégralité de l'élément <li> (mon image).

Sauriez-vous me sortir de cette impasse ou m'aiguiller vers une solution qui ne m'impose pas de trop lourd changements ?
Merci d'avance à tous ceux qui se pencherons sur cette question, et bonne soirée vous.
Fluide

eviouchka a écrit :

chez moi ' ne fonctionne pas le lien...

Copier-coller l'adresse...

Fluideweb a écrit :
Ta méthode permet-elle de positionner une image, propre à chaque projet présenté, comme actuellement ?

Bien sûr. La meilleure solution étant à mon avis de l'injecter via un 'background-image' que l'on peut mettre directement sur chaque div, allié à un 'backgound-size:cover'.

Exemple (vite fait) : CodePen

Bonjour,

Arf, Olivier utilise un générateur de template pour l'HTML et un framework pour le CSS, donc pour voir le code, il faut que dans Codepen tu cliques sur les boutons "View compiled" pour voir à quoi ça ressemble en "langage navigateur"

EDIT : et oui, évidemment ça s'adapte pour 6 colonnes également, la ligne secrète c'est ça width: calc(100% / 6);, il faudra ensuite retoucher la taille de la police etc...
Modifié par SolidSnake (22 Apr 2016 - 11:59)

SolidSnake a écrit :
Bonjour,

Arf, Olivier utilise un générateur de template pour […] ligne secrète c'est ça width: calc(100% / 6);, il faudra ensuite retoucher la taille de la police etc...

Bonjour SolidSnake !
Merci pour cette info essentielle.
Je me penche dessus dés que je trouve un moment.
Bonne journée à toi et encore merci pour ce pertinent conseil.
Fluide

Fluideweb a écrit :
Crois-tu également que cela soit applicable sur 6 colonnes et pour que tous les "carrés" soient différents ?

Mieux que cela : voici une modification du script proposant un nombre de colonnes différent selon la résolution : CodePen.

En effet, même si les colonnes s'adaptent correctement à la largeur de l'écran, 6 colonnes pour un mobile c'est tout simplement illisible.

PS : les background-image sont appelés en inline justement pour permettre de changer toutes les images des carrés indépendamment les unes des autres.
Modifié par Olivier C (24 Apr 2016 - 14:50)

Bonjour,



" flex-direction : wrap ; " ... flex-direction : row; ?

alain_47 a écrit :
" flex-direction : wrap ; " ... flex-direction : row; ?

"wrap" pour des items en ligne en passant à la ligne s'il en reste, "row" pour la possibilité des les mettre en colonne (de haut en bas par défaut).

EDIT : mea culpa, c'est effectivement row et non wrap. Mon côté dyslexique...

Une simple recherche aurait suffit à lever le voile : Google

Notez que, quand on fait une recherche sur le CSS ou le HTML, l'un des sites les plus intéressant à consulter dans les résultats est celui de Mozilla Developer Network : MDN flex-direction
Modifié par Olivier C (24 Apr 2016 - 14:47)

desolé, je me suis trompe d image !

voila la copie d ecran de MDN


Modifié par alain_47 (24 Apr 2016 - 09:09)

alain_47 a écrit :
Il me semblait que flex-firection ne pouvait prendre que les valeurs "row" et "column" (et leur inverse) et que le "wrap" devait etre utilisé avec "flex-wrap" (ce que vous avez fait à la ligne suivante).

Oui, bien sûr, alain tu as raison, impossible d'utiliser la valeur "wrap" dans la propriété "flex-direction" !
Donc dans le sélecteur .grid, flex-direction n'est pas pris en compte car comporte une erreur et par défaut prendra la valeur par défaut "row".

Olivier C a écrit :

"wrap" pour des items en ligne en passant à la ligne s'il en reste, "row" pour la possibilité des les mettre en colonne (de haut en bas par défaut).

Oui pour "wrap" mais dans la propriété "flex-wrap" (ou bien flex-flow ou encore flex, mais bon je ne trouve pas ça très clair...) mais non pour "row", si tu veux les mettre de haut en bas, c'est "column".

@alain_47 and @MatthieuR : Mea culpa, c'est effectivement "row" et non "wrap". Mon côté dyslexique...

alain_47 a écrit :
Personnellement, j utilise plutot flex-flow (on indique les 2 sur la meme ligne : "flex-flow : row wrap;"

Je n'utilise pas ce raccourci car - de mémoire - il y a un problème de compatibilité avec Safari 5.
Modifié par Olivier C (24 Apr 2016 - 15:02)