18041 sujets

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

[RESOLU] CSS Petit soucis sur BG boutons avec quatre (4) positions

Bonjour la communauté,
je reviens vers vous car j'ai un petit soucis sur une positionement de bouton en CSS.

Mon petit soucis viens du fait que quand j'ouvre une page j'aimerais bien sur que le bouton soit OFF c'est a dire sur la dernière image. IMAGE AVEC 4 positions

Voici le code ci-dessous pour faire une jolie barre de navigation.
Dans la page :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>Phil</title>
<link rel="stylesheet" href="nav.css" type="text/css" />
</head>

<body>

<div id="globalheader">
<ul id="globalnav">
	<li id="gn-accueil"><a href="http://">accueil</a></li>
	<li id="gn-crea"><a href="http://">crea</a></li>
	<li id="gn-forma"><a href="http://">forma</a></li>
	<li id="gn-photo"><a href="http://">photo</a></li>
	<li id="gn-contact"><a href="http://">contact</a></li>
	<li id="gn-secure"><a href="http://">secure</a></li>
</ul>
</div>

</body>
</html>


Dans le CSS :


/* CSS Document */

/* GLOBALHEADER */
#globalheader { width: 702px; height: 38px; margin: 0; position: absolute; top: 125px; left: 68px; z-index: 9998; }
#globalheader #globalnav { margin: 0; padding: 0; }
#globalheader #globalnav li { display: inline; }
#globalheader #globalnav li a { float: left; width: 117px; height: 0; padding-top: 38px; overflow: hidden; }
#globalheader #globalnav li a,
#globalheader #globalsearch { background-image: url(images/nav.png);  background-repeat: no-repeat; }

/* Bouttons OFF */
#globalheader #globalnav li#gn-accueil a { background-position: 0 0; }
#globalheader #globalnav li#gn-crea a { background-position: -117px 0; }
#globalheader #globalnav li#gn-forma a { background-position: -234px 0; }
#globalheader #globalnav li#gn-photo a { background-position: -351px 0; }
#globalheader #globalnav li#gn-contact a { background-position: -468px 0; }
#globalheader #globalnav li#gn-secure a { background-position: -585px 0; }

/* Survol Souris */
#globalheader #globalnav li#gn-accueil a:hover { background-position: 0 -38px; }
#globalheader #globalnav li#gn-crea a:hover { background-position: -117px -38px; }
#globalheader #globalnav li#gn-forma a:hover { background-position: -234px -38px; }
#globalheader #globalnav li#gn-photo a:hover { background-position: -351px -38px; }
#globalheader #globalnav li#gn-contact a:hover { background-position: -468px -38px; }
#globalheader #globalnav li#gn-secure a:hover { background-position: -585px -38px; }

/* Clic */
#globalheader #globalnav li#gn-accueil a:active { background-position: 0 -76px; }
#globalheader #globalnav li#gn-crea a:active { background-position: -117px -76px; }
#globalheader #globalnav li#gn-forma a:active { background-position: -234px -76px; }
#globalheader #globalnav li#gn-photo a:active { background-position: -351px -76px; }
#globalheader #globalnav li#gn-contact a:active { background-position: -468px -76px; }
#globalheader #globalnav li#gn-secure a:active { background-position: -585px -76px; }

/* ON */
#globalheader.accueil #globalnav li#gn-accueil a:hover { background-position: 0 0; cursor: default; }
#globalheader.crea #globalnav li#gn-crea a { background-position: -117px -114px !important; }
#globalheader.forma #globalnav li#gn-forma a { background-position: -234px -114px !important; }
#globalheader.photo #globalnav li#gn-photo a { background-position: -351px -114px !important; }
#globalheader.contact #globalnav li#gn-contact a { background-position: -468px -114px !important; }
#globalheader.secure #globalnav li#gn-secure a { background-position: -585px -114px !important; }


J'espère avoir été clair.

Merci de votre aide.

Au plaisir.
Modifié par Plaisir (24 Mar 2009 - 00:28)
Bonsoir,
30 lecture et pas une réponse !
Peut être n'ai-je pas bien compris les tenants et aboutissants de ce forum ?

Merci d'éclairer ma lanterne.

Bonne soirée,
Bon week-end.
Phil
Modifié par Plaisir (20 Mar 2009 - 21:23)
Salut,

Plaisir a écrit :
30 lecture et pas une réponse !
Peut être n'ai-je pas bien compris les tenants et aboutissants de ce forum ?

Merci d'éclairer ma lanterne.
D'accord ! Smiley langue

Les personnes qui répondent sont bénévoles et sont donc tout à fait libres de ne pas répondre à une question quand :
* elles ne connaissent pas la réponse.
* le sujet ne les intéresse pas.
* elles ne sont pas d'humeur.
* elles trouvent le code difficile à lire.
* elles préfèrent une page en ligne.
* elles n'aiment pas un pseudo (ou l'impatience Smiley biggol ).
* (n'importe quel autre motif objectif ou subjectif...)

Bref quelles que soient leurs raisons elles sont toujours dans leur bon droit.

Bon week-end également. Smiley cligne

Edit: personnellement j'ai voulu jeter un coup d'oeil mais comme je ne dispose pas de l'image que tu utilises et que du coup tout ça n'est pas très clair j'ai laissé tomber...
Modifié par Heyoan (20 Mar 2009 - 22:57)
Bonjour,
plein de questions .... Smiley confused

1) Dans la partie ON tu as une ligne


#globalheader.accueil #globalnav li#gn-accueil a:hover { background-position: 0 0; cursor: default; }

Je supposes que c'est voulu, mais le hover est concurent avec la definition naturelle hover de cet élément ??


2) seul le premier bouton (celui actif) reviens a une position neutre, aprés clic, normal on change de page,
par contre si les autres sont cliqués ils se positionnent en cliqué et ne sont plus actif a l'hover ????

3) pourquoi n'as tu pas un CSS partiel, par page pour que le bouton correspondant au sujet de la page soit marqué actif Smiley eek
Ok j'ais fais des tests, il semblerais que ma méthode collerait,

1) Ta feuille de style, tu la gardes telle quelle,

2) tu te fais des blocs comme celui-ci pour tes pages
et le tu rajoutes comme ceci une redefinition des
éléments que tu veux bloquer

Comme ceci pour la page accueil alsa1.html

Donc alsa1.html serait comme ceci, ce qui bloque le bouton
qui lui corresponds Smiley biggrin 




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>Phil</title>
<link rel="stylesheet" href="nav.css" type="text/css" />
</head>

<body>
<style>

#globalheader #globalnav li#gn-accueil a { background-position: 0 -114px !important; }
#globalheader #globalnav li#gn-accueil a:hover { background-position: 0 -114px !important; }
#globalheader #globalnav li#gn-accueil a:active { background-position: 0 -114px !important; }
#globalheader.accueil #globalnav li#gn-accueil a: { background-position: 0 -114px !important; }
</style>
<div id="globalheader">
<ul id="globalnav">
	<li id="gn-accueil"><a href="http://">accueil</a></li>
	<li id="gn-crea"><a href="http://">crea</a></li>
	<li id="gn-forma"><a href="http://">forma</a></li>
	<li id="gn-photo"><a href="http://">photo</a></li>
	<li id="gn-contact"><a href="http://">contact</a></li>
	<li id="gn-secure"><a href="http://">secure</a></li>
</ul>
</div>

</body>
</html>

a toi de voir Smiley rolleyes
Pof, pof, pof Smiley confuse

Quitte à pomper le menu d'Apple autant le faire jusqu'au bout, non ? Smiley hmm
Pour répondre à ta question initiale, ie :"je pense qu'une class doit être ajouter dans le code sur cette page..." :
Oui !
Dans le code source du site apple, tu aurais dû trouver : 

<div id="globalheader" [#red][b]class="mac"[/b][/#]>
	<!--googleoff: all-->
	<ul id="globalnav">
		<li id="gn-apple"><a href="/fr/">Apple</a></li>
		<li id="gn-store"><a href="http://store.apple.com/fr">Store</a></li>

		<li id="gn-mac"><a href="/fr/mac/">Mac</a></li>
		<li id="gn-ipoditunes"><a href="/fr/itunes/">iPod + iTunes</a></li>
		<li id="gn-iphone"><a href="/fr/iphone/">iPhone</a></li>
		<li id="gn-downloads"><a href="/fr/downloads/">Téléchargements</a></li>
		<li id="gn-support"><a href="/fr/support/">Support</a></li>

	</ul>

A transposer à ton menu...
En passant, il existe bien des méthodes pour marquer la page courante Smiley cligne

Ceci étant dit, il est sans doute préférable de s'inspirer de quelque chose et d'en tirer tes propres créations, plutôt que te repomper (qui plus est sans réellement comprendre...) de la sorte Smiley cligne

Cdt,
Sylvain
FoxLeRenard a écrit :
Ok j'ais fais des tests, il semblerais que ma méthode collerait,

1) Ta feuille de style, tu la gardes telle quelle,

2) tu te fais des blocs comme celui-ci pour tes pages
et le tu rajoutes comme ceci une redéfinition des
éléments que tu veux bloquer

Comme ceci pour la page accueil alsa1.html

Donc alsa1.html serait comme ceci, ce qui bloque le bouton
qui lui corresponds Smiley biggrin

...
a toi de voir Smiley rolleyes


Merci de ta réponse Smiley smile
Cela fonctionne,
Bonne semaine
Phil
6l20 a écrit :
Pof, pof, pof Smiley confuse

Quitte à pomper le menu d'Apple autant le faire jusqu'au bout, non ? Smiley hmm
...

Ceci étant dit, il est sans doute préférable de s'inspirer de quelque chose et d'en tirer tes propres créations, plutôt que te repomper (qui plus est sans réellement comprendre...) de la sorte Smiley cligne

Cdt,
Sylvain


Merci Sylvain pour "la morale", mais sache que personne n'a rien inventé, tout ce qui s'est créé hier et ce qui se créé aujourd'hui et à la base d'une recherche collective. Même le célèbre Einstein s'est inspiré de Poincaré, etc.

C'est grâce à la réponse pertinente FoxLeRenard que j'avance, ce qui me permet de mieux comprendre le CSS que je met en place.

Aujourd'hui je suis débutant, demain je serait un aide au débutant...
Et dans quelques années on me copiera mes codes, et tout cela dans le plaisir du partage.

Bonne continuation,
Phil
Modifié par Plaisir (24 Mar 2009 - 00:33)
Tiens, ta réaction m'avait échappé...

Je ne te fais pas la morale, je n'en ai ni le temps, ni l'envie.

Il s'agissait d'une simple "mise en garde" (les droits d'auteurs, etc...) et de quelques conseils que tu n'as su voir...ou que je n'ai pas su faire passer Smiley ohwell

Je reprend donc :
S'il s'agit d'un exercice de style, reproduire ou tenter de reproduire un site ou un code qui te plaît ne pose aucun problème, et je serai parmi les premiers à te le conseiller et à t'y encourager.
Mais, il aurait fallu l'annoncer comme tel :
"J'aime bien le menu du site d'Apple, j'aimerai comprendre comment cela fonctionne, ou j'ai un peu de mal à comprendre le positionnement de l'image de fond. Comment marquer la page courante ? Etc..."

Je trouve cela plus honnête et aurait sans doute évité à quelqu'un de "se creuser la tête" à comprendre ce que tu voulais au final, et à réinventer la roue de la voiture qui tourne sur le circuit depuis quelques tours maintenant...

Je ne suis pas spécifiquement en accord sur la notion de pertinence de la réponse de FoxLeRenard, mais effectivement si un code premâché te permet d'avancer et de comprendre les mécanismes en présence et de les reproduire par la suite, grand bien te fasse Smiley jap

On s'éloigne malheureusement un peu de l'objectif de ce forum qui serait plutôt de te guider, de t'orienter vers des sources, des tutoriels, te permettant de comprendre de quoi il retourne... Smiley hmm

Je ne te ferai pas l'affront de te donner les définitions de l'inspiration ou de la création, mais il me semble un peu présomptueux de comparer ce cas de figure aux travaux du remarquable Poincaré qui ont/auraient inspirés Einstein lorsqu'il imagina (créa...) la théorie de la relativité, je te souhaite néanmoins d'avoir le quart de la moitié de son talent de "copiste"... Smiley cligne

Plus sérieusement, quelques problèmes de méthodologie dans ta démarche, mais pas le moindre souci avec le fait que tu sois débutant, ou que tu te fasses les dents sur ce qui se fait sur le web.

Je te souhaite bonne continuation également, souhaitant vivement que tu puisses toi aussi dispenser tes connaissances aux futurs novices que tu rencontreras et que tes codes soient copiés jusqu'au fin fond de la Papouasie-Nouvelle-Guinée, si c'est un gage de réussite Smiley jap

Cdt,
Sylvain
Modifié par 6l20 (25 Mar 2009 - 08:49)
Sujet clos
Aller à