Problème menu fait bouger le corps [Résolu]

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,

Citation:

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

24/11/2011, 15h38	#4
Ethyde Membre éclairé Inscription : février 2009 Messages : 308 Détails du profil Informations forums : Inscription : février 2009 Messages : 308 Points : 309 Points : 309	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
	00

24/11/2011, 16h00	#6
Ethyde Membre éclairé Inscription : février 2009 Messages : 308 Détails du profil Informations forums : Inscription : février 2009 Messages : 308 Points : 309 Points : 309	Je ne crois pas que le php soit d'une quelconque utilité ici, par contre un lien vers la page en question oui
	00

24/11/2011, 16h12	#7
dharkan Nouveau Membre du Club Développeur informatique Inscription : mars 2010 Messages : 139 Détails du profil Informations personnelles : Localisation : Belgique Informations professionnelles : Activité : Développeur informatique Informations forums : Inscription : mars 2010 Messages : 139 Points : 37 Points : 37	voila un lien : www.tikal.uphero.com
	00

24/11/2011, 16h41	#9
dharkan Nouveau Membre du Club Développeur informatique Inscription : mars 2010 Messages : 139 Détails du profil Informations personnelles : Localisation : Belgique Informations professionnelles : Activité : Développeur informatique Informations forums : Inscription : mars 2010 Messages : 139 Points : 37 Points : 37	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
	00

24/11/2011, 16h46	#10
Ethyde Membre éclairé Inscription : février 2009 Messages : 308 Détails du profil Informations forums : Inscription : février 2009 Messages : 308 Points : 309 Points : 309	Enleve les margin aussi, chez moi ça marche apres
	00

24/11/2011, 16h49	#11
dharkan Nouveau Membre du Club Développeur informatique Inscription : mars 2010 Messages : 139 Détails du profil Informations personnelles : Localisation : Belgique Informations professionnelles : Activité : Développeur informatique Informations forums : Inscription : mars 2010 Messages : 139 Points : 37 Points : 37	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
	00

24/11/2011, 16h58	#12
Ethyde Membre éclairé Inscription : février 2009 Messages : 308 Détails du profil Informations forums : Inscription : février 2009 Messages : 308 Points : 309 Points : 309	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
	00

24/11/2011, 17h09	#14
Ethyde Membre éclairé Inscription : février 2009 Messages : 308 Détails du profil Informations forums : Inscription : février 2009 Messages : 308 Points : 309 Points : 309	Ben en CSS c'est bien aussi, ce qui posais problème c'était les marges négatives
	00

24/11/2011, 17h18	#15
dharkan Nouveau Membre du Club Développeur informatique Inscription : mars 2010 Messages : 139 Détails du profil Informations personnelles : Localisation : Belgique Informations professionnelles : Activité : Développeur informatique Informations forums : Inscription : mars 2010 Messages : 139 Points : 37 Points : 37	donc marge négative = plein d'ennui, donc plus jamais je n'userai de celle-ci encore merci pour l aide
	00

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