28172 sujets

CSS et mise en forme, CSS3

Problème de header qui se décale.

Bonjour les gens !

J'ai un problème sur lequel je bute depuis un certains temps. Mon header se décale vers la droite lorsque j'insère plus loin dans la page, une section avec une partie timeline. Par contre, une fois que l'animation de la timeline s'est effectuée, le header revient automatiquement au centre.
Le problème ne se rencontre que sous chrome. Sous firefox, le header reste en toutes circonstances, parfaitement centré.
Si quelqu'un peut m'apporter un peu d'aide, cela serait fort appréciable^^.
Merci !

Je vous partage mon code:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/alsa.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  </head>

  <body>

  	<div class="container-fluid">
  		<!--------------------------------------- HEADER ------------------------------->
  		<header>
  			<div class="row">
  				<h1 class="col-sm-12 col-lg-12" id="julianb">- HEADER -</h1>
			</div>

			<div class="row">
  				<h2  class=" col-sm-12 col-lg-12 anim-typewriter line-1" id="webdev">DÉVELOPPEUR & INTÉGRATEUR WEB</h2>
  			</div>

  			<div class="row">
  				<h3 class="col-sm-12 col-lg-12" id="clavier">J'aime bien les ordinateurs, les pages web et les claviers, évidemment !</h3>
  			</div>
  		</header>

		<div id="blocprincipal">

		  	<!----------------------------------- SECTION 1 ------------------------------->
		  	<section id="section1">
		  		<div class="row">
		  			<h2 class="col-xs-12 col-sm-6 col-lg-12" id="propos">À PROPOS</h2>
		  		</div>
		  	</section>

			<!----------------------------------- SECTION 3 ------------------------------->
		  	<section id="section3">

		  		<div class="row">
		  			<h2 class="col-sm-12 col-lg-12" id="experienceTitle">EXPERIENCE</h2>
		  		</div>

		  		<div class="row" id="experienceTimeline">
					<div class="col-xs-12 col-sm-12 col-lg-12 timeline">
					  <ul class="timel">
					    <li>
					      <div>
					       a
					      </div>
					    </li>
					    <li>
					      <div>
					        b
					      </div>
					    </li>
					    <li>
					      <div>
					        c
					       </div>
					    </li>
					  </ul>
					</div>
		  		</div>

		  	</section>

		</div>
	</div>

  	<!------------------------------- SCRIPTS --------------------------------->
	<script src="js/jquery.js"></script>
	<script src="js/bootstrap.min.js"></script>

	<!---------------- SCRIPT TIMELINE EXPERIENCE ET FORMATION ------------->
	<script type="text/javascript">
		(function() {
		  'use strict';

		  // define variables
		  var items = document.querySelectorAll(".timeline li");

		  // check if an element is in viewport
		  //  http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
 
		  function isElementInViewport(el) {
		    var rect = el.getBoundingClientRect();
		    return (
		      rect.top >= 0 &&
		      rect.left >= 0 &&
		      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
		      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
		    );
		  }

		  function callbackFunc() {
		    for (var i = 0; i < items.length; i++) {
		      if (isElementInViewport(items[i])) {
		        items[i].classList.add("in-view");
		      }
		    }
		  }

		  // listen for events
		  window.addEventListener("load", callbackFunc);
		  window.addEventListener("resize", callbackFunc);
		  window.addEventListener("scroll", callbackFunc);
		})();
	</script>
  </body>
 </html>


/*********************************** Fonts ****************************************/
@font-face {
    font-family: 'ubuntu';
    src: url('../fonts/Ubuntu.ttf') format('truetype');
}

@font-face {
    font-family:'SourceCodePro';
    src: url('../fonts/SourceCodePro-Regular.ttf') format('truetype');
}

/************************************** Body ****************************************/
body {
	font-family: 'SourceCodePro';
	color: #4d4d4d;
	background-image:url('../images/fond.jpg');
	background-attachment: fixed;
}

/*********************************** Header ****************************************/
header {
position: fixed;
z-index: -8;
width: 62rem;
left: 50%;
margin-left: -31rem;
padding-bottom: 20rem;

}

.container-fluid {
	padding-left: 0;
	padding-right: 0;
}

.row {
	margin-left: 0;
	margin-right: 0;
}


#julianb {
	position: relative;
	top: -0.3rem;
	font-family: 'ubuntu';
	font-weight: bold;
	text-align: center;
}

#webdev {
	position: relative;
	left: 0;
	font-size: 3.9vw;
	text-align: center;
}

#clavier {
    position: relative;
	top: 3rem;
	text-align: center;
    font-style: italic;
    font-size: 2.3vw;
}

/* Bloc principal */
	#blocprincipal {
		margin-top: 17rem;
	}

/*********** Section 1 ***********/
#section1 {
	height: 60rem;
	z-index: 12;
	background-color: #17a4f5;
}

#propos {
    position: relative;
    text-align: center;
}

/********** Section 3 **********/
#section3 {
background-color: #c2c0c0;
height: 65rem;
}

#experienceTitle {
	position: relative;
	top: 3.5rem;
	text-align: center;
}

#experienceTimeline {
	position: relative;
	top: 2em;
}

/**** Animation TypeWriter ******/
.line-1{
    width: 24em;
    margin: 0 auto;
    border-right: 0.35rem solid rgba(255,255,255,.75);
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);    
}

.anim-typewriter{
  animation: typewriter 2.5s steps(44) 0.3s 1 normal both,
             blinkTextCursor 900ms steps(40) infinite normal;
}
@keyframes typewriter{
  from{width: 0;}
  to{width: 18.6em;}
}
@keyframes blinkTextCursor{
  from{border-right-color: orange;}
  to{border-right-color: transparent;}
	}

/******************************************** PARTIE TIMELINE ****************************************/
/************TIMELINE XP*****************/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/************TIMELINE EXPERIENCE*****************/
.timeline ul {
  background: #d3d1d1;
  padding: 50px 0;
}

.timeline ul li {
  list-style-type: none;
  position: relative;
  width: 6px;
  margin: 0 auto;
  padding-top: 50px;
  background: #fff;
}

/*RONDS*/
.timeline ul li::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: inherit;
}

.timeline ul li div {
  position: relative;
  bottom: 0;
  width: 400px;
  padding: 35px;
  background: #f0efef;
}

.timeline ul li div::before {
  content: '';
  position: absolute;
  bottom: 7px;
  width: 0;
  height: 0;
  border-style: solid;
}

.timeline ul li:nth-child(odd) div {
  left: 45px;
}

.timeline ul li:nth-child(odd) div::before {
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent #f0efef transparent transparent;
}

.timeline ul li:nth-child(even) div {
  left: -439px;
}

.timeline ul li:nth-child(even) div::before {
  right: -15px;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #f0efef;
}

time {
  display: block;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 8px;
}

/* EFFECTS
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline ul li::after {
  transition: background .5s ease-in-out;
}

.timeline ul li.in-view::after {
  background: #c2c0c0;
}

.timeline ul li div {
  visibility: hidden;
  opacity: 0;
  transition: all .45s ease-in-out;
}

.timeline ul li:nth-child(odd) div {
  transform: translate3d(200px, 0, 0);
}

.timeline ul li:nth-child(even) div {
  transform: translate3d(-200px, 0, 0);
}

.timeline ul li.in-view div {
  transform: none;
  visibility: visible;
  opacity: 1;
}

/* GENERAL MEDIA QUERIES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media screen and (max-width: 900px) {
  .timeline ul li div {
    width: 250px;
  }
  .timeline ul li:nth-child(even) div {
    left: -289px;
    /*250+45-6*/
  }
}

@media screen and (max-width: 600px) {
  .timeline ul li {
    margin-left: 20px;
  }
  .timeline ul li div {
    width: calc(100vw - 91px);
  }
  .timeline ul li:nth-child(even) div {
    left: 45px;
  }
  .timeline ul li:nth-child(even) div::before {
    left: -15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent #f0efef transparent transparent;
  }
}

Modifié par yoZe (13 Jul 2018 - 11:12)
Sujet clos
Aller à