Sujet Précédent Sujet Suivant

Adaptation de la taille des éléments

Résolu/Fermé
valentin - 19 déc. 2021 à 15:26
 valentin - 20 déc. 2021 à 14:51
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. 
<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

Réponse 1 / 2
jordane45 Messages postés 38279 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 novembre 2024 4 697
19 déc. 2021 à 16:43
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..


1
Réponse 2 / 2
valentin
20 déc. 2021 à 14:51
Merci beaucoup, ça m'a beaucoup aidé, j'ai mixer ça avec des breakpoint et maintenant ma page est beaucoup mieux.
0

Discussions similaires

À quoi correspond 32x32 US en taille française pour un jean ?
Alison1958 -
Thordendall -

1 réponse
W32 L32: correspondance entre taille US et taille française
efg -
sibel -

6 réponses
Ecran iphone qui est trop grand
patorp -
Proulx -

144 réponses
Curseur plus large que 32x32
Zv -
Zv -

2 réponses
Remettre l'écran en taille normale
Floriane -
Cindy64000 -

24 réponses