[mootools] décalage après Slide

damien77 · 04/06/2007, 18h47

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 ;
}

damien77 · 05/06/2007, 11h36

Je viens de repérer une partie du problème mais je ne comprend pas pourquoi...

Code :

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

1
2
3
4
5
6
7
8
9
10
 
div#menu .element div div.item {
    display: block;
    border: 1px solid #446688;
    background-color: #FFFFFF ;
    line-height: 16px;
    height: 16px;
    padding-left: 6px;
    margin: 0 0 4px 0;
}

Le problème viens du margin. Si je l'enlève, l'affichage est correct. De plus, si je met margin: 4px 0 0 0 . Alors si je cache puis réaffiche l'élement. Alors le dernier item est à moitié visible. COmment faire ? merci

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email