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

Problème menu fait bouger le corps

HTML

Vue hybride

Discussions similaires

Partager

Partager