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 |
|---|---|
 Problème lecteur CDSujet posté par bebert171 le 01/09/2010 à 20h47'36 |
 |
| Modifier un script anglais en Français Sujet posté par jap le 29/08/2010 à 13h43'43 |
 |
 Nouvel annuaire généraliste MorfalooSujet posté par morfaloo le 27/08/2010 à 16h51'16 |
 |
| Re: Echange de liens site depannage informatique. Réponse postée par alexy2000 le 17/08/2010 à 12h05'42 |
 |
 26 juillet 2010 RTL.fr se mobilisent pour l'emploi !Sujet posté par rer le 26/07/2010 à 09h46'18 |
 |
| Re: ouverture de pop-up a partir d'un autre pop-up Réponse postée par 7528620xs le 20/07/2010 à 08h11'22 |
 |
 Re: petit problem de fenetre*Réponse postée par xerses le 20/07/2010 à 08h10'08 |
|
| Re: Changement d'image en survollant un chiffre Réponse postée par thierry576 le 20/07/2010 à 08h08'47 |
|
| Partenaires Sujet posté par resolutionbio le 29/06/2010 à 20h08'01 |
|
| lien du livre d'or introuvable Sujet posté par romaluc le 25/06/2010 à 19h53'13 |
 |
Tribune libre
CNIL: 1098091
Connectés: 14
Connectés: 14
Publicité: Rencontre ardennes pour un flirt avec une ardennaises près de chez toi.