Partage
  • Partager sur Facebook
  • Partager sur Twitter

mauvaise superposition de div responsive

    23 octobre 2021 à 19:19:40

    Bonjour,

    je voudrais créer une page de site avec un corps de 1000px.

    A l'intérieur, je voudrais 2 blocs que je remplirai par la suite avec texte et image. Je les veux côte à côte, sur un grand écran. Il y a le marron qui doit rester à gauche, et le vert qui contient lui-même 2 bleus, qui doit être à droite.

    Si l'écran est rétréci (entre 800 px et 1000), je veux que ces 3 blocs, qui occupent 80% de l'écran, soient centrés sur l'écran, le marron étant au-dessus.

    Je rencontre plusieurs problèmes.

    1) je suis obligée de mettre mes blocs marron et vert en float : left pour les avoir côte à côte, il me semble que display inline-block est meilleur mais ça ne marche pas. mais le souci principal n'est pas là.

    2) je ne peux pas obtenir le centrage sans la commande position: fixed. Et cette commande m'entraîne une mauvaise superposition de mes blocs, le marron étant en-dessous. Si je supprime ce fixed, mes blocs sont dans le bon ordre, mais collés à gauche. J'ai essayé d'utiliser z-index, mais rien ne marche.

    J'en appelle à votre aide !

    Merci d'avance (désolé, je n'arrive pas à envoyer le code en couleur

    mon html

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8" name="viewport" content="initial-scale=1.0, user-scalable=yes"/>
    <title>page de recette v10.21</title>
        
        
    <link href="page de recette v10.21.css" rel="stylesheet" type="text/css">
    <link href="test.css" rel="stylesheet" type="text/css">
    </head>

    <body style="background-color:#efefef;">
    <div id="conteneur-bandeau"></div>
        <div id="conteneur-parent">
          <div class="conteneur-image">
          </div>
          <div class="sidebar">
    <div class="ingredient"></div>
            <div class="ingredient"></div>
          </div>
        </div>
        
    </body>
    </html>

    mon css :

    @charset "UTF-8";
    /* CSS Document */

    #conteneur-bandeau {
        position: absolute;
        margin: auto;/*bandeau sera centré en largeur sur la totalité de l'écran*/
        top: 0px;
        background-color: yellow;
        width: 100%;
        height: 100px;
        
    }

    #conteneur-parent {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 150px;
        background-color: azure;
        width: 1000px;
        height: 1000px;/* si auto,la hauteur s'adaptera au contenu*/
        
    }



    .conteneur-image {
        float: left; /*permet que les 2 conteneurs soient côte à côte*/
        background-color: burlywood;
        width: 60%;/* largeur 60% du conteneur parent*/
        height: 500px;
        box-sizing: border-box; /* les bordures éventuelles seront inclues dans le conteneur*/
        
        
        
    }

    .sidebar {
        float: left;
        width: 40%;
        background-color: chartreuse;
        height: 400px;
        box-sizing: border-box;   
        
    }


    /*point de rupture à 1000 px, appliquera du css uniquement aux écrans plus petits que 1000 px*/

    @media  screen and (max-width: 1000px) {
        .conteneur-image, .sidebar {
           
        
            width: 80%;
            left: 50%;
            transform: translateX(-50%);
            position: fixed;
           
           
        }
    }

    @media  screen and (max-width: 800px) {
        .conteneur-image, .sidebar {

            width: 100%;
           
           
        }
    }


        

    .ingredient {
        height: 60px;
        background-color: aqua;
    }

    • Partager sur Facebook
    • Partager sur Twitter

    mauvaise superposition de div responsive

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