mfrmt
Bonjour,
Je code un site qui doit être adapter en version téléphone. Dans la version ordinateur, 50% de l'écran à gauche est dédié à un liste de texte en position fixe et 50% de l'écran à droite est une série d'image. Dans la version téléphone, j'aimerai que la liste soit situé à 50% de l'écran en haut et en dessous les 50% restants la série d'image. Néanmoins, je ne parviens pas à modifier le positionnement de ces deux blocs, pour mettre l'un en dessous de l'autre. Voici mon code html puis mon css :
<!DOCTYPE html>
<html>
<head>
<!-- Tout ce qui décrit la page se place dans la balise <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>Marie Fourment</title><!-- titre de ma page qui apparait dans l'onglet -->
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Tout ce qui est visible sur la page se place dans la balise <body> -->
<div class="parent">
<div class="left-panel">
<div class="header">
<a href="/index.html">XX XX</a>
<div class="header-group">
<a href="/pages/about.html">Informations</a></div>
</div>
<div class="wrapper">
<!-- a href html c'est pour rediriger vers un autre lien-->
<div><a href="/pages/diedre.html">Dièdre</a></div>
<div>Type</div>
<div>2024</div>
<div><a href="/pages/precisisons.html">Précisions sur les vagues, Marie Darrieussecq</a></div>
<div>Edition</div>
<div>2024</div>
<div><a href="/pages/danseurs.html">Danseurs</a></div>
<div>Paint</div>
<div>2024</div>
<div><a href="/pages/carnets.html">Carnets de recherches</a></div>
<div>Edition</div>
<div>2024</div>
<div><a href="/pages/carpent.html">Carpent</a></div>
<div>Type</div>
<div>2024</div>
<div><a href="/pages/griffi.html">Griffi</a></div>
<div>Type</div>
<div>2023</div>
<div><a href="/pages/atlasfibres.html">Atlas des fibres naturelles</a></div>
<div>Print</div>
<div>2023</div>
<div><a href="/pages/baudelaire.html">Le Procès des Fleurs du mal, Charles Baudelaire</a></div>
<div>Edition</div>
<div>2023</div>
<div><a href="/pages/yamamoto.html">Masao Yamamoto</a></div>
<div>Edition</div>
<div>2023</div>
<div><a href="/pages/pdt.html">Printemps de la typographique</a></div>
<div>Identity</div>
<div>2023</div>
<div><a href="/pages/triennale.html">Triennale de Milan</a></div>
<div>Edition</div>
<div>2022</div>
</div>
</div> <!-- fin div section gauche -->
<div class="right-panel">
<a href="/pages/diedre.html"><img class="imageprincipale" src="/image/marie-fourment_diedre-poster-1.jpg"></a>
<a href="/pages/precisisons.html"><img class="imageprincipale" src="/image/marie-fourment_precisions-sur-les-vagues-5.jpg"></a>
<a href="/pages/danseurs.html"><img class="imageprincipale" src="/image/marie-fourment_danseurs-6.jpg"></a>
<a href="/pages/carnets.html"><img class="imageprincipale" src="/image/marie-fourment_carnets-de-recherches-4.jpg"></a>
<a href="/pages/carpent.html"><img class="imageprincipale" src="/image/marie-fourment_carpent-8.jpg"></a>
<a href="/pages/griffi.html"><img class="imageprincipale" src="/image/marie-fourment_griffi-4.jpg"></a>
<a href="/pages/atlasfibres.html"><img class="imageprincipale" src="/image/marie-fourment_atlas-des-fibres-naturelles-7.jpg"></a>
<a href="/pages/baudelaire.html"><img class="imageprincipale" src="/image/marie-fourment_baudelaire-1.jpg"></a>
<a href="/pages/yamamoto.html"><img class="imageprincipale" src="/image/marie-fourment_yamamoto-1.jpg"></a>
<a href="/pages/pdt.html"><img class="imageprincipale" src="/image/marie-fourment_pdt-1.jpg"></a>
<a href="/pages/triennale.html"><img class="imageprincipale" src="/image/marie-fourment_triennale-1.jpg"></a>
</div>
</div>
</body>
</html>
@font-face {
font-family: "Bw Haas Text";
font-style: normal;
src: url('fonts/BWHaasText-55Roman.woff2') format('woff2');
src: url('fonts/BWHaasText-55Roman.woff') format('woff');
src: url('fonts/BWHaasText-55Roman.otf') format('opentype');
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Bw Haas Text";
color: black;
}
body {
margin-top: 0;
margin-left: 0px;
margin-right: 0;
}
.parent {
display: flex;
width: 100%;
}
.left-panel {
margin-top: 0;
width: 50%;
padding: 10px;
position: fixed;
height: 100%;
overflow: auto;
}
.right-panel {
width: 50%;
margin-left: 50%;
overflow-y: scroll;
}
.header {
width: 100%;
position: sticky;
top: 0px;
display: flex;
padding-bottom: 30px;
padding-top: 5px;
text-align:left;
font-family:"Bw Haas Text";
font-style: normal;
font-size: 15px;
text-decoration: none;
}
.header-group {
margin-left: auto;
padding-right: 0px;
z-index: 1;
display: flex;
gap: 15px;
}
a {
text-decoration: none;
color: black;
}
.wrapper {
display: grid;
z-index: 1;
grid-template-columns: 11fr 5fr 1fr;
gap: 5px;
font-family: "Bw Haas Text";
font-style: normal;
font-size: 15px;
}
/*.texte {
position : absolute;
bottom : 5px;
margin-left: 5px;
margin-right: 5px;
font-family: "Bw Haas Text";
font-style: normal;
font-size: 15px;
}*/
.titre {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
}
.imageprincipale {
display: flex;
flex-direction: column;
width: 100%; /* Adaptation à la largeur */
margin-bottom: 0px; /* Espacement entre les images */
}
.container {
display: flex;
justify-content: space-between;
width: 100%;
max-width: 1000px;
font-family: "Bw Haas Text";
font-style: normal;
font-size: 15px;
}
.left-column, .right-column {
width: 50%;
}
ul {
list-style-type: none;
}
li {
padding: 2px 0;
}
.right-panel2 {
width: 50%;
margin-left: 50%;
margin-top: 60px;
}
#fin {
position : absolute;
bottom : 5px;
margin-left: 10px;
font-family: "Bw Haas Text";
font-style: normal;
font-size: 13px;
}
/*ici pour programmer la version télephone */
@media (max-width: 600px) {
/* Conteneur principal en flexbox pour diviser l'écran en deux sections */
.parent {
display: flex;
flex-direction: column; /* Empile les éléments verticalement */
height: 100vh; /* Prend toute la hauteur de l'écran */
}
/* Le panneau gauche (wrapper avec la liste de projets) */
.left-panel {
flex: 1; /* Prend la moitié supérieure de l'écran */
padding: 10px;
overflow-y: auto; /* Permet le défilement si le contenu dépasse */
box-sizing: border-box; /* Inclut les paddings dans le calcul de la largeur */
width: 100%;
height: 50%;
box-sizing: border-box;
float: inline-start;
}
/* Le panneau droit (conteneur des images) */
.right-panel {
flex: 1; /* Prend la moitié inférieure de l'écran */
display: flex;
flex-wrap: wrap; /* Permet d'ajuster les images en plusieurs lignes */
margin-bottom: 0px; /* Espacement entre les images */
padding: 0px;
box-sizing: border-box; /* Inclut les paddings dans le calcul de la largeur */
width: 100%;
height: 50%;
float: inline-end;
}
/* Les images prennent toute la largeur du conteneur */
.imageprincipale {
width: 100%; /* Les images occupent toute la largeur de l'écran */
}
/* Optionnel : ajuster les liens dans la liste de projets */
.wrapper a {
display: block;
gap: 5px;
text-decoration: none;
color: inherit; /* Garder la couleur du texte par défaut */
}
}
Si quelqu'un peut m'aider :) merci
1 réponse
Bonjour, il y a plusieurs choses à remanier...
1/ position: fixed pour ton left-panel interfère avec tes media queries, c'est mieux de le supprimer ou alors de rajouter un position: relative sur left-panel dans les media queries
2/ de manière générale il faut éviter de spécifier à la fois width et height, seulement un paramètre suffit et l'autre sera adapté en fonction
Le 1/ devrait te donner le comportement attendu, je te laisse voir comment ajuster au mieux ensuite !