06 77 08 92 53
modèle
Grille image à gauche
Voici donc une application de la grille dans le cas image à gauche. Malheureusement, j'ai chanté victoire trop vite, la grille est parfaite pour des colonnes fixes, on ne peut pas gérer facilement les pourcentages, on pourrait mais ce ne serait pas facile. Ainsi donc, nous préférerons utiliser la grille dans tous les cas où les colonnes sont fixées en largeur, sans possibilité d'utiliser des pourcentages.
L'exemple ci-dessous a plusieurs petits niknaks déplaisants que je ne tente même pas de corriger...
Mettre une image à gauche n'est pas l'idéal. L'image devrait être à droite. Des problèmes d'enlignement et d'espacement nuisent au design d'une page avec image à gauche.
Il faut se rappeler quelques trucs comme ne jamais mettre de margin ou de padding sur la hauteur, insérez plutôt des lignes avec & n b s p.
Ici, il y a des sauts de lignes avant la h1 et après la h1 ainsi qu'au début du paragraphe à droite, ce qui fait que le texte n'est pas aligné avec l'image...
Alors, nous pouvons insérez un saut de ligne dans la div de l'image, après l'image, ainsi, nous alignons le texte sur la hauteur de l'image et nous insérons un saut avant le texte lorsque l'image tombe en responsive
Grille
Benji travaille avec cette grille qu'il appelle flex depuis qu'il a vu le xtableau, il y a maintenant longtemps de cela. Je n'ai pas considéré son code avant aujourd'hui pour plusieurs raisons qui se révèlent mauvaises aujourd'hui car je trouve que sa grille est simple à adresser et qu'elle s'applique presque partout... va falloir quand même vérifier mais mes excuses Benji, j'aurais dû regarder avant. Je vais devoir réviser les autres façons d'éditer un article en les opposant à la grille de Benji pour voir si nous pouvons simplifier davantage nos façons de faire.
Image texte image de 3 colonnes à 2 colonnes
Cette colonne va disparaitre à moins de 765px.
- Flux import-export
- Départ réguliers
- Douane import-export
- Agences spécialisées en France
- Un partenaire privilégié, le groupe TIMAR
- Une organisation routière unique pour vos flux Afrique de l’Ouest
- Flux import-export
- Départ réguliers
- Douane import-export
- Agences spécialisées en France
- Un partenaire privilégié, le groupe TIMAR
- Une organisation routière unique pour vos flux Afrique de l’Ouest
on retrouve cette colonne sous les 2 autres, si on a 2 éléments semblables, on les garde visibles et on met le différent sous les deux autres...
Image texte image de 3 colonnes à 1 colonne
Ces 3 colonnes-ci sont flex jusqu'à 765px, ensuite, le flex est enlevé pour les avoir sur une seule colonne.
- Flux import-export
- Départ réguliers
- Douane import-export
- Agences spécialisées en France
- Un partenaire privilégié, le groupe TIMAR
- Une organisation routière unique pour vos flux Afrique de l’Ouest
2 textes
Mettre une image à gauche n'est pas l'idéal. L'image devrait être à droite. Des problèmes d'enlignement et d'espacement nuisent au design d'une page avec image à gauche.
Il faut se rappeler quelques trucs comme ne jamais mettre de margin ou de padding sur la hauteur, insérez plutôt des lignes avec & n b s p.
Ici, il y a des sauts de lignes avant la h1 et après la h1 ainsi qu'au début du paragraphe à droite, ce qui fait que le texte n'est pas aligné avec l'image...
Alors, nous pouvons insérez un saut de ligne dans la div de l'image, après l'image, ainsi, nous alignons le texte sur la hauteur de l'image et nous insérons un saut avant le texte lorsque l'image tombe en responsive
Mettre une image à gauche n'est pas l'idéal. L'image devrait être à droite. Des problèmes d'enlignement et d'espacement nuisent au design d'une page avec image à gauche.
Il faut se rappeler quelques trucs comme ne jamais mettre de margin ou de padding sur la hauteur, insérez plutôt des lignes avec & n b s p.
Ici, il y a des sauts de lignes avant la h1 et après la h1 ainsi qu'au début du paragraphe à droite, ce qui fait que le texte n'est pas aligné avec l'image...
Alors, nous pouvons insérez un saut de ligne dans la div de l'image, après l'image, ainsi, nous alignons le texte sur la hauteur de l'image et nous insérons un saut avant le texte lorsque l'image tombe en responsive
