Redimensionner page html
fa23
Messages postés
86
Date d'inscription
Statut
Membre
Dernière intervention
-
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
Salut,
Je suis un débutant en programmation web et j'ai un problème c'est qu'il y a un espace blanc sur le coté droit ce qui fait que la page est trop grande , et j'aimerais savoir comment on fait pour redimensionner pour que ce soit jolie.
Code html :
Code CSS :
J'ai essayer de redimensionner en 100% mais ca n'a pas fonctionner, Pouvez vous m'aider ?
ps: je vous envoi des photos au prochain post.
Je suis un débutant en programmation web et j'ai un problème c'est qu'il y a un espace blanc sur le coté droit ce qui fait que la page est trop grande , et j'aimerais savoir comment on fait pour redimensionner pour que ce soit jolie.
Code html :
<!DOCTYPE html>
<html>
<meta lang="fr">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<title>Site</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<header>
<div class="header-container" >
<div class= "video-container">
<video autoplay="autoplay" muted="muted" loop="loop" style="width: 100%;">
<source src="videos\videoheader.mp4" type="video/mp4">
</video>
<div align="center">
<a href="#scroll">
<i class="fa fa-arrow-circle-down" aria-hidden="true" style="color: black; font-size: 35px;"></i>
</a>
</div><br><br><br><br>
</div>
</div>
</header>
<div id="scroll" align="center">
<img src="img\ce qui compte.png" width="360" height="130"><br><br>
<img src="img\petit trait gris.png"><br><br>
<img src="img\nous vous.png"><br><br><br><br><br><br>
<img src="img\grand trait gris.png" width="1300"><br><br><br><br><br>
</div>
<div align="center">
<img src="img\Nos programmes.png"><br><br>
<img src="img\petit trait gris.png"><br><br>
</div><br><br>
<div class="flex-container" align="center">
<img src="img\Développment des affaires.png" width="500" height="350">
<img src="img\Développement personel.png" width="500" height="350"><br><br><br><br><br><br>
<img src="img\grand trait gris.png" width="1300"><br><br><br><br><br>
</div>
<div align="center">
<img src="img\Notre boutique.png"><br><br>
<img src="img\petit trait gris.png"><br><br>
</div><br><br>
<div class="flexbox2" align="center">
<img src="img\image gauche boutique.png" width="150" height="350">
<img src="img\Développement personel.png" width="250" height="350"><!-- changer image -->
<img src="img\image droite boutique.png" width="700" height="350"><br><br><br><br><br><br>
<img src="img\grand trait gris.png" width="1300"><br><br><br><br><br>
</div>
<div align="center">
<img src="img\Notre boutique.png"><br><br>
<img src="img\petit trait gris.png"><br><br>
</div><br><br>
<div class="flexbox2" align="center">
<img src="img\partenaire photo gauche.png" width="365" height="350">
<img src="img\Développement personel.png" width="365" height="350"><!-- changer image -->
<img src="img\partenaire photo droite.png" width="365" height="350"><br><br><br><br><br><br>
<img src="img\grand trait gris.png" width="1300"><br><br><br><br><br><br>
</div>
<div align="center">
<img src="img\papillon du bas.png"><br><br>
<img src="img\petit trait gris.png"><br><br>
<img src="img\Merci.png"><br><br><br><br><br><br>
</div>
</body>
<footer class="footer" style="background-color: #242424; width: 100%"><br><br>
<div class="container">
<div class="row">
<div class="col-md-5" style="width: 100%; height: 250px;">
<img src="img\logo victoria liney bas.png">
<div class="row">
<div>
<ul style="position: relative; left: 40px;" ><br>
<img src="img\designedby.png">
</ul>
</div>
</div>
<ul class="nav" style="position: relative; left: 90px;">
<li class="nav-item"><a href="https://www.instagram.com/spatialdesignca/" class="nav-link" style="color: white"><i class="fa fa-instagram" style="font-size:25px;"></i></a></li>
<li class="nav-item"><a href="https://www.facebook.com/SpatialDesignca/" class="nav-link pl-0" style="color: white"><i class="fa fa-facebook-square" style="font-size:25px;" aria-hidden="true"></i></a></li>
</ul>
<br>
<ul class="nav" style="position: relative; left: 350px; bottom: 230px;">
<li class="nav-item"><a href="tel:" class="nav-link" style="color: white"><i class="fa fa-phone" style="font-size:35px;"></i></a></li>
</ul>
<ul class="nav" style="position: relative; left: 550px; bottom: 285px;">
<li class="nav-item"><a href="mailto:" class="nav-link" style="color: white"><i class="fa fa-envelope" style="font-size:35px;"></i></a></li>
</ul>
<ul class="nav" style="position: relative; left: 750px; bottom: 338px;">
<li class="nav-item"><a href="###" class="nav-link" style="color: white"><i class="fa fa-shopping-bag" style="font-size:35px;"></i></a></li>
</ul>
<ul class="nav" style="position: relative; left: 950px; bottom: 388px;">
<li class="nav-item"><a href="###" class="nav-link" style="color: white"><i class="fa fa-instagram" style="font-size:35px;"></i></a></li>
</ul>
<ul class="nav" style="position: relative; left: 1150px; bottom: 438px;">
<li class="nav-item"><a href="###" class="nav-link" style="color: white"><i class="fa fa-facebook-square" style="font-size:35px;"></i></a></li>
</ul>
</div>
</div>
</div>
</footer>
</html>
Code CSS :
header {
position: relative;
background-color: black;
overflow: hidden;
margin: 0;
padding: 0;
border: 0;
}
header video {
position: absolute;
z-index: 0;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.header-container{
position: relative;
width: 100%;
min-height: 100vh;
}
.video-container{
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
}
video {
position: absolute;
z-index: -1;
opacity: 0.5;
}
.flex-container{
height: 300px;
justify-content: space-between;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.flexbox2{
height: 300px;
display: flex;
flex-wrap: wrap;
align-items: center;
}
J'ai essayer de redimensionner en 100% mais ca n'a pas fonctionner, Pouvez vous m'aider ?
ps: je vous envoi des photos au prochain post.
Configuration: Windows / Chrome 79.0.3945.130
A voir également:
- Redimensionner page html
- Supprimer page word - Guide
- Editeur html - Télécharger - HTML
- Imprimer tableau excel sur une page - Guide
- Page d'accueil - Guide
- Page privée - Guide
2 réponses
Bonjour,
Vu que tu charges bootstrap.... utilise les class bootstrap !
Là, la structure de ta page ne s'appuie pas dessus ( bootstrap)...
Il faut donc revoir ta structure et utilser les bonnes class dans les bonnes div.
Tu peux te servir d'un truc du genre par exemple, pour construire la structure de ta page
https://www.layoutit.com/build
Vu que tu charges bootstrap.... utilise les class bootstrap !
Là, la structure de ta page ne s'appuie pas dessus ( bootstrap)...
Il faut donc revoir ta structure et utilser les bonnes class dans les bonnes div.
Tu peux te servir d'un truc du genre par exemple, pour construire la structure de ta page
https://www.layoutit.com/build
