Hello tout le monde, j'essaye depuis quelques temps de créer ma page web en codage en partant de zéro, j'apprend sur el tas grâce à internet mais je bloque sur un problème. Je veux que ma page web ait un beau rendu sur portable (et tous les autres écrans) mais lorsque j'essaye le rendu "écran de telephone" sur mon pc, rien n'y fait l'image de fond et le reste vient se caler en haut à gaughe de l'ecran, sans en occuper les 4 coins... Cela commence à m'agacer car j'ai tout essayé, le responsive, les différentes formules de redimenssionnage, les media queries etc.. Rien ne marche et cela m'énerve, est ce un problème du site (google chrome avec sui je visuale mon rendu de page web lorsque je code sur VSC.) ? Si quelqu'un peut m'aider cela me ferais grand plaisir, je peut fournir plus d'info (code, capture d'écrans) si une personne est prête à m'aider !
Bonne soirée !
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: century;
}
header{
background-image:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(road-210913_1280.jpg);
width: 100%;
height: 100vh;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
Ce que je veux
Une solution pour que ma page web s'adapte à tous types d'écran, surtout portable.
Ce que j'obtiens
Un rendu nul qui reste en haut à gauche de l'écran dès que je test des formats portables.
9 réponses
Hello, merci de t'y intéressé ! Voici mon HTML, en gros c'est juste une page web avec un grand titre avec une animation (donc présent dans le CSS) , une image de background, un parragraphe, un chatbot intégré et un petit footer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Loc.ia</title>
</head>
<body>
<div id="typing-text"></div>
<script src="https://cdn.botpress.cloud/webchat/v2.2/inject.js"></script>
<script src="https://files.bpcontent.cloud/2024/10/02/16/20241002162932-3WD4Q4S7.js"></script>
<header>
<div class="principale">
<div class="logo">
<a href="#">Loc<span>.ia</span></a>
</div>
</div>
<div class="paragraphe">
<p1 id="grand">Contenu
<p1 id="petit">Contenu
</div>
<div class="footer">
<p2 id="grand">| © Untitled. All rights reserved |</p2>
<p2 id="petit">| © Untitled. All rights reserved |</p2>
</div>
</header>
</body>
</html>
Top ! étrangement tout fonctionne quand je teste ton code html + css, j'ai mis une image de fond qui s'adapte parfaitement à l'écran sous Chrome.
Peut être qu'il y a des effets de bord avec le reste de ton code ?..
Attention également à tes balises <p> car <p1> ou <p2> n'existent pas en html ^^
Etonnant ! Même en faisant trois petits points > plus d´outils > et les manips pour changer la taille d´écran ? Peut etre que c'est mon chrome qui bug alors ?
Ok merci pour l´info je ne savait pas, mais c´est vrai qu´il n´avait pas l´air de les reconnaitre quand je les avaient ecrites! Mais j´avoue que j´ai obtenu le visuel que je voulais donc ça m´allait. je vais tout de même réorganiser cela :)
Et bien, quelque chose m´échappe ! je vais réessayer demain bien que les nombresuses fois que j´ai regarder cela n´etait pas concluant.
Enfin merci beaucoup pour ton aide, je suis déjà un peu plus rassuré du fait que le probleme vient de mon affichage et non de mon code !
Merci aussi pour le conseil :)
Bonne soirée
Bonsoir, après d´autres recherches et essais, j´ai enfin compris d´où venait le probleme, si cela peut en aider d´autres, je le partage.
le soucis venait de mon CSS, car j´avais fixé mon logo sur le bord de droite et de gauche, ce qui déreglait le cadrage de l´image de fond lorsque je passais en ecran de telephone. Je l´ai donc fixé uniquement sur le bord de gauche avec un pourcentage donc maintenant tout marche a souhait ! bête comme tout mais il faut le savoir...
1 Ajoute un reset CSS pour éviter les marges par défaut :
css
Copy code
- { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
2Pour l’image de fond, configure CSS :
css
Copy code
body {
background-image: url('ton-image.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 100vh;