28173 sujets

CSS et mise en forme, CSS3

Garder un bouton 'on'

Pages :
Bonjour à tous, je sais que c'est un sujet dont on parle assez souvent, mais j'ai cherché et je n'ai pas réussi à faire en sorte qu'un des boutons de ma liste reste en position ON (en changeant l'id ou la class qu'il a).

voici mon css concernant ce menu:

ul#menulist, #menulist li {
	list-style-type: none;
	margin:0;
	padding:0;
}
ul#menulist {
	position:relative;
	margin: 0px 0 ;
	padding: 0px ;
	background: transparent url(../picts/new_menu.png) bottom left no-repeat;
	width: 852px;
	height:30px;
	text-align: center;
}
#menulist li {float: left;}

#menulist li#menu1 a {
	display: block;
	height: 30px;
	width: 95px;
}
#menulist li#menu2 a {
	display: block;
	height: 30px;
	width: 93px;
}
#menulist li#menu3 a {
	display: block;
	height: 30px;
	width: 132px;
}
#menulist li#menu4 a {
	display: block;
	height: 30px;
	width: 84px;
}
#menulist li#menu5 a {
	display: block;
	height: 30px;
	width: 70px;
}
#menulist li#menu6 a {
	display: block;
	height: 30px;
	width: 126px;
}
#menulist li#menu7 a {
	display: block;
	height: 30px;
	width: 50px;
}
#menulist li#menu8 a {
	display: block;
	height: 30px;
	width: 92px;
}
#menulist li#menu9 a {
	display: block;
	height: 30px;
	width: 110px;
}
#menulist li a:hover {
	background: transparent url(../picts/new_menu.png) bottom left no-repeat;
}
#menulist a#menu1:hover {
	background-position: -852px 0%;
}
#menulist a#menu2:hover {
	background-position: -947px 0%;
}
#menulist a#menu3:hover {
	background-position: -1040px 0%;
}
#menulist a#menu4:hover {
	background-position: -1172px 0%;
}
#menulist a#menu5:hover {
	background-position: -1256px 0%;
}
#menulist a#menu6:hover {
	background-position: -1326px 0%;
}
#menulist a#menu7:hover {
	background-position: -1452px 0%;
}
#menulist a#menu8:hover {
	background-position: -1502px 0%;
}
#menulist a#menu9:hover {
	background-position: -1594px 0%;
}


par exemple j'ai testé sur le bouton 9 qui est fait de cette façon:

<li id="menu9"><a id="menu9" href="blabliblablou.html" target="_self" onMouseOver="cacheMenu();"></a></li>


ici il est en position normal, et pour essayer de le laisser "on" j'ai fais ça:


#menulist li#menu9on {
	display: block;
	height: 30px;
	width: 110px;
}
#menulist a#menu9on{
	background-position: -1594px 0%;
}


or je suis bien blasé ça ne fonctionne pas, mon bouton reste dans sa position d'origine et le lien n'est plus un lien (surement à cause du :hover en moins)

bref avez vous une idée parce que la je cale un peu et j'essaie de plus en plus de conneries abérantes lol...

merci d'avance
Bonjour,

On commencera par éviter de donner un même identifiant (attribut HTML id) à deux éléments différents. Pour mémoire, les identifiants sont censés être uniques dans une page donnée.
j'avais suivi un tutorial d'alsacreation pour faire ce genre de menu, maintenant je garde la même technique. Je viens de remplacer les a#menuX:hover par li#menuX a:hover, c'est mieux comme ça et plus de doublons?
r4z a écrit :
Merci Florent. Par contre je n'arrive pas à laisser un état "on" Smiley decu

Il faut générer une classe ou un identifant dans le contenu HTML, pour marquer le(s) lien(s) du ou des menus de navigation correspondant à la page en cours.

C'est un sujet traité régulièrement sur le forum. Faire une recherche sur « page active », par exemple.
toujours au même point lol. Si ce n'est que j'ai évité les doublons, mais à part ça je n'arrive pas a trouver une classe ou un id qui permette au bouton concerné de ma liste de se placer où il faut sur l'image de mon menu.

En gros mon menu fait 1704 * 30px, or la partie up mesure donc 852px, ensuite je n'arrive pas à déplacer le background position en dehors des a:hover. Par exemple sur un ID "#on9" pour le 9eme bouton

EDIT:

en gros j'aimerais que quand je suis dans une page précise (par exmple la 9), et bien que le bouton reste sur son état hover comme ceci:
#menulist a#menu9:hover {

	background-position: -1594px 0%;

}


or avec les listes j'ai un peu de mal.
Modifié par r4z (21 Jun 2007 - 14:00)
Hello,

Modifier le style ainsi :
#menulist a#menu9:hover,
#menulist li.encours a#menu9 {
	background-position: -1594px 0%;
}

Et dans le HTML, on attribue la classe "encours" au li correspondant à la page en cours.

Mais c'est pas toujours évident à gérer, notamment si on utilise un CMS et que la fonctionnalité n'est pas prévue (ou que l'on connait mal le CMS).
Pour un site statique, c'est bien sûr plus simple.
en fait j'aurais pu le gérer avec du php, mais la je modifie juste un site en remettant quelques trucs à jours dont le menu, et c'est du html, donc pour éviter de changer tous les liens je laisse tel quel. Merci je n'y avais même pas pensé tu vois, je vais tester de suite.
par contre hier j'ai remplacé les a#menuX:hover par li#menuX a:hover, c'est voulu que tu revienne à ce que j'avais fait au début ou non?
r4z a écrit :
c'est voulu que tu revienne à ce que j'avais fait au début ou non?

Heu... non. Je n'avais plus cette modification en tête.
ça ne fonctionne pas ça fait le même problème que mes modifs du départ. En fait ça replace l'image par le bouton suivant quand c'est en hover, et sinon le menu reste tel quel

edit: je pensais à un problème de coordonnées mais non j'ai vérifié et recalculé
Modifié par r4z (22 Jun 2007 - 10:12)
non en local malheureusement

mais en complément voici le code de ma liste 

		<div id="menutop">
			<ul id="menulist">
					<li id="menu1"><a id="menu1" href="#" target="_self" onMouseOver=" affichMenu(this.id, 'calcCID', -1, -40)"></a></li>
					<li id="menu2"><a id="menu2" href="../centres/centres.php" target="_self" onMouseOver="cacheMenu();"></a></li>
					<li id="menu3"><a id="menu3" href="blabla.html" target="_self" onMouseOver="cacheMenu();"></a></li>
					<li id="menu4"><a id="menu4" href="../formation/formation.html" target="_self" onMouseOver="cacheMenu();"></a></li>
					<li id="menu5"><a id="menu5" href="../conseil/prevForm.html" target="_self" onMouseOver="cacheMenu();"></a></li>
					<li id="menu6"><a id="menu6" href="../espace_adherent/adherents.html" target="_self" onMouseOver="cacheMenu();"></a></li>
					<li id="menu7"><a id="menu7" href="../question_reponse/questions_reponses.php" target="_self" onMouseOver="cacheMenu();"></a></li>
					<li id="menu8"><a id="menu8" href="../adresses_pro/adresses_pro.php" target="_self" onMouseOver="cacheMenu();"></a></li>
					<li id="menu9"><a id="menu9" href="../contact/formulaire.html" target="_self" onMouseOver="cacheMenu();"></a></li>
			</ul>
		</div>

Modifié par r4z (22 Jun 2007 - 10:22)
<li id="menu1"><a id="menu1"...

Tu n'as toujours pas remédié à ton problème d'identifiants utilisés en double... Smiley rolleyes

r4z a écrit :
non en local malheureusement

En fait, « Page en ligne ? » veut dire « Peut-on voir la page en ligne (et si elle n'est pas encore disponible quelque part en ligne sur un hébergement de test, y remédier) ? ». Je tâcherai d'être plus explicite la prochaine fois. Smiley cligne
Florent V. a écrit :
<li id="menu1"><a id="menu1"...

Tu n'as toujours pas remédié à ton problème d'identifiants utilisés en double... Smiley rolleyes

Je ne vois pas vraiment comment y remédier et de plus j'ai suivi un tuto d'alsa

a écrit :

En fait, « Page en ligne ? » veut dire « Peut-on voir la page en ligne (et si elle n'est pas encore disponible quelque part en ligne sur un hébergement de test, y remédier) ? ». Je tâcherai d'être plus explicite la prochaine fois. Smiley cligne

oui j'avais compris lol, et non c'est en local -> sur mon pc Smiley langue
Modifié par r4z (22 Jun 2007 - 11:13)
r4z a écrit :
oui j'avais compris lol, et non c'est en local -> sur mon pc Smiley langue

Ben apparemment tu n'as pas compris le sous-entendu (la parenthèse dans la version « explicite mais semble-t-il pas assez » ) : « et si elle n'est pas encore disponible quelque part en ligne sur un hébergement de test, y remédier ». Smiley cligne

Libre à toi de ne donner que des bouts de code et de continuer sur le jeu des questions-réponses, mais comme on perds beaucoup moins de temps avec une page en ligne, il est probable que les réponses se tarissent sans ça. Smiley decu
Pages :
Sujet clos
Aller à