menu fixe

**webide** · 11/02/2006, 16h24

Bonjour,
J'ais créé une page avec un header fixe et un contenu défilant, j'ais mis un menu que je souhaites chevauchant les deux parties. Le problème vient du faite qu'il y a normalement 5 boutons et un seul apparait. Je n'arrives pas à trouver le problème. Si quelqu'un avait la solution cela m'aiderais beaucoup.
Voici le code:

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
 
<style type="text/css">
#printhead {display:block;}
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
body {font-family:verdana, arial, sans-serif; font-size:76%;}
#head {position:absolute; margin:0; top:50; right:18px; display:block; width:100%; height:100px; background:#fff; font-size:4em; z-index:5; color:#000; border-bottom:1px solid #000;}
#background{position:absolute; z-index:1; width:100%;}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
#content {padding:5px 300px 20px 200px;}
 
p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;}
#fixed {position:absolute; top:120px; left:10px; width:150px; z-index:10; color:#567; border:1px solid #000; padding:10px;}
a.nav {position:absolute; top:80px; left:610px; width:100%}
a.nav, a.nav:link, a.nav:visited {display:block; width:150px; height:25px; background:#dca; border:1px solid #000; margin-top:2px; text-align:center; text-decoration:none; font-family:verdana, arial, sans-serif; font-size:12px; color:#000; line-height:25px; overflow:hidden; float:left;}
a.nav:hover {color:#fff; background:#764;}
a.nav:active {color:#fff; background:#c00;}
 
</style>
</head>
 
<body>
<div id="printhead"></div>
<div id="head"><br>
<a class="nav" href="page1.html" title="page 1">Page 1</a>
<a class="nav" href="page2.html" title="page 2">Page 2</a>
<a class="nav" href="page3.html" title="page 3">Page 3</a>
<a class="nav" href="page4.html" title="page 4">Page 4</a>
<a class="nav" href="page5.html" title="page 5">Page 5</a>
</center>
</div>

Merci d'avance
webide

**Kerod** · 11/02/2006, 16h29

Remplace par ceci

Code :

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

a.nav {top:80px; left:610px; width:100%}

**webide** · 11/02/2006, 16h37

Cela ne fonctionne pas car le menu apparait au complet mais positionné sur la gauche (je souhaites le centrer) et chevauchant les 2 parties (il est remonté en changeant le bout de code)

**Kerod** · 11/02/2006, 17h28

Alors dans le head tu mets :

Code :

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

text-align :center

pour voir

**webide** · 11/02/2006, 17h39

tjrs pas

**Kerod** · 11/02/2006, 17h51

C'est normal tu utilises un float:left donc ce sera jamais centré il faudrait utiliser autre chose....Par exemple si tu mets tous les <a> sur une meme ligne il y a pas de retour à la ligne...Ou il y a aussi le display: inline

menu fixe

HTML

Vue hybride

Discussions similaires

Partager

Partager