28172 sujets

CSS et mise en forme, CSS3

[Résolu] Header en position:fixed = cache le haut de mes autres div

Bonjour à tous,

C'est mon premier post sur ce forum alors je vous prie d'être indulgents !

Voici mon problème : je suis en train de créer un site en "one page" qui contient des ancres vers les différents div qu'il contient. J'ai placé mon header en position:fixed. De ce fait, la première div qui le succède est en partie cachée par celui-ci.

C'est normal évidemment, car le header ne bouge pas. Je pourrais résoudre cela en ajoutant un bloc de la même hauteur juste au dessus de mes div, mais ce qui me gène vraiment, c'est que, lors d'un clic vers une ancre, la div est emmenée tout en haut, ce qui fait qu'elle est partiellement cachée.

J'ai réalisé un page pour vous montrer mon problème

Dans cette page, j'ai inséré un bloc de la même taille que mon header, ce qui fait que la première div est bien affichée. Mais dès que l'on clique sur les liens "slide1" ou "slide2", ça donne tout de suite beaucoup moins bien.

Pour ceux qui préfèrent voir le code directement c'est celui-ci : 

<body>
<div id="header">
  <div id="menu">
    <ul>
      <li> <a href="#slide1">slide1</a> </li>
      <li> <a href="#slide2">slide2</a> </li>
    </ul>
  </div><!--fin menu--> 
</div><!--fin header-->
<div id="content">
	<div id="bloc"></div>
	<div id="slide1">
    </div>
    <div id="slide2">
    </div>
</div>
</body>



body{
	margin:0;
}
#header {
	background-color:#F9C;
	width: 100%;
	height: 180px;
	margin: auto;
	padding: 10px;
	overflow: hidden;
	position: fixed;
	border-bottom: 1px;
	border-bottom-color: #3d4d4c;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}
#bloc{
       height:201px;
}
#slide1{
	background-image:url(img/slide1.jpg);
	width:100%;
	height:1182px;
}
#slide2{
	background-image:url(img/slide2.jpg);
	width:100%;
	height:1182px;
}



J'espère avoir été assez claire, et que vous pourrez m'aider à trouver une solution !

Merci d'avance !
Modifié par poki (11 Apr 2014 - 14:43)
Bonjour et bienvenue sur le forum, poki Smiley smile

Je te propose une solution basée sur javascript / jQuery (penser à intégrer la bibliothèque).
Déjà, on va récupérer l'événement de clic sur les liens du menu et utiliser la fonction scrollTop pour faire défiler l'écran jusqu'à l'élément cliqué (et puis comme ça on a même une animation ^^). Il suffit ensuite de retrancher la hauteur de ton bandeau et le tour est joué !

Je te laisse voir cet exemple que je t'ai fait sur jsFiddle : http://jsfiddle.net/audrasjb/cLWUF/

Smiley murf
Modifié par audrasjb (11 Apr 2014 - 13:24)
audrasjb a écrit :
Bonjour et bienvenue sur le forum, poki Smiley smile

Je te propose une solution basée sur javascript / jQuery (penser à intégrer la bibliothèque).
Déjà, on va récupérer l'événement de clic sur les liens du menu et utiliser la fonction scrollTop pour faire défiler l'écran jusqu'à l'élément cliqué (et puis comme ça on a même une animation ^^). Il suffit ensuite de retrancher la hauteur de ton bandeau et le tour est joué !

Je te laisse voir cet exemple que je t'ai fait sur jsFiddle : http://jsfiddle.net/audrasjb/cLWUF/

Smiley murf


Eh ben écoute un grand grand merci ! En plus je ne connaissais pas jsFiddle, c'est super pratique. J'avais déjà une animation dans le défilement mais je ne voulais pas la mettre dans ma page d'exemple. J'ai voulu adapter ta solution mais finalement ta solution est bien meilleure alors je l'ai adoptée telle quelle. Merci beaucoup beaucoup !

Petite question du coup, est-ce que c'était une idée pas si mauvaise que ça cette histoire de "bloc" permettant d'afficher le haut de ma div dès le début du site ou bien est-ce qu'il existe une solution un peu moins bricolée ?

Merci ! Smiley ravi Smiley ravi
De rien Smiley ravi
poki a écrit :
Petite question du coup, est-ce que c'était une idée pas si mauvaise que ça cette histoire de bloc permettant d'afficher le haut de ma div dès le début du site ou bien est-ce qu'il existe une solution un peu moins bricolée ?

Oui, par exemple tout simplement placer une marge externe supérieure sur body, ça t'éviterais d'avoir un élément HTML vide :
body { margin-top: 201px; }

Modifié par audrasjb (11 Apr 2014 - 14:24)
poki a écrit :
En plus je ne connaissais pas jsFiddle, c'est super pratique

Oui, et pour faciliter les choses les prochaines fois où tu auras une question à poser sur le forum, le top c'est de préparer toi même ton petit fiddle. Ça permet aux forumeurs de faire leurs tests rapidement, de te répondre avec efficacité en te renvoyant un fiddle, et puis ça peut aussi permettre d'isoler l'erreur/le bug. Que des avantages !

Il existe aussi Pastebin, dans le même genre Smiley smile
audrasjb a écrit :
De rien Smiley ravi

Oui, par exemple tout simplement placer une marge externe supérieure sur body, ça t'éviterais d'avoir un élément HTML vide :
body { margin-top: 201px; }


Mais j'ai déjà tenté de mettre un margin-top sur le content et ensuite sur le body mais ça me décale tout, le header avec Smiley decu
audrasjb a écrit :

Oui, et pour faciliter les choses les prochaines fois où tu auras une question à poser sur le forum, le top c'est de préparer toi même ton petit fiddle. Ça permet aux forumeurs de faire leurs tests rapidement, de te répondre avec efficacité en te renvoyant un fiddle, et puis ça peut aussi permettre d'isoler l'erreur/le bug. Que des avantages !

Il existe aussi Pastebin, dans le même genre Smiley smile



Oui la prochaine fois je ferai ça ! Smiley biggrin
poki a écrit :
Mais j'ai déjà tenté de mettre un margin-top sur le content et ensuite sur le body mais ça me décale tout, le header avec Smiley decu

Si ce header est en position: fixed avec un top: 0; , il est donc hors flux et ne devrait pas être décalé… Smiley confus
audrasjb a écrit :

Si ce header est en position: fixed avec un top: 0; , il est donc hors flux et ne devrait pas être décalé… Smiley confus



Bon bah j'avais "juste" oublié le 
top:0;
... Et ça fait toute la différence !

Un grand merci ! Smiley biggrin
Sujet clos
Aller à