Discussion :

[Jeremy60500]

Bonsoir,

Sur mon site, je dispose d'un menu déroulant. Je teste les fonctionnalités des utilisateurs pour chaque menu, et en fonction de ses autorisations, les menus apparaissent ou n'apparaissent pas.
Le problème est que :
- Pour l'utilisateur du groupe administrateur, il n'y a pas de problème le menu s'affiche correctement.
- En revanche pour les autres, les menus déroulant se retrouvent décalé.

J'illustre mes propos :
- Pour l'utilisateur administrateur qui affiche tout, le menu déroulant s'affiche correctement :


- Pour l'utilisateur à l'accès restreint, le menu déroulant ne s'affiche pas correctement et est complètement décallé :


Voici mon code HTML :

Code html :

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
<div align="center"><img src="images/header.png"></div>
<div id="menu">
  <ul>
    <li class="l1"><a href="index.php?page=accueil"><img src="images/arcelorpetit1.fw.png" class="alignement-gauche"></a></li>
    <li class="l1"> 
    <?php if(testACL('inventaire') ):?>
    <a href="index.php?page=inventaire">Inventaire</a>
      	<ul class="sousmenu" id="menu_inventaire">
            <li><a href="index.php?page=inventaire/ordinateur&action=visualiser"><img src="images/icon/pc.png" class="alignement-gauche">Ordinateurs</a></li>
        	<li><a href="index.php?page=inventaire/serveur&action=visualiser"><img src="images/icon/serveur.png" class="alignement-gauche">Serveurs</a></li>
            <li><a href="index.php?page=inventaire/reseau&action=visualiser"><img src="images/icon/reseau.png" class="alignement-gauche">Réseaux</a></li>
        	<li><a href="index.php?page=inventaire/imprimante&action=visualiser"><img src="images/icon/imprimante.png" class="alignement-gauche">Imprimantes</a></li>
      	</ul>
    </li>
    <?php endif; ?>
    <?php if(testACL('assistance') ):?>
    <li class="l1"><a href="index.php?page=assistance">Assistance</a>
             <ul class="sousmenu" id="menu_assistance">
            <li><a href="index.php?page=ticket/incident&action=ajouter"><img src="images/icon/creerunticket.png" class="alignement-gauche">Créer un ticket</a></li>
            <li><a href="index.php?page=ticket/incident&element=resolution"><img src="images/icon/ticketedit.png" class="alignement-gauche">Résoudre un ticket</a></li>
            <li><a href="index.php?page=ticket/incident&element=ticket_actuel"><img src="images/icon/ticketencours.png" class="alignement-gauche">Tickets en cours</a></li>
        	<li><a href="index.php?page=ticket/incident&element=ticket_resolu"><img src="images/icon/ticketscloture.png" class="alignement-gauche">Tickets clôturés</a></li>
      	</ul>
    </li>
    <?php endif; ?>
    <?php if(testACL('interface') ):?>
        <li class="l1"><a href="index.php?page=interface">Mon Profil</a>
             <ul class="sousmenu" id="menu_profil">
            <li><a href="index.php?page=interfaces/profil&element=mestickets"><img src="images/icon/mestickets.png" class="alignement-gauche">Mes tickets</a></li>
            <li><a href="index.php?page=interfaces/profil&element=mesperipheriques"><img src="images/icon/peripherique.png" class="gauche">Mes périphériques</a></li>
            <li><a href="index.php?page=message/messagerie&action=afficher"><img src="images/icon/message.png" class="gauche">Messages</a></li>
      	</ul>
    </li>
    <?php endif; ?>
    <?php if(testACL('administration') ):?>
		<li class="l1"><a href="index.php?page=administration">Administration</a>
         <ul class="sousmenu" id="menu_administration">
            <li><a href="index.php?page=admin/utilisateur&action=visualiser"><img src="images/icon/user.png" class="alignement-gauche">Utilisateurs</a></li>
        	<li><a href="index.php?page=admin/groupe&action=visualiser"><img src="images/icon/group.png" class="alignement-gauche">Groupes</a></li>
            <li><a href="index.php?page=admin/autorisation&action=visualiser"><img src="images/icon/setting.png" class="alignement-gauche">Autorisations</a></li>
            <li><a href="index.php?page=admin/chemin&action=visualiser"><img src="images/icon/chemin.png" class="alignement-gauche">Chemin</a></li>
      	</ul>
    </li>
    <?php endif; ?>

Mon code CSS :

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
#menu {
	width:1000px;
}
 
#menu>ul{
	width:1000px;
}
 
#menu ul {
	list-style-type: none;
	height:39px;
	background: #e3e3e3;
	background: -moz-linear-gradient(top, #ccc, #999);
	background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));
	-moz-box-shadow: 1px 1px 3px #333;
	-webkit-box-shadow: 1px 1px 3px #333;
	box-shadow:0px 0px 0px #333;
	margin:0;	
	padding:0;
	position:relative;
}
 
#menu ul li.l1 {
	display:inline;
}
 
#menu ul>li.l1>a {
	float:left;
}
 
#menu ul>li.l1 a {
	padding: 10px 20px 10px 20px;
	color: #454545;
	font-size:15px;
	color:#464646;
	text-decoration:none;
}
 
#menu ul>li.l1>a:hover {
	padding: 10px 20px 10px 20px;
	list-style-type:none;
	color:#ddd;
	text-shadow:0 1px 0 black;
	background: #747474;
	background:-moz-linear-gradient(top, #444, #555);
	background:-webkit-gradient(linear, left top, left bottom, from(#444), to(#555));
}
 
#menu ul ul.sousmenu {
	display:none;
	top:37px;
	float:none;
	margin:2px;
	text-decoration:none;
	border-radius: 0 0 4px 4px;
	position:absolute;
}
 
#menu ul li:hover ul.sousmenu {
	display:block;
}
 
#menu ul.sousmenu>li a:hover {
	color:black;
}
 
 
#menu ul.sousmenu>li a {
	text-decoration:none;
	display:block;
	color:#fff;
	font-size:13px;
}
 
#menu ul#menu_inventaire {
	left:83px;
	width:150px;
	height:150px;
}
 
#menu ul#menu_assistance {
	left:197px;
	width:200px;
	height:150px;
}
 
#menu ul#menu_administration {
	left:428px;
	width:230px;
	height:150px;
}
 
#menu ul#menu_profil {
	left:315px;
	width:190px;
	height:130px;
}

Le problème doit venir du fait que j'aligne mes colonnes via mes "left". Donc forcément, leur position est fixe. Pouvez-vous m'aider pour les rendre dynamique ?
Merci beaucoup

[pipala]

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
37
38
39
40
41
42
43
44
<div align="center"><img src="images/header.png"></div>
<div id="menu">
  <ul>
    <li class="l1"><a href="index.php?page=accueil"><img src="images/arcelorpetit1.fw.png" class="alignement-gauche"></a></li>
    <li class="l1"> 
    <?php if(testACL('inventaire') ):?>
    <a href="index.php?page=inventaire">Inventaire</a>
      	<ul class="sousmenu" id="menu_inventaire">
            <li><a href="index.php?page=inventaire/ordinateur&action=visualiser"><img src="images/icon/pc.png" class="alignement-gauche">Ordinateurs</a></li>
        	<li><a href="index.php?page=inventaire/serveur&action=visualiser"><img src="images/icon/serveur.png" class="alignement-gauche">Serveurs</a></li>
            <li><a href="index.php?page=inventaire/reseau&action=visualiser"><img src="images/icon/reseau.png" class="alignement-gauche">Réseaux</a></li>
        	<li><a href="index.php?page=inventaire/imprimante&action=visualiser"><img src="images/icon/imprimante.png" class="alignement-gauche">Imprimantes</a></li>
      	</ul>
    </li>
    <?php endif; ?>
    <?php if(testACL('assistance') ):?>
    <li class="l1"><a href="index.php?page=assistance">Assistance</a>
             <ul class="sousmenu" id="menu_assistance">
            <li><a href="index.php?page=ticket/incident&action=ajouter"><img src="images/icon/creerunticket.png" class="alignement-gauche">Créer un ticket</a></li>
            <li><a href="index.php?page=ticket/incident&element=resolution"><img src="images/icon/ticketedit.png" class="alignement-gauche">Résoudre un ticket</a></li>
            <li><a href="index.php?page=ticket/incident&element=ticket_actuel"><img src="images/icon/ticketencours.png" class="alignement-gauche">Tickets en cours</a></li>
        	<li><a href="index.php?page=ticket/incident&element=ticket_resolu"><img src="images/icon/ticketscloture.png" class="alignement-gauche">Tickets clôturés</a></li>
      	</ul>
    </li>
    <?php endif; ?>
    <?php if(testACL('interface') ):?>
        <li class="l1"><a href="index.php?page=interface">Mon Profil</a>
             <ul class="sousmenu" id="menu_profil">
            <li><a href="index.php?page=interfaces/profil&element=mestickets"><img src="images/icon/mestickets.png" class="alignement-gauche">Mes tickets</a></li>
            <li><a href="index.php?page=interfaces/profil&element=mesperipheriques"><img src="images/icon/peripherique.png" class="gauche">Mes périphériques</a></li>
            <li><a href="index.php?page=message/messagerie&action=afficher"><img src="images/icon/message.png" class="gauche">Messages</a></li>
      	</ul>
    </li>
    <?php endif; ?>
    <?php if(testACL('administration') ):?>
		<li class="l1"><a href="index.php?page=administration">Administration</a>
         <ul class="sousmenu" id="menu_administration">
            <li><a href="index.php?page=admin/utilisateur&action=visualiser"><img src="images/icon/user.png" class="alignement-gauche">Utilisateurs</a></li>
        	<li><a href="index.php?page=admin/groupe&action=visualiser"><img src="images/icon/group.png" class="alignement-gauche">Groupes</a></li>
            <li><a href="index.php?page=admin/autorisation&action=visualiser"><img src="images/icon/setting.png" class="alignement-gauche">Autorisations</a></li>
            <li><a href="index.php?page=admin/chemin&action=visualiser"><img src="images/icon/chemin.png" class="alignement-gauche">Chemin</a></li>
      	</ul>
    </li>
    <?php endif; ?>

Le problème vient sûrement des deux lignes en rouge que tu dois inverser, car le début du tag <li> doit être à l'intérieur du if, sinon il sera toujours là, ce qui va causer le décalage.

[Jeremy60500]

Non ça ne marche pas.

Je pense que cela vient des "left:..." que j'attribue à chaque sous menus...
Comment faire autrement ?

[NoSmoking]

Bonjour,

Je pense que cela vient des "left:..." que j'attribue à chaque sous menus...

regarde la construction et le CSS de http://css.developpez.com/galerie/?p...orizontaux#MH1