Discussion :

[sadkat]

Bonjour, j'ai utilisé un tuto (http://dmouronval.developpez.com/tut...e-avec-jquery/) pour créer mon menu.

Mais dans l'exemple du tuto il n'y avait pas de contenue sous le menu... Donc mon problème s'est posé plus tard, dès que je passe ma souris sur un des onglets tous mon site se décale !

J'ai tenté le z-index mais sans succès. J'ai vraiment pas envie de recréer un autre menu, d'autant que celui ci me plait bien... Pouvez vous m'aider ?

Voici mon site : ici

Tout le CSS est dans "style.css" en voici une partie :

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
 
/* menu */
#menu{
    border-bottom : #cacaca solid 2px ;
    border-top : #efefef solid 2px ;
    height: 50px;
    background-color: #FFF;
    padding:0 0 0 20px;
    text-align: center;
    font-size: 16px;   
}
 
#menu ul{
    margin:0; 
    padding:0;
    list-style-type : none;
}
 
#menu li {
    width:130px;
    height:50px;
    float:left;
    color:#c9c8c8;
    text-align:center;
    overflow:hidden;
    /*  position: inherit;  */
}
 
#menu a{
    color:#9F9F9F;
    text-decoration:none;
}
 
#menu .subtext{
    font-size: 12px;
    font-weight: normal;
    text-align:left;
    padding-left: 5px;
    /*    z-index: 1000; */
}
 
#menu p.subtext a:hover{
    font-weight:bold;
}
 
/*onglet Color Classes*/
#menu .onglet{
    background:#FFF /*url('images/onglet-item-bg.jpg')*/ top left no-repeat;
    color: #c9c8c8;
    font-weight: bold;
}
#menu .onglet_click{
    background:#FFF url('http://www.cession-entreprise.com/deventreprise/images/menu/bande_menu_select.jpg') bottom left repeat-x;
    color: #c9c8c8;
    font-weight: bold;
}
#menu p.espace{
    background:#FFF url('http://www.cession-entreprise.com/deventreprise/images/menu/menu_espace.jpg') bottom left repeat-x;
    width: 2px;
    height:50px;
    float: left;
    padding: 0;
    margin: 0;
}
 
#h1{
    color: #d4d4d4; 
    padding-bottom: 2px;
}
#h1 h1 {
    color:#D4D4D4;
    display:inline;
    font:8pt Verdana;
    margin:0;
    padding:0;
}

Et pour le 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
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
<div id="menu">
    <ul >
        <p class="espace"></p>
        <li class="onglet">
            <p><a href="#">Home</a></p>
        </li>
        <p class="espace"></p>
        <li class="onglet">
            <p><a href="#">Reprendre</a></p>
            <p class="subtext"><a href="#">Créez votre compte</a></p>
            <p class="subtext"><a href="#">Consultez nos annonces</a></p>
            <p class="subtext"><a href="#">Contactez les chargés d affaires</a></p>
            <p class="subtext"><a href="#">Profils recherch?s</a></p>
            <p class="subtext"><a href="#">Formation ESSEC</a></p>
        </li>
        <p class="espace"></p>
        <li class="onglet">
            <p><a href="">Céder</a></p>
            <p class="subtext"><a href="#">Contactez nous</a></p>
            <p class="subtext"><a href="#">Evaluez votre société</a></p>
            <p class="subtext"><a href="#">Boite à outils juridique</a></p>
            <p class="subtext"><a href="#">Nos affaires vendues</a></p>
        </li>
        <p class="espace"></p>
        <li class="onglet">
            <p><a href="#">Actualité</a></p>
            <p class="subtext"><a href="#">Edito</a></p>
            <p class="subtext"><a href="#">En bref</a></p>
            <p class="subtext"><a href="#">Interview</a></p>
            <p class="subtext"><a href="#">Parcours</a></p>
            <p class="subtext"><a href="#">Secteurs</a></p>
            <p class="subtext"><a href="#">Régions</a></p>
            <p class="subtext"><a href="#">Financement</a></p>
            <p class="subtext"><a href="#">Juridique</a></p>
            <p class="subtext"><a href="#">Dossiers</a></p>
            <p class="subtext"><a href="#">Tribune</a></p>
        </li>
        <p class="espace"></p>
        <li class="onglet">
            <p><a href="#">Des questions ?</a></p>
            <p class="subtext"><a href="#">Nos experts</a></p>
            <p class="subtext"><a href="#">Posez vos questions</a></p>
            <p class="subtext"><a href="#">Consultez les réponses</a></p>
        </li>
        <p class="espace"></p>
    </ul>	
    <div id="recherche">   
        <!-- module de recherche -->
    </div>
    <p class="espace"></p>
    <div id="inscription_nl">
        <img src='<?php echo $path; ?>images/icones/petite_fleche.gif' alt="" /><a href='<?php echo $path; ?>newsletter/'>Inscrivez vous à notre Newsletter</a>
    </div>   
</div>

[ornitho13]

Salut,

sur le "ul" dans ton menu applique un position:absolute;
et sur "<div id='recherche'>" ajoute un margin-left d'environ 660px

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
#menu ul{
list-style-type: none;
margin: 0px;
padding: 0px;
position: absolute;
}
#menu #recherche{
float: left;
margin-left: 660px;
padding-top: 11px;
width: 200px;
}

et cela devrait aller

[sadkat]

Merci beaucoup ! ça fonctionne !!!