5568 sujets

Sémantique web et HTML

Page de mon site en décalage

Bonsoir 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 ?

<?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>
alexou10 a écrit :
je ne c'est pas pour quoi ?

Non ? Sérieux ? C'est possible de faire autant de fautes d'orthographe en si peu de mots sans y faire exprès ?
Olivier C a écrit :
Non ? Sérieux ? C'est possible de faire autant de fautes d'orthographe en si peu de mots sans y faire exprès ?

Faut croire que oui...
Les records étant faits pour être battus, il semble bien que l'Éducation Nationale version XXIème siècle soit une vraie usine à champions en ce domaine.
JENCAL a écrit :
Ton cite ai an lygne pour pou voire téstait ?

Bel effort de mimétisme...
Extrait de la page d'accueil du site en question :

...formation très riche qui a confirmée mes aptitudes et considérablement accrue mes compétences en développement web (HTML, CSS, JS, PHP & SQL).

On l'a assez répété sur ce forum, et de récentes études l'ont encore confirmé, un recruteur / client sérieux n'ira pas plus loin sur le site, considérant qu'il y a un manque évident de rigueur.
Un particulier n'en tiendra peut-être pas compte, par contre en entreprise ce genre de faute est rédhibitoire et discrédite d'emblée.
Je comprends pas le "bouge sur la droite"... c'est quoi les symptôme? car je n'arrive pas à reproduire.
C'est à cause de 

    margin-left: 140%; 
    margin-right: -127%;


sur ta flèche..


"je peux avoir de l'aide où pas ?"

Un "stp" ne tue pas non plus...
Il y a d'autres problèmes plus urgents sur le site, attention à ce type de règles :
.header {
    margin-top: -7.3%;
}

Celle-ci n'est optimisée que pour une définition d'écran (en l’occurrence ici environ 1400px) et fera foirer la mise en page sur toutes les autres définitions (décalage du menu vers le bas, ou pire : disparition du menu sur grandes définitions car décalage vers le haut).
Modifié par Olivier C (23 Dec 2017 - 05:00)
Bonsoir j'ai corrigé les erreurs et j'ai toujours le problème du décalage je ne comprends vraiment pas là Smiley ohwell
Bonjour l'Ami, on va pas te laisser e, rade pour Noël.

Alors j'ai passé une heure a décortiquer ton usine à gaz, tout cela pour écrire si peux de chose par page, imagines que tu as 7 DIV imbriqués pour un seul contenu, comment veux tu que cela marche ?? en plus 7 ou 8 feuilles de style.

Je veux bien te remonter d'ici mardi ta page type tu verras tout tes problémes s'évaporer !

Mais ilfaut que tu me dises:
Pourquoi tout ces javascript ???? tu es certain d'en avoir besoins ?
Pourquoi tout ces CSS même question.

J'ais une cinquantaine de site web dont certaints assez complexe en Ajax, jamais je n'ais eu autre chose qu'une page CSS et un petit Javascript pour Ajax ou quelques animations.

Bref je veux bien te faire ce travail mais j'aurai tendance à simplifier !

dis moi si tu es preneur ?
Christele a écrit :
Bonjour l'Ami, on va pas te laisser e, rade pour Noël.

Alors j'ai passé une heure a décortiquer ton usine à gaz, tout cela pour écrire si peux de chose par page, imagines que tu as 7 DIV imbriqués pour un seul contenu, comment veux tu que cela marche ?? en plus 7 ou 8 feuilles de style.

Je veux bien te remonter d'ici mardi ta page type tu verras tout tes problémes s'évaporer !

Mais ilfaut que tu me dises:
Pourquoi tout ces javascript ???? tu es certain d'en avoir besoins ?
Pourquoi tout ces CSS même question.

J'ais une cinquantaine de site web dont certaints assez complexe en Ajax, jamais je n'ais eu autre chose qu'une page CSS et un petit Javascript pour Ajax ou quelques animations.

Bref je veux bien te faire ce travail mais j'aurai tendance à simplifier !

dis moi si tu es preneur ?


Oui je Suis Preneur et je t'expliquerais comment j'ai appris ce système merci d'avance et Joyeux Noël a toi
Heu oui mais si tu veux que j'avances il faut que tu répondes sur le rôle de chaque CSS et de chaque JS !! car ce sont eux qui perturbent tout, surtout avec le HTML5 qui est superbe et que tu as adopté !
D'autre part étant chez OVH, il me faut savoir si tu as bien mis en place le .htaccess,
(nouveau PHP)
as-tu un robots.txt et un sitemap.xml ? (dans quel répertoire)
Google n'a référencé que 2 pages en fait une seul ?? et si tu n'a pas initialisé ce site dans les outils webmaster tool, tu ne peux pas indiquer a google que ton serveur réponds
https://alexandredester.fr/ et donc exclure https://www.alexandredester.fr/

Voila pour la structure serveur je n'ai besoins de rien d'autre !

Mets moi tout de même par MP si tu veux un copié/collé de ton .htaccess
A++
Apparemment, la structure du document HTML semble quelque peu olé, olé...
<div>
  <h1 class="home page"><a href="https://alexandredester.fr/">Alexandre DESTER</a>
</div>

La balise H1 requiert une balise de fermeture (cf. MDN.
Une balise HEADER est fermée deux fois...
Bref, le mieux serait de commencer par introduire un peu de rigueur dans la construction du document.
Il est peu probable que tu l'ais soumis à la validation du W3C en l'état car de telles erreurs ne seraient pas passées.
Sujet clos
Aller à