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.

Position d'un menu

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager