Decalage de mon header de gauche à droite

janyduchemin -  
 janyduchemin -
Bsr à toute la communauté

Voilà mon problème, le header de mon site bouge de gauche à droite, je sais pas comment résoudre ce problème

PS: je travail en local

Merci pour ce que vous faites pour les débutants que nous sommes

2 réponses

  2. janyduchemin
     
    bjr Jordane voila mon code

    la page header.php 

    <!DOCTYPE html>
  <html>
      <head>
          <meta charset="utf-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>Ndameyong</title>

          <!-- Google font -->
          <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700" rel="stylesheet">

          <!-- Bootstrap -->
          <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"/>

          <!-- Slick -->
          <link type="text/css" rel="stylesheet" href="css/slick.css"/>
          <link type="text/css" rel="stylesheet" href="css/slick-theme.css"/>

          <!-- nouislider -->
          <link type="text/css" rel="stylesheet" href="css/nouislider.min.css"/>

          <!-- Font Awesome Icon -->
          <link rel="stylesheet" href="css/font-awesome.min.css">
         
          <!-- Icomoon Icon Fonts-->
          <link rel="stylesheet" href="css/icomoon.css">

          <!-- Custom stlylesheet -->
          <link rel="stylesheet" href="css/main.css">
          <link type="text/css" rel="stylesheet" href="css/style.css"/> 
          
          <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
          <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
          <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
          <![endif]-->                 
      </head>

      <body>

        <!-- HEADER -->

        <header>
          <!-- TOP HEADER -->
         <div id="top-header">
              <div class="container">
                  <ul class="header-links pull-left">
                      <li><a href="#"><i class="fa fa-hotel"></i> Trouver un hotel</a></li>
                      <li><a href="#"><i class="fa fa-car"></i> Voiture de location</a></li>
                      <li><a href="#"><i class="fa fa-heart-o"></i> Faire une rencontre</
                      a></li>
                      
                      <li><a href="#"><i class="fa fa-car"></i> Voiture de location</a></li>
                      <li><a href="#"><i class="fa fa-heart-o"></i> Faire une rencontre</
                      a></li>
                  </ul>
                  <ul class="header-links pull-right">
                      <?php if (isset($_SESSION['user'])): ?>
                      <li><a href="profil.php">Bienvenue, <?php echo $_SESSION['user']['nom'] ?></a></li>
                      <?php if (Auth::isadmin($DB)): ?>
                      <li><a href="admin/">Administration</a></li>
                      <?php endif ?>
                      <li><a href="login.php?logout">logout</a></li>
                      <?php else: ?>
                      <li><a href="signup.php"><i class="fa fa-dollar"></i> S'inscrire</a></li>
                      <li><a href="login.php"><i class="fa fa-user"></i> Se connecter</a>
                      </li>
                      <?php endif?>
                  </ul>
              
              </div>
        </div>
        <!-- /TOP HEADER -->

          <!-- MAIN HEADER -->
          <div id="header">
              <!-- container -->
              <div class="container">
              <!-- row -->
              <div class="row">
            
                  <!-- LOGO  -->
                  <div class="col-md-3">
                      <div class="header-logo">
                          <a href="produits.php" class="logo">
                             <img src="./img/logo.png" alt="">
                          </a>
                      </div>
                  </div>
            <!-- /LOGO -->

            <!-- SEARCH BAR -->
            <div class="col-md-6">
                <div class="header-search">
                    <form>
                        <select class="input-select">
                            <option value="0">Les langues</option>
                            <option value="1">Category 01</option>
                            <option value="1">Category 02</option>
                        </select>
                        <input class="input" placeholder="Search here">
                        <button class="search-btn">Search</button>
                    </form>
                </div>
            </div>
            <!-- /SEARCH BAR -->

            <!-- ACCOUNT -->
            <div class="col-md-3 clearfix">
              <div class="header-ctn">

                <!-- Wishlist -->              
                <!-- /Wishlist -->

                <!-- Cart -->             
                <div class="dropdown">
                  <div>
                    <ul class="header-links1 pull-right">                    
                      <li><a href="https//www.facebook.com"><i class="fa fa-facebook"></i> </a></li>
                      <li><a href="#"><i class="fa fa-twitter"></i> </a></li>
                      <li><a href="#"><i class="fa fa-instagram"></i></a></li>             
                    </ul>                   
                  </div>
                  
                </div> 
                <!-- /Cart -->

                <!-- Menu Toogle -->
                <div class="menu-toggle">
                  <a href="#">
                    <i class="fa fa-bars"></i>
                    <span>Menu</span>
                  </a>
                </div>
                <!-- /Menu Toogle -->         
              </div>
            </div>
            <!-- /ACCOUNT -->
          <!-- /MAIN HEADER -->
               
          </div>
        </header>
        <!-- /HEADER -->


<!-- NAVIGATION -->
    <nav id="navigation" >
      <!-- container -->
      <div class="container">
        <!-- responsive-nav -->
        <div id="responsive-nav">

          <!-- NAV -->    
           <ul class="main-nav nav navbar-nav">           
              <li><a href="index.php"><strong>HOME</strong></a></li>
              <li><a href="langues.php">Langues<br />                     
              <li><a href="videos.php">Videos</a></li> 
              <li><a href="exercices.php">Exercices</a></li>                           
              <li><a href="histoire.php">Histoire et Culture</a></li>         
              <li><a href="proverbes.php">Proverbes</a></li>
              <li><a href="objectifs.php">Objectifs</a></li>               
              <li><a href="cuisine.php">Cours de cuisine</a></li>             
              <li><a href="partenaires.php">Nos partenaires</a></li>
              <li><a href="don.php">sante</a></li>
              <li><a href="contact.php">Contact</a></li>            
          </ul>
      <!-- /NAV -->

        </div>
        <!-- /responsive-nav -->
      </div>
      <!-- /container -->
  </nav>
    <!-- /NAVIGATION -->

 <div class="main">
    <div class="container">


    la page index.php 

    <?php require 'includes/includes.php'; ?>
<?php require 'includes/header.php'; ?>
<!-- message de session -->
<?php if (isset($_SESSION['message'])): ?>
  <div class="message"> <?php echo $_SESSION['message']; ?></div>
  <?php unset($_SESSION['message']) ?>
<?php endif ?>
<?php if (isset($_SESSION['erreur'])): ?>
  <div class="errorMessage"> <?php echo $_SESSION['erreur']; ?></div>
  <?php unset($_SESSION['erreur']) ?>
<?php endif ?>

      <h1>Bienvenue chez Ndameyong ...</h1>
      <p>Ndameyong est un espace de formation en langues Camerounaises 100 % gratuit. 
L’objectif : apprendre les langues Camerounaises et les faire revivre grâce à des cours 
concis et personnalisés. Le tout dans une ambiance fun pour un apprentissage rapide et adapté 
au niveau de chacun. <br />Avec Ndameyong, parler devient facile.
      </p>
      
      
        <?php endforeach ?>
        
     

      <div class="clearfix"></div>
  
<?php require 'includes/footer.php'; ?>


    la page footer.php est encore vide, elle n'a pas de problème

    la page main.css (contenant une partie de la mise en forme) 

    /*----------------------------*\
  Typography
\*----------------------------*/
body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  color: #333; }

h1, h2, h3, h4, h5, h6 {
  color: #2B2D42;
  font-weight: 700;
  margin: 0 0 10px; }

a {
  color: #fff;
  font-weight: 500;
  -webkit-transition: 0.2s color;
  transition: 0.2s color; }

a:hover, a:focus {
  color: #D10024;
  text-decoration: none;
  outline: none; }

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none; }

/*----------------------------*\
  Inputs
\*----------------------------*/
/*-- Text input --*/
.input {
  height: 40px;
  padding: 0px 15px;
  border: 1px solid #E4E7ED;
  background-color: #FFF;
  width: 100%; }

/*-- Select input --*/
.input-select {
  padding: 0px 15px;
  background: #FFF;
  border: 1px solid #E4E7ED;
  height: 40px; }

/*=========================================================
  02 -> HEADER  
===========================================================*/

/*----------------------------*\
  Top header 
\*----------------------------*/
#top-header {
  padding-top: 2px;
  padding-bottom: 3px;
  margin-right: 0px;
  margin-left: 0px;
  background-color: #48a44f; }

.header-links li {
  display: inline-block;
  margin-right: 15px;
  font-size: 13px; }

.header-links li:last-child {
  margin-right: 0px; }

.header-links li a {
  color: #FFF; }

.header-links li a:hover {
  color: #000; }

.header-links li i {
  color: #000;
  margin-right: 5px;
  padding-top: 5px;
  padding-bottom: 3px; }

.header-links1 li i {
  display: inline-block;
  color: yellow;
  margin-right: 15px;
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: 18px; }

/*----------------------------*\
  Logo  #D10024 
\*----------------------------*/
#header {
  padding-top: 5px;
  padding-bottom: 5px;
  border-top: none;
  background: url(../img/banner.png) center no-repeat; }

.header-logo {
  float: left;
  display: block;
  padding-top: 5px; }

/*----------------------------*\
  Search
\*----------------------------*/
.header-search {
  padding-top: 22px; }

.header-search form {
  position: relative; }

.header-search form .input-select {
  margin-right: -3px;
  margin-left: 15px;
  border-radius: 40px 0px 0px 40px; }

.header-search form .input {
  width: calc(100% - 260px);
  margin-right: -5px; }

.header-search form .search-btn {
  height: 40px;
  width: 100px;
  background: #FFFF00;
  color: #000;
  font-weight: 700;
  border: none;
  border-radius: 0px 40px 40px 0px; }

/*----------------------------*\
  Cart
\*----------------------------*/
.header-ctn {
  float: right;
  padding: 15px 0px; }

.header-ctn > div {
  display: inline-block; }

.header-ctn > div > a {
  display: block;
  padding-top: 15px;
  position: relative;
  width: 25px;
  text-align: none;
  color: #FFFF00; }

.header-ctn .menu-toggle {
  display: none; }

.menu-toggle {
  float: right;
  padding: 5px 0px;
  margin-left: 15px;
  padding-bottom: 0px; }

/*=========================================================
  03 -> Navigation    
===========================================================*/
#navigation {
  background: #619497;
  border-bottom: 2px solid #fff;
  border-top: 4px solid #ffff00;
  padding-top: 0;
  padding-bottom: -3px; }

/*----------------------------*\
  Main nav #619497
\*----------------------------*/
.main-nav > li + li {
  margin-left: 25px; }

.main-nav > li > a {
  padding: 8px 0px; }

.main-nav > li > a:hover, .main-nav > li > a:focus, .main-nav > li.active > a {
  color: #FFFF00;
  background-color: transparent; }

.main-nav > li > a:after {
  content: "";
  display: block;
  width: 0%;
  height: 2px;
  background-color: #FFFF00;
  -webkit-transition: 0.2s all;
  transition: 0.2s all; }

.main-nav > li > a:hover:after, .main-nav > li > a:focus:after, .main-nav > li.active > a:after {
  width: 100%; }

.header-ctn li.nav-toggle {
  display: none; }

/*----------------------------*\
  sous_menu
\*----------------------------*/
.sous_menu {
  color: green;
  display: inline-block; }

/*----------------------------*\
  responsive nav
\*----------------------------*/
@media only screen and (max-width: 991px) {
  .header-ctn .menu-toggle {
    display: inline-block; }

  #responsive-nav {
    position: fixed;
    left: 0;
    top: 0;
    background: #000;
    height: 100vh;
    max-width: 250px;
    width: 0%;
    overflow: hidden;
    z-index: 22;
    padding-top: 60px;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: 0.2s all;
    transition: 0.2s all; }

  #responsive-nav.active {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
    width: 100%; }

  .main-nav {
    margin: 0px;
    float: none; }

  .main-nav > li {
    display: block;
    float: none; }

  .main-nav > li + li {
    margin-left: 0px; }

  .main-nav > li > a {
    padding: 15px;
    color: #FFF; } }
/*=========================================================
RESPONSIVE
===========================================================*/
@media only screen and (max-width: 991px) {
  #top-header .header-links.pull-left {
    float: none !important; }

  #top-header .header-links.pull-right {
    float: none !important;
    margin-top: 5px; }

  .header-logo {
    float: none;
    text-align: right; }

  .header-logo .logo {
    display: inline-block; }

  #product-imgs {
    margin-bottom: 60px;
    margin-top: 15px; }

  #rating {
    text-align: center; }

  #reviews {
    margin-top: 30px;
    margin-bottom: 30px; } }
@media only screen and (max-width: 767px) {
  .section-title .section-nav {
    float: none;
    margin-top: 10px; }

  .section-tab-nav li {
    margin-top: 10px; } }
@media only screen and (max-width: 480px) {
  [class*='col-xs'] {
    width: 100%; }

  .store-grid {
    float: none;
    margin-top: 10px; }

  .store-pagination {
    float: none;
    margin-top: 10px; } }

/*# sourceMappingURL=main.css.map */


    Le problème, le code fonctionne bien (je suis en locale) mais dès que je clique sur le menu langue, video, exercices...le header décale vers la droite et revient à sa position quand je clique sur home. je ne comprends pas ce qui se passe.
    Merci d'avance
    0

Discussions similaires

Aide vêtements
Myloush -
AaaMilos -

6 réponses
Parka chauffant Paragoose
Elo -
madmyke -

3 réponses
Reconnaître une fausse Canada Goose
Killuaaaaa -
Jpng7 -

22 réponses
Bouton ON/OFF : O ou I, quel côté est allumé
Stargirlfr -
kaparzo23 -

12 réponses
Symbole Attention dans Word
Nortec59 -
LOUL7619 -

33 réponses