Header fixe sur page web

Résolu
greg6614 Messages postés 629 Statut Membre -  
greg6614 Messages postés 629 Statut Membre -
Bonjour,
dans le cadre d'un projet, je réalise une page web qui à but pour but d'être une page web de contrôle et de surveillance via caméra IP d'un portail automatique coulissant. Dans les codes que je fournis, il faut savoir que c'est uniquement un test pour le moment donc certaines image placées seront supprimées et d'autre ajouter etc...
Ma page fonctionne parfaitement pour moi, mais je souhaite mettre un header titre qui resterait fixe avec le scroll de la page (à savoir toujours en haut de page).
J'ai déjà recherché et testé pleins de solutions différentes mais aucune ne marchent chez moi. Je vous joins les codes si jamais vous trouvez une solution.

PS: J'ai utilisé un pugin jquery de ce site --> http://www.thepetedesign.com/demos/onepage_scroll_demo.html
On peut voir qu'il a également un header fixe qui suit le scroll, j'ai regardé les sources/css mais impossible de le faire marcher chez moi.

Test.html 
<!DOCTYPE html>

<html>

    <head>
        <meta charset="utf-8"></meta>
        <script src="jquery-1.11.0.min.js" type="text/javascript"></script>
        <script src="jquery.onepage-scroll.js" type="text/javascript"></script>
	<link type="text/css" rel="stylesheet" href="font.css"></link>
        <link type="text/css" rel="stylesheet" href="onepage-scroll.css"></link>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen"></link>
	<script>
		
	  $(document).ready(function(){
      $(".wrapper").onepage_scroll({
        sectionContainer: "section",
	animationTime: 1000,
	pagination: true,
        loop: true,
        responsiveFallback: 600
      });
		});
		
	</script>
	<title>Minecraft HD</title>
</head>

<body class="js">
	

	<div class="wrapper">

	<div class="main onepage-wrapper" style="position: relative; transform: translate3d(0px, 0%, 0px); transition: transform 1000ms ease 0s;">
    <section class="page1 ops-section" data-index="1">
	<div class="page_container"> 
		<img class="logopage1" src="mojang.png"  width="10%" height="17%">
			<br>
			<h2 class="text1"> Minecraft le pixel art de Mojang !</h2>
	</div>
    </section>
    <section class="page2 ops-section2" data-index="2">
	<div class="page_container">
		<img class="logopage2" src="mojang.png" width="10%" height="17%">
			<br>
			<h2 class="text2"> Construisez un monde qui vous ressemle !</h2>
	</div>
    </section>
    <section class="page3 ops-section3" data-index="3">
	<div class="page_container">
		<img class="logopage3" src="mojang.png" width="10%" height="17%">
			<br>
			<h2 class="text3"> Entrez dans l'aventure !</h2>
		</center>
	</div>
    </section>
</div>
<a class="back">Centre de control et de surveillance !</a>
</div>
</body>
</html>


style.css 
a.back {
     	position: fixed;
      	top: 0;
      	left: 0;
      	text-align: center;
      	display: block-inline;
      	padding: 7px;
      	width: 100%;
      	box-sizing: border-box;
      	-moz-box-sizing: border-box;
      	-webkit-box-sizing: border-box;
      	background: rgba(255, 255, 255, 0.25);
	font-family: "Open Sans";
      	font-weight: bold;
      	font-size: 19px;
      	color: #000;
      	-webkit-transition: all 500ms ease-in-out;
      	-moz-transition: all 500ms ease-in-out;
      	-o-transition: all 500ms ease-in-out;
      	transition: all 500ms ease-in-out;
    }
section.page1{ 
  margin:0;
  padding:0;
  background: url(1.jpg) no-repeat center 0%; 
  -webkit-background-size: 100% 100%; /* pour Chrome et Safari */
  -moz-background-size: 100% 100%; /* pour Firefox */
  -o-background-size: 100% 100%; /* pour Opera */
  background-size: 100% 100%; /* version standardisée */
}
section.page2{ 
  margin:0;
  padding:0;
  background: url(2.png) no-repeat center 0%; 
  -webkit-background-size: 100% 100%; /* pour Chrome et Safari */
  -moz-background-size: 100% 100%; /* pour Firefox */
  -o-background-size: 100% 100%; /* pour Opera */
  background-size: 100% 100%; /* version standardisée */
}
section.page3{ 
  margin:0;
  padding:0;
  background: url(3.jpg) no-repeat center 0%; 
  -webkit-background-size: 100% 100%; /* pour Chrome et Safari */
  -moz-background-size: 100% 100%; /* pour Firefox */
  -o-background-size: 100% 100%; /* pour Opera */
  background-size: 100% 100%; /* version standardisée */
}
img.logopage1{
	position: absolute;
	top: 2px;
	left: 89.9%;
}
img.logopage2{
	position: absolute;
	bottom: 2px;
	right: 0.2%;
}
img.logopage3{
	position: absolute;
	bottom: 2px;
	left: 0.2%;
}
h2.text1{
	margin-right: 27%;
	margin-left: 27%;
	margin-top: 47%;
}
h2.text2{
	margin-right: 21%;
	margin-left: 21%;
	margin-top: 40%;
}
h2.text3{
	margin-right: 34%;
	margin-left: 34%;
	margin-top: 47%;
}





A voir également:

1 réponse

Réponse 1 / 1
greg6614 Messages postés 629 Statut Membre 107
 
Je me permet de double post, j'ai en fait résolu mon problème sans faire exprès. En effet, il fallait sortir <a class="back">Centre de control et de surveillance !</a> de la <div>
0

Discussions similaires

debloquer le code 400 bad request qui s'affiche à google
fath -
DelNC -

1 réponse