page de mon site en décalage par alexoudu10 - page 1

noopy360 a écrit:

salut, sans code impossible de t'aider, le mieux c'est une url de ton site en ligne sinon partage le code avec https://codepen.io/pen, sinon utilise </> pour le partager...

voici mon site https://alexandredester.fr/

<?php
  require_once('test/decide-lang.php');
?>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" type="image/x-icon" href="favicon48.ico" />
    <link rel="shortcut icon" type="image/x-icon" href="favicon48.ico" />
  <head>
      <meta charset="utf-8">
                        <!-- Perso CSS -->
      <link rel="stylesheet" href="assets/css/reset.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
      <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans|Courgette" />
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      <link rel="stylesheet" type="text/css" href="assets/css/style.css"/>
      <link rel="stylesheet" href="assets/css/styles.css">
      <link rel="stylesheet" type="text/css" href="assets/css/layout.css">

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
      <script type="text/javascript" src="assets/js/jquery.mixitup.min.js"></script>
      <script src="assets/js/jquery.scrolly.min.js"></script>
  		<script src="assets/js/jquery.scrollzer.min.js"></script>



      <!-- Global site tag (gtag.js) - Google Analytics -->
      <script async src="https://www.googletagmanager.com/gtag/js?id=UA-91057246-1"></script>
      <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-91057246-1');
      </script>

  <!-- Global site tag (gtag.js) - Google Analytics -->
    <title>Alexandre Dester / Développeur Web - Portfolio</title>
</head>
  <body>
    <!--HEADER-->

     <?php include("inc/header.php"); ?>

    <!--MAIN-->
    <main>

</main>
<script>
$('.js-nav').click(function(){
  	$(this).parent().find('.menu').toggleClass('active');
});
 </script>

        <section id="qui-je-suis">
    <main>

      <h1 class="jesuis"><?php echo NAVIGATION_je_suis ?></h1>
      <p class="presentation"><?php echo NAVIGATION_Qui_je_suis ?></p>


      <section class="presentation">

        <img class="bouille" src="assets/image/office-583839_1921.jpg" alt="alexandre dester" />


      <p class="al">Je m’appelle Alexandre DESTER j'ai 29 ans et je suis passionné par l'informatique
      et les <strong>nouvelles technologies</strong>, je me suis naturellement dirigé vers cette voie, en suivant  une formation de 3 mois de
      "développeur / intégrateur d’application web "
      à la  <a title="3W Academy" href="https://3wa.fr/"><strong class="skillsembodized">3W ACADEMY</strong></a>, formation très riche qui a confirmée mes aptitudes et considérablement accrue
      mes compétences en <strong>développement web</strong> (HTML, CSS, JS, PHP & SQL). 
      <br>
      J'ai parfaitement conscience qu'il s'agit d'un secteur en constante évolution
      et que cela implique d'assimiler sans cesse de <strong>nouvelles techniques</strong>.
      Cela tombe bien, j'aime ça! Je continue le développement de mes compétences grâce au site <a title="openclassrooms" href="https://openclassrooms.com/"><strong class="skil">open-classrooms</a></p>
      </section>
      <div class="btnaligne">
      <a href="assets/pdf/CV DESTER Alexandre..pdf" target="_blank" class="btn btn-secondary btn-parcours btnaligne" title="CV de Alexandre Dester"><?php echo NAVIGATION_CONSULTER_MON_CV ?></a>

      <a href="assets/pdf/CV DESTER Alexandre..pdf" download="CV DESTER Alexandre" class="btn btn-secondary btn-download-cv btnaligne" title="CV de Alexandre Dester"><?php echo NAVIGATION_TELECHARGER_MON_CV ?></a>
    </div>
    </main>
    <main>
      <script type="text/javascript">
        $(function () {

          var filterList = {

            init: function () {

              // MixItUp plugin
              // http://mixitup.io
              $('#portfoliolist').mixItUp({
                selectors: {
                  target: '.portfolio',
                  filter: '.filter'
                },
                load: {
                  filter: '.developpement, .integration'
                }
              });

            }

          };

          // Run the show!
          filterList.init();


        });
        </script>
        <section id="travaux-realiseés">
      <h2 class="portfolio-h2">Aperçu des travaux réalisés</h2>

    <div class="container">

    <ul id="filters" class="clearfix ul-filter">
      <li><span class="filter active alexandre alexandre-5 filter-1" data-filter=".developpement, .integration">Tout</span></li>
      <li><span class="filter alexandre alexandre-5 filter-2" data-filter=".integration">Intégration</span></li>
      <li><span class="filter alexandre alexandre-5 filter-3" data-filter=".developpement">Développement</span></li>
    </ul>

    <div id="portfoliolist">


            <div class="portfolio developpement" data-cat="developpement">
              <div class="portfolio-wrapper">
                <img src="/assets/image/realisation/alexandredester-fr.png" height="250px" alt="" />
                <div class="label">
                  <div class="label-text">
                    <a class="text-title">Portfolio</a>
                  </div>
                  <div class="label-bg"></div>
                </div>
              </div>
            </div>

        <div class="portfolio developpement" data-cat="developpement">
        <div class="portfolio-wrapper">
          <img src="/assets/image/realisation/pokedex.png" height="250px" alt="" />
          <div class="label">
            <div class="label-text">
              <a class="text-title">Pokédex</a>
            </div>
            <div class="label-bg"></div>
          </div>
        </div>
      </div>

      <div class="portfolio integration" data-cat="integration">
        <div class="portfolio-wrapper">
          <img src="/assets/image/realisation/projet-1.png" height="250px" alt="" />
          <div class="label">
            <div class="label-text">
              <a class="text-title">Green Office</a>
              </div>
            <div class="label-bg"></div>
          </div>
        </div>
      </div>

      <div class="portfolio integration" data-cat="integration">
        <div class="portfolio-wrapper">
          <img src="/assets/image/realisation/Projet-2.png" height="250px" alt="" />
          <div class="label">
            <div class="label-text">
              <a class="text-title">Tish & Chips</a>
            </div>
            <div class="label-bg"></div>
          </div>
        </div>
      </div>


      <div class="portfolio integration" data-cat="integration">
        <div class="portfolio-wrapper">
          <img src="/assets/image/realisation/Projet-3.png" height="250px" alt="" />
          <div class="label">
            <div class="label-text">
              <a class="text-title">Ila Yoga</a>
            </div>
            <div class="label-bg"></div>
          </div>
        </div>
      </div>

      <div class="portfolio integration" data-cat="integration">
        <div class="portfolio-wrapper">
          <img src="/assets/image/realisation/Projet-6.png" height="250px" alt="" />
          <div class="label">
            <div class="label-text">
              <a class="text-title">Red Wolf</a>
            </div>
            <div class="label-bg"></div>
          </div>
        </div>
      </div>

      <div class="portfolio integration" data-cat="integration">
        <div class="portfolio-wrapper">
          <img src="/assets/image/realisation/Projet-8.png" height="250px" alt="" />
          <div class="label">
            <div class="label-text">
              <a class="text-title">John Doe</a>
            </div>
            <div class="label-bg"></div>
          </div>
        </div>
      </div>

      <div class="portfolio integration" data-cat="integration">
        <div class="portfolio-wrapper">
          <img src="/assets/image/realisation/Projet-9.png" height="250px" alt="" />
          <div class="label">
            <div class="label-text">
              <a class="text-title">House'Home</a>
            </div>
            <div class="label-bg"></div>
          </div>
        </div>
      </div>

      <div class="portfolio integration" data-cat="integration">
        <div class="portfolio-wrapper">
          <img src="/assets/image/realisation/Projet-10.png" height="250px" alt="" />
          <div class="label">
            <div class="label-text">
              <a class="text-title">Cup of Tea</a>
            </div>
            <div class="label-bg"></div>
          </div>
        </div>
      </div>

      <div class="portfolio developpement" data-cat="developpement">
        <div class="portfolio-wrapper">
          <img src="/assets/image/realisation/projet-11.png" height="250px" alt="" />
          <div class="label">
            <div class="label-text">
              <a class="text-title">Ardoise Magique</a>
            </div>
            <div class="label-bg"></div>
          </div>
        </div>
      </div>

      <div class="portfolio developpement" data-cat="developpement">
        <div class="portfolio-wrapper">
          <img src="/assets/image/realisation/projet-12.png" height="250px" alt="" />
          <div class="label">
            <div class="label-text">
              <a class="text-title">Slider</a>
            </div>
            <div class="label-bg"></div>
          </div>
        </div>
      </div>

      <div class="portfolio developpement" data-cat="developpement">
        <div class="portfolio-wrapper">
          <img src="/assets/image/realisation/projet-13.png" height="250px" alt="" />
          <div class="label">
            <div class="label-text">
              <a class="text-title">Carnet d'Adresses</a>
            </div>
            <div class="label-bg"></div>
          </div>
        </div>
      </div>

      <div class="portfolio developpement" data-cat="developpement">
        <div class="portfolio-wrapper">
          <img src="/assets/image/realisation/Projet-14.png" height="250px" alt="" />
          <div class="label">
            <div class="label-text">
              <a class="text-title">Application Bicloo</a>
            </div>
            <div class="label-bg"></div>
          </div>
        </div>
      </div>

      <div class="portfolio developpement" data-cat="developpement">
        <div class="portfolio-wrapper">
          <img src="/assets/image/realisation/Projet-15.png" height="250px" alt="" />
          <div class="label">
            <div class="label-text">
              <a class="text-title">Flickr (API)</a>
            </div>
            <div class="label-bg"></div>
          </div>
        </div>
      </div>


    </div>

    </div>
  </section>

                      <!-- contact -->

    </main>
    <section id="contact">
    <main>

    <p class="al"><?php echo NAVIGATION_CONTACT?></p>
    <p class="emploi"><?php echo NAVIGATION_EMPLOI?></p>

     <div class="container-map">
    	<div id="map_container"></div>
	  	<div id="map"></div>
	</div>


<?php
if(isset($_POST['submit'])):
    if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])):
		//your site secret key
        $secret = '6Lf4IRQUAAAAAJZvZyo1Kv94_77VOF5kNzquQqfL';
		//get verify response data
        $verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$_POST['g-recaptcha-response']);
        $responseData = json_decode($verifyResponse);

		// CONDITIONS NOM
		if ( (isset($_POST["name"])) && (strlen(trim($_POST["name"])) > 0) ) {
		$name = stripslashes(strip_tags($_POST["name"]));
	} else {
		echo "Merci d'écrire un nom <br />";
		$name = "";
	}

		// CONDITIONS EMAIL
		$email = !empty($_POST['email'])?$_POST['email']:'';

		// CONDITIONS SUJET
		$sujet = !empty($_POST['sujet'])?$_POST['sujet']:'';

		// CONDITIONS MESSAGE
		$message = !empty($_POST['message'])?$_POST['message']:'';
        if($responseData->success):
			//contact form submission code
			$to = 'alexandre.dester01@gmail.com';
			$subject = "[Formulaire] " . $sujet;
			$htmlContent = "
				<h1>Récapitulatif des données saisie par ".$name."</h1>
				<p><b>Nom: </b>".$name."</p>
				<p><b>Email: </b>".$email."</p>
				<p><b>Obet: </b>".$sujet."</p>
				<p><b>Message: </b>".$message."</p>
			";
			// Always set content-type when sending HTML email
			$headers = "MIME-Version: 1.0" . "\r\n";
			$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
			// More headers
			$headers .= 'From:'.$name.' <'.$email.'>' . "\r\n";
			//send email
			@mail($to,$subject,$htmlContent,$headers);

            $succMsg = '<div class="alert alert-success alert-dismissible" role="alert">
  						<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  					<strong>Succès!</strong> Votre demande de contact a bien été envoyée avec succès !</div>';
			$name = '';
			$email = '';
			$sujet = '';
			$message = '';
        else:
            $errMsg = '<div class="alert alert-danger alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Erreur!</strong> Échec de la vérification du robot. Veuillez réessayer !</div>';
        endif;
    else:
        $errMsg = '<div class="alert alert-danger alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Erreur!</strong> Veuillez cliquer sur la case reCAPTCHA !</div>';
    endif;
else:
    $errMsg = '';
    $succMsg = '';
	$name = '';
	$email = '';
	$sujet = '';
	$message = '';
endif;
?>

      <section id="contact" class="pfblock">
		<div class="container">
			<div class="row">
				<div class="col-sm-6 col-sm-offset-3">
					<div class="pfblock-header">
						<h2 class="pfblock-title"><?php echo NAVIGATION_mon_contact ?></h2>
					<?php if(!empty($errMsg)): ?><div class="errMsg"><?php echo $errMsg; ?></div><?php endif; ?>
        			<?php if(!empty($succMsg)): ?><div class="succMsg"><?php echo $succMsg; ?></div><?php endif; ?>
						<div class="pfblock-line"></div>
						<div class="pfblock-subtitle">
						</div>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-sm-6 col-sm-offset-3">
					<form method="POST" id="contact-form" role="form">
						<div class="ajax-hidden">
							<div class="form-group wow fadeInUp">
								<label class="sr-only" for="c_name"><?php echo NAVIGATION_votre_non ?></label>
								<input type="text" class="form-control" value="<?php echo !empty($name)?$name:''; ?>" name="name" placeholder="Votre nom* :" required>
							</div>

              <div class="form-group wow fadeInUp">
                <label class="sr-only" for="c_objet"><?php echo NAVIGATION_objet ?></label>
                <input type="text"  class="form-control" value="<?php echo !empty($sujet)?$sujet:''; ?>" name="sujet" placeholder="Objet* :" required>
              </div>


              <div class="form-group wow fadeInUp" data-wow-delay=".1s">
								<label class="sr-only" for="c_email"><?php echo NAVIGATION_email ?></label>
								<input type="email"  class="form-control" value="<?php echo !empty($email)?$email:''; ?>" name="email" placeholder="E-mail* :" required>
							</div>

              <div class="form-group wow fadeInUp" data-wow-delay=".2s">
								<textarea class="form-control" name="message" rows="7" placeholder="Message* :" required><?php echo !empty($message)?$message:''; ?></textarea>
							</div>
          <div class="g-recaptcha" data-sitekey="6Lf4IRQUAAAAAHQlYQNDSNnixWJPXJs2UOLCDpad"></div>
          <br><br>
							<button type="submit" name="submit" class="btn btn-lg btn-block wow fadeInUp" data-wow-delay=".3s"><?php echo NAVIGATION_mon_envoyer ?></button>
						</div>
          </form>
<br>
</div>

        <div class="adresse">
        <p> <i class="fa fa-map-marker fa-lg"></i> Troyes, France</p>
        <p> <i class="fa fa-mobile fa-lg"></i> &nbsp;06.51.69.89.87</p>
        <p> <i class="fa fa-link "></i> <a href="https://alexandredester.fr/">alexandredester.fr</a></p>
      </div>


				<br><br>

      </section>

</main>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCMFS9jzB7CMgitO9lzXIbtsv0tDwBBrCs"></script>
<script src="assets/js/map.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.scrollzer.min.js"></script>

<ul class="nav pull-right scroll-top">
  <li><a href="#" title="Scroll to top"><i class="glyphicon glyphicon-chevron-up"></i></a></li>
</ul>

<script>$('.scroll-top').click(function(){
  $('body,html').animate({scrollTop:0},1000);
})
</script>

<script>$('#nav .navbar-nav li>a').click(function(){
  var link = $(this).attr('href');
  var posi = $(link).offset().top;
  $('body,html').animate({scrollTop:posi},700);
});</script>

<script>
$('body').scrollspy({ target: '#nav' })</script>



   <?php include("inc/footer.php"); ?>



  </body>
</html>

alexoudu10

14 décembre 2017 à 14:53:42

Bonjour j'ai mon site en décalage mon site bouge sur la droite en mode mobile ou tablette je ne c'est pas pour quoi ?

Lamecarlate

14 décembre 2017 à 14:57:09

Bonjour,

édite ton message pour réuploader une image à la bonne taille

Et on va avoir besoin de plus d'info que ça. L'adresse d'une page en ligne, ça serait top.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

noopy360

14 décembre 2017 à 14:59:16

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

14 décembre 2017 à 19:00:44

14 décembre 2017 à 19:09:24

Le problème est multiple mais toujours pour la même raison tu as du contenus qui dépasse, je vais essayer de te le lister :

h1.home.page {margin-left: 65%;}
les li de ta liste <ul id="filters" class="clearfix ul-filter"> sont trop largeur
le Scroll to top est en dehors de ton site

c'est déjà un bon début

15 décembre 2017 à 1:05:06

le Scroll to top est en dehors de ton site

Oui je le sais bien le problème si je le remets a sa place j'ai toujours ce décalage de page sur mobile ou tablette (la page de mon site bouge reste pas fix comme en normal sur pc) :/

15 décembre 2017 à 7:20:47

En fait, première chose à faire : corriger les nombreuses erreurs de validation HTML

tu ouvres plusieurs fois <head>, et <body>
tu as plusieurs <main> : ce dernier doit être unique sur la page
tu fermes des balises alors qu'elles ne sont pas ouvertes (genre ligne 126 et 127 sur la source de ta page dans le navigateur)
et je crois qu'il y a un moment où ça s'est emmêlé, car la section "qui-je-suis" contient tout le reste du site
<strong> ne peut pas contenir de <div>
<link> ne peut se trouver que dans <head>

Autres points :

le scroll-to-top : c'est un élément tout seul, inutile de le mettre dans une liste
regroupe tous tes JS à la fin de la page, juste avant </body>
user-scalable=no et maximum-scale=1, c'est non : avec ça tu diminues violemment l'accessibilité, lâche du lest, laisse les gens zoomer
attention aux liens en blanc sur fond beige, ça n'est pas lisible
évite les margin en pourcentage (surtout top et bottom, qui dépendront de la quantité de contenu sur ta page), et les paddings supérieur à 100%

23 décembre 2017 à 19:16:21

Bonsoir j'ai corrigé les erreurs et j'ai toujours le problème du décalage je ne comprends vraiment pas là :/

23 décembre 2017 à 21:22:54

Poste ton code corrigé - le mieux serait quand même une page en ligne.

Et édite ton premier message pour enlever/corriger l'image (elle est gigantesque).

page de mon site en décalage

page de mon site en décalage

Supprimer

Modérer

Signaler le message aux modérateurs