Alignement menu css

**Jesmar** · 05/08/2008, 15h32

alors voila j'ai crée un menu à partir d'un exemple trouvé sur internet avec des balises dl dt et dd
le hic est que je n'arrive pas ou je ne sais pas comment aligner le sous-menu par rapport au menu, il est complètement décalé
j'ai tout réglé dans le css avec les balises dl dd et dt, alors j'aimerais si possible à ne pas avoir à les changer par ul et li

j'ai essayé de simplifier le code au maximum en enlevant requêtes et autres (en espérant ne pas en avoir trop enlevé)
merci

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<div id="nav_box">
	<div class="nav">
		<dl>
			<dt id="<?php echo $nav; ?>" onmouseover="nav_visible('<?php echo $subnav; ?>');">
                           	<a href="#"><b><?php echo $data_nav[mysql_field_name($return_request_nav, $i_nav)]; ?></b></a>
                        </dt>
                        <dd id="<?php echo $subnav; ?>" onmouseover="nav_visible('<?php echo $subnav; ?>');" onmouseout="nav_visible('');">
	                    	<ul>
<?php
					while($data_subnav = mysql_fetch_assoc($return_request_subnav))
					{
?>
<li>
<a href="<?php echo $data_subnav["subnav_url"]; ?>"><?php echo $data_subnav["category_name"]; ?></a>
</li>
<?php
					}
?>
				</ul>
                       	</dd>
	        </dl>
	</div>
 
        <!--<div class="nav">
		<dl>
			<dt id="nav_installations" class="<?php echo $current_employes; ?>" onmouseover="nav_visible();"><a href="employes.php" title="Voir la liste du personnel"><b>Employ&eacute;s</b></a></dt>
		</dl>
	</div>
        etc-->
</div>

js

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
 
window.onload = nav_visible;
function nav_visible(id)
{
	var d = document.getElementById(id);
	// Maximum de 9 sous-menu
	for(var i = 1 ; i <= 10 ; i++)
	{
		if(document.getElementById("subnav" + i))
		{
			document.getElementById("subnav" + i).style.display = "none";
		}
	}
	if(d)
	{
		d.style.display = "block";
	}
}

css

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
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
 
/* ********************************************************* */
/* Menu */
/* ********************************************************* */
 
#nav_box
{
	margin:0 0 5px 0;
	list-style:none;
	border-bottom:#48A7DB solid 5px;
	background-color:#FFFFFF;
	width:100%;
	height:27px;
	line-height:27px;
}
 
.nav dl, .nav dt, .nav dd, .nav ul, .nav li
{
	list-style-type:none;
}
 
.nav dl dt a
{
	float:left;
	margin-left:10px; 
	padding:0 0 0 7px;
	display:block;
	height:27px;
	line-height:27px;
	color:#AAAAAA;
	font-family:arial, verdana, sans-serif;
	font-weight:bold;
	font-size:11px;
	text-decoration:none;
	text-align:center;
	cursor:pointer; 
}
 
.nav dl dt a b
{
	float:left;
	margin:0;
	padding:0 14px 0 7px;
	display:block;
}
 
.nav dl dt a:hover
{
	color:#000;
	background:url(../images/menu_onglet.png);
	/*font-weight:bold;*/
}
 
.nav dl dt a:hover b
{
	background:url(../images/menu_onglet.png) no-repeat right;
}
 
.nav dl dt.nav_current a
{
	color:#000;
	background:url(../images/menu_onglet.png);
}
 
.nav dl dt.nav_current a b
{
	background:url(../images/menu_onglet.png) no-repeat right;
}
 
/* ********************************************************* */
/* Sous-menu */
/* ********************************************************* */
 
.nav dl dd
{
	position:absolute;
	margin:38px 0 0 0;
	padding:5px;
	display:none;
	width:130px;
	height:auto;
	background-color:Gray;
	border:1px solid #000000;
	opacity:0.95;
	filter:alpha(opacity=95);
}
 
.nav dl dd ul
{
	margin:0;
	padding:0;
}
 
.nav dl dd ul li
{
	margin:0;
	padding:0;
}
 
.nav dl dd ul li a
{
	position:relative;
	margin:0 0 -24px 0;
	padding:0 0 0 5px;
	width:auto;
	height:auto;
	text-align:left;
	font-size:10px;
	text-decoration:none;
	display:block;
}
 
.nav dl dd ul li a:hover
{
	margin:-5px 0 -27px -1px;
	padding:5px 0 1px 5px;
	background-color:#48A7DB;
	border:1px solid #227EB0;
	text-decoration:none;
}
 
.nav dl dd ul li a.subnav_denied
{
	color:#FFA500;
	font-weight:bold;
}

**c_s_s** · 05/08/2008, 20h52

Bonjour,

Ton code HTML n'est pas exploitable, il reste encore du PHP dedans.

Tu n'aurais pas une page en ligne plutôt ?

**Jesmar** · 06/08/2008, 10h48

ya rien en ligne
j'ai supprimé tout le php

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
 
<div id="nav_box">
  <div class="nav">
    <dl>
      <dt id="nav1" onmouseover="nav_visible('subnav1');">
        <a href="#"><b>Menu 1</b></a>
      </dt>
      <dd id="subnav1" onmouseover="nav_visible('subnav1');" onmouseout="nav_visible('');">
        <ul>
          <li><a href="coucou.php">Sous-menu 1.1</a></li>
          <li><a href="coucou.php">Sous-menu 1.2</a></li>
          <li><a href="coucou.php">Sous-menu 1.3</a></li>
        </ul>
      </dd>
    </dl>
  </div>
 
  <div class="nav">
    <dl>
      <dt id="nav2" onmouseover="nav_visible('subnav2');">
        <a href="#"><b>Menu 1</b></a>
      </dt>
      <dd id="subnav2" onmouseover="nav_visible('subnav2');" onmouseout="nav_visible('');">
        <ul>
          <li><a href="coucou.php">Sous-menu 2.1</a></li>
          <li><a href="coucou.php">Sous-menu 2.2</a></li>
          <li><a href="coucou.php">Sous-menu 2.3</a></li>
        </ul>
      </dd>
    </dl>
  </div>
 
  <!-- etc -->
</div>

**Jesmar** · 07/08/2008, 12h54

j'ai essayé de me baser sur un aute exemple qui ne fonctionne qu'avec des ul et li mais j'arrive pas à le faire fonctionner

l'autre truc serait de donner un id à chaque sous-menu et de les placer à des endroits fixes avec le css mais ç'est vraiment pas pratique
doit y avoir un truc pour que le sous-menu se place automatiquement sous le menu et ne pas partir en traviole comme c le cas maintenant

**Jesmar** · 07/08/2008, 15h50

je me rappelle maintenant où j'ai pris mon code, au même endroit qu'indique cet utilisateur http://www.developpez.net/forums/sho...d.php?t=596545

Alignement menu css

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager