Discussion :

[Tetsune]

Bonjour, bonsoir,

Alors voilà dans le cadre de mes études, j'ai un projet à faire qui est de faire un site web dans le style de deezer, groovshark, ...

Nous rencontrons actuellement plusieurs problèmes dans le codage et je demande votre aide pour nous aider. Notre site est dans un style "flat design" nous avons une barre de navigation en haut qui est en position:fixed pour qu'il soit toujours visible. Mais du coup cela nous pose un problème, comme sur les site en flat, tout (presque) se trouve sur la même page. Pour naviguer sur le site il faut scroller ou cliquer sur les onglets.

Nos onglets sont fait a partir de <a href="#motclé">nom onglet</a> et donc on retrouve ensuite des <articles></article> en dessous sous cette forme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<article>
				<div class="titre">
					<a id="news"></a>
					<h2>News</h2>
				</div>
</article>

Cela permt donc de faire un scroll direct vers l'endroit voulu. Sauf que notre <h2> se retrouve sous le navigateur (comme lorsqu'on clique sur l'onglet la page monte pile poil sur là où est le <a id="..">). Donc on a mis un padding dans le .titre, mais ça rend très moche.

Je vous fait un screen de la page pour mieux visualiser..

Donc ma question est comment faire pour que se h2 apparaisse comme il faut juste en dessous du navigateur ?

(vue qu'on a besoin de html, css et peut être JS, je ne sais pas trop où mettre mon post .. )

Merci beaucoup de votre aide !

[rodolphebrd]

Bonjour et bienvenue sur developpez.com,

Il y a une discussion qui devrait correspondre à ce que vous cherchez : Points d'ancrage et bandeau fixe

[Tetsune]

Merci beaucoup, je vais tester les solutions proposé !