Partage
  • Partager sur Facebook
  • Partager sur Twitter

Fond fixe qui descend avec la souris

Sujet résolu
Maxime L
  • HTML / CSS
    12 novembre 2018 à 11:17:17

    Bonjour,

    Je suis désolé de vous déranger.

    J'ai un soucis concernant un fond fixe sur une page de contact et je souhaite descendre avec la molette de la souris car j'ai un petit écran mais comme le fond est fixe je ne peux pas le faire.

    Pouvez-vous m'aider s'il vous plaît?

    Voici mon code:

    PHP :

    <!DOCTYPE html>
<!--&copy!-->
<html>
  <head>
    <meta charset="utf-8">
    <!--lien fichier externe!-->
    <!--lien normaux!-->
  	<link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="css/contact/style.css">
    <!--fin lien normaux!-->
    <!--lien pour tablette!-->
    <link rel="stylesheet" media="screen and (max-width: 1023px)" href="css/tablette/style.css">
    <link rel="stylesheet" media="screen and (max-width: 1023px)" href="css/tablette/index.css" />
    <!--fin lien pour tablette!-->
    <!--lin pour telephone!-->
    <link rel="stylesheet" media="screen and (max-width:px)" href="css/telephone/style.css">
    <link rel="stylesheet" media="screen and (max-width:px)" href="css/telephone/index.css">
    <!--fin lien pour telephone!-->
    <!--lien javascript!-->

    <!--fin lien javascript!-->
    <!--fin fichier externe!-->
    <?php // REVIEW: exemple mama ?>
<meta name="Generator" content="Quanta +/Linux Mandriva 2008 ">
<meta name="Keywords" content="Maxime LUCE, maxime luce, Le Max De Culture, lemaxdeculture, le max de culture">
<meta name="description" content="Le Max De Culture a été créé par Maxime LUCE. Ce site vous renouera avec la mathématique, la physique, l'informatique, etc...">
<meta name="Language" content="FR;fr">
<meta name="Date" content="2018">
<meta name="Droits" content="Maxime LUCE">
<?php // REVIEW: fin exemple mama ?>
    <title>Le Max de Culture</title>
    <link href="image/logo.jpg" rel="shortcut icon" />

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="title" content="le-max-de-culture.fr"/>
  <!--    <meta name="le-max-de-culture.fr" content=""/>
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>!-->

    <meta name="copyright" content="©LeMaxDeCulture"/>
    <meta name="author" content="Maxime LUCE"/>

  </head>

  <body>
    <header>
      <nav>
        <div class="nav-logo">
          <a href="image/logo.jpg" title="Voir le logo en grand" target="_blank">
          <img src="image/logo.jpg" alt="Voir le logo en grand">
        </a>
        </div>
        <ul>
          <li><a href="index.php">Accueil</a></li>
          <li><a href="course_cours.php">Course en cours</a></li>
          <li><a href="equipes.php">Les équipes</a></li>
          <li><a href="contact.php">Contact</a></li>
        </ul>
      </nav>
    </header>

<div class="page_1">

  <?php
          /*
          	********************************************************************************************
          	CONFIGURATION
          	********************************************************************************************
          */
          // destinataire est votre adresse mail. Pour envoyer à plusieurs à la fois, séparez-les par une virgule
          $destinataire = 'lemaxdeculture.contact@gmail.com, f.perrault@csndnevers.net, f.baudin@csndnevers.net';

          // copie ? (envoie une copie au visiteur)
          $copie = 'non';

          // Action du formulaire (si votre page a des paramètres dans l'URL)
          // si cette page est index.php?page=contact alors mettez index.php?page=contact
          // sinon, laissez vide
          $form_action = '';

          // Messages de confirmation du mail
          $message_envoye = "Votre message m'est bien parvenu !";
          $message_non_envoye = "L'envoi du mail a échoué, veuillez réessayer s'il vous plaît.";

          // Message d'erreur du formulaire
          $message_formulaire_invalide = "Vérifiez que tous les champs soient bien remplis et que l'email soit sans erreur.";

          /*
           * NoSpamQuestion affiche une question pour la validation d'un formulaire ...
           * $mode, mode question ou réponse par défaut tirage au sort de question {string}
           * $answer, lors de la demande d'une réponse à la question numero tant ... {int}
           *
           * @returns array
           *
           * Ajouter une question :
           * copier/coller ces lignes et remplir le contenu entre guillemets doubles :
           *
           * $array_pictures[$j]['num'] = $j; // ne pas changer cette ligne
           * $array_pictures[$j]['question'] = "mettre ici la question (correspondant à l'image si vous utilisez une image)";
           * $array_pictures[$j]['answer'] = "mettre ici la réponse à l'énigme";
           * $j++; // ne pas oublier cette ligne dans la copie :-)
           *
           * C'est tout. Question suivante ? :-)
           *
           */
          function NoSpamQuestion($mode = 'ask', $answer = 0)
          {
          	$array_pictures = array(); $j = 0;

          	$array_pictures[$j]['num'] = $j;
          	$array_pictures[$j]['question'] = "Quelle est la cinquième lettre du mot Astux";
          	$array_pictures[$j]['answer'] = "x";
          	$j++;

          	$array_pictures[$j]['num'] = $j;
          	$array_pictures[$j]['question'] = "Ecrire 2 en lettres";
          	$array_pictures[$j]['answer'] = "deux";
          	$j++;

          	$array_pictures[$j]['num'] = $j;
          	$array_pictures[$j]['question'] = "Ecrire 12 en lettres";
          	$array_pictures[$j]['answer'] = "douze";
          	$j++;

            $array_pictures[$j]['num'] = $j;
            $array_pictures[$j]['question'] = "Quelle est la couleure du cheval blanc d'Henry IV?";
            $array_pictures[$j]['answer'] = "blanc";
            $j++;

            $array_pictures[$j]['num'] = $j;
            $array_pictures[$j]['question'] = "1+1=? : il n'y pas de piège :)";
            $array_pictures[$j]['answer'] = "2";
            $j++;

            $array_pictures[$j]['num'] = $j;
            $array_pictures[$j]['question'] = "Ecrire 4 en lettres";
            $array_pictures[$j]['answer'] = "quatre";
            $j++;

            $array_pictures[$j]['num'] = $j;
            $array_pictures[$j]['question'] = "1+3=? : il n'y pas de piège :)";
            $array_pictures[$j][''] = "4";
            $j++;

            $array_pictures[$j]['num'] = $j;
            $array_pictures[$j]['question'] = "2+2=? : il n'y pas de piège :)";
            $array_pictures[$j][''] = "4";
            $j++;

            $array_pictures[$j]['num'] = $j;
            $array_pictures[$j]['question'] = "Ecrire 11 en lettres";
            $array_pictures[$j][''] = "onze";
            $j++;

            $array_pictures[$j]['num'] = $j;
            $array_pictures[$j]['question'] = "2+3=?";
            $array_pictures[$j][''] = "5";
            $j++;

            $array_pictures[$j]['num'] = $j;
            $array_pictures[$j]['question'] = "Ecrire 3 en lettres";
            $array_pictures[$j][''] = "trois";
            $j++;

            $array_pictures[$j]['num'] = $j;
            $array_pictures[$j]['question'] = "Quelle est la deuxième lettre du mot Apolux?";
            $array_pictures[$j][''] = "p";
            $j++;

  //          $array_pictures[$j]['num'] = $j;
    //        $array_pictures[$j]['question'] = "Quelle est la question?";
      //      $array_pictures[$j][''] = "réponse de la question précédente, la casse n'est pas respecter";
        //    $j++;

          	if ($mode != 'ans')
          	{
          		// on est en mode 'tirer au sort', on tire une image aléatoire
          		$lambda = rand(0, count($array_pictures)-1);
          		return $array_pictures[$lambda];
          	}
          	else
          	{
          		// on demande une vraie réponse
          		foreach($array_pictures as $i => $array)
          		{
          			if ($i == $answer)
          			{
          				return $array;
          				break;
          			};
          		};
          	}; // Fin if ($mode != 'ans')
          };
          /*
          	********************************************************************************************
          	FIN DE LA CONFIGURATION
          	********************************************************************************************
          */
          	// on tire au sort une question
          	$nospam = NoSpamQuestion();

          /*
           * cette fonction sert à nettoyer et enregistrer un texte
           */
          function Rec($text)
          {
          	$text = htmlspecialchars(trim($text), ENT_QUOTES);
          	if (1 === get_magic_quotes_gpc())
          	{
          		$text = stripslashes($text);
          	}

          	$text = nl2br($text);
          	return $text;
          };

          /*
           * Cette fonction sert à vérifier la syntaxe d'un email
           */
          function IsEmail($email)
          {
          	$value = preg_match('/^(?:[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\`\{\|\}\~]+\.)*[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\`\{\|\}\~]+@(?:(?:(?:[a-zA-Z0-9_](?:[a-zA-Z0-9_\-](?!\.)){0,61}[a-zA-Z0-9_-]?\.)+[a-zA-Z0-9_](?:[a-zA-Z0-9_\-](?!$)){0,61}[a-zA-Z0-9_]?)|(?:\[(?:(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\.){3}(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\]))$/', $email);
          	return (($value === 0) || ($value === false)) ? false : true;
          }

          // formulaire envoyé, on récupère tous les champs.
          $nom        = (isset($_POST['nom']))        ? Rec($_POST['nom'])        : '';
          $email      = (isset($_POST['email']))      ? Rec($_POST['email'])      : '';
          $objet      = (isset($_POST['objet']))      ? Rec($_POST['objet'])      : '';
          $message    = (isset($_POST['message']))    ? Rec($_POST['message'])    : '';
          $antispam_h = (isset($_POST['antispam_h'])) ? Rec($_POST['antispam_h']) : '';
          $antispam_r = (isset($_POST['antispam_r'])) ? Rec($_POST['antispam_r']) : '';

          // On va vérifier les variables et l'email ...
          $email = (IsEmail($email)) ? $email : ''; // soit l'email est vide si erroné, soit il vaut l'email entré
          $err_formulaire = false; // sert pour remplir le formulaire en cas d'erreur si besoin

          if (isset($_POST['envoi']))
          {
          	// On demande la vraie réponse
          	$verif_nospam = NoSpamQuestion('ans', $antispam_r);

          	if (strtolower($antispam_h) != strtolower($verif_nospam['answer']))
          	{
          		// le formulaire s'arrête ici
          		echo '<p>Vous n\'avez pas répondu correctement à la question Antispam ...</p>';
          	}
          	else
          	{
          		if (($nom != '') && ($email != '') && ($objet != '') && ($message != ''))
          		{
          			// les 4 variables sont remplies, on génère puis envoie le mail
          			$headers  = 'MIME-Version: 1.0' . "\r\n";
          			$headers .= 'From:'.$nom.' <'.$email.'>' . "\r\n" .
          				'Reply-To:'.$email. "\r\n" .
          				'Content-Type: text/plain; charset="utf-8"; DelSp="Yes"; format=flowed '."\r\n" .
          				'Content-Disposition: inline'. "\r\n" .
          				'Content-Transfer-Encoding: 7bit'." \r\n" .
          				'X-Mailer:PHP/'.phpversion();

          			// envoyer une copie au visiteur ?
          			if ($copie == 'oui')
          			{
          				$cible = $destinataire.';'.$email;
          			}
          			else
          			{
          				$cible = $destinataire;
          			};

          			// Remplacement de certains caractères spéciaux
          			$message = str_replace("&#039;","'",$message);
          			$message = str_replace("&#8217;","'",$message);
          			$message = str_replace("&quot;",'"',$message);
          			$message = str_replace('<br>','',$message);
          			$message = str_replace('<br />','',$message);
          			$message = str_replace("&lt;","<",$message);
          			$message = str_replace("&gt;",">",$message);
          			$message = str_replace("&amp;","&",$message);

          			// Envoi du mail
          			$num_emails = 0;
          			$tmp = explode(';', $cible);
          			foreach($tmp as $email_destinataire)
          			{
          				if (mail($email_destinataire, $objet, $message, $headers))
          					$num_emails++;
          			}

          			if ((($copie == 'oui') && ($num_emails == 2)) || (($copie == 'non') && ($num_emails == 1)))
          			{
          				echo '<p>'.$message_envoye.'</p>';
          			}
          			else
          			{
          				echo '<p>'.$message_non_envoye.'</p>';
          			};
          		}
          		else
          		{
          			// une des 3 variables (ou plus) est vide ...
          			echo '<p>'.$message_formulaire_invalide.'</p>';
          			$err_formulaire = true;
          		};
          	};
          }; // fin du if (!isset($_POST['envoi']))

          if (($err_formulaire) || (!isset($_POST['envoi'])))
          {
          	// afficher le formulaire
          	echo '
            <div class="formulaire">
          	<form id="contact" method="post" class="formulaire" action="'.$form_action.'">
          	<fieldset class="nom_mail">
            <legend class="coordonnees">Vos coordonnées</legend>
          		<p class="nom">
              <label for="nom">Nom et prénom :</label>
              <input type="text" id="nom" class="nom_saisie" placeholder="Votre nom" name="nom" value="'.stripslashes($nom).'" tabindex="1" />
              </p>
          		<p class="mail">
              <label for="email">Email* :</label>
              <input type="text" id="email" required placeholder="Votre adresse mail" class="email_saisie" name="email" value="'.stripslashes($email).'" tabindex="2" />
              </p>
          	</fieldset>

          	<fieldset class="objet_mail">
            <legend class="message">Votre message :</legend>
          		<p class="objet">
              <label for="objet">Objet :</label>
              <input type="text" id="objet" placeholder="Objet" class="objet_saisie" name="objet" value="'.stripslashes($objet).'" tabindex="3" />
              </p>
          		<p class="message">
              <label for="message">Message :</label>
              <textarea id="message" class="message_saisie" placeholder="Votre message" name="message" tabindex="4" cols="30" rows="8">'.stripslashes($message).'</textarea>
              </p>
          	</fieldset>

          	<fieldset class="antispam">
            <legend class="antispam">Antispam*</legend>
          		<p class="antispam">
              <label for="antispam_h">'.$nospam['question'].'</label>
              <input type="text" name="antispam_h" required placeholder="Votre réponse" id="antispam_h" class="antispam_saisie" />
              <input type="hidden" name="antispam_r" value="'.$nospam['num'].'" />
              </p>
          	</fieldset>

          	<div style="text-align:center;">
            <input type="submit" name="envoi" class="envoi" value="Envoyer le message" /></div>
          	</form>
            * : champs obligatoires
            </div>';
          };
          ?>

</div>

  <footer>
  </footer>



</html>

    CSS global :

    *{

  }

html{
  margin:0;
  padding:0;
}

/* REVIEW: DEBUT HEADER */
nav {
  width: 100%;
  height: 70px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #4B4E51;

  display: flex;
  justify-content: space-between;
  z-index: 10;
}
.nav-logo{
  width: 20%;

  display: flex;
  justify-content: center;
  align-items: center;

}
.nav-logo img {
  max-height: 50px;
}

nav ul {
  margin-right: 5%;
  width: 50%;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav ul li {
  list-style: none;
}

nav ul li a {
  text-decoration: none;
  color : #02A69B;
  text-transform: uppercase;
}

nav ul li a:hover {
  color: #199AEF;

}

/* REVIEW: FIN DU HEADER */

.page_1{
  height: calc(100% - 70px);
  width: 100%;
  margin-top: 70px;
  top:0;
  left:0;
  background-image: url("../image/fond.png");
  background-repeat: no-repeat;
  background-position: fixed;
  background-size: 100% 100%;
 position:fixed;
}


h1.presentation{
  color:#dfe6e9;
  text-align: center;
  font-size: 3em;
}

div.encadre_presentation{
  display: flex;
  justify-content: center;
  align-items: center;
}

span.rouge{
  color:#fa8231;
}

/* REVIEW: footer */
footer{
  color:rgb(55, 155, 214);
}

p.centre{
  text-align: center;
}

a.mentions{
  text-decoration: none;
  font-style: italic;
  color:rgb(55, 155, 214);
}

a.mentions:hover{
  text-decoration: underline;
  font-style: italic;
}
/* REVIEW: fin footer */


    CSS page :

    /* REVIEW: DEBUT FORMULAIRE DE CONTACT */
#conteneur_formulaire{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

div.info_contact{
  width: 50%;
}

div.formulaire{
  width: 50%;
  display: block;
  margin: auto;
  color: white;
}

p.nom{
  /*color:rgb(247, 118, 105);*/
}

.nom_saisie{
  /*background-color: grey;*/
  border : 1px solid black;
}

p.mail{
  /*color:rgb(255, 203, 107);*/
}

.email_saisie{
  /*background-color: grey;*/
  border : 1px solid black;
}

p.objet{
  /*color: rgb(130, 170, 193);*/
}

.objet_saisie{
  /*background-color: grey;*/
  border : 1px solid black;
}

p.message{
  /*color: rgb(197, 234, 141);*/
}

.message_saisie{
  /*background-color: grey;*/
  border : 1px solid black;
}

p.antispam{
  /*color:rgb(247, 118, 105);*/
}

.antispam_saisie{
  /*background-color: grey;*/
  border : 1px solid black;
}

.envoi{
  background-color: white;
  padding-top: 0.5%;
  padding-bottom: 0.5%;
  padding-left: 0.25;
  padding-right: 0.25;
  margin: 2%;
  border : 1px solid black;
}

/* REVIEW: DEBUT FIELDSET */
fieldset.nom_mail{
  border:1px solid black;
  margin-top: 2%;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
}

legend.coordonnees{
  /*color:red;*/
}

fieldset.objet_mail{
  border:1px solid black;
  margin-top: 2%;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
}

legend.message{
  /*color:red;*/
}

fieldset.antispam{
  border:1px solid black;
  margin-top: 2%;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
}

legend.antispam{
  /*color:red;*/
}




/* REVIEW: FIN FIELDSET */

/* REVIEW: FIN FORMULAIRE DE CONTACT */

    Je vous remercie par avance de votre aide

    Je pense que cela doit être une propriété toute bête mais après recherche, je n'ai toujours pas trouvé.

    Bonne journée


    -
    Edité par Maxime L 12 novembre 2018 à 11:18:55

    • Partager sur Facebook
    • Partager sur Twitter
    Frogweb
    • HTML / CSS
      12 novembre 2018 à 11:55:14

      Salut,

      je pense que ce n'est pas à cause du background, mais à cause du fixed sur page_1.

      • Partager sur Facebook
      • Partager sur Twitter
      Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !
      Maxime L
      • HTML / CSS
        12 novembre 2018 à 12:31:26

        Frogweb a écrit:

        Salut,

        je pense que ce n'est pas à cause du background, mais à cause du fixed sur page_1.


        Oui car si on enlève le position:fixed, cela fonctionne (je l'avais testé) cependant, le background prend une marge sur les côtés.

        Du coup, je souhaite avoir le même résultat sans le position:fixed mais sans es marges.

        Est-ce possible? Que dois-je changer?

        • Partager sur Facebook
        • Partager sur Twitter
        Frogweb
        • HTML / CSS
          12 novembre 2018 à 13:16:45

          Je ne vois pas de body {margin:0} dans ton code, ça pourrait être la source des marges du background.
          • Partager sur Facebook
          • Partager sur Twitter
          Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !
          Maxime L
          • HTML / CSS
            12 novembre 2018 à 19:06:10

            Frogweb a écrit:

            Je ne vois pas de body {margin:0} dans ton code, ça pourrait être la source des marges du background.


            Merci, j'ai fait quelques modifications et j'ai réussi.

            Merci beaucoup!

            Bonne soirée

            • Partager sur Facebook
            • Partager sur Twitter

            Fond fixe qui descend avec la souris

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
            • Editeur ●
            • Markdown