Discussion :

[Invité]

Bonjour à tous,

Je rencontre quelques problèmes avec un menu CSS que j'ai récemment téléchargé. Voici le code :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<style type="text/css">
#nav{
	position:relative;
	margin:40px;
	background-image:url(menu.jpg);
	background-position: 0px 600px;
	width: 1000px;
	padding:0;
	font-family:'Verdana', Arial, Helvetica, sans-serif;
	font-size:21px;
	font-weight:bold;
	-moz-border-radius:5px;
	-khtml-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	-moz-box-shadow:2px 2px 3px #ccc;
	-webkit-box-shadow:2px 2px 3px #ccc;
	box-shadow:2px 2px 3px #ccc;
}
 
#nav .clear{
	clear:both;
}
 
#nav ul{
	padding:0 0 0 5px;
	margin:0;
	list-style:none;
}
 
#nav li{
	float:left;
	margin:5px 10px 5px 0;
	-moz-border-radius:5px;
	-khtml-border-radius:5px;
	-webkit-border-radius:5px;border-radius:5px;
}
 
#nav li a{
	text-decoration:none;
	color:black;
	display:block;
	padding:10px 15px;
}
</style>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script src="jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<!-- rounded corners for IE -->
<script src="DD_roundies_0.0.2a-min.js"></script>
<script>
DD_roundies.addRule("#nav", "5px");
DD_roundies.addRule("#nav li", "5px");
</script>
<script>
$(document).ready(function(){
	$nav_li=$("#nav li");
	$nav_li_selected=$("#nav li.selected");
	$nav_li_a=$nav_li.children("a");
	var animSpeed=450; //fade speed
	var hoverTextColor="white"; //text color on mouse over
	var hoverBackgroundColor="black"; //background color on mouse over
	var textColor=$nav_li_a.css("color");
	var backgroundColor=$nav_li.css("background-color");
	//init selected
	$nav_li_selected.css("background-color",hoverBackgroundColor).children().css("color",hoverTextColor);
	$nav_li_a.hover(function() {
		var $this=$(this);
		$this.stop().animate({ color: hoverTextColor }, animSpeed).parent().stop().animate({ backgroundColor: hoverBackgroundColor }, animSpeed);
	},function() {
		var $this=$(this);
		if(!$this.parent().is(".selected")){
			$this.stop().animate({ color: textColor }, animSpeed).parent().stop().animate({ backgroundColor: backgroundColor }, animSpeed);
		}
	});
	//selected state
	$nav_li_a.click(function(){
		var $this=$(this);
		$this.stop().animate({ color: hoverTextColor }, animSpeed).parent().stop().animate({ backgroundColor: hoverBackgroundColor }, animSpeed).addClass("selected").siblings(".selected").removeClass("selected").stop().animate({ backgroundColor: backgroundColor }, animSpeed).children().stop().animate({ color: textColor }, animSpeed);
	});
});
</script>

Premièrement, je souhaiterais pouvoir centrer le texte sur l'arrière plan. Puisqu'il s'agit de balise <li> j'ai essayé d'intégrer dans le CSS de <ul> : display: inline puis de rajouter à <li> : text-align: center, mais ça n'a pas fonctionné. Peut-être ai-je mal placé ces codes.

Mon deuxième problème touche cette-fois au JavaScript, langage dans lequel je nage pour l'instant. Avec le code ci-dessus, le titre de la page visitée est surligné en noir. Lorsque l'on passe la souris sur le titre d'une autre page, celui-ci se surligne en blanc mais reste surligné même après le passage de la souris. Or, je souhaiterais qu'il se "désurligne" une fois la souris enlevée.
Savez-vous comment faire ?

Merci de votre aide.

[rodolphebrd]

bonjour,

pouvez-vous donnez le lien de votre tuto, cela permettra d'aller plus vite?

[Invité]

Je suis désolé je n'arrive pas à retrouver le site sur lequel je l'avais téléchargé. S'il vous le faut absolument, ce n'est pas grave je prendrai un autre menu.

[NoSmoking]

Bonjour,

Puisqu'il s'agit de balise <li> j'ai essayé d'intégrer dans le CSS de <ul> : display: inline puis de rajouter à <li> : text-align: center, mais ça n'a pas fonctionné.

un peu normal les éléments inline n'occupant que la place qu'il leur est nécessaire.

Il serait également souhaitable d'avoir la structure HTML pour pouvoir juger.

Concernant la partie javascript, il existe un forum pour cela!

[CCyrillus]

bonjour,
apparemment tu te trompe dans la façon de distribuer display et text-align.

<u>l devrait prendre text-align:center; et <li> display:inline-block; plutôt que inline, vue que tu met tes liens en display:block.

Cdt,