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 |
|---|---|
 Echange de liens site depannage informatique.Sujet posté par depanmonpc le 07/01/2009 à 16h48'11 |
 |
 Re: compression d'imagesRéponse postée par xerses le 07/01/2009 à 00h29'37 |
 |
 Re: IE 7 VS Firefox 2Réponse postée par tieno le 04/01/2009 à 18h05'36 |
 |
| Re: Espace-Membre : pb connexion Réponse postée par root le 02/01/2009 à 16h47'50 |
 |
| Re: probleme de fenêtre [Réglé] Réponse postée par xerses le 01/01/2009 à 20h16'20 |
 |
| Re: liens , sport Mécanique Réponse postée par ced51 le 27/12/2008 à 12h18'48 |
|
| pages Sujet posté par ced51 le 26/12/2008 à 17h44'42 |
 |
 joyeux_noel._gp.ppsSujet posté par rer le 24/12/2008 à 10h08'30 |
 |
| serveur à domicile facile et gratuit Sujet posté par rer le 11/12/2008 à 14h57'56 |
|
 Re: probleme functionRéponse postée par raptor le 11/12/2008 à 09h25'52 |
|