Ancre nommée et Header fixe

**Midas1422** · 25/02/2009, 10h40

Bonjour,
J'utilise depuis peu des CSS à la place des frames. Les pages que j'ai créé ont un en-tête, un pied de page et un menu gauche, tous trois fixes et gérés ainsi.

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
 
body {
   padding: 0;
   font-family: Comic Sans MS, Verdana, Arial, Helvetica, sans-serif;
   background-color: #CC9900;
   margin-left: 5px;
	z-index: 1;	/* Arrière-plan */
}
 
 
/* Bandeau d'en-tête */
#header {
   position: fixed;
   width: auto;
   height: 150px;
   top: 0;
   right: 0;
   bottom: auto;
   left: 160px;
   text-align: center;
   padding-left: 10px;
   margin-bottom: 5px;
   background-color: #CC9900;
	z-index: 3; /* Premier plan */
}
 
/* Page affichée */
#page {
   position: absolute;
   width: auto;
   height: auto;
   top: 150px;
   left: 0px;
   right: 0px;
   overflow: auto;
   padding-left: 10%;
   padding-right: 10%;
   padding-bottom: 100px;
   text-align: justify;
   margin-top: 0px;
   margin-left: 160px;
	z-index: 2; /* Plan intermédiaire */
}
 
/* Pied de page */
#footer {
   position: fixed;
   width: 100%;
   height: 100px;
   top: auto;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: #CC9900;
	z-index: 3; /* Premier plan */
}
 
/* Menu */
.menu li {
	margin-bottom: 5px;
}
.menu a {
	margin: 0 2px;
	color: #000000;
	text-decoration: underline;
}
.menu a:hover {
	text-decoration: none;
}

et le script de la page htlm

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<body>
<div id="header"> 
  <!-- ICI le contenu de l'en-tête --> 
</div>
<div id="menu"> 
  <?php include("menu.php"); ?>
</div>
<div id="page"> 
  <a name="top" id="top"></a> 
  <!-- ICI le contenu de la page  -->
........
</div>
<div id="footer"> 
  <!-- ICI le pied de page  -->
</div>

Malheureusement, je rencontre un problème lorsque j'utilise des "ancres nommées" (comme l'ancre "top" du code ci-dessus) : l'ancre est bien atteinte, mais se positionne au sommet de la fenêtre et donc derrière l'en-tête.

Je voudrais qu'elle apparaisse juste sous cet en-tête.

Est-ce possible ? Et si oui, comment ?

Merci d'avance pour votre aide

**Ethyde** · 25/02/2009, 11h25

Bonjour,

pour faire simple : créer un qui englobe ton site tel que la div #site :

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
<body>
<div id="site">
 <div id="header"> 
  <!-- ICI le contenu de l'en-tête --> 
 </div>
 <div id="menu"> 
  <?php include("menu.php"); ?>
 </div>
 <div id="page"> 
  <a name="top" id="top"></a> 
  <!-- ICI le contenu de la page  -->
........
 </div>
 <div id="footer"> 
  <!-- ICI le pied de page  -->
 </div>
</div>
</body>