Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

MENU TOUJOURS A LA MEME POSITION TRES FLUIDE


Information sur la source

Description

Cliquez pour voir la capture en taille normale
Sans effet de tremblement, ce code permet de stabiliser un objet à une position.
Ici, j'ai pris un menu pour l'exemple, mais on peut l'adapter à n'importe quoi.
Ce code est compatible IE6 et FireFox.
 

Source

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  • <html>
  • <head>
  • <style>
  • body {margin:0; padding:0; border:0; height:100%; overflow-y:auto;}
  • #menu {display:block; top:13px; left:50%; width:500px; margin-left:-250px; position:fixed; }
  • * html #menu { position:absolute; }
  • </style>
  • <!--[if IE 6]>
  • <style>
  • html {overflow-x:auto; overflow-y:hidden;}
  • </style>
  • <![endif]-->
  • </head>
  • <body>
  • <br />
  • <script>
  • menuhz = 1 //1:menu horizontal 0:menu vertical
  • bgcolor ='#990000'; //Couleur arrière
  • bgcolor2='#A7B2E9'; //Couleur arrière surbrillance
  • bgcolor3='#6375D6'; //Couleur bordure
  • bgcolor4='#ffffff'; //Couleur texte
  • largeur = 100
  • hauteur = 22
  • i = 0
  • menup = new Array;
  • menup[i++]='ActuFr'; menup[i++]='http://actufr.com';
  • menup[i++]='MultiDesk'; menup[i++]='http://multidesk.pass-x.com';
  • menup[i++]='Menu Hz'; menup[i++]='http://menuhorizontal.pass-x.com';
  • menup[i++]='JavaSriptFr'; menup[i++]='http://javascriptfr.com';
  • menup[i++]='Home'; menup[i++]='index.html';
  • document.write('<style>.ejsmenu {color:'+bgcolor4+'; cursor:hand;cursor:pointer}</style>')
  • document.write('<DIV ID=menu><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR='+bgcolor3+' WIDTH='+(menuhz?largeur*menup.length/2:largeur) +' HEIGHT='+hauteur+'><TR><TD><TABLE CELLPADING=0 CELLSPACING=1 BORDER=0 WIDTH=100% HEIGHT=100%>'+(menuhz?'<tr>':''))
  • for(pass=0;pass<menup.length;pass+=2) document.write((menuhz?"":"<tr>")+"<TD WIDTH="+largeur+" ALIGN=center BGCOLOR="+bgcolor+" onMouseDown='location.href=\""+menup[pass+1]+"\"' onMouseOver='this.style.background=\""+bgcolor2+"\"' onMouseOut='this.style.background=\""+bgcolor+"\"' CLASS=ejsmenu><FONT SIZE=2 FACE=Verdana><B>"+menup[pass]+"</B></FONT></TD>")
  • document.write('</tr></TABLE></TD></TR></TABLE></DIV>')
  • </script>
  • <br />
  • <H1><center><strong>
  • <p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p>
  • <p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p>
  • <p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p>
  • <p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p>
  • </strong></center></H1>
  • </body>
  • </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<style>
body {margin:0; padding:0; border:0; height:100%; overflow-y:auto;}
#menu {display:block; top:13px; left:50%; width:500px; margin-left:-250px; position:fixed;  }
* html #menu { position:absolute; }
</style>
<!--[if IE 6]>
<style>
html {overflow-x:auto; overflow-y:hidden;}
</style>
<![endif]-->
</head>

<body>
<br />
<script>
menuhz  = 1          //1:menu horizontal  0:menu vertical
bgcolor ='#990000';  //Couleur arrière
bgcolor2='#A7B2E9';  //Couleur arrière surbrillance
bgcolor3='#6375D6';  //Couleur bordure
bgcolor4='#ffffff';  //Couleur texte
largeur = 100
hauteur = 22
i       = 0
menup = new Array;
menup[i++]='ActuFr';       menup[i++]='http://actufr.com';
menup[i++]='MultiDesk';    menup[i++]='http://multidesk.pass-x.com';
menup[i++]='Menu Hz';      menup[i++]='http://menuhorizontal.pass-x.com';
menup[i++]='JavaSriptFr';  menup[i++]='http://javascriptfr.com';
menup[i++]='Home';         menup[i++]='index.html';

document.write('<style>.ejsmenu {color:'+bgcolor4+'; cursor:hand;cursor:pointer}</style>')
document.write('<DIV ID=menu><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR='+bgcolor3+' WIDTH='+(menuhz?largeur*menup.length/2:largeur) +' HEIGHT='+hauteur+'><TR><TD><TABLE CELLPADING=0 CELLSPACING=1 BORDER=0 WIDTH=100% HEIGHT=100%>'+(menuhz?'<tr>':''))
for(pass=0;pass<menup.length;pass+=2) document.write((menuhz?"":"<tr>")+"<TD WIDTH="+largeur+" ALIGN=center BGCOLOR="+bgcolor+" onMouseDown='location.href=\""+menup[pass+1]+"\"' onMouseOver='this.style.background=\""+bgcolor2+"\"' onMouseOut='this.style.background=\""+bgcolor+"\"' CLASS=ejsmenu><FONT SIZE=2 FACE=Verdana><B>"+menup[pass]+"</B></FONT></TD>")
document.write('</tr></TABLE></TD></TR></TABLE></DIV>')
</script>
<br />
<H1><center><strong>
<p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p>
<p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p>
<p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p>
<p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p><p>Bla Bla Bla Bla</p>
</strong></center></H1>
</body>
</html>

Conclusion

Garder un objet à la même position est assez simple, il suffit d'utiliser le style "position:fixed".
Tout le problème vient que ce style css ne fonctionne pas sous IE.
Il est donc possible que ce code ne fonctionne pas sous certains navigateurs.
N'ésitez pas à la faire savoir :-)

width:500px;   // c'est la largeur du menu
left:50%;         // centre le menu
margin-left:-250px;    // la largeur du menu / 2
 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Commentaires et avis

signaler à un administrateur
Commentaire de Arto_8000 le 09/05/2005 22:41:53

Il y a aussi style="position:absolute;".

signaler à un administrateur
Commentaire de coucou747 le 11/05/2005 17:52:19

style="position:fixed;"....

signaler à un administrateur
Commentaire de x_mec le 20/03/2007 11:08:49

Ta bidouille est sympa, mais ce qui est moins sympa c'est que tout les element en position:absolute seront fixé eu aussi !

signaler à un administrateur
Commentaire de matmovies le 09/05/2007 22:10:11

ça fait longtemps que je cherche à comprendre comment repositionner un objet en fonction du redimensionnement de la fenêtre donc le position fixed est exactement ce que je cherche... MAIS (bien sûr) est-ce normal que lorsque je mets une anim en ligne (en fullscreen), l'élement ne se positionne que lorsque je redimensionne la fenêtre manuellement, pas à l'ouverture de la page web ???
help

signaler à un administrateur
Commentaire de enanda le 21/06/2007 14:33:08

Comment je pourrai exploiter votre menu horizontal car jai besoin si possible ?!

Ajouter un commentaire



Nos sponsors

Sondage...

CalendriCode

Juillet 2009
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Comparez les prix Nouvelle version

Photothèque Nouveau !



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,733 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.