Problème menu fait bouger le corps

**dharkan** · 24/11/2011, 15h24

Bonjours,

Voila, je vous expose mon problème tout bête que je n'arrive pas a résoudre :

lorsque mon menu se déroule, le corps bouge avec et ce que je mette cette propriété css ou non:

Code :

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

1
2
 
float:left;

si vous avez besoin du code dites le moi.

**Ethyde** · 24/11/2011, 15h26

Bonjour,

Envoyé par dharkan

si vous avez besoin du code dites le moi.

Oui

**dharkan** · 24/11/2011, 15h32

alors voila le css du menu :

Code :

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

1
2
3
4
5
6
7
8
9
 
#menu
{
    position: relative;
    border: 1px solid black;
    margin-right:83%;
    margin-top:5%;
    /*-moz-border-radius:15px 15px 15px 15px;*/
}

le code html produit par php :

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
77
78
79
80
81
82
83
84
85
86
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" >
   <head>
           <title>Bienvenue sur mon site !</title>
       <meta http-equiv="content-type" content="text/html; charset=Iso-8859-15" />    
       <!--<meta http-equiv="pragma" content="no-cache"/>--> 
       <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
       <link rel="stylesheet" type="text/css" href="design.css"/>
 
       <script src="jquery/jquery.js"></script>
 
       <script>
           <!--quand la page est entièrement chargée-->
           $(document).ready(function()
           {
               $('.cache').hide();
               
               //le pointeur se change en main quand on survol la class dite
               $('.ouvrir').hover(function()
               {
                   $(this).css('cursor','pointer');
               },function(){
                   $(this).css('cursor','auto');
               });
                            
            
               <!--quand on clique sur un element qui a la classe 'cache'-->
               $('.ouvrir').click(function(){
                  <!-- si les enfants de cet element ont l'attribut ':hidden'-->
                  if ($(this).children('.cache').is(':hidden')) 
                  {
                      <!--on remonte lentement les elements qui ont la classe 'cache'-->
                      $('.cache').slideUp('slow');
                      <!--on affiche les enfants de cet element doucement-->
                      $(this).children('.cache').slideDown('slow');
                  } 
                  <!-- sinon (si les enfants de cet element n'ont pas l'attribut ':hidden')-->                           
                  else
                  {
                      <!-- on referme lentement les elements qui ont la classe 'cache'-->
                      $('this').children('.cache').slideUp('slow');
                  }
               });  
 
             <!-- style -->    
            
               
           });
       </script>
 
   </head>
   <body>
 
   <div id="en_tete">
 
       <h2>Tikal</h2>  
 
 </div>
 
   <div id="menu">
       <ul class="menu">
<li class="nonPuce"><a href="http://tikal.uphero.com/index.php?idPage=P00000"><img src="image/boutonAcceuil.jpg" alt="Acceuil"/></a></li>
<li class="nonPuce ouvrir"><img src="image/rubrique_logiciel.jpg" alt="Logiciel"/>
<ul class="cache"><li class="nonPuce"><a href="http://tikal.uphero.com/index.php?idPage=P00001"><img src="image/logiciel.jpg" alt="Gestion de commande"/></a></li>
</ul></li>
<li class="nonPuce"><a href="http://tikal.uphero.com/index.php?idPage=P00003"><img src="image/livreOr.jpg" alt="Livre d'or"/></a></li>
</ul>  
</div>
 
   <div id="corps">
       <h3 class="centrerTexte">Introduction</h3><p>Jeune diplômé en informatique de gestion en 2011. Passionné par la programmation, je peux vous réaliser votre site web ou un programme sur mesure.  </p><p>Concernant la conception de site Internet j'utilise des langages tel PHP/MySQL, HTML, CSS et JQuery.
Pour le développement d'application bureautique, j'emploie JAVA quand il s'agit d'une application local ou VB.net lorsque le programme est à orientation réseaux (exemple : connexion à une base de données).</p><p>Récemment, j'ai développé un logiciel de gestion de commande sur mesure que vous pouvez retrouver ici :</p><a href="http://tikal.uphero.com/index.php?idPage=P00001">Logiciel de gestion de commande</a>   </div>
 
   <div id="footer">
        © Tikal   </div>
 
 
   </body>
</html>
<!-- www.000webhost.com Analytics Code -->
<script type="text/javascript" src="http://analytics.hosting24.com/count.php"></script>
<noscript><a href="http://www.hosting24.com/"><img src="http://analytics.hosting24.com/count.php" alt="web hosting" /></a></noscript>
<!-- End Of Analytics Code -->

**Ethyde** · 24/11/2011, 15h38

Hum il m'en faudrait un peu plus pour comprendre, mais vue comme ça je dirais que tes "sous menu" devrait être en position:absolute pour éviter que leurs ouverture repousse le reste de ta page

**dharkan** · 24/11/2011, 15h53

le problème viens du faite que si je met les sous-menu en position absolute quand il se deroulent cela ne s'affiche plus.

voila le code php produisant 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
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
 
<?php
 
include_once('connexion_base.php');
 
class Menu
{
        
        private $connexion;     
        private $menuPrincipal;
 
        private $menu;
        private $typeTexte;
        private $pointeVers;
        private $nombre;
        private $style;
 
        public function __construct()
        {
 
            $this->connexion = new ConnexionBase();
            $this->menuPrincipal = array();
 
            $this->menu=array();
            $this->typeTexte=array();
            $this->pointeVers=array();
            $this->style=array();
            $this->nombre=0;
 
        }
 
        public function menuPrincipal()
        {
            //requete SQL 
            $requete = $this->connexion->getConnexion()->query('SELECT * FROM Menu ORDER BY ordre ASC');
            //on recupere toutes les données de la requete
            $this->menuPrincipal = $requete->fetchAll(PDO::FETCH_ASSOC);
        }
 
        public function initialiserMenu()
        {
            $i=0;
            foreach($this->menuPrincipal as $menu)
            {   
                $this->menu[$i]= $menu['contenu'];
                $this->typeTexte[$i]= $menu['typeTexte'];
                $this->pointeVers[$i]= $menu['pointeVers'];     
                $this->style[$i]=$menu['style'];
                
                $i = $i+1;  
            }
            $this->nombre = $i;
        }
        public function afficherElementMenuPrincipal()
        {
            $k=0;
            //debut menu
            echo '<ul class="menu">';
            //pour chaque element de menu
            for($i=0;$i<$this->nombre;$i++)
            {
                //si c est un menu principal
                if($this->typeTexte[$i]=='MP')
                {
                    // on ecrit le lien de navigation
                    echo '<li class="nonPuce ouvrir"><img src="image/'.$this->style[$i].'" alt="'.$this->menu[$i].'"/>';
                    //on ouvre un menu pour les sous-menu
                    echo '<ul class="cache">';
                    $k = $k +1;
                }
                //si c'est un sous-menu
                if($this->typeTexte[$i]=='SM')
                {
                    //on ecrit le lien
                    echo '<li class="nonPuce"><a href="http://tikal.uphero.com/index.php?idPage='.$this->pointeVers[$i].'"><img src="image/'.$this->style[$i].'" alt="'.$this->menu[$i].'"/></a></li>';
                    $j = $i+1;
                    //si i different de 0 et le type de texte suivant est un menu principale ou si c'est la fin du menu
                    if(($i!=0 and $this->typeTexte[$j]=='MP')or $i==$this->nombre-1)
                    {
                        //on ferme le sous-menu puis le menu
                        echo '</ul></li>';
                    }
                }
                //si c'est un menu simple
                if($this->typeTexte[$i]=='MS')
                {
                    if($this->typeTexte[$i-1]=='SM')
                    {
                        echo '</ul></li>';
                    }
                    echo '<li class="nonPuce"><a href="http://tikal.uphero.com/index.php?idPage='.$this->pointeVers[$i].'"><img src="image/'.$this->style[$i].'" alt="'.$this->menu[$i].'"/></a></li>';
                }
            }
            //fin menu
            echo '</ul>';
        }
}
?>

**Ethyde** · 24/11/2011, 16h00

Je ne crois pas que le php soit d'une quelconque utilité ici, par contre un lien vers la page en question oui

**dharkan** · 24/11/2011, 16h12

voila un lien :

www.tikal.uphero.com

**Ethyde** · 24/11/2011, 16h29

Trop de position:relative; met ton menu et ton corps en float:left; précise leur une taille du genre :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
#menu
{
    border: 1px solid black;
    float:left;
    width:15%;/* au pif */
}
#corps
{
    border: 1px solid black;
    float:left;
    height:800px;
    width:80%; /* au pif aussi */
}

**dharkan** · 24/11/2011, 16h41

j ai changer les position par des float seulement quand je clique sur un lien pour derouler le menu apres plus rien ne fonctionne. le site est figé

EDIT : j'ai rien dit, je devait simplement remettre le footer en bas. seulement le corps bouge toujours avec le menu deroulant

pourtant la mise en boite du menu et du corps ne se, a priori, chevauche pas

**Ethyde** · 24/11/2011, 16h46

Enleve les margin aussi, chez moi ça marche apres

**dharkan** · 24/11/2011, 16h49

effectivement après avoir enlever les margin cela fonctionne.

Pense tu que si je met les margin avec le JQuery j'aurait de nouveau ce problème ? car je n'aime pas voir tout se coller comme sa

Merci pour ton aide

**Ethyde** · 24/11/2011, 16h58

Tu peu très bien spécifier des marges à tes blocs pour les espacer, par contre si tu veux être tranquille pour que l'ouverture d'un sous-menu ne repousse pas ton corps, donne à ta div#menu une taille fixe en px

**dharkan** · 24/11/2011, 17h03

Merci,

j'ai tester en utiliser la propriété css de jquery pour espacer les block
et sa fonctionne le menu ne fait plus bouger le corps j'ai ajouter ceci :

Code :

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

1
2
3
4
 
$('#menu').css('margin-top', '10px');
$('#corps').css('margin-top', '10px');
$('#corps').css('margin-left', '5%');

**Ethyde** · 24/11/2011, 17h09

Ben en CSS c'est bien aussi, ce qui posais problème c'était les marges négatives

**dharkan** · 24/11/2011, 17h18

donc marge négative = plein d'ennui,
donc plus jamais je n'userai de celle-ci

encore merci pour l aide

Problème menu fait bouger le corps

HTML

Discussions similaires

Partager

Partager