28173 sujets

CSS et mise en forme, CSS3

Menu fixe

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
webide
en fait, tes boutons doivent surement se superposer.

tu leur applique a tous le meme style

essai comme ça peut etre
<div id="head">
<ul>
<li><a class="nav" href="page1.html" title="page 1">Page 1</a></li>

<li><a class="nav" href="page2.html" title="page 2">Page 2</a></li>

<li><a class="nav" href="page3.html" title="page 3">Page 3</a></li>

<li><a class="nav" href="page4.html" title="page 4">Page 4</a></li>

<li><a class="nav" href="page5.html" title="page 5">Page 5</a></li>


Cela devrait les mettre les uns en dessous de autres

bien sur, il te faudra créer des styles pour les <li>

fait le test
À tous tes liens de classe nav, tu appliques le même style, avec un positionnement absolu (au pixel près). Du coup, ils se placent tous pile au même endroit, et se superposent.

Au passage : il semblerait que tu aies pas mal de code CSS "inutile" pour ta page. Tu as sûrement procédé à tâtons, en rajoutant des choses pour obtenir les effets que tu voulais, et maintenant ton code contient des rebuts inutiles... mais qui pourraient te poser des problèmes par la suite. C'est peut-être d'ailleurs ce qui s'est passé pour ce position: absolute; qui traîne...
Le problème vient du fait que je souhaites les mettre l'un a coté de l'autre et non l'un au dessus de l'autre.
N'y a t'il pas de moyen de faire cela
si, dans le css corespondant a ton menu, tu rajoute " display: inline;"
Modifié par Philippe (11 Feb 2006 - 17:50)
Non tjrs pas. Je vais essayer (je sais que c'est tirer par les cheveux) de renommer chaque bouton de menu nav, nav1, nav2 etc on verra bien
Sujet clos
Aller à