Adaptation de la taille des éléments
Résolu
valentin
-
valentin -
valentin -
Bonjour,
j'aimerais faire que mon site web s'adapte à la taille de la fenêtre, j'ai pas trouvé grand chose à ce sujet, je trouve ça étrange. Tout ce que je voyais à ce sujet me disait de mettre tout les pixels en % mais ça n'a par marché.
voici mon scipt pour que vous puissiez me dire si il y a un problème et comment faire pour que la taille de la page s'adapte à la fenêtre.
vous allez pouvoir voir que j'ai remplacé le début des pixel avec des % mais ça n'a rien changé.
merci de m'avoir lu.
j'aimerais faire que mon site web s'adapte à la taille de la fenêtre, j'ai pas trouvé grand chose à ce sujet, je trouve ça étrange. Tout ce que je voyais à ce sujet me disait de mettre tout les pixels en % mais ça n'a par marché.
voici mon scipt pour que vous puissiez me dire si il y a un problème et comment faire pour que la taille de la page s'adapte à la fenêtre.
<html>
<head lang="fr">
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>forêt amazonienne</title>
</head>
<body class="body">
<h1 class="titre">Forêt Amazonienne</h1>
<a href="souspages/foret.html"><img src="images/foret.jpg" alt="image de forêt" class="foret" /> </a>
<a href="souspages/enjeux.html"><img src="images/enjeux.jpg" alt="image des enjeux" class="enjeux" /> </a>
<p class ="quoi">C'est quoi?</p>
<p class ="enjeu">Les enjeux</p>
<a href="souspages/enjeux.html"></a>
</body>
</html>
.body {
background-image: url(images/background.jpg);
background-color: #ffffff;
background-position:center center;
background-size: 100%;
}
.titre {
color:darkgreen;
position: absolute;
top: 9%;
font-size: 400%;
}
.titre2 {
color:green;
position: absolute;
top: 10px;
left: 80px;
font-size: 60px;
}
.foret {
width: 300px;
height: 200px;
position: absolute;
bottom: 20%;
left: 20%;
border-radius: 10px;
}
.enjeux {
width: 312px;
height: 200px;
position: absolute;
bottom: 20%;
right: 20%;
border-radius: 10px;
}
.quoi {
font-size: 40px;
position: absolute;
bottom: 8%;
left: 20%;
}
.enjeu {
font-size: 40px;
position: absolute;
bottom: 8%;
right: 30%;
}
.body2 {
background-color: #d1d1d1;
}
.p2 {
font-size: 30px;
position: absolute;
top: 150px;
}
.retour {
background-color: #888888;
border-radius: 10px;
color: white;
padding: 20px 28px;
text-decoration: none;
display: inline-block;
position : absolute;
bottom: 20;
left: 20;
}
.sirene {
width: 400px;
height: 566px;
position: absolute;
bottom: 10px;
right: 10px;
border-radius: 10px;
}
vous allez pouvoir voir que j'ai remplacé le début des pixel avec des % mais ça n'a rien changé.
merci de m'avoir lu.
Configuration: Windows / Chrome 96.0.4664.110
2 réponses
-
Bonjour,
Tu n'as pas du chercher avec les bons termes.
je viens de tomber sur une bonne explication ( enfin.. je l'ai lu en diagonale.. mais ça me parait pas trop mal)
https://kinsta.com/fr/blog/design-web-responsive/
Perso j'utilise principalement un framework css pour ne pas avoir à le coder moi même.
En général, j'utilise bootstrap ... mais iil en existe bien d'autres..
-
Merci beaucoup, ça m'a beaucoup aidé, j'ai mixer ça avec des breakpoint et maintenant ma page est beaucoup mieux.
