Position d'un menu

**Meloooo** · 24/01/2011, 14h11

Bonjour,
Mon menu se présente comme ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<div class="menu_gauche">
	<table style="top:-2px;position:absolute;" border="0" width="277px" height="26px">
		<tr>
			<td width="9px">&nbsp;</td>
			<td align="center"  bgcolor="white" style="border-right: 1px solid #d1dce3;color:#e3335a;" width="77px"><a href="particuliers.php">PARTICULIERS</a></td>
			<td align="center" style="border-right: 1px solid #d1dce3;" width="97px"><a href="professionnels.php">PROFESSIONNELS</a></td>
			<td align="center" style="border-right: 1px solid #d1dce3;" width="69px"><a href="offre.php">NOS OFFRES</a></td>
		</tr>
	</table>
</div>

Le code CSS associé à ce menu :

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
 
.menu_gauche
{
background-color:#e8eef1;
width:478px;
height:22px;
color:#3f6e89;
margin-left:305px;
top:55px;
display:block;
position:absolute;
z-index:1;
font-family:Arial;
font-size:10.5px;
}

Le problème c'est que mes liens sur mes menus ne fonctionnent pas

Cela vient de la position absolute, met pourtant pour mes liens je met bien le z-index, qui se situe au dessus des autres

Code :

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

1
2
3
4
5
6
 
.menu_gauche a
{
position:relative;
z-index:3;
}

Je voudrais donc rendre mes menus cliquables, merci de votre aide

**ornitho13** · 24/01/2011, 14h25

pour ma part ton code fonctionne (du moins sous chrome). Sous quel navigateur le testes tu?

**Meloooo** · 24/01/2011, 14h26

J'ai testé sous Firefox, IE, Safari, Opera, et Chrome et ca ne fonctionne pas

**ornitho13** · 24/01/2011, 14h29

le problème doit surement venir d'un autre élément de ta page. Peux tu en montrer un peu plus (le reste du code html et css de la page, si il y en a)

P.S. : je n'ai pas utilisé le ".menu_gauche a" dans mon test.

**Meloooo** · 24/01/2011, 14h33

Voici ma page un peu raccourci :

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
 
 
<title>titre site</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<!-- Code pour supprimer le clic droit et la séléction -->
 
<body>
<div class="menu_gauche">
	<table style="top:-2px;position:absolute;" border="0" width="277px" height="26px">
		<tr>
			<td width="9px">&nbsp;</td>
			<td align="center"  bgcolor="white" style="border-right: 1px solid #d1dce3;color:#e3335a;" width="77px"><a href="particuliers.php">PARTICULIERS</a></td>
			<td align="center" style="border-right: 1px solid #d1dce3;" width="97px"><a href="professionnels.php">PROFESSIONNELS</a></td>
			<td align="center" style="border-right: 1px solid #d1dce3;" width="69px"><a href="offre.php">NOS OFFRES</a></td>
		</tr>
	</table>
</div>
<div style="text-align:center;margin-left:780px;width:481px;height:22px;position:absolute;color:#3f6e89;top:55px;font-style:italic;font-weight:bold;font-family:Times New Roman;font-size:14px;">
E-sant&eacute; - Suivi et pr&eacute;vention
</div>
<div class="head">
	<table border="1" align="center" style="padding-top:82px;margin-right:29px;" height="323px" width="956px">
		<tr>
			<td valign="middle">&nbsp;</td>	
			<td width="301px" valign="middle">
			<div width="300px" style="margin-right:29px;"><div class="texte">De 1 jour &agrave; 100 ans, enfants, adultes, s&eacute;niors, s&eacute;dentaires, nomades, le portail HCBOX est fait pour vous.</div></div>
			</td>
		</tr>
	</table>
 
	<table height="32px">
		<tr>
			<td>&nbsp;</td>
		</tr>
	</table>
	<table border="0" width="408px" style="float:left;display:inline;margin-left:20px;">
		<tr>
			<td width="194px" align="left"><img src="images/IMAGE2.png"></td>
			<td width="23px">&nbsp;</td>
			<td valign="top" align="left" width="194px"><div class="texte">Qu'est ce que la HCBOX ?</div><div style="padding-top:11px" class="texte2"><font color="#e3335a">&bull;</font>contenu</div></td>
		</tr>
		<tr>
			<td colspan="3">
			<font color="#e3335a">&bull;</font>
			<div class="texte2" style="display:inline;"> contenu</div>
			<font color="#e3335a"><br /><div style="padding-top:11px"></div>&bull;</font>
			<div class="texte2" style="display:inline;">contenu</div>
			<font color="#e3335a"><br /><div style="padding-top:11px"></div>&bull;</font>
			<div class="texte2" style="display:inline;">contenu</div>
			<font color="#e3335a"><br /><div style="padding-top:11px"></div>&bull;</font>
			<div class="texte2" style="display:inline;">contenu</div>
			</td>
		</tr>
	</table>
	<table border="0" width="408px" style="padding-top:-300px;float:right;display:inline;margin-right:20px;">
		<tr>
			<td width="194px" align="left"><img src="images/photo.png"></td>
			<td width="23px">&nbsp;</td>
			<td valign="top" align="left" width="194px"><div class="texte">contenu</div>
			</td>
		</tr>
		<tr>
			<td colspan="3">
			<font color="#e3335a">&bull;</font>
			<div class="texte2" style="display:inline;"><strong>contenu</div>
			<font color="#e3335a"><br /><div style="padding-top:11px"></div>&bull;</font>
			<div class="texte2" style="display:inline;">contenu</div>
			</td>
		</tr>
		<tr>
			<td height="23px">&nbsp;</td>
		</tr>
		<tr>
			<td width="194px" align="left"><img src="images/photo2.png"></td>
			<td height="23px">&nbsp;</td>
			<td height="23px"><div class="texte">contenu</div></td>
		</tr>
		<tr>
			<td width="194px" align="left"><img src="images/fleche2.gif" ><div class="texte" style="display:inline;">contenu</div></td>
		</tr>
	</table>
	<table style="display:inline;margin-left:6px;" border="0" width="78px" height="340px">
		<tr>
			<td width="78px" align="center"><img width="1px" src="images/delimiteur.png" height="340px"></td>
		</tr>
	</table>
</div>
</body>
</html>

Après mon code 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
 
html
{
font-family:Times New Roman;
}
body{
background-image: url(images/bg.png);
background-repeat: repeat-x;
background-position: bottom center;
background-attachment: fixed;
height:100%; 
background-color:#d1dce3;
}
.head
{
width: 957px;
height:701px;
background:  url(images/2-PARTICULIERS.png) no-repeat top center; 
margin: 0 auto; 
padding: 0 auto;
position:relative;
z-index:2;
}
a
{
text-decoration:none;
color:#2a5065;
}
a:hover
{
color:#e3335a;
}
.menu_gauche a
{
position:relative;
z-index:3;
clear:both;
}
.menu_gauche
{
background-color:#e8eef1;
width:478px;
height:22px;
color:#3f6e89;
margin-left:305px;
top:55px;
display:block;
position:absolute;
z-index:1;
font-family:Arial;
font-size:10.5px;
clear:both;
}

**ornitho13** · 24/01/2011, 15h31

le problème vient du padding-top:82px dans ta table:

Code html :

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

1
2
3
<div class="head">
	<table border="1" align="center" style="padding-top:82px;margin-right:29px;" height="323px" width="956px">...

enleve le et ajoute au niveau de la class "head" ceci:

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
.head
{
width: 957px;
height:701px;
background:  url(images/2-PARTICULIERS.png) no-repeat top center; 
margin: 0 auto; 
padding: 0 auto;
position:relative;
z-index:2;
margin-top:82px;
}

Enfin de manière générale, ton code html n'est pas très approprié pour la structure de ta page.
Il faut utiliser des tables uniquement pour afficher des données tabulaire et non pas pour structurer ta page.
De plus, tu utilises des position:absolute alors que ce n'est pas forcément utile.

**Meloooo** · 24/01/2011, 15h57

Merci de votre réponse,
Mes liens fonctionnent maintenant, mais mon menu n'est plus positionné comme je le souhaite...

**Meloooo** · 25/01/2011, 10h13

Bonjour,
J'ai écouté votre conseil, et j'ai mis mon menu en div et non en table ce qui donne :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div class="head2">
	<div class="menu_gauche" align="left">
		<div width="277px" height="26px" style="padding-top:3px;">
			<div style="display:inline;" width="9px">&nbsp;</div>
			<div style="display:inline;border-right: 1px solid #d1dce3;color:#e3335a;"  width="77px"><a href="particuliers.php">PARTICULIERS <div style="display:inline" width="5px">&nbsp;</div></a></div>
			<div style="display:inline" width="5px">&nbsp;</div>
			<div style="display:inline;border-right: 1px solid #d1dce3;color:#e3335a;" width="97px"><a href="professionnel.php">PROFESSIONNELS <div style="display:inline" width="5px">&nbsp;</div></a></div>
			<div style="display:inline" width="5px">&nbsp;</div>
			<div style="display:inline;border-right: 1px solid #d1dce3;color:#e3335a;" width="69px"><a href="offre.php">NOS OFFRES <div style="display:inline" width="5px">&nbsp;</div></a></div>
		</div>
	</div>
</div>

Et le code 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
 
.head2
{
width: 957px;
height:507px;
background:  url(images/2-PARTICULIERS.png) no-repeat top center; 
margin: 0 auto; 
padding: 0 auto;
position:relative;
}
.menu_gauche
{
position:absolute;
z-index:0;
background-color:#e8eef1;
width:478px;
height:22px;
color:#3f6e89;
top:50px;
font-family:Arial;
font-size:10.5px;
}

Je voudrais mettre mon menu en dessous de mon head, mais apparement les z-index ne sont pas pris en compte.
Merci de votre aide

**Max-oo** · 25/01/2011, 14h53

Bonjour,

Je crois que les z-index doivent etre spécifiés sur des éléments qui ont le meme type de position. La, tu as des types relative et absolute mélangés dans la meme pile d'éléments. Le probleme vient peut-etre de la.

De plus, j'ai bien peur que les z-index fassent partie de ces fonctions géniales du css qu'IE ne parvient sait pas bien gérer.

Tu auras sans doute des problemes avec IE et les z-index.

**Meloooo** · 25/01/2011, 15h35

Bon étant donné que j'étais pressée, j'ai mis directement mon menu dans mon div qui contient mon image de fond...
Et j'ai donc bien positionné mon texte de menu...
Il me semble que les z-index fonctionnent même si ils ont pas le même type de position...

**Max-oo** · 25/01/2011, 15h43

Ah bon? il faudra que je réessaie!
Sur IE aussi ca fonctionne?

-> Ca fait un bout de temps que j'ai essayé

[EDIT]
En fait c'est quand il n'y a pas de position spécifiée que ca ne marche pas

Position d'un menu

Positionnement en CSS

Discussions similaires

Partager

Partager