18041 sujets

Questions générales et questions de débutants

Menu horizontal Alsacréations [Résolu par doc mcfly]

Bonjour à toutes et tous... Smiley smile

Je fais appel à vous pour m'aider dans un petit problème, assez embêtant... Smiley decu

Je vous explique, j'ai repris les sources du menu "Apprendre-Forum-Emploi" de ce site.
(Si cela vous pose un problème, je le retire volontiers)

Voici le code utilisé, donc: 

Javascript:
/* Background-Position Animations - @author Alexander Farkas v. 1.21 */
(function(b){if(!document.defaultView||!document.defaultView.getComputedStyle){var d=jQuery.curCSS;jQuery.curCSS=function(g,e,h){if(e==="background-position"){e="backgroundPosition"}if(e!=="backgroundPosition"||!g.currentStyle||g.currentStyle[e]){return d.apply(this,arguments)}var f=g.style;if(!h&&f&&f[e]){return f[e]}return d(g,"backgroundPositionX",h)+" "+d(g,"backgroundPositionY",h)}}var c=b.fn.animate;b.fn.animate=function(e){if("background-position" in e){e.backgroundPosition=e["background-position"];delete e["background-position"]}if("backgroundPosition" in e){e.backgroundPosition="("+e.backgroundPosition}return c.apply(this,arguments)};function a(f){f=f.replace(/left|top/g,"0px");f=f.replace(/right|bottom/g,"100%");f=f.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");var e=f.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);return[parseFloat(e[1],10),e[2],parseFloat(e[3],10),e[4]]}b.fx.step.backgroundPosition=function(f){if(!f.bgPosReady){var h=b.curCSS(f.elem,"backgroundPosition");if(!h){h="0px 0px"}h=a(h);f.start=[h[0],h[2]];var e=a(f.options.curAnim.backgroundPosition);f.end=[e[0],e[2]];f.unit=[e[1],e[3]];f.bgPosReady=true}var g=[];g[0]=((f.end[0]-f.start[0])*f.pos)+f.start[0]+f.unit[0];g[1]=((f.end[1]-f.start[1])*f.pos)+f.start[1]+f.unit[1];f.elem.style.backgroundPosition=g[0]+" "+g[1]}})(jQuery);

/* Alsacreations */
$(document).ready(function(){
	// Menu
	$('#menu li').css({backgroundPosition: '50% -20px'}).hover(function() {
		$(this).stop().animate({backgroundPosition:"50% -10px"}, {duration:150});
	},function() {
		$(this).stop().animate({backgroundPosition :"50% -20px"}, {duration:150});
	});
	});


CSS:
#menu {
	position: absolute;
	top: 0;
	right: 70px;
	list-style: none;
}

#menu li {
	text-align: center;
	width: 141px; /*update padawan*/
	margin-left: 40px;
	float: left;
	height: 115px;
}

#menu li:hover, #menu li:focus {
	/*background:url(img/halo.png) no-repeat 0px 35px;*/
}

#menu li a {
	text-decoration: none;
	color: #494949;
	font-size: 1.5em;
	font-weight: bold;
	text-transform:uppercase;
	line-height:30px;
	display:block;
	padding-top:78px;
	/*background:url(img/menu-icon-hovered.png) 0px 500px no-repeat; update padawan*/
}

#menu li a:hover, #menu li a:focus, #menu li a:active {
	/*background-position: center bottom; update padawan*/
}

#menu li#menu-facebook {
	background:url(../img/facebook.png) 50% -20px no-repeat;
}


HTML:
<body>
<ul id="menu">
    <li id="menu-facebook"><a href="http://www.alsacreations.com/apprendre/"></a></li>
  </ul>
<h1>Entraide Informatique | Apprendre, et comprendre ensemble.</h1>



Bien sûr, j'ai lié le CSS et le JS à ma page HTML, et l'effet fonctionne très bien. Smiley smile

Le problème, est que l'image n'est pas situé tout en haut de la page, voyez par vous-même:
http://nsa26.casimages.com/img/2011/03/02/110302045353672980.png

Je me demande d'où vient ce problème, car quand je teste le code HTML du menu en isolé, c'est à dire, seul, avec rien autour, il n'y a pas d'écart...

Merci de m'éclairer, ce serait vraiment sympa Smiley smile

A bientôt... Smiley cligne
Modifié par Chris30900 (03 Mar 2011 - 12:28)
De rien. Si tu à des connaissances en PHP, tu peut m'aidez ici : (http://forum.alsacreations.com/topic-20-54224-1-Problemes-zones-membres.html#copy)
Sujet clos
Aller à