Sujet Précédent Sujet Suivant

Header fixe sur page web

Résolu/Fermé
greg6614 Messages postés 592 Date d'inscription vendredi 7 août 2009 Statut Membre Dernière intervention 3 juin 2017 - 29 mars 2014 à 22:54
greg6614 Messages postés 592 Date d'inscription vendredi 7 août 2009 Statut Membre Dernière intervention 3 juin 2017 - 30 mars 2014 à 00:12
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 592 Date d'inscription vendredi 7 août 2009 Statut Membre Dernière intervention 3 juin 2017 107
30 mars 2014 à 00:12
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

[PIX] Commencer chaque poème sur une nouvelle page
ETHAN -
Willzac -

19 réponses
Chemin Logo du site de la Cité de l'espace
Keiios -
blux -

11 réponses
connection ok mais aucune page ne s'affiche
gandounet -
fabiennetitou -

10 réponses