Menu a onglet

Version imprimable

02/03/2008, 15h57
ac/dc

Menu a onglet

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

http://pix.nofrag.com/c/b/a/c09ec5f6...7819a14eef.jpg

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 :)
02/03/2008, 16h17
Kerod

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

C'est pas bête ... ;)

(x)html :

Code:

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:

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');
}

02/03/2008, 20h39
Kerod

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
03/03/2008, 11h14
ac/dc

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 :)
06/03/2008, 08h46
ac/dc

Bonjour,
Donc pour conclure ce post, j'ai finalement trouvé la solution avec un tableau. Voici simplement comment j'ai fais :

Code:

<table cellspacing="0" cellpadding="0">

Comme ça, les 2 lignes se touchent. Parfait ... :D