Menu fixe en css - Forums de discussion
Navigation
Accueil du forum » (X)HTML / CSS » Menu fixe en css
Le sujet
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:
<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
[Message édité par raptor le 06/03/2006 à 19h52'26]
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:
<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
[Message édité par raptor le 06/03/2006 à 19h52'26]
________________
mojchris
Les réponses
En retapant ton code dans mon éditeur, j'ai remarqué qu'en fait tous tes boutons s'affichaient correctement, seulement il s'affiche tous l'un sur l'autre voilà pourquoi tu ne vois que le bouton 5.
Il faut donc essayer de les départager, je n'ai pas encore trouver comment.
A toi de chercher.
Bon courage.
Il faut donc essayer de les départager, je n'ai pas encore trouver comment.
A toi de chercher.
Bon courage.
________________
Anything that can go wrong will go wrong (Murphy)
Statut: 
Modérateur
J'ai trouvé d'où venait ton problème.
Pour chaque lien, tu lui définis un style css : "nav"
Ce nav définit le style et la position de chaque lien.
Hors on a :
a.nav {position:absolute; top:80px; left:610px; width:100%}
Donc tous tes liens sont situés au même endroit.
Je pense qu'il sera difficile de faire un menu de ce style, sutout pour qu'il marche à la fois sur Internet Explorer et Firefox.
A toi de voir.
Pour chaque lien, tu lui définis un style css : "nav"
Ce nav définit le style et la position de chaque lien.
Hors on a :
a.nav {position:absolute; top:80px; left:610px; width:100%}
Donc tous tes liens sont situés au même endroit.
Je pense qu'il sera difficile de faire un menu de ce style, sutout pour qu'il marche à la fois sur Internet Explorer et Firefox.
A toi de voir.
________________
Anything that can go wrong will go wrong (Murphy)
Statut: Modérateur
Je pense avoir résolu le problème en renommant chaque bouton (nav, nav1, etc....) ok c'est fastidieux mais cela me permet de placer les boutons comme je le souhaites
________________
mojchris
Oui en effet ca marche comme ça.
Ca fait 25 lignes de texte c'est tout
Ca fait 25 lignes de texte c'est tout
________________
Anything that can go wrong will go wrong (Murphy)
Statut: Modérateur
Je n'ai pas testé mais je pense que si tu supprime simplement le left, ca pourrait marcher.
Perso, j'ai mis l'enemble dans un div fixe, et le reste se suit 'normalement'
Marcarine
Perso, j'ai mis l'enemble dans un div fixe, et le reste se suit 'normalement'
Marcarine
________________
Marcarine, juste des touristes à moto<br />
http://www.marcarine.be
Pages
A lire également
- Les conditions générales d'utilisation du site
Top-sites membres
Discussions récentes dans les forums
Tribune libre
Publicité: Troc et échanges sur troc.net. Inscription et petites annonces gratuites.