Changer un element du menu sur toutes les pages

**danfa** · 09/01/2009, 22h25

Bonjour

Voilà j'ai créé mon site avec en-tête. menu. corps et pied de page
Mon problème est que je voulais changer un élément du menu comme "congrès" pour exemple "congrès 2009" en voulant que ca change sur toutes les pages mais ce n'est pas le cas, j'ai surementomis quelque chose ou simplement que je ne le sais pas et je ne le trouve pas das le turoriel.
Pouvez vous m'aider svp

Voici le code css et un exemple de page 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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
@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: #8B0000;  /* 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: 18px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
 
}
.puce
{
margin-top: 18px;
}
.element_menu a /* Tous les liens se trouvant dans un menu */
{
   color: #ffffff;
}
.element_menu a:visited
{
	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: #ffffff;
   background-color: #3333cc;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
 
   border: 2px solid black;
}

page htm

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>

merci

**devyan** · 09/01/2009, 23h54

Je ne comprends pas quel est le problème ...

D'après la description tu veux modifier le contenu HTML ...
Ce ne serait donc pas un problème CSS

**danfa** · 09/01/2009, 23h56

rebonjour

si je modifie le html, le menu se modifie juste sur la page en cours mais comment faire pour qu'il se modifie sur toutes les pages

merci

**Bovino** · 10/01/2009, 09h44

Le CSS n'a rien à voir avec le contenu mais uniquement avec la présentation. Tu ne pourras donc rien faire à ce niveau là.
Il faut que tu modifies directement les fichiers HTML.
Ce qu'il est possible de faire, c'est de découper ta page en différentes parties (par exemple entete.html, menu.html, contenu.html, footer.html) que tu reconstruis coté serveur avec un langage adapté (par exemple, inclue en PHP). Comme ça, les fichiers génériques peuvent être modifiés facilement sur un seul fichier qui sera répercuté sur toutes les pages.

Changer un element du menu sur toutes les pages

CSS

Discussions similaires

Partager

Partager