Discussion :

[keokaz]

bonjour , j'ai un petit souci je souhaite avoir une petite fenêtre qui apparaît et qui disparait pour se logger sur le site.

voici mon script

Code javascript :

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
 
<LINK rel=stylesheet type="text/css" href="style/campusvet.css">
 
 
<a  id="selogger">Connexion</a>
 
 
<form id="connexion" class="loginform" action="http://localhost/prod/login/index.php" method="post">
 
        <table id="ldap">
            <tr>
                <td>Login</td><td><input id="login_username" type="text" value="adminkeo" name="username" size="12"></td>
 
                <td>pass</td><td><input id="login_password" type="password" value="" name="password" size="12"></>
            </tr>
 
       </table>
 
        <input  id="dessous_form"  type="submit" value="Se connecter">
 
        <input   id="rememberusername" type="checkbox" checked="checked" value="1" name="rememberusername">
 
        <a  id="souvenirmoi" >se souvenir de moi</a>
 
         <a id="cas" href="login/index.php">Central Authentication Service (CAS)</a>
</form>
 
 
<script type="text/javascript" src="jquery.js"></script>
 
<script type="text/javascript">
 
    $(function(){
        $("#selogger").mouseenter(function(){
            $("#connexion").show();
        });
        $("#connexion").mouseleave(function(){
            $(this).hide();
        });
    });
 
</script>

Lorsque je survole connexion j'ai bien ma fenêtre de login qui apparaît, mais tous ce qui trouve en dessous est décallé par le bas ?
comment fait t'on pour le mettre au premier plan et ne pas perturber les autre positiion

Code css :

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
90
91
92
93
94
95
96
97
98
 
 
/***************login **********/
#bande_connexion
{
    padding: 0px;
    margin: 0px;
    background: #a1b0ce ;
    height: 25px;
    position: relative;
    top:-5px;
}
 
#connexion { /*block connexion qui apparaît lorsqu'on suvol connexion */
    border-radius: 3px;
    margin: 0px;
    padding: 5px 10px 5px 10px;
    font-size: 11px;
    clear: both;
    display: none;
    width:275px;
    height: 80px;
    background: gainsboro;
    position: relative;
    top:-15px;
    float: right;
}
 
#ldap
{
    padding: 0px;
    margin: 5px 0 5px 0;
 
}
 
#dessous_form /* le bouton Se connecter */
{
    margin: 0 0 0 40px;
 
}
 
 
#rememberusername/*cas à cocher se souvenir de moi*/
{
    margin: 2px 5px 0 20px;
    position: relative;
    top:3px;
}
 
#souvenirmoi 
{
    padding:0px;
   margin: 0 10px 0 0;
}
 
#cas
{
    display: block;
    margin: 10px 0 0 0;
    text-align: center;
}
#selogger
{
    cursor:pointer; 
    float: right;
    position: relative;
    right: 15px;
    top:5px;
}
 
 
 
#connexion ul
{
}
 
#connexion li
{
    list-style: none;
    float: left;
 
}
 
 
/***************login **********/
#page-header /*bannière*/
{
 
    position:relative;
    top:-5px;
}
div#banniere
{
    top:25px;
    clear: both;
    height:100px;
    padding:10px;
}

je vous remercie d'avance pour la réponse

[SpaceFrog]

zindex ...

[keokaz]

Merci de ta réponse space .
j'ai donc mis un z-index.

Code css :

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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
 
 
/***************login **********/
#bande_connexion
{
 
    padding: 0px;
    margin: 0px;
    background: #a1b0ce ;
    height: 25px;
    position: relative;
    top:-5px;
 
}
 
 
#selogger
{
    cursor:pointer; 
    position: relative;
    right: 15px;
    top:5px;
    float: right;
}
 
#messagerie
{
    position: relative;
    right: 30px;
    top:3px;
    float: right;
}
#connexion { /*block connexion qui apparaît lorsqu'on suvol connexion */
    position: absolute;
    z-index: 10;
    border-radius: 3px;
    margin: 0px;
    padding: 5px 10px 5px 10px;
    font-size: 11px;
    clear: both;
    display: none;
    width:275px;
    height: 80px;
    background: gainsboro;
    position: relative;
    top:-15px;
    float: right;
}
 
#ldap
{
    padding: 0px;
    margin: 5px 0 5px 0;
 
}
 
#dessous_form /* le bouton Se connecter */
{
    margin: 0 0 0 40px;
 
}
 
 
#rememberusername/*cas à cocher se souvenir de moi*/
{
    margin: 2px 5px 0 20px;
    position: relative;
    top:3px;
}
 
#souvenirmoi 
{
    padding:0px;
   margin: 0 10px 0 0;
}
 
#cas
{
    display: block;
    margin: 10px 0 0 0;
    text-align: center;
}
 
 
#connexion ul
{
}
 
#connexion li
{
    list-style: none;
    float: left;
 
}
 
 
/***************login **********/
#page-header /*bannière*/
{
 
    position:relative;
    top:-5px;
}
div#banniere
{
    position: absolute;
    z-index: 0;
    top:25px;
    clear: both;
    height:100px;
    padding:10px;
}

Mais maintenant le problème c'est l'inverse,
tout ce qui se trouve au dessous de la bannière reste en haut et se déplace vert le bas, un margin-top de tout ça sa suffit ?

Code css :

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
 
    <div id="bande_connexion">
    <LINK rel=stylesheet type="text/css" href="theme/campusvet/style/campusvet.css">
 
    <a id="selogger">Connexion</a>
    <a href="https://mail.vetagro-sup.fr/zimbra"id="messagerie"><img src="theme/campusvet/pix/zimbra.png"/></a>
 
<form id="connexion" class="loginform" action="http://localhost/prod/login/index.php" method="post">
 
        <table id="ldap">
            <tr>
                <td>Login</td><td><input id="login_username" type="text" value="adminkeo" name="username" size="12"></td>
 
                <td>pass</td><td><input id="login_password" type="password" value="" name="password" size="12"></>
            </tr>
 
       </table>
 
        <input  id="dessous_form"  type="submit" value="Se connecter">
 
        <input   id="rememberusername" type="checkbox" checked="checked" value="1" name="rememberusername">
 
        <a  id="souvenirmoi" >se souvenir de moi</a>
 
         <a id="cas" href="login/index.php">Central Authentication Service (CAS)</a>
</form>
 
 
<script type="text/javascript" src="theme/campusvet/js/jquery.js"></script>
 
<script type="text/javascript">
 
    $(function(){
        $("#selogger").mouseenter(function(){
            $("#connexion").show();
        });
        $("#connexion").mouseleave(function(){
            $(this).hide();
        });
    });
 
</script>
 
</div>
<div class="skiplinks"><a class="skip" href="#maincontent">Passer au contenu principal</a></div>
<script type="text/javascript">
//<![CDATA[
document.body.className += ' jsenabled';
//]]>
</script>
 
 
 
               <!-- ================================================= ======================-->
 
        <div id="banniere">
            <a href="index.php" id="logo"><img  src="theme/campusvet/img/logo.png"/></a>
            <ul id="menu-banniere">
                <!--
                <li>
                 <a href="https://mail.vetagro-sup.fr/zimbra" id="logo"><img  src="theme/campusvet/img/zimbra.png"/></a>  
                </li>
                <li>
                 <a href="http://www.vetagro-sup.fr" id="logo"><img  src="theme/campusvet/img/home.png"/></a>  
                </li>
 
                -->
            </ul>
        </div>
 
 
<div id="page">