Redimensionner page html

Signaler
Messages postés
64
Date d'inscription
lundi 20 juin 2016
Statut
Membre
Dernière intervention
21 juin 2020
-
Messages postés
28879
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
4 juillet 2020
-
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 :
<!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

2 réponses

Messages postés
64
Date d'inscription
lundi 20 juin 2016
Statut
Membre
Dernière intervention
21 juin 2020

Messages postés
28879
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
4 juillet 2020
2 594
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