Discussion :

[DrWilly]

Bonjour à tous !

Pour rajeunir mon site, je lui injecte quelques effets javascript mais je rencontre un problème très étrange.

Je souhaite que lorsqu'un utilisateur se connecte avec son login - psw, le menu apparaisse petit à petit avec un slideDown. Jusque là rien de très compliqué, j'utilise cette fonction un peu partout sur mon site.

Seulement dans le cas du menu, une propriété css (un float:left) empêche l'effet de se dérouler correctement et j'ignore pourquoi. Si je laisse ce float, les liens apparaisse directement, sans effet. Si je retire ce float, tout se passe correctement. Gné ?

Voici un peu de code,

Les css utilisées :

Code :

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
#bloc_menu
{
	float: right;
	width: 158px;
	padding-top: 10px;
	margin-right: 18px;
}
#menu_sections
{
	float: right;
	margin-top: 7px;
	padding-top: 5px;
	padding-right: 8px;
	padding-bottom: 5px;
	text-align: center;
}
 
#menu_sections a
{
	text-align:center;
	padding: 2px 15px;
	line-height: 33px;
	text-decoration: none;
	font-size : 20px;
	color: #EFA229;
	font-weight: bold;
	border: 1px solid #D3E784;
	width: 110px;
	letter-spacing:2px;
        float: left;
}
#menu_sections a:hover
{
	background-color: #CEDF73;
	border: 1px solid #A5BA4A;
}

C'est ce tout dernier float qui pose problème.

L'HTML :

Code :

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
<div id="bloc_menu">
   <div id="menu_sections">
	<div id="access_accueil">
		<a href="index.php?page=article">Accueil</a>
	</div>
	<div id="access_album" style="display:none;">
		<a href="index.php?page=album">Album</a>
	</div>
	<div id="access_staff" style="display:none;">
		<a href="index.php?page=contact">Le Staff</a>
	</div>
	<div id="access_pub" style="display:none;">
		<a href="index.php?page=publication">Publier</a>
	</div>
   </div>
</div>

Ceci est le code du menu qui flotte à droite.

Et le javascript :

Code :

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

1
2
3
4
5
6
7
function change_content_menu(){
	$("#access_album").slideDown("slow",function(){
		$("#access_staff").slideDown("slow",function(){
			$("#access_pub").slideDown("slow");
		});
	}); 
}

De cette manière les liens apparaissent un par un.

Voila le constat... Tout marche, uniquement si je retire le dernier float des css. Mais c'est quoi le rapport ?! J'ai effectué une serie de tests et j'ai remarqué que :
-> L'effet marche si j'utilise fadeIn au lieu de slideDown ()
-> Aucun effet ne marche si j'utilise les effet jquery UI (le but final est pourtant d'utiliser le slide de UI)
-> Tout les effets marche si je les applique sur la balise "menu_sections" mais ca ne m'arrange pas car je doit pouvoir afficher certains liens en fonction du niveau de l'utilisateur.

A propos de la propriété Float, elle est là car...
... ben en fait j'en sais rien je l'ai mise là il y a bien longtemps et je ne comprend pas du tout pourquoi. Ce que je sais par contre, c'est que si je la retire, la zone cliquable de mes liens n'est plus dutout celle que je souhaite. Ils ne sont plus centré, plus uniformisé en taille et cette zone prend la taille stricte de mes liens. Bref pour le "hover" ca donne vraiment mal.

Malgré le pâté de texte, quelqu'un à une idée de comment résoudre mon problème ?

Pourquoi l'effet n'est visible que si je retire ce float ? Et d'ailleurs, a quoi sert-il vraiment ce float ?

Merci !

[Bovino]

Tu peux aller voir ici pour un début de réponse

[le_chomeur]

ou plus simplement , parce que float left , fait sortir tes éléments du flux html ( en l'occurence tes liens, il faut donc définit une hauteur...

OU !

dans <div id="menu_sections">
tout a la fin , rajouter une div avec la propriété clear:both
de 1px de haut