Bonjour, j'ai un problème sur l'affichage de ma page web après utilisation d'un effet Slide avec mootools. En effet, j'ai l'impressions que mon margin n'est plus pris en compte. Pouvez vous m'aider ?

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
        <head>
                <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
                <script src="javascript/mootools.js" type="text/javascript" ></script>
                <link type="text/css" rel="stylesheet" media="screen" href="css/design.css" />
 
                <script type="text/javascript">
 
                        window.addEvent('domready' , function(){
 
                                $$("div.element").each(function(div){
 
                                        var titre = div.getElement("h3");
                                        var block = titre.getNext();
                                        var fx = new Fx.Slide(block, {duration: 500} );
 
                                        titre.addEvent('click',function(e){
                                                e = new Event(e);
                                                fx.toggle();
                                                e.stop();
                                        });
 
                                });
 
                        });
 
                </script>
 
                <title>Index</title>
 
        </head>
        <body>
                <div id="site">
                        <div id="menu">
 
        <div class="element">
                <h3 class="titre">Sondage</h3>
                <div class="groupe">
                                                <div class="item">
 
                                <a href="#">Liste</a>
                        </div>
                </div>
        </div>
 
        <div class="element">
                <h3 class="titre">Utilisateur</h3>
                <div class="groupe">
                        <div class="item"><a href="inscription.php">Inscription</a></div><div class="item"><a href="connexion.php">Connexion</a></div>    </div>
 
        </div>
 
        <div class="element">
                <h3 class="titre">Autre</h3>
                <div class="groupe">
                        <div class="item">
                                <a href="index.php">Accueil</a>
                        </div>
 
                </div>
        </div>
 
</div>  
                        <div id="corp">
                                <h1>Index</h1>
 
 
                        </div>
                        <div class="clear">
                        </div>
                </div>
 
        </body>
</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
55
56
57
58
59
60
61
62
63
64
65
66
67
 
* {
        padding: 0;
        margin: 0;
}
 
body {
        background-color: #AACCFF ;
        font-family: Arial;
        font-size: 0.8em;
        text-align: justify;
}
 
div#site {
        width: 800px;
        margin: 10px auto;
        border: 1px solid #446688 ;
}
 
a {
        text-decoration: none;
        color: red ;
}
 
a:hover {
        color: blue;
}
 
/* MENU */
div#menu {
        float: left;
        width: 170px;
        margin: 0 10px;
}
 
div#menu .element {
        margin: 10px 0;
}
 
div#menu .element h3 {
        border: 1px solid #446688;
        text-align: right;
        line-height: 16px;
        height: 16px;
        padding: 2px 6px;
        margin: 0 0 4px 0;
        cursor: pointer;
}
 
div#menu .element div div.item {
        border: 1px solid #446688;
        background-color: #FFFFFF ;
        line-height: 16px;
        height: 16px;
        padding-left: 6px;
        margin: 0 0 4px 0;
 
}
 
/* CORP */
div#corp {
        margin: 10px 10px 10px 192px;
        padding: 5px;
        width: 586px;
        background-color: #FFFFFF ;
        border: 1px solid #446688 ;
}