Partage
  • Partager sur Facebook
  • Partager sur Twitter

Rendre responsive un bloc

Sujet résolu
    18 octobre 2021 à 12:51:55

    Bonjour, je voudrais savoir si c'est possible de rendre le responsive, car avec les labels c'est pas évident qu'ils restent bien à coter, je n'ai pas trouvé de solution, peut-être en avez-vous une?

    Et aussi savoir pourquoi, les inputs sortent du bloc en bas ? Au fait je sais, c'est à cause du wrap mais pourquoi ?

    Et si c'est pas possible, quelle solution s'offre à moi svp ?

    Merci

    Code:

    <!DOCTYPE html>
    <html lang="fr">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>debut html</title>
            <link rel="stylesheet" href="./test-ocr.css">
            <style>
    
            </style>
        </head>
    
        <body style="background:wheat">
            <section>
                <h1>code</h1>
                <div id="container" class="flex_row">
                    <div id="input_user" class="flex_row j_around">
                        <div id="consign_top" class="consign flex_row j_around">
                            <label class="label_consigne">0</label>
                            <label class="label_consigne">0</label>
                            <label class="label_consigne">0</label>
                            <label class="label_consigne">0</label>
                        </div>
                        <div id="consign_right" class="consign flex_row j_around">
                            <label class="label_consigne">0</label>
                            <label class="label_consigne">0</label>
                            <label class="label_consigne">0</label>
                            <label class="label_consigne">0</label>
                        </div>
                        <div id="consign_bottom" class="consign flex_row j_around">
                            <label class="label_consigne">0</label>
                            <label class="label_consigne">0</label>
                            <label class="label_consigne">0</label>
                            <label class="label_consigne">0</label>
                        </div>
                        <div id="consign_left" class="consign flex_row j_around">
                            <label class="label_consigne">0</label>
                            <label class="label_consigne">0</label>
                            <label class="label_consigne">0</label>
                            <label class="label_consigne">0</label>
                        </div>
                        
                        <input type="text" maxlength="1">
                        <input type="text" maxlength="1">
                        <input type="text" maxlength="1">
                        <input type="text" maxlength="1">
                        <input type="text" maxlength="1">
                        <input type="text" maxlength="1">
                        <input type="text" maxlength="1">
                        <input type="text" maxlength="1">
                        <input type="text" maxlength="1">
                        <input type="text" maxlength="1">
                        <input type="text" maxlength="1">
                        <input type="text" maxlength="1">
                        <input type="text" maxlength="1">
                        <input type="text" maxlength="1">
                        <input type="text" maxlength="1">
                        <input type="text" maxlength="1">
                    </div>
                </div>
                <nav>
                    <button id="btnTest">Test</button>
                    <button id="btnMap">New map</button>
                    <button id="btnSolution">Avoir la réponse</button>
                </nav>
                <p id="isGood"></p>
                </section>
        </body>
    </html>
    
    section{
        width: 20%;
        margin: auto;
    }
    /* utils */
    .flex_row{
        display: flex;
        flex-flow: wrap row;
    }
    
    .flex_column{
        display: flex;
        flex-flow: wrap column;
    }
    
    .j_between{
        justify-content: space-between;
    }
    
    .j_around{
        justify-content: space-around;
    }
    /* end utils */
    
    #container{
        width: 70%;
        border: 1px solid black;
        margin: auto;
        position: relative;
    }
    
    
    #container #input_user{
        width: 100%;
    }
    
    #container #input_user input{
        width: 15%;
        height: 20%;
        margin: 5px;
        text-align: center;
        border: 1px solid green;
    }
    
    #container #input_user > div.consign{
        position: absolute;
    }
    
    #container #consign_top, #container #consign_bottom{
        width: 100%;
        left: 0px;
        text-align: center;
    }
    
    #container #consign_bottom{
       bottom: -20px;
    }
    
    #container #consign_top{
        top: -20px;
    }
    
    #container #consign_left, #container #consign_right{
        height: 100%;
        top: 0px;
        text-align: center;
        flex-flow: wrap column;
    }
    
    #container #consign_right{
        right: -25px;
    }
    
    #container #consign_left{
        left: -25px;
    }
    
    /* label */
    #container div.consign label{
        background-color: rgb(117, 182, 117);
        padding: 2px;
        height: 15px;
        width: 15px;
        border-radius: 3px;
        line-height: 15px;
    }
    
    /* p: réponse */
    #isGood{
        margin: auto;
        text-align: center;
    }

    -
    Edité par AlexisW09 18 octobre 2021 à 12:52:38

    • Partager sur Facebook
    • Partager sur Twitter
      18 octobre 2021 à 14:02:47

      Bonjour,

      pour un planing hebdomadaire, j'ai rencontré le problème

      je suis parti de la version mobile : deux tableaux superposés, indépendants donc, chacun avec 1ère colonne contenant la légende (ici c'était les heures), et en version desktop, ces deux tableaux sont côte à côte, avec la colonne des légendes masquée pour le tableau de droite

      donc des colonnes en version smartphone :

      tableau un : heures lundi mardi mercredi
      tableau deux : heures jeudi vendredi samedi

      en version desktop ça donne :

      heures lundi mardi mercredi [heures] jeudi vendredi samedi

      Le contenant et les deux tableaux en flexbox pour une mise en page propre

      C'est une solution simple, légère et efficace

      • Partager sur Facebook
      • Partager sur Twitter
        18 octobre 2021 à 22:48:14

        ChrisLebure a écrit:

        Bonjour,

        pour un planing hebdomadaire, j'ai rencontré le problème

        je suis parti de la version mobile : deux tableaux superposés, indépendants donc, chacun avec 1ère colonne contenant la légende (ici c'était les heures), et en version desktop, ces deux tableaux sont côte à côte, avec la colonne des légendes masquée pour le tableau de droite

        donc des colonnes en version smartphone :

        tableau un : heures lundi mardi mercredi
        tableau deux : heures jeudi vendredi samedi

        en version desktop ça donne :

        heures lundi mardi mercredi [heures] jeudi vendredi samedi

        Le contenant et les deux tableaux en flexbox pour une mise en page propre

        C'est une solution simple, légère et efficace

        Bonjour, merci pour votre retour,

        pensez vous qu'il serait possible d'avoir une photo du rendu ? Car je n'ai pas totalement compris merci

        • Partager sur Facebook
        • Partager sur Twitter
          19 octobre 2021 à 7:34:44

          ok voici la version desktop, tableau complet :

          et la version smartphone, deux copies d'écran, deux tableaux l'un au dessous de l'autre :

          et la deuxième copie d'écran :

                   

          -
          Edité par ChrisLebure 19 octobre 2021 à 7:36:08

          • Partager sur Facebook
          • Partager sur Twitter

          Rendre responsive un bloc

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          • Editeur
          • Markdown