menu css style 3 suisses

Version imprimable

bonjour a vous, je suis nouveau dans ce forum , j'ai un petit souci dans un menu qui a le style du site web 3suise

des catégories dans des div , ces div sont en mode visibility hidden alors , onMouseOver il deviennent en visible mais le problème est dans le positionnement je positionne ses div en 1er plan avec z-index:1
et le sous contenu en z-index:0 mais en cliquant sur le menu les div se positionnent en haut tout a droite j'ai essai tout position:absolute , tout mais sa marche pas du tout si sa marche dans un navigateur pa exemple IE alors firefox non
voila le code

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
body {margin-top:0px;
text-align:center;
font-size:12px;
color:#333333;
font-family: Arial, Verdana,Helvetica, sans-serif;}
.contenu{text-align:left;position:relative;padding:0;margin:0 auto;width:924px;}
#logo{
margin-top:15px;
margin-bottom:0px;
float:left;
width:193px;
height:65px;
background:url(../images/logo.png);
}
#pub{
float:left;
margin:10px 10px 10px 20px;
width:70%;}
#insc{
clear:both;
font-size:11px;
text-align:right;
padding-right:30px;}
/*----------------------*/
#menu{
clear:both;
}
ul{
list-style:none;
margin:0px;
padding:0px;
float:left;}
li{
float:left;}
.menu li a { 
 display:block; 
 color:#333333;
 font-size:12px; 
 font-weight:bold; 
 text-decoration:none; 
 font-family:arial, verdana, sans-serif; 
 text-align:center; 
 margin-top:8px;
 padding:6px 10px 6px 10px;
 cursor:pointer; 
 }
.divMenu{// les div Menu prendrant la mm class
 
width:100%;
background-color:#FEFEFE;
border:2px solid #3366FF;
width:400px;;
height:250px;
z-index:2;
clear:both;
float:left;
position:absolute;}
#sous{// le contenu de la page en ariere plan
	z-index:0px;
	clear:both;
	margin-top:0px;
	background-image:url(../images/menu_02.png);
 
}
#info{
border:2px solid #66FF33;//style de chauque sous menu
}

//Code HTML

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<title>1er comparateur des prix en algerie, vente en ligne Publicit&eacute;</title>
<script type="text/javascript">
div = {
                show: function(elem) {
                        document.getElementById(elem).style.visibility = 'visible';
                },
                hide: function(elem) {
                        document.getElementById(elem).style.visibility = 'hidden';
                }
        }
 
/*
</script></head>
<body>
<div class="contenu">
 
<div id="pub">
</div>
<div id="insc">Se Connecter | Inscription | Aide </div>
<div id="menu">
<ul class="menu">
<li><a href="#" onmouseover="div.show('div11')" onmouseout="div.hide('div1');" >menu1</a></li>
<li><a href="#" onmouseover="div.show('div2')" onmouseout="div.hide('div2');" >menu2 </a></li>
<li><a href="#" onmouseover="div.show('div3')" onmouseout="div.hide('div3');" >Informatique</a></li>
</ul>
 
<div class="divMenu" style="visibility:hidden" id="div1">sous m1</div>
<div class="divMenu" style="visibility:hidden" id="div2">sous m2</div>
<div class="divMenu" style="visibility:hidden" id="div3">sous m3</div>
</div>
<div id="sous">
  <p>va</p>
  <p>CONTENU de LA PAGE................</p>
  <p>fsdf</p>
  <p>dfsdf</p>
  <p>&nbsp;</p>
</div>
</div>
</body>
</html>

sa peut venir de la fonction js le style hidden, en tout les cas j'ai presque tout essayé et sa n'a pas marché

encor moi

voila j'ai changer le code js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
function aff(monDiv1)
{
	var pr = document.getElementById(monDiv1);
   if (pr.style.display = "")
	     pr.style.display = 'bloc';
}
function cache(monDiv){
var   mt = document.getElementById(monDiv);	
if (mt.style.display =! "")
 mt.style.display ='none';
}

et le code 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
 
.menu li a { 
 display:block; 
 color:#333333;
 font-size:12px; 
 font-weight:bold; 
 text-decoration:none; 
 font-family:arial, verdana, sans-serif; 
 text-align:center; 
 padding:6px 10px 6px 10px;
 cursor:pointer;
 
 }
.divMenu{les div menu
float:left;
background-color:#FEFEFE;
border:2px solid #3366FF;
width:400px;;
height:250px;
z-index:500;
 
}
#sous{//contenu en ariere plan
	z-index:0px;
	clear:both;
	margin-top:10px;
	background-image:url(../images/menu_02.png);
 
 
}

le code HTLM

Code:

1
2
3
4
5
6
7
8
9
10
11
 
<body>
<div class="contenu">
<div class="menu">
<ul class="menu">
<li><a href="#" onmouseover="aff('menu1)" onmouseout="cache('menu1');" >menu1</a></li>
<li><a href="#" onmouseover="aff(menu2)" onmouseout="cache('menu2');" >menu2 </a></li>
</ul>
</div>
<div class="divMenu" style="display:none" id="menu1">informatique</div>
<div class="divMenu" style="display:none" id="menu2">image et son</div><div id="sous">bla bla bla<br />

sa ne marche toujour pas :( surtou dans IE 7

23/03/2009, 22h04
desert

Bonjour, n'est-ce pas simplement un menu déroulant que tu recherches à faire ?
Si oui, tu peux regarder dans la galerie pour les exemples ou encore lire ce tutoriel.
23/03/2009, 22h26
datawebsolution

no

:cry:
pour le menu simple c'est vrai que c'est facile , mais dans mon cas c'est autre chose , il a le style du site web "3suises" c'est un large menu et les sous menu sont des div qui ont des bordures a colour différentes, j'ai mis en place la fonction js cité en haut mais dans explorer le div ne se cache pas il reste vigé dans sa position et le contenu en ariere plan de décale et redésant toute en bas l'or du onMousOver décalage :?
23/03/2009, 23h25
GihefBey

Mets la page en ligne et donne-nous son adresse.
On aura tout.

-