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.