28172 sujets

CSS et mise en forme, CSS3

Me suis-je bien expliqué ?




[Résolu] Menu : pbm avec le hover / active

Bonjour tout le monde,

j'essaie de créer un menu que celui de alsacreations le .fr avec moi quatres boutons au lieux de trois, le derniers étant plus petits que les autres.

L'affichage est OK, pas de bug graphique, au passage de la souris l'image change parfaitement, MAIS au clique, quand on arrive sur la page, l'image (d'en bas) ne reste pas... si on repasse avec la souris l'image change... Bref j'ai bien l'impression que le hover ne fonction pas !

Franchement je suis rester bloqué la dessus tout la soirée, je comprends pas!
Si qqun veut bien jeter un coup d'œil et me dire ce qu'il en pense...

Ma feuille de style :

#menu {
	position: relative;
	width: 920px;
	height: 80px;
	background: url(img/bg-menu.png) left top no-repeat;
	margin: 0 auto;
	text-align: left;
}

#menu ul {
	position: absolute;
	top: 0px;
	left: 375px;
	width: 512px;
	height: 80px;
	padding: 0;
	margin:0;
	list-style: none;
	background: transparent url(img/menu.png) top left no-repeat;
}
#menu li {
	float: left;
	padding: 0;
	margin:0;
	text-indent: 80px;
}

#menu li a {
	display: block;
	height: 80px;
	text-decoration: none;
	font-size: 1px;
	line-height: 80px;
}
#menu li a#un {
	width : 142px;
}
#menu li a#deux {
	width : 142px;
}
#menu li a#trois {
	width : 142px;
}
#menu li a#quatre {
	width : 86px;
}

#menu li a span {
	position: absolute;
	left: -5000px;
}
#menu li a:hover {
	background: transparent url(img/menu.png) top left no-repeat;
}

#menu a#un:hover, #menu a#unactive:hover {
	background-position: 0px -80px;
}
#menu a#deux:hover, #menu a#deuxactive:hover {
	background-position: -142px -80px;
}
#menu a#trois:hover, #menu a#troisactive:hover {
	background-position: -284px -80px;
}
#menu a#quatre:hover, #menu a#quatreactive:hover {
	background-position: -426px -80px;
}

#menu a#unactive {
  background: transparent url(img/menu.png) 0px -80px no-repeat;
}
#menu a#deuxactive {
  background: transparent url(img/menu.png) -142px -80px no-repeat;
}
#menu a#troisactive {
  background: transparent url(img/menu.png) -284px -80px no-repeat;
}
#menu a#quatreactive {
  background: transparent url(img/menu.png) -426px -80px no-repeat;
}


Ma page html (valide xtml css) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu</title>
<link type="text/css" rel="stylesheet" href="styles.css" title="styles" />
</head>

<body>

<div id="menu">
		<ul>
		<li><a href="un.html" id="un" title="1"><span>1</span></a></li>
		<li><a href="deux.html" id="deux"  title="2"><span>2</span></a></li>
		<li><a href="trois.html" id="trois" title="3"><span>3</span></a></li>
		<li><a href="quatre.html" id="quatre" title="4"><span>3</span></a></li>
        </ul>
</div>

</body>
</html>


J'espère vraiment que vous aller pouvoir m'aider,
grand merci d'avance !
Modifié par benjo (17 Aug 2008 - 15:15)
Bonjour,

Le hover ne concerne que le cas ou la souris passe sur l'image. Si j'ai bien compris tu veux que l'image change lorsque tu clique sur le menu.

Pour cela tu peu utiliser en css 

class:active


pour utiliser javascript avec l'évenement OnClick Smiley smile
Salut benjo et bienvenue Smiley cligne ,

(j'ai déplacé ton sujet dans le bon salon).

Pas sûr d'avoir bien compris ta question mais si tu veux parler d'indiquer la page active en cours, la FAQ en parle.

Sinon, quel est l'intérêt de ton sondage Smiley rolleyes ?

A+
Bonsoir benjo et bienvenue sur ce forum,

Il y a deux ou trois choses que tu n'as pas bien saisi:

1. L'intérêt d'un sondage sur un forum. Rajouter un sondage du genre «Me suis-je bien expliqué?», «Êtes-vous d'accord avec moi?» ou «Mon site est-il bien?» est parfaitement inutile, et ça parasite le véritable contenu de ton sujet. À éviter à l'avenir. Smiley cligne

2. Le fonctionnement de la pseudo-classe :hover. En anglais, to hover signifie «survoler», donc le comportement que tu obtiens (style appliqué au survol uniquement) est parfaitement normal. Quant à marquer la page ou rubrique en cours dans un menu, il n'y a pas de magie en CSS pour le faire. En effet, une feuille de styles CSS n'a aucun moyen de savoir si tel ou tel lien du menu correspond à la page ou rubrique en cours. Donc chercher du côté des pseudo-classes telles que :hover (style au survol), :focus (style lorsque l'élément a le focus, par exemple lorsqu'on clique dans un champ de formulaire ou lorsqu'on navigue au clavier) ou encore :active (style au clic sur un lien ou un bouton), c'est faire fausse route. Voir la partie de la FAQ qu'indique Heyoan.
Bonjour à vous,

tout d'abord merci pour votre accueil,

en second merci pour vos réponses,
effectivement je pensais à tort que hover (survoler) avait des "possibilité" un peu plus étendues...

je vais de ce pas regarder en détail la doc fournie dans les liens,
je vous re-contact si je n'arrive tjrs à faire ce que je veux...

PS : Pour le sondage, j'ai craqué, je voulais tester au moins une fois Smiley smile dsl...
FunK a écrit :
pour utiliser javascript avec l'évenement OnClick Smiley smile

Attention: si on travaille en XHTML1.0 Strict, on écrira onclick en minuscules. Smiley cligne
Ok ! Je vous remercie tous pour vos réaction sur trouver les informations qui me manquait dans le lien de la FAQ de mr Heyoan que je remercie vivement !


Pas très au fait des possibilités CSS... je vais gagner 40 lignes de JS en moins, je vous dit merci et mes visiteurs aussi Smiley cligne
Sujet clos
Aller à