différence entre page local et internet

Sujet résolu

Sn0wFR

12 février 2018 à 14:30:16

Bonjour/Bonsoir .

je vien de glisser déposer mes fichier pour changer l'aspect de mon site (le formulaire en bas)

mais alors voila le problème:

en local:

sur internet:

voila mon tout mon index.html ( la partie voulue ce trouve en bas dans le footer ) :

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>PLFA</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
  </head>
  <body>
    <header class="container-fluid header">
      <div class="container"> <a href="#">LA PLFA</a>
        <nav class="menu"> 
          <a href="#"> Acceuil </a> 
          <a href="#ancre_a_propos"> A propos </a> 
          <a href="https://www.youtube.com/channel/UCoZry3lfxo46ihE0Z-19Y5w/videos" target="_BLANK"> Vidéo </a> 
          <a href="#ancre_formulaire"> Contact </a> 
        </nav>
      </div>
    </header>
    <!--banniere-->
    <section class="container-fluid banner">
      <div class="ban"> <img src="img/ban.jpg" alt="banniére du site"> </div>
      <div class="immer-banner">
        <h1 id="ancre_a_propos">Bienvenue sur le site de la PLFA</h1>
         </div>
    </section>
    <!--a propos-->
    <section class="container-fluid about">
      <div class="container">
        <div class="row">
          <article class="col-md-4 col-lg-4 col-xs-12 col-sm-12">
            <h2> Qui somme nous </h2>
            <p> Hey Tu es bien sur la PLFA nous t'accueillons a bras ouvert et
              on vous souhaite un bon visionnage sur notre chaîne, amusez-vous
              bien, on s'amuse bien, on est 3 a tenir cette chaîne de gaming
              mais peut etre changerons nous avec le temps ! </p>
          </article>
          <article class="col-md-4 col-lg-4 col-xs-12 col-sm-12">
            <h2> Dernière vidéo </h2>
            <iframe src="https://www.youtube.com/embed/vRT7ya_zvc4" allow="autoplay; encrypted-media"

              allowfullscreen="" height="280" frameborder="0" width="350"></iframe>
          </article>
          <article class="col-md-4 col-lg-4 col-xs-12 col-sm-12">
            <h2> Projet a venir </h2>
            <p> Pour l'instant il n'y a aucun projet ! </p>
          </article>
        </div>
      </div>
    </section>
    <!--footer/contact-->
    <footer class="container-fluid footer">
      <div class="container">
        <div class="row">
            <form id="ancre_formulaire" class="formulaire" method="post" action="traitement.php">
             <fieldset>
                <legend class="legend" >Pour nous contacter :</legend>
                <label class="prenom" for="prenom">Non - Prenom :</label>
                <input class="prenom" type="text" id="prenom" name="prenom" required="" placeholder="Votre nom et prénom"><br>

                <label class="mail" for="mail">Votre email :</label>
                <input class="email" type="email" id="mail" name="mail" required="" placeholder="Votre adresse email"><br>

                <label class="message" for="message">Votre message :</label>
                <textarea class="a" id="message" name="message" required="" placeholder="Votre message"></textarea><br>
              </fieldset>

              <input type="submit" value="envoyer">
            </form>
        </div>
      </div>
    </footer>
  </body>
</html>

et la tout mon css.html ( la partie voulue ce trouve en bas dans les input ) :

body, html{
	padding: 0;
	margin: 0;
	background-color: black;
	color: grey;
}

a, a:hover{
	text-decoration: none;
}

.container-fluid{
	padding: 0;
}

/* header */

header.header{
	background-color: #838685;
	height: 70px;
	line-height: 70px;
	color: black;
}

header.header div.container nav.menu{
	float: right;
}

header.header div.container nav.menu a{
	color: #ffffff;
	margin-right: 20px;

}

header.header div.container a{
	color: #ffffff;
	margin-right: 20px;
}

header.header div.container a:hover{
	color: #2C3E50;
	transition: 0.25s all;
}

header.header div.container nav.menu a:hover{
	color: #2C3E50;
	transition: 0.25s all;
}

/* bannière */

section.banner div.ban img{
	width: 100%;
}

section.banner div.immer-banner button.btn{
	background-color: white;
	color: #1C1C1C;
}

/* about */


/* portfolio */

/* contact */

footer.footer{
	background-color: #838685;
}

body footer div.container div.row form.formulaire fieldset{
	color: black;
	margin-left: 10%;
}

body footer div.container div.row form.formulaire{
	margin-left: 40%;
}

input:required, textarea:required{
	background: url(asterisk.png) 98% center no-repeat;
	background-color: white;
}

input:focus:invalid, textarea:focus:invalid{
	border-color: #FF0000;
	background-image: none;

}

input:focus:valid, textarea:focus:valid{
	border-color: #56C93F;
	background-image: none;
}

input:valid, textarea:valid{
	background-image: none;
}

Merci d'avance pour vos réponses

noopy360

12 février 2018 à 15:34:15

Salut cela vient de la facon dont tu as fait ton code qui je trouve selon moi est très hasardeuse...

J'ai pas tout regarder mais rien que dans le footer tu utilise plusieur <div> etc qui ne servent à rien en plus tu mais des margin dans tout les sens et en pourcentage...

Mais il n'y a pas d'erreur grave en soit c'est juste un problème d'organisation dans ton code.

Le plus simple pour que je puisse t'aider serai de voir directement le site en ligne...

Bien cordialement

https://validator.w3.org/ / https://jigsaw.w3.org/css-validator/ / https://codepen.io/pen

Sn0wFR

12 février 2018 à 16:15:15

voila https://mathieu-test.000webhostapp.com/index.html

mais il est off pendant 10 min voir plus (au moment ou j'ecrit cela (merci 000webhost XD))

mais même ci mon code est hasardeux pourquoi ne m'affiche t-il pas la même chose que en local puisque c'est le même code ?

-
Edité par Sn0wFR 12 février 2018 à 16:33:34

Lord Morpheus

12 février 2018 à 16:55:37

Bonjour,

Voici ce que répond ta page en ligne pour le moment :

Website is temporary sleeping

This website is hosted on a free learning platform - 000webhost.com

000webhost was created by Hostinger team to let anyone learn and grow online. All commercial websites are adviced to move to Hostinger or keep learning on 000webhost.

<small>Upgrade to Cheap & Premium Hostinger Plans to have 24/7 reachable website<small> Upgrade to Hostinger to avoid Sleep </small></small>

Sinon, ton problème semble être un problème de chargement de CSS. As tu bien pensé à uploader ton fichier css? As tu vérifier tes liens relatif/absolu ?

-
Edité par Lord Morpheus 12 février 2018 à 16:56:32

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

Sn0wFR

13 février 2018 à 10:01:38

la partie

Website is temporary sleeping

est normal c'est juste mon hébergeur qui ferme la page pendant 1h chaque jour

sinon j'ai juste eu a attendre et aujourd'hui tout est revenu comme sur la page en local (allez savoir pourquoi XD)

Lord Morpheus

13 février 2018 à 11:22:48

Petite info : Accueil et non Acceuil

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil