Sujet Précédent Sujet Suivant

Redimensionner page html

Fermé
fa23 Messages postés 82 Date d'inscription lundi 20 juin 2016 Statut Membre Dernière intervention 21 octobre 2024 - 21 juin 2020 à 22:18
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 - 21 juin 2020 à 22:45
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
A voir également:

2 réponses

Réponse 1 / 2
fa23 Messages postés 82 Date d'inscription lundi 20 juin 2016 Statut Membre Dernière intervention 21 octobre 2024
21 juin 2020 à 22:21
0
Réponse 2 / 2
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
21 juin 2020 à 22:45
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


0

Discussions similaires

la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses