Problème menu fait bouger le corps

Version imprimable

24/11/2011, 15h24
dharkan

Problème menu fait bouger le corps
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:

1 2 float:left;
si vous avez besoin du code dites le moi.
24/11/2011, 15h26
Ethyde

Bonjour,

Citation:

Envoyé par dharkan

si vous avez besoin du code dites le moi.

Oui :)

alors voila le css du menu :

Code:

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:

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

24/11/2011, 15h38
Ethyde

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

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:

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

24/11/2011, 16h00
Ethyde

Je ne crois pas que le php soit d'une quelconque utilité ici, par contre un lien vers la page en question oui ;)
24/11/2011, 16h12
dharkan

voila un lien :

www.tikal.uphero.com

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

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 */ }

24/11/2011, 16h41
dharkan

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é :cry:

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

pourtant la mise en boite du menu et du corps ne se, a priori, chevauche pas
24/11/2011, 16h46
Ethyde

Enleve les margin aussi, chez moi ça marche apres :)
24/11/2011, 16h49
dharkan

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
24/11/2011, 16h58
Ethyde

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 :)
24/11/2011, 17h03
dharkan
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:

1 2 3 4 $('#menu').css('margin-top', '10px'); $('#corps').css('margin-top', '10px'); $('#corps').css('margin-left', '5%');
24/11/2011, 17h09
Ethyde

Ben en CSS c'est bien aussi, ce qui posais problème c'était les marges négatives ;)
24/11/2011, 17h18
dharkan

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

encore merci pour l aide