1476 sujets

Web Mobile et responsive web design

Pages :
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
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
Olivier C a écrit :

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


Salut Olivier et encore merci de suivre mon sujet.

Ta méthode semble vraiment intéressante mais j'avoue ne pas tout comprendre.
Crois-tu également que cela soit applicable sur 6 colonnes et pour que tous les "carrés" soient différents ?
J'ai fais un essaie pour le nombre de div en largeur, donc 6. Mais cela devient des rectangles.
Aurais-tu le temps de me faire un exemple avec au moins 2 div différentes ? Car là, je suis dans le flou total… Comment répètes-tu la div dans ton exemple ?
Je redonne le lien vers ce que j'ai codé pour éviter les mal-entendus… www.fabienluciendesign.com
Chaque "carré" doit être différents : il a sa propre image, son propre txt, sa propre icone et dois être un bouton.
Encore merci à toi, et au plaisir de te lire pour mieux comprendre.
Bonne journée !
Fluide
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)
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é :

upload/61012-flexdirect.JPG

ainsi que sur W3C :

upload/61012-olivier02w.JPG


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 ? Smiley cligne
Modifié par alain_47 (24 Apr 2016 - 09:14)
desolé, je me suis trompe d image !

voila la copie d ecran de MDN

upload/61012-olivierfle.JPG
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)
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)
Pages :