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.
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
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; }
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.
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>
Je voudrais qu'elle apparaisse juste sous cet en-tête.
Est-ce possible ? Et si oui, comment ?
Merci d'avance pour votre aide![]()
Partager