Background-position FF et Opera

Bonjour,
je viens relancer un sujet bien connu concernant le background-position sous firefox et opera: J'ai un menu horizontal avec des boutons et un hover progressif (un petit effet avec Jquery), donc Safari et Google Chrome c'est nickel, Firefox et Opera, eux ne comprennent pas (Je ne me suis pas encore occupé de IE). Donc en clair, ces deux navigateurs n'interprètent absolument pas mon background-position. Certain seront contre ma manière d'écrire mais, je préfère ne pas concentrer toutes mes propriétés comme le permet CSS3 donc tout est séparé c'est normal:


Mon CSS

#menu {
	background:url('medias/menu.png');
	background-position-x:0px;
	background-position-y:0px;
	background-repeat:no-repeat;
	width:1128px;
	height:76px;
	margin-left:auto;
	margin-right:auto;
	padding-top:10px;
	position:relative;
	z-index:3;
}

#content_presentation {
	background-position-x:-10px;
	width:171px;
	height:50px;
	left:10px;
	position:absolute;
	cursor:pointer;
}

#presentation {
    background:transparent;
	width:171px;
	height:50px;
	position:absolute;
}

#content_presentation #presentation a, #content_presentation #presentation a span {
    background:transparent;
	width:171px;
	height:50px;
	position:absolute;
}

#content_presentation #presentation a span {
    background:url('medias/menu.png');
	background-position-x:-10px;
	background-position-y:-96px;
	background-repeat:no-repeat;
	width:171px;
	height:50px;
	position:absolute;
}

#content_projets_realises {
	background-position-x:-183px;
	width:194px;
	height:50px;
	left:183px;
	position:absolute;
	cursor:pointer;
}

#projets_realises {
    background:transparent;
	width:194px;
	height:50px;
	position:absolute;
}

#content_projets_realises #projets_realises a, #content_projets_realises #projets_realises a span {
    background:transparent;
	width:194px;
	height:50px;
	position:absolute;
}

#content_projets_realises #projets_realises a span {
    background:url('medias/menu.png');
	background-position-x:-183px;
	background-position-y:-96px;
	background-repeat:no-repeat;
	width:194px;
	height:50px;
	position:absolute;
}

#content_ressources {
	background-position-x:-379px;
	width:161px;
	height:50px;
	left:379px;
	position:absolute;
	cursor:pointer;
}

ressources {
    background:transparent;
	width:161px;
	height:50px;
	position:absolute;
}

#content_ressources #ressources a, #content_ressources #ressources a span {
    background:transparent;
	width:161px;
	height:50px;
	position:absolute;
}

#content_ressources #ressources a span {
    background:url('medias/menu.png');
	background-position-x:-379px;
	background-position-y:-96px;
	background-repeat:no-repeat;
	width:161px;
	height:50px;
	position:absolute;
}

#content_tutoriels {
	background-position-x:-542px;
	width:136px;
	height:50px;
	left:542px;
	position:absolute;
	cursor:pointer;
}

#projets_tutoriels {
    background:transparent;
	width:136px;
	height:50px;
	position:absolute;
}

#content_tutoriels #tutoriels a, #content_tutoriels #tutoriels a span {
    background:transparent;
	width:136px;
	height:50px;
	position:absolute;
}

#content_tutoriels #tutoriels a span {
    background:url('medias/menu.png');
	background-position-x:-542px;
	background-position-y:-96px;
	background-repeat:no-repeat;
	width:136px;
	height:50px;
	position:absolute;
}

#content_contact {
	background-position-x:-680px;
	width:129px;
	height:50px;
	left:680px;
	position:absolute;
	cursor:pointer;
}

#projets_contact {
    background:transparent;
	width:129px;
	height:50px;
	position:absolute;
}

#content_contact #contact a, #content_contact #contact a span {
    background:transparent;
	width:129px;
	height:50px;
	position:absolute;
}

#content_contact #contact a span {
    background:url('medias/menu.png');
	background-position-x:-680px;
	background-position-y:-96px;
	background-repeat:no-repeat;
	width:129px;
	height:50px;
	position:absolute;
}

.select {
	background:url('medias/menu.png');
	background-position-y:-96px;
	background-repeat:no-repeat;
}

Mon Javascript

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
                        $(document).ready(function(){
			$("a.fade_1").wrapInner(document.createElement("span"));
			$("a.fade_1 span").css("opacity","0");
			$("a.fade_1 span").hover(function () {
			$(this).stop().animate({opacity: 1 }, "fast");
			},
			function () {
			$(this).stop().animate({opacity: 0}, "slow");
			});
			});
			$(document).ready(function(){
			$("a.fade_2").wrapInner(document.createElement("span"));
			$("a.fade_2 span").css("opacity","0");
			$("a.fade_2 span").hover(function () {
			$(this).stop().animate({opacity: 1 }, "fast");
			},
			function () {
			$(this).stop().animate({opacity: 0}, "slow");
			});
			});
			$(document).ready(function(){
			$("a.fade_3").wrapInner(document.createElement("span"));
			$("a.fade_3 span").css("opacity","0");
			$("a.fade_3 span").hover(function () {
			$(this).stop().animate({opacity: 1 }, "fast");
			},
			function () {
			$(this).stop().animate({opacity: 0}, "slow");
			});
			});
			$(document).ready(function(){
			$("a.fade_4").wrapInner(document.createElement("span"));
			$("a.fade_4 span").css("opacity","0");
			$("a.fade_4 span").hover(function () {
			$(this).stop().animate({opacity: 1 }, "fast");
			},
			function () {
			$(this).stop().animate({opacity: 0}, "slow");
			});
			});
			$(document).ready(function(){
			$("a.fade_5").wrapInner(document.createElement("span"));
			$("a.fade_5 span").css("opacity","0");
			$("a.fade_5 span").hover(function () {
			$(this).stop().animate({opacity: 1 }, "fast");
			},
			function () {
			$(this).stop().animate({opacity: 0}, "slow");
			});
			});
</script>

Mon HTML

<div id="menu">
			<div id="content_presentation" class="select"><div id="presentation"><a class="fade_1"></a></div></div>
			<div id="content_projets_realises"><div id="projets_realises"><a class="fade_2"></a></div></div>
			<div id="content_ressources"><div id="ressources"><a class="fade_3"></a></div></div>
			<div id="content_tutoriels"><div id="tutoriels"><a class="fade_4"></a></div></div>
			<div id="content_contact"><div id="contact"><a class="fade_5"></a></div></div>
		</div>

--> La page en question <--

Voilà, merci de votre aide
Modifié par xXjujo002Xx (01 Apr 2012 - 14:57)

Tout séparer fait charger deux fois plus de contenu CSS qu'il n'en faut à ton client, niveau bande passante, chargement de page et référencement (les moteurs aiment les pages optimisées), c'est un peu se tirer une balle dans le pied que de ne pas utiliser les macro-propriétés.

Et si tu décides de séparer, c'est background-image plutôt que background pour la première.

Je ne vois pas dans le code où la propriété background-position s'anime, s'il ne s'agit pas d'une animation (que le background-position change instantannément), alors il vaut vraiment mieux utiliser simplement mle :hover de CSS. Ca a l'air d'être le cas en regardant ton lien.

Il semblerait qu'un simple :hover CSS et un fade en jQuery suffise à faire ton effet. Et là du coup, t'aurais plus de problème de compatibilité.

Si ça diminue l temps de chargement, je vais effectivement m'empresser de compacter tout ça, merci du conseil. Pour mon problème, en fait il n'est pas possible d'utiliser la pseudo-classe hover pour faire un fondu avec jquery, la technique que j'utilise est la seule possible (je vais quand même chercher un peu). Merci à toi

Au passage, si vous avez un tuto sympa sur ces fameuses macro-propriété (comment ça s'organise tout ça) je ne vous retient pas de m'en recommander, merci !
--> j'ai trouvé ça.
Modifié par xXjujo002Xx (02 Apr 2012 - 18:47)

bonjour,

<edit> : pour les raccourcis CSS:
par exemple , http://www.pompage.net/traduction/raccourcisCSS
en dernier recours, il faut allez voir sur le site du w3c et lire les specifications (anglophone et inmangeable, mais bon , y a pas plus précis )</edit>



Tu as pris un mauvais départ , tout d'abord ton code html qui ne reflète rien du contenu et codé a base de div et de span ! Même pour tester, prend l'habitude de balisé correctement le contenu et de le faire existé (affiche ta page html sans le fichier de style, et paf , reste pas grand chose ....)

Une fois ton code balisé (h1, nav ou ul li , etc) tu peux ajouté avec parcimonie des balises neutre comme div ou span pour t'aider à styler ton document.

Coté CSS, beaucoup de redondance et du positionnement absolu inutile.

Quand au regle css "raccourcie" , par exemple:

background:url('medias/menu.png') no-repeat -183px -96px;

pour ton onglet" projet réalisé" ça marche dans FF.
Le truc pour les feuilles de styles c'est de faire le plus simple et le plus concis possible, (idem pour le html) et si une technique pose vraiment problème, on change d'approche .

Le menu que tu cherche a faire serait une technique appelé "sprite", il y a plein de tuto ou exemple la dessus a décortiqué pour bien comprendre et reproduire.

En bref: code html a reprendre et css a épuré, ensuite il est temps de réadapter les styles si besoin.

Pour le js, je dirais aussi que :hover + les transitions seraient convenables avant de s'attaquer a jquery (ça fait beaucoup a devoir maitriser d'un coup html + css +javascript/Jquery )

Cordialement,
GC
Modifié par gc-nomade (02 Apr 2012 - 18:54)

Ok je vais revoir tout ça, je posterais mon code nettoyé, j'ai du boulot !

Juste une question: quand je n'ai aucune valeur à mettre, par exemple background-color (que j'utilise rarement car j'utilise pratiquement toujours des images), que fais-je ??
Modifié par juliendargelos (17 Feb 2013 - 13:52)

xXjujo002Xx a écrit :

Juste une question: quand je n'ai aucune valeur à mettre, par exemple background-color (que j'utilise rarement car j'utilise pratiquement toujours des images), que fais-je ??

Tout depend du contexte. Par exemple, une image foncée avec des couleurs de police claires (pour le texte dans le html au dessus)...alors peut-être vaut-il bien de s'assurer que, tant que l'image n'est pas chargée, que le texte soit lisible, en appliquant une couleur de fond foncée aussi.

Sinon, on ne met rien( d'inutile) .

cordialement,
GC

background est ultra-flexible. tu peux te dispenser de la couleur simplement en ne mettant rien à la place.

Pour le :hover, j'ai du mal à croire que jQuery est la seule possibilité. Déjà parce que tout ce qui peut se faire avec jQuery peut se faire avec du JS simple ou une autre lib. Ensuite parce que CSS3 permet de faire quasiment toutes les transitions possibles et inimaginables. (Faire une petite recherche sur la propriété "transition" de CSS3) et avec le lien que tu donnes, j'ai même l'impression que CSS2 est suffisant.

KyleKatarn a écrit :
Pour le :hover, j'ai du mal à croire que jQuery est la seule possibilité. Déjà parce que tout ce qui peut se faire avec jQuery peut se faire avec du JS simple ou une autre lib. Ensuite parce que CSS3 permet de faire quasiment toutes les transitions possibles et inimaginables. (Faire une petite recherche sur la propriété &quot;transition&quot; de CSS3) et avec le lien que tu donnes, j'ai même l'impression que CSS2 est suffisant.

Certe, mais dès qu'on parle de IE, c'est une autre affaire !

xXjujo002Xx a écrit :


Certe, mais dès qu'on parle de IE, c'est une autre affaire !

IE n'a jamais eu de véritable problème avec :hover sur une balise de lien, et les transitions CSS c'est pour la version 10.
Tu as éventuellement besoin de JavaScript pour palier a cette différence si vraiment cet effet te semble indispensable.

Cordialement,
GC

gc-nomade a écrit :
les transitions CSS c'est pour la version 10.

C'est bien ce qui m'embête ! Certaine personne sont encore à la V6 et se fiche totalement de la compatibilité de leur navigateur !! Après effectivement et même plutôt heureusement IE interprète les :hover pour les balise <a>, mais que sur les balises <a> !

Les transition pas le :hover.
a:hover = No problem, c'est peut-être même IE le premier à l'avoir intégré ^^
Les transitions : honnêtement, d'ici 2 ou 3 ans, on aura probablement 90% de navigateurs compatibles CSS3 (espérons-le en tout cas) donc les bricolages d'animations en JS vont devenir progressivement obsolètes. Il faut vraiment se demander si ça en vaut la peine, en sachant que le hover peut fonctionner normalement (l'effet sera juste instantanné au lieu d'une transition progressive) et en sachant que le contenu reste strictement identique et accessible de la même manière.