Sauts de position sur page html5

bonjour
je suis en train d’écrire une page en html5. avec plusieurs contenus ancrés régis par opacité
je ne trouve pas la raison pour laquelle, qd je pointe direct vers la page directement (ex: http://..index) la page s'affiche correctement sur le contenu 1 mais des que je clique dans celle ci sur un lien interne a partir du menu (ex #contenu1 ou 2) la page se decale vers le bas rognant une partie du hearder
ma question est clair ?

Bonjour,

yeathly a écrit :
ma question est claire ?

pas pour moi en tout cas

Ton header est-il fixe ?
Sinon qu'est-ce qui est rogné ? Ta page entière ou bien ce qui suit le header ?
Que se passe-t-il si tu enlèves cette opacité ?
Modifié par Felipe (27 Oct 2013 - 18:12)

les deux css de block:

#header {
	height: 160px;
	width: 999px;
	top: 0px;
	float: none;
	position: relative;
}
#contenu{
	
	clear: both;
	width: 999px;
	position: relative;
	height:600px;
}

mais le mieux est de voir directement sur la page le probleme:
http://cambalaires.osdream.fr/index1

j'allais oublié . il semble que le problème apparaisse particulièrement sur firefox . sur safari, tout semble bon pareil pour ie
d'autre part je m'apercois que les infobulles n'apparaissent pas au chargement de l apage index.
il faut cliquer sur l'un des menu pour acceder au contenu assigné pour que les infobulles aparaissent
et entrer dans la page proprement dite

qu'est donc cette page d'index 'fantome' . y'a t'il un lien avec le problème de "saut "
Modifié par yeathly (27 Oct 2013 - 19:29)

salut,
c'est le comportement naturel d'un navigateur. Quand tu cliques sur un lien sensé te mener vers une ancre, le navigateur s'assure que la partie vers laquelle ce lien pointe sera vu par l'utilisateur qui clique sur ce lien. En gros, le comportement par défaut d'un navigateur avec les ancres est de remonter le partie vers où le lien pointe de telle sorte à ce que sa limite haute concorde avec la limite haute du navigateur. Donc dans ton cas, le navigateur essaye de remonter au maximum ce bloc mais comme la hauteur de la page n'est pas assez conséquente, il s'arrête à la limite basse, ce qui a pour conséquent de ronger ton header.
Tu peux passer par JS pour gérer toi-même l'affichage des contenus. Cela te permettra d'annuler l'action par défaut et d'éviter ce problème.
Une autre méthode existe en CSS avec ":target" (qui reste du bidouillage même si ça marche) mais les vieux navigateurs ne l'interpréteront pas.

"Tu peux passer par JS"
c'est a dire ? quel script en js permet cela ?

Un simple script qui remettrait la position du scroll vertical à 0 après le clique.

function addEvent(a,b,c,d){d = !d && false;(a.addEventListener)?a.addEventListener(b,c,d):a.attachEvent('on'+b,c);}

var a = document.querySelectorAll("nav a");

for(var x=0, l=a.length; x<l; x++){
	addEvent(a[x], "click", function(e){
		(e.preventDefault) ? e.preventDefault() : (e.returnValue = false);
		
		var cur = e.target || e.srcElement;
		
		location.href = cur.hash;
		document.documentElement.scrollTop = 0;
		document.body.scrollTop = 0;
	}, false);
}