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
A voir également:
- Adaptation de la taille des éléments
- Comment réduire la taille d'un fichier - Guide
- Photoshop elements gratuit - Télécharger - Retouche d'image
- Reduire taille image - Guide
- Afficher taille dossier windows - Guide
- Reduire la taille de la barre des taches windows 10 - Guide
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..
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..