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
| Sujet | Forum |
|---|---|
 Re: codeur Xhtml et cssRéponse postée par bornreferencement le 15/03/2010 à 12h08'20 |
 |
| Re: Réseau de site echange de liens Réponse postée par bornreferencement le 15/03/2010 à 12h07'04 |
 |
 Re: Web creator pro 3Réponse postée par nelsonv le 05/03/2010 à 18h06'29 |
|
 Re: Cherche requete pour créditer les 5 meilleurs joueursRéponse postée par xerses le 04/03/2010 à 15h16'05 |
 |
| Re: Problème d'ordinateur Réponse postée par noddys le 27/02/2010 à 15h15'48 |
 |
| Problème de Création de classements joueurs Sujet posté par toto02200 le 24/02/2010 à 14h32'53 |
|
| besoind'aide pour l'instalation code pour compteur Sujet posté par alexap38 le 17/02/2010 à 01h23'07 |
 |
 Re: livre d'orRéponse postée par lolo4415 le 01/02/2010 à 17h42'55 |
 |
 Re: LIVRE D'OR avec retourRéponse postée par 1cyril le 22/01/2010 à 17h24'55 |
|
| Re: Cherche Programmeur-webmaster pour JDR Réponse postée par xerses le 12/01/2010 à 15h28'03 |
 |
Tribune libre
CNIL: 1098091
Connectés: 9
Connectés: 9
Publicité: Rencontre gard pour un flirt avec une gardoises près de chez toi.
