bonjour à tous !
j'essaye de mettre en place un design à l'aide de la propriété grid (https://gridbyexample.com/learn/)
mon container contient 3 colonnes, répétées sur x lignes (dynamiques en php)
la colonne 1 contient une image (uniquement)
la colonne 2 et 3 contiennent du texte
ma css est telle que :
le 520px vient du fait que j'avais auparavant un max-width: 500px sur l'img (avec 10px de padding, ça fait 520px)
mais peu importe comment je définis la largeur de ma première colonne, ça ne donne pas ce que je veux ^^
avec la définition indiquée, c'est le moins pire mais c'est pas encore ça
j'ai un border sur mes "cellules" mais le border des cellules de la colonne 1 ne va pas jusqu'au bout (comme si la colonne ne faisait pas la largeur demandée mais moins)
voilà en gros ce que ça donne : http://vrac.phpblocnote.net/table.png
j'ai masqué les contenus pour qu'on voie bien le border de la colonne 1 qui s'arrête en cours de route ^^
j'ai essayé de définir ma colonne en fr mais la colonne n'était pas plus large et l'image était mise à l'échelle (donc riquiqui) => non
j'ai essayé avec minmax(1fr, 520px) mais ça cassait tout et chaque div était à la ligne => non
je ne comprends pas pourquoi ça ne fonctionne pas correctement
même si j'ajoute du texte dans la colonne 1, ça ne fonctionne pas non plus (au début, je pensais que c'était l'image qui faisait bugguer le truc mais peut-être pas du coup)
une idée géniale ?
je vais essayer de mettre un poc en ligne
ça n'a rien de vital, si je n'arrive pas à faire fonctionner ce grid, je resterai avec mon tableau mais franchement, ce serait dommage (et j'aime bien comprendre pourquoi les choses sont telles qu'elles sont) ^^
navigateurs utilisés : FF 59, 52 et chrome 65
niveau css : débutant +
merci d'avance !
j'essaye de mettre en place un design à l'aide de la propriété grid (https://gridbyexample.com/learn/)
mon container contient 3 colonnes, répétées sur x lignes (dynamiques en php)
la colonne 1 contient une image (uniquement)
la colonne 2 et 3 contiennent du texte
ma css est telle que :
.container {display: grid;width: 100%;grid-template-columns: 520px 2fr 0.6fr;grid-template-rows: repeat(auto-fill, 1fr);grid-gap: 0;}
le 520px vient du fait que j'avais auparavant un max-width: 500px sur l'img (avec 10px de padding, ça fait 520px)
mais peu importe comment je définis la largeur de ma première colonne, ça ne donne pas ce que je veux ^^
avec la définition indiquée, c'est le moins pire mais c'est pas encore ça
j'ai un border sur mes "cellules" mais le border des cellules de la colonne 1 ne va pas jusqu'au bout (comme si la colonne ne faisait pas la largeur demandée mais moins)
voilà en gros ce que ça donne : http://vrac.phpblocnote.net/table.png
j'ai masqué les contenus pour qu'on voie bien le border de la colonne 1 qui s'arrête en cours de route ^^
j'ai essayé de définir ma colonne en fr mais la colonne n'était pas plus large et l'image était mise à l'échelle (donc riquiqui) => non
j'ai essayé avec minmax(1fr, 520px) mais ça cassait tout et chaque div était à la ligne => non
je ne comprends pas pourquoi ça ne fonctionne pas correctement
même si j'ajoute du texte dans la colonne 1, ça ne fonctionne pas non plus (au début, je pensais que c'était l'image qui faisait bugguer le truc mais peut-être pas du coup)
une idée géniale ?
je vais essayer de mettre un poc en ligne
ça n'a rien de vital, si je n'arrive pas à faire fonctionner ce grid, je resterai avec mon tableau mais franchement, ce serait dommage (et j'aime bien comprendre pourquoi les choses sont telles qu'elles sont) ^^
navigateurs utilisés : FF 59, 52 et chrome 65
niveau css : débutant +
merci d'avance !
