Utilisation des Grids pour réaliser le design suivant ?

**thirt** · 26/08/2019, 12h29

Bonjour à vous,

je me demandais quelle était la technique la mieux appropriée pour mettre plusieurs éléments sur la même ligne. Vaut-il mieux utiliser les grilles CSS3 ou les flexbox ou encore les float ?

Voici un petit exemple de ce que j'aimerais faire :

Nom : template.PNG
Affichages : 90
Taille : 12,6 Ko

Nom : template.PNG
Affichages : 90
Taille : 12,6 Ko

Diviseriez-vous ce design en grilles pour la mise en page de ce genre de modèle ? Actuellement, je ne vois pas trop comment faire. Donc, si je peux avoir votre avis et comment vous feriez, cela m'arrangerait.

Merci d'avance

Bonne journée
Thierry

Invité · 26/08/2019, 14h45

Bonjour, (te revoilà avec tes grids ? )

CONSEIL n°1 : parcours le web, et regarde comment font d'autres développeurs, sur d'autres site web.

"clic droit" sur l'élément qui t'intéresse -> "Examiner l'élément"
ou clavier touche "F12" -> "Inspecteur"

Tu verras alors les styles CSS appliqués à chaque élément.

CONSEIL n°2 : fais tes propres TESTS.
Essaie de reproduire ton "petit exemple", en utilisant les différentes techniques :

grid,
flexbox,
display:table,
display:inline-block,
position:relative/absolute,
float:left/right,
...

C'est un très bon EXERCICE : tu pourras COMPARER, et te faire ta propre EXPÉRIENCE.

CONSEIL n°3 : Arrête de demander l'avis des autres pour un oui ou un non.
Si tu interroges 10 personnes, tu auras 10 avis (et chacun aura ses propres préférences).

**thirt** · 26/08/2019, 17h15

Bonjour Jérôme,

je tenais de nouveau à vous remercier pour votre aide et vos conseils.

En fait, comme vous le dites, je risque d'avoir 10 avis différents de 10 personnes différentes. La problème, c'est que je n'ai pas une grande expérience en CSS et je suis un peu perdu.

J'ai du mal à voir comment je peux faire pour avoir une seule version HTML et CSS (avec les media queries) pour un design qui est différent en fonction du média (smartphone et laptop).

Par rapport à cela, j'ai encore une question à poser avant de m'occuper du design du site. En fait, naturellement, j'ai un design pour la version smartphone et la version laptop. Je suppose qu'il vaut mieux s'occuper dans un 1er temps du code CSS de la version smartphone car elle est plus simple à implémenter que la version laptop. Naturellement, comme le design est différent, je suppose que je pourrai jouer avec la propriété order des flexboxes pour afficher les blocs aux bons endroits.

En ce qui concerne le code HTML, vaut-il mieux l'écrire en fonction de la version smartphone qui est plus simple que par rapport à la version laptop qui est plus complexe.

Merci d'avance

Bonne journée
Thierry

Invité · 26/08/2019, 18h08

Là, tu commences à devenir lourd...
A un moment donné, il faudra bien te jeter à l'eau !

HTML5 : le guide du débutant
Les fondamentaux du Responsive Web Design
... (et tous ceux que je t'ai déjà donnés !)

Principe :

le code HTML sera la MEME pour phone ou laptop !
C'est le CSS qui permettra d'en modifier la mise en page (positionnement, dimensionnement des "boîtes",...).

C'est pourquoi je t'ai (déjà) conseiller de DESSINER les mises en pages, avec des "boites".

Pour bien démarrer :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE HTML>
<html lang="fr">
   <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
      <title>Responsive design: par la pratique</title>
 
      <!-- Styles -->
      <link type="text/css" media="screen" title="no title" rel="stylesheet" href="responsive.design.css" />
   </head>
...

Et dans le CSS :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* CSS général (commun) */
.........
/* MOBILE FIRST */
.........
@media screen and (min-width:640px) and (max-width:768px) {
  .........
}
/* LAPTOP */
@media screen and (min-width:769px) and (max-width:1024px) {
  .........
}
@media screen and (min-width:1025px) {
  .........
}

**Sparky95** · 27/08/2019, 08h17

Salut,
Si jamais le CSS te soules va voir du coté bootstrap comment ça tu n'as plus à t'embêter à tout écrire toi même.
Des vidéos youtube pourront t'aider.
J'ai commencé à 13 ans donc je penses que cela devrait être de ton niveau.
Bonne chance et n'oublies pas "Google est ton ami"

Utilisation des Grids pour réaliser le design suivant ? [CSS 3]

Grille CSS (CSS Grid)

Discussions similaires

Partager

Partager