CodeS-SourceS est hébergé par Frontier.fr

Cliquez ici pour mettre ce site au démarrage de votre navigateur

AccueilCodesTutorielsForumsEmploiLivresConnexion

begin process at 2008 11 20 15:58:16

CODEPLEX : GOOGLE MAPS INTELLISENSE HELPER - RELEASE par nicoboo

[OPEN XML] LES SPéCIFICATIONS D'OPEN XML ISO ENFIN PUBLIéES ! par neodante

SAF 2008 : DAY I par MPOWARE

PASS 2008 : RéSUMé DE LA PREMIèRE JOURNéE par christian

WINDOWS AZURE SERVICES : PREMIèRE APPLICATION - SERVICE ON THE CLOUD : JUST DO IT ! par redo

RE : AGRANDIR TEXTAREA EN FONCTION DU TEXTE TAPé par Bul3

RE : LLANCER UN CODE JAVASCRIPT DANS UNE IFRAME par vistah

RE : AGRANDIR TEXTAREA EN FONCTION DU TEXTE TAPé par lilbrother

RE : LLANCER UN CODE JAVASCRIPT DANS UNE IFRAME par Bul3

RE : LLANCER UN CODE JAVASCRIPT DANS UNE IFRAME par vistah

+ de logiciels à télécharger

1 291 916 membres
400 nouveaux aujourd'hui
14 519 membres club

Trouver une ressource

Trouvez une ressource parmi 39 005 codes, 1 202 977 messages d'aide etc...

Recherche: dans [ Dernières recherches ]

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

Catégorie :Trucs & Astuces Niveau : Expert Date de création : 09/05/2005 Vu / téléchargé: 8 400 / 1 125

Auteur : larion

Site perso

Ecrire un message privé

Note :

10,00 / 10

Commentaire sur cette source (5)

Ajouter un commentaire et/ou une note

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 !

Fixed IE FireFox.htm 2 385 octets

Télécharger le zip

Sources du même auteur

CHANGER DE THEME ET DE COULEUR

TRI DYNAMIQUE D'UN TABLEAU HTML AVEC RECONNAISSANCE AUTOMATI...

MENU HORIZONTAL DYNAMIQUE AVEC SOUS-MENUS AVEC FONDU

MENU VERTICAL AVEC SOUS-MENUS

MENU HORIZONTAL ET VERTICAL

Toutes les sources de larion

Sources de la même categorie

AFFICHER OU CACHER UN COMPOSANT AVEC JAVASCRIPT par CodeurleGeek

AUTO MANUEL PARAGRAPHES, DIAPO PARAGRAPHES OU AUSSI PROJECTE... par abdelaziz_info

DEUX MESSAGES DANS LA BARRE D'ÉTAT par pgl10

DIAPORAMA 360° V2 MOUVEMENT DANS LES QUATRE SENS ROTATION VA... par abdelaziz_info

POSITION ABSOLUTE par kazma

Toutes les sources de la catégorie Trucs & Astuces

Commentaires et avis

Commentaire de Arto_8000 le 09/05/2005 22:41:53

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

Commentaire de coucou747 le 11/05/2005 17:52:19

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

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 !

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