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

Je n'ai pas beaucoup de temps mais je pense que vous devez étudier la piste de Masonry.

http://masonry.desandro.com/layout.html
Modifié par Manhattan (18 Apr 2016 - 10:14)

Fluideweb a écrit :
(et voici le lien vers la-dite galerie : www.fabienluciendesign.com)

chez moi ' ne fonctionne pas le lien...

eviouchka a écrit :

chez moi ' ne fonctionne pas le lien...

Copier-coller l'adresse...

Bonjour,

eviouchka : étrangement la parenthèse de fin a été incluse dans l'adresse, c'est donc simplement : www.fabienluciendesign.com

Manhattan : Je n'ai regarder que rapidement, mais à première vu cela ne semble pas applicable à mon problème, mais je me pencherais dessus plus sérieusement.

Merci encore, et si d'autres parmi vous peuvent m'aider, un grand merci d'avance.
Fluide

Fluideweb a écrit :
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 &lt;li&gt; (mon image).

Moi je ferais un truc comme ça (vite fait et pas finalisé) : CodePen : Specific flex layout
Au programme : flexbox et vw units.

PS : j'ai changé la sémantique car elle était plutôt étrange : un span en lieu et place d'un élément block, une hiérarchie de titre au delà du h6...
Modifié par Olivier C (19 Apr 2016 - 07:23)

Olivier C a écrit :

Moi je ferais un truc comme ça (vite fait et pas finalisé) : CodePen : Specific flex layout
Au programme : flexbox et vw units.

PS : j'ai changé la sémantique car elle était plutôt étrange : un span en lieu et place d'un élément block, une hiérarchie de titre au delà du h6...

Merci Olivier, mais ta méthode permet-elle de positionner une image, propre à chaque projet présenté, comme actuellement ?
Merci également de relever la bizarrerie sémantique. Je suis conscient que c'est paradoxale, mais je le garde pour la fin.

Bonne journée à toi.

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

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)

Bonjour Olivier,

Excusez moi, je pensais qu il s'agissait d une erreur de frappe en mettant flex-direction à wrap.

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).

Je viens de regarder MDN le lien que vous avez indiqué :



ainsi que sur W3C :




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

Donc l'erreur serait de ma part ?
Modifié par alain_47 (24 Apr 2016 - 09:14)

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".