Menu a onglet

**ac/dc** · 02/03/2008, 15h57

Bonjour, je cherche à faire un menu à onglet. Voici l'image d'illustration :

J'arrive pas à positionner mon sous menu blanc au même niveau que le menu qui a été cliqué. J'arrive gràce au margin-left : 50px; mais si je change de résolution, ça ne fonctionne plus. J'ai pensé au tableau, avec la colonne, pour mettre pile au même niveau, mais avec les bordures du tableau, même à "none", me mets un espace du coup entre le menu et le sous menu, alors que je veux qu'ils soient collés. Donc je ne vois pas du tout comment faire maintenant ... merci

**Kerod** · 02/03/2008, 16h17

Si tu postais ton code (X)HTML et CSS, ça nous aiderait pour t'aider

**ac/dc** · 02/03/2008, 16h27

C'est pas bête ...

(x)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
 
<div id = "menu">
    <div class = "menu_gauche_non_selectionne"></div>
    <div class = "element_menu_non_selectionne">Menu 1</div>
    <div class = "menu_droite_non_selectionne"></div>
 
    <div class = "menu_gauche_selectionne"></div>
    <div class = "element_menu_selectionne">Menu 2</div>
    <div class = "menu_droite_selectionne"></div>
</div>	
 
<div id = "sous_menu">
    <div id = "sous_menu_gauche"></div>
    <div class = "element_sous_menu">Sous menu 1</div>
    <div class = "element_sous_menu">Sous menu 2</div>
    <div class = "element_sous_menu">Sous menu 3</div>
    <div id = "sous_menu_droite"></div>
</div>

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
 
#menu
{
	width : 750px;
	height : 23px;
	margin : auto;
	margin-top : 10px;
	/*border: black 1px solid;*/
}
 
.menu_gauche_selectionne
{
	float : left;
	width : 10px;
	height : 23px;
	background-image : url('images/onglet_gauche.gif');
	cursor : pointer;
}
 
.menu_gauche_non_selectionne
{
	float : left;
	width : 10px;
	height : 23px;
	background-image : url('images/onglet_gauche_non_selectionne.gif');
	cursor : pointer;
}
 
.element_menu_selectionne
{
	background-color : white;
	color : blue;
	float : left;
	height : 23px;
	cursor : pointer;
}
 
.element_menu_non_selectionne
{
	background-color : blue;
	float : left;
	height : 23px;
	color : white;
	cursor : pointer;
}
 
.menu_droite_selectionne
{
	float : left;
	width : 10px;
	height : 23px;
	margin-right : 2px;
	background-image : url('images/onglet_droite.gif');
	cursor : pointer;
}
 
.menu_droite_non_selectionne
{
	float : left;
	width : 10px;
	height : 23px;
	margin-right : 2px;
	background-image : url('images/onglet_droite_non_selectionne.gif');
	cursor : pointer;
}
 
#sous_menu
{
	/*border: red 1px solid;*/
	margin : 0px;
	width : 750px;
	margin : auto;
	height : 23px;
	text-align : left;
}
 
#sous_menu_gauche
{
	float : left;
	width : 10px;
	height : 23px;
	background-image : url('images/sous_onglet_gauche.gif');margin-left : 67px;
}
 
.element_sous_menu
{
	float : left;
	background-color : white;
	height : 23px;
	padding-right : 7px;
	cursor : pointer;
}
 
#sous_menu_droite
{
	float : left;
	width : 12px;
	height : 23px;
	background-image : url('images/sous_onglet_droite.gif');
}

**Kerod** · 02/03/2008, 20h39

De manière générale on utilise le balisage ul li. C'est plus approprié pour la construction d'un menu.

par ailleurs l'une des solutions est d'inclure le menu et le sous-menu dans le même bloc.

Si je puis me permettre tu as des exemples de menus avec source dans la galerie CSS : http://css.developpez.com/galerie/?p...us-horizontaux

**ac/dc** · 03/03/2008, 11h14

Oui, les exemples que j'ai vu sur le net sont beaucoup avec <ul> et <li>. J'étais partit sur mon exemple avec les div. Je vais voir avec l'incorporation des 2 menus, ça va être un beau casse-tête je pense. Je vais voir ça ....

Merci