menu affiche différemment dans fx et ie

**danfa** · 05/01/2009, 01h12

Bonjour
Mon menu affiche différemment sous firefox et explorer et je ne sais quoi faire,
pouvez vous m'aider svp

Voici mon code CSS et plus bas une page htm

Merci

Code css :

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
99
100
101
102
103
104
105
@charset "utf-8";
/* CSS Document */
 
body
{
	width: 760px;
	margin: auto; /* Pour centrer notre page */
	margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
	margin-bottom: 20px;    /* Idem pour le bas du navigateur */
	background-color: #990033;  /* fond rouge */
}
/* L'en-tête */
 
#en_tete
{
	width: 760px;
	height: 130px;
	background-color: #ffffff;  /* fond rouge */
	background-position:center center ;
	background-image: url(logo_acuq.jpg);  
	background-repeat: no-repeat;
	margin-bottom: 10px;
	border-top-style: none;
	border-top-color: #99FF00;
	margin-left:0px;
}
 
/* Le menu */
 
#menu
{
   float: left;
   width: 180px;
   height: 400px;
}
 
.element_menu
{
	background-color: #3333cc;	
	background-repeat: no-repeat;
	border: 2px solid black;
	margin-bottom: 20px;
}
 
 
/* Quelques effets sur les menus */
 
 
.element_menu h3 /* Tous les titres de menus */
{    
   color: #B3B3B3;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}
 
.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
   list-style-image: url("images/puce.png"); /* On change l'apparence des puces */
   padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
   padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
   margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
   margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}
 
.element_menu a /* Tous les liens se trouvant dans un menu */
{
   color: #ffffff;
}
 
.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
	background-color: #3333FF;
	color: black;
}
/* Le corps de la page */
 
#corps
 
{
	margin-left: 190px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
	margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
	min-height: 375px;
	padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
	color: #FFFFFF;
	background-color: #3333cc; /* Une couleur de fond pour le corps */
	background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */
	border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
	position: relative;
}
/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */
 
#pied_de_page
{
   padding: 10px;
 
   text-align: center;
   margin-top: 5px;
 
   color: #B3B3B3;
   background-color: #3333cc;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
 
   border: 2px solid black;
}

Code html :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design_acuq.css" />
 
<title>Test membership</title>
</head>
 
<body>
<div id="en_tete">
   <!-- Ici on mettra la bannière -->
 
</div>
 
<div id="menu">
   <!-- Ici on mettra le menu -->
 
 <div class="element_menu"> <!-- Cadre correspondant à un sous-menu -->
        <!-- ici on pourrait placer le titre du menu -->
        <!-- ici on pourrait placerles balises H? pour la grosseur des caracteres -->
       <ul> <br />
         <li><a href="page1.html">Salle des nouvelles</a></li><br />           
         <li><a href="page2.html">Conseil d'administration</a></li><br />
           <li><a href="page3.html">Congrès</a></li><br />
           <li><a href="page4.html">Devenir membre</a></li><br />
           <li><a href="page5.html">Règlements</a></li><br />
           <li><a href="page6.html">Salle de presse</a></li> <br />         
         <li><a href="page7.html">Liens utiles</a></li><br />
           <li><a href="page8.html">Nous joindre</a></li><br />
           <li><a href="page9.html">Forum de discussion</a></li><br />
 
       </ul>
  </div>
 
   </div>
 
</div> 
<div id="corps">
   <!-- Ici on mettra le contenu principal de la page (tout le texte quoi) -->
 
   <h1>Devenir membre</h1>
 
   <p>
      Pour devenir membre de l'Association des Centres d'Urgence 9-1-1 du Québec, il suffit d'imprimer et de compléter le*formulaire en cliquant sur le lien ci-dessous et de le retourner avec votre paiement à l'adresse mentionnée au bas du formulaire. </p><br />
 
 
   <h2>Le Conseil d'administration</h2>  
   <p>Le conseil d'administration est constitué d'un président, un vice-président, un trésorier, un <br />
   secrétaire et cinq administrateurs. Une personne peut cumuler deux fonctions.</p>
   <p>Selon les règlements de l'association, seul les membres actifs peuvent poser leur candidature sur un poste du conseil d'administration</p>
</div>
</div>
 
<div id="pied_de_page">
   <!-- Enfin, on mettra en bas de la page le nom de l'auteur, un copyright... -->
   <div id="pied_de_page">
   <p>Copyright 2008 "ACUQ 9-1-1" tous droits réservés</p>
</div>
 
</div>
 
</body>
</html>

REM les kiens ne sot pas activés

Merci à l'avance

**Bisûnûrs** · 05/01/2009, 10h52

Commence par faire du code propre et indenté correctement : Tu as des balises qui sont fermées mais jamais ouvertes (plusieurs balises div).

**danfa** · 05/01/2009, 15h49

merci de la réponse mais j'ai vérifié et je crois que mes balises sont fermées , sinon serait ce l eproblème d'affichage dans IE

merci

**Bisûnûrs** · 05/01/2009, 15h59

Envoyé par danfa

je crois

Pourtant si je te dis que tu as des balises fermées en trop, c'est que j'ai vérifié et que j'en suis sûr.

**copin** · 05/01/2009, 16h03

Bonjour,

Bisûnûrs a raison, revois un peu ton code tu as beaucoup de balise </div> qui se servent à rien.

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
 
 
<div id="en_tete">
   <!-- Ici on mettra la bannière -->
 
</div>
 
<div id="menu">
   <!-- Ici on mettra le menu -->
 
 <div class="element_menu"> <!-- Cadre correspondant à un sous-menu -->
        <!-- ici on pourrait placer le titre du menu -->
        <!-- ici on pourrait placerles balises H? pour la grosseur des caracteres -->
       <ul> <br />
         <li><a href="page1.html">Salle des nouvelles</a></li><br />           
         <li><a href="page2.html">Conseil d'administration</a></li><br />
           <li><a href="page3.html">Congrès</a></li><br />
           <li><a href="page4.html">Devenir membre</a></li><br />
           <li><a href="page5.html">Règlements</a></li><br />
           <li><a href="page6.html">Salle de presse</a></li> <br />         
         <li><a href="page7.html">Liens utiles</a></li><br />
           <li><a href="page8.html">Nous joindre</a></li><br />
           <li><a href="page9.html">Forum de discussion</a></li><br />
 
       </ul>
  </div>
 
   </div>
 
</div>

Exemple ici le dernier </div> ne correspond à rien

Ensuite

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<ul> <br />
         <li><a href="page1.html">Salle des nouvelles</a></li><br />           
         <li><a href="page2.html">Conseil d'administration</a></li><br />
           <li><a href="page3.html">Congrès</a></li><br />
           <li><a href="page4.html">Devenir membre</a></li><br />
           <li><a href="page5.html">Règlements</a></li><br />
           <li><a href="page6.html">Salle de presse</a></li> <br />         
         <li><a href="page7.html">Liens utiles</a></li><br />
           <li><a href="page8.html">Nous joindre</a></li><br />
           <li><a href="page9.html">Forum de discussion</a></li><br />
 
       </ul>

Les <br/> en dehors des <li> et en fin de ligne, ca vaut mieux éviter.
Si c'est juste pour espacer tes puces passe plus par la css.

Le <br/> après l'ouverture de ton <ul> n'a rien à faire là également.

**danfa** · 05/01/2009, 16h55

Merci a vous deux , je fais des tests et je reviens lolll

**danfa** · 05/01/2009, 17h04

re bonjour

J'ai corrigé le code mais dans IE ca ne fonctionne pas mieux, dois j eplacer des conditions et si oui ou svp

AUssi les br sont bien pour espacer les puces et c est peut être le problème car dans IE c'est ca qui fonctionnepas les puces ne sont pas espacées, que dosi faire dans le ccs pour les espacer svp

Merci beaucouop et désolé pour mon ignorance

menu affiche différemment dans fx et ie

CSS

Vue hybride

Discussions similaires

Partager

Partager