mauvaise superposition de div responsive par MartinAl - page 1

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;
}

mauvaise superposition de div responsive

mauvaise superposition de div responsive

Supprimer

Modérer

Signaler le message aux modérateurs