IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Rendre responsive des div inclus dans un div carré


Sujet :

Responsive design en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre très actif
    Avatar de JPBruneau
    Homme Profil pro
    retraité
    Inscrit en
    Août 2019
    Messages
    251
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : retraité
    Secteur : Conseil

    Informations forums :
    Inscription : Août 2019
    Messages : 251
    Par défaut Rendre responsive des div inclus dans un div carré
    j'ai un div placé en position fixe et Top 10px left 10px
    En écran ordinateur, il fait 378 pixels X 378pixels.
    c'est un échiquier et il possèdes 9 DIV X 9 DIV ayant besoins d'une "case" sur toutes les lignes
    et colonnes .
    Voila qui est bien simple, sauf que je ne sais pas rendre le div responsable (si ça c'est facile) mais qu'il entraine le redimension
    de tout les DIV contenus !

    Merci de votre aide !

  2. #2
    Membre Expert
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    Juin 2006
    Messages
    2 498
    Détails du profil
    Informations personnelles :
    Âge : 55
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2006
    Messages : 2 498
    Par défaut
    quelque chose comme ca ?
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <div id="board"></div>
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    #board {
      display:grid;
      width: 100vw;
      height: 100wh;
      grid-template-rows: repeat(9, 1fr);
      grid-template-columns: repeat(9, 1fr);
    }
    #board div:nth-child(2n) {
      background-color: #ccc;
    }
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    const $board = document.getElementById('board');
    for(let line=1; line <=9; ++line) {
    	for(let col=1; col<=9; ++col) {
      const cell = document.createElement('div');
      cell.textContent = `${line}-${col}`;
      $board.append(cell);
      }
     
    }
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  3. #3
    Membre très actif
    Avatar de JPBruneau
    Homme Profil pro
    retraité
    Inscrit en
    Août 2019
    Messages
    251
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : retraité
    Secteur : Conseil

    Informations forums :
    Inscription : Août 2019
    Messages : 251
    Par défaut
    Citation Envoyé par Doksuri Voir le message
    quelque chose comme ca ?
    ETC...
    Je crois que ce serait bien mais c'est quel javascript ? , je suis à 84 ans en janvier, de l'ancienne école, peux tu m'aider sur ce point ?
    car j'ai réalisé un mini HTML5 et ça donnes rien ?
    je n'avais jamais vue de "$" dans du JS

    En tout cas merci d'avoir répondu si vite, et j'ai hâte de ta réponse.
    Jean-Pierre

  4. #4
    Membre Expert
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    Juin 2006
    Messages
    2 498
    Détails du profil
    Informations personnelles :
    Âge : 55
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2006
    Messages : 2 498
    Par défaut
    ah, pardon... voici un jsfiddle du rendu jsfiddle.net/aL27shfw/

    ce qu'il faut retenir, est le display:grid en css

    j'ai fais du JS pour "populer" mon div (pas envis d'ecrire les 81 cases a la main )
    le $ dans mon nom de variale $board, c'est une convention perso : quand je vois une variable JS qui commence par un $, je sais que je parle d'un element du DOM
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  5. #5
    Membre très actif
    Avatar de JPBruneau
    Homme Profil pro
    retraité
    Inscrit en
    Août 2019
    Messages
    251
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : retraité
    Secteur : Conseil

    Informations forums :
    Inscription : Août 2019
    Messages : 251
    Par défaut
    Citation Envoyé par Doksuri Voir le message
    ah, pardon... voici un jsfiddle du rendu jsfiddle.net/aL27shfw/
    ce qu'il faut retenir, est le display:grid en css
    Parfait mais si je mets tout ensemble, j'oserais demandé quel paramètre me permettrais d'obtenir un carré et si possible 400Px que je place
    (souhaite placer hors du rap et content (je veux dire quelque soit le scroll) en top 10px en top et centré dans la page ?
    Voici ton code tel que je l'ai actuellement.
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <![endif]-->
     
    <style>
    #board {
      display:grid;
      width: 100vw;
      height: 100wh;
      grid-template-rows: repeat(9, 1fr);
      grid-template-columns: repeat(9, 1fr);
    }
    #board div:nth-child(2n) {
      background-color: #ccc;
    }
    </style>
     
    </head><body>
    <div id="board">   </div>
    <script type="text/javascript">
    const $board = document.getElementById('board');
    for(let line=1; line <=9; ++line) {
            for(let col=1; col<=9; ++col) {
      const cell = document.createElement('div');
      cell.textContent = `${line}-${col}`;
      $board.append(cell);
      }
     
    }
    </script>
    </body></html>
    Merci l'Ami

  6. #6
    Membre Expert
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    Juin 2006
    Messages
    2 498
    Détails du profil
    Informations personnelles :
    Âge : 55
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2006
    Messages : 2 498
    Par défaut
    Citation Envoyé par JPBruneau Voir le message
    sauf que je ne sais pas rendre le div responsable (si ça c'est facile) mais qu'il entraine le redimension de tout les DIV contenus !
    ah zut, j'avais lu responsive ...
    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
    15
    16
    17
    #board {
      position: fixed;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      display: grid;
      width: 400px;
      aspect-ratio: 1;
      grid-template-rows: repeat(9, 1fr);
      grid-template-columns: repeat(9, 1fr);
    }
    #board div:nth-child(2n) {
      background-color: #ccc;
    }
    #board div {
      aspect-ratio: 1;
    }
    position: fixed; pour enlever l'element du "flow"
    aspect-ratio: 1; pour garder un carre
    left: 50%; + transform: translateX(-50%); pour le centrer
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  7. #7
    Membre très actif
    Avatar de JPBruneau
    Homme Profil pro
    retraité
    Inscrit en
    Août 2019
    Messages
    251
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : retraité
    Secteur : Conseil

    Informations forums :
    Inscription : Août 2019
    Messages : 251
    Par défaut
    Citation Envoyé par Doksuri Voir le message
    ah zut, j'avais lu responsive ...
    pour le centrer
    La honte !! en tout cas c'est parfait et RESOLU grace surtout à toi
    Encore merci.

  8. #8
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 213
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 213
    Par défaut
    Bonjour,
    Citation Envoyé par Doksuri
    left: 50%; + transform: translateX(-50%); pour le centrer
    pour un élément en display:grid, le centrage peut se faire également avec :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    .grid-center  {
      justify-content: center;
      margin: auto;
    }
    cela évite la création d'un contexte d'empilement qui peut éventuellement poser problème.

  9. #9
    Membre Expert
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    Juin 2006
    Messages
    2 498
    Détails du profil
    Informations personnelles :
    Âge : 55
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2006
    Messages : 2 498
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    pour un élément en display:grid, le centrage peut se faire également avec :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    .grid-center  {
      justify-content: center;
      margin: auto;
    }
    c'est le conteneur qu'il veut placer au centre, pas les contenus
    l'element etant en position fixed, je vois mal comment le centrer autrement
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  10. #10
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 213
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 213
    Par défaut
    l'element etant en position fixed, je vois mal comment le centrer autrement
    je ne parlais pas de ce cas particulier mais d'une façon générale

    Dans le cas présent je passerais plutôt par un « wrapper » en position sticky, ce qui suit resterait ainsi consultable à l'écran.
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <div class="grid-wrapper">
      <div id="board" class="grid-center"></div>
    </div>
    <p>Du text en dessous...</p>
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    .grid-wrapper {
      position:sticky;
      top:0;
    }
    ... mais bon ... l'essentiel étant que cela réponde à la demande !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Comprimez les images des document inclus dans dossier
    Par Fredheg dans le forum VBA Word
    Réponses: 41
    Dernier message: 26/12/2007, 12h39
  2. D7 Voir des PDF inclus dans champ OLE
    Par zarbouine dans le forum Delphi
    Réponses: 15
    Dernier message: 01/04/2007, 13h17
  3. Comment trouver des structures incluses dans d'autres
    Par Vulcanos dans le forum Langage SQL
    Réponses: 2
    Dernier message: 13/10/2006, 23h59
  4. Réponses: 9
    Dernier message: 23/05/2006, 15h33
  5. Appel à des fonctions incluses dans des DLL
    Par Greybird dans le forum Langage
    Réponses: 3
    Dernier message: 26/05/2003, 13h33

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo