[Pb] Affichage d'un menu avec un effet carrousel

Marsh Posté le 18-04-2011 à 18:05:29

Bonjour,

Depuis hier soir, j'essaye de bien configurer un script afin de le mettre sur mon site mais sans succès.
Ce script me permet d'afficher un menu avec un effet carrousel.

Le problème est que je n'arrive pas à centrer ce menu, sur ma page d'accueil (que ce soit sur firefox ou IE).
Quelque soit les modifications que j'entreprends dans le script, les icônes s'affichent sur la gauche de mon index alors que le mousse over est quant à lui centrer.

Voici le script :

Code :

<style> img { border: none; } /* dock - top */ .dock { z-index: 100; background-image: url(''); background-repeat: repeat-y position: relative; height: 50px; text-align: center; } .dock-container { position: absolute; height: 50px; background: url(); padding-left: 20px; } a.dock-item { display: block; width: 40px; color: #000; position: absolute; top: 0px; text-align: center; text-decoration: none; font: bold 12px Arial, Helvetica, sans-serif; } .dock-item img { border: none; margin: 5px 10px 0px; width: 100%; } .dock-item span { display: none; padding-left: 20px; } /* dock2 - bottom */ #dock2 { width: 100%; bottom: 0px; position: absolute; left: 0px; } .dock-container2 { position: absolute; height: 50px; background: url(images/dock-bg.gif); padding-left: 20px; } a.dock-item2 { display: block; font: bold 12px Arial, Helvetica, sans-serif; width: 40px; color: #000; bottom: 0px; position: absolute; text-align: center; text-decoration: none; } .dock-item2 span { display: none; padding-left: 20px; } .dock-item2 img { border: none; margin: 5px 10px 0px; width: 100%; } </style> <script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/37297969143779149/jquery.js"></script> <script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/37297969143779149/interface.js"></script>  <div class="dock" id="dock"> <div class="dock-container"> <a class="dock-item" href="#"><img src="http://sd-1.archive-host.com/membres/images/37297969143779149/images1/home.png" /> <span>Accueil</span> </a> <a class="dock-item" href="#"><img src="http://sd-1.archive-host.com/membres/images/37297969143779149/images1/email.png" /> <span>Email</span> </a> <a class="dock-item" href="#"><img src="http://sd-1.archive-host.com/membres/images/37297969143779149/images1/portfolio.png"/> <span>Document</span> </a> <a class="dock-item" href="#"><img src="http://sd-1.archive-host.com/membres/images/37297969143779149/images1/tutoriel.png" /> <span>Tuto</span> </a> <a class="dock-item" href="#"><img src="http://sd-1.archive-host.com/membres/images/37297969143779149/images1/jours.png" /> <span>Cours</span> </a> <a class="dock-item" href="#"><img src="http://sd-1.archive-host.com/membres/images/37297969143779149/images1/link.png" /> <span>Liens</span><a class="dock-item" href="#"><img src="http://s1. spam.com /2009/10/18/69295502video-png.png" /> <span>Video</span> </a> <a class="dock-item" href="#"><img src="http://s1. spam.com /2009/10/18/36443294newsletter-png.png"/> <span>News</span> </a> <a class="dock-item" href="#"><img src="http://s1. spam.com /2009/10/18/52657116album-photo-png.png" /> <span>Photos</span> </a> <a class="dock-item" href="#"><img src="http://s1. spam.com /2009/10/18/77360071forum-png.png" /> <span>Forum</span> </a> <a class="dock-item" href="#"><img src="http://s1. spam.com /2009/10/18/47409109livre-png.png" /> <span>Livre</span> </a> </div> </div> <script type="text/javascript"> $(document).ready( function() { $('#dock').Fisheye( { maxWidth: 50, items: 'a', itemsText: 'span', container: '.dock-container', itemWidth: 40, proximity: 90, halign : 'center' } ) } ); </script>

Merci pour l'aide que vous m'apportez !!!

Reply

Marsh Posté le 18-04-2011 à 18:05:29

Reply

Marsh Posté le 19-04-2011 à 17:10:02

Sans rire, t'as vu la tronche du code que tu postes :heink: Tu crois vraiment qu'on va se prendre la tête à lire un truc pareil. Ca sent à plein nez le bout de code repris qq part et que t'arrives pas à faire fonctionner. Donc merci de voir ça avec le concepteur de ce code.

Sinon, tu essayes de programmer toi-même l'effet recherché (à l'aide d'une lib JS style jQyery ou Script.aculo.us) et tu reviens ici avec ton code et des questions si tu rencontres un pb. Là, on pourra t'aider.

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta

Reply

[Pb] Affichage d'un menu avec un effet carrousel

Sujets relatifs:

Leave a Replay