Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120621 Menu Intéractif | | Réalisez votre menu intéractif Il faudra mettre l'url de vos images, et les urls de vos liens à la place des miens
Voici le code, a mettre entre body et /body : - Code:
-
<style> img { border: none; } /* dock - top */ .dock { z-index: 111111111111111111; 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> <!--[if lt IE 7]> <style type="text/css"> div, img { behavior: url(iepngfix.htc) } </style> <![endif]--> <div class="dock" id="dock"> <div class="dock-container"> <a href="http://www.creaillusionfantasy.com/" target="_blank" class="dock-item"><img src="http://sd-4.archive-host.com/membres/up/99685358053205863/Caroussel/1.png" /> <span class="Style3">Accueil</span></a><a href="http://www.creaillusionfantasy.com/codexcrea.html" target="_blank" class="dock-item"><span><a href="http://www.creaillusionfantasy.com/codexcrea.html" target="_blank" class="dock-item"><img src="http://sd-4.archive-host.com/membres/up/99685358053205863/Caroussel/11.png"/><span class="Style3">Creations</span></span></a> <a href="http://forumcrea.forumactif.org/" target="_blank" class="dock-item"><img src="http://sd-4.archive-host.com/membres/up/99685358053205863/Caroussel/3.png" /> <span class="Style3">Forum</span></a><a class="dock-item" href="#"><img src="http://sd-4.archive-host.com/membres/up/99685358053205863/Caroussel/4.png" /> <span class="Style3">Sympa</span> </a> <a href="http://www.kazmag.com/" target="_blank" class="dock-item"><img src="http://sd-4.archive-host.com/membres/up/99685358053205863/Caroussel/5.png" /> <span class="Style3">KazMag</span> </a> <a href="http://www.creaillusionfantasy.com/" target="_blank" class="dock-item"><img src="http://sd-4.archive-host.com/membres/up/99685358053205863/Caroussel/6.png" /> <span class="Style3">A voir</span><a class="dock-item" href="#"><img src="http://sd-4.archive-host.com/membres/up/99685358053205863/Caroussel/8_2.png" /> <span class="Style3">Musique</span> </a> <a class="dock-item" href="#"><img src="http://sd-4.archive-host.com/membres/up/99685358053205863/Caroussel/7.png" /> <span class="Style3">Dossiers</span> </a> <a class="dock-item" href="#"><img src="http://sd-4.archive-host.com/membres/up/99685358053205863/Caroussel/12.png" /> <span class="Style3">CoolMenu</span> </a> <a class="dock-item" href="#"><img src="http://sd-4.archive-host.com/membres/up/99685358053205863/Caroussel/10.png" /> <span class="Style3">Nous ecrire</span> <span class="Style3"> <script type="text/javascript"> </script> </span></a><span class="Style3"> <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>
Dernière édition par Ptite_Perle le Mer 27 Fév 2019 - 17:54, édité 1 fois |
| |
CapucineMembre Messages : 263 Venue : 11/11/2009 Je suis : Age : 52 Je vie à : Auvergne : In Truffade we trust ! Humeur : bonne =) Mes Points : 108674 Re: Menu Intéractif | | Haaaaaan la classouille !! Merci Perle =) |
| |
Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120621 Re: Menu Intéractif | | De rien capucine |
| |
âmeMessages : 113 Venue : 28/01/2010 Je suis : Je vie à : Gard. Humeur : Heureuse ! Mes Points : 104289 Re: Menu Intéractif | | Merci beaucoup ma 'tite Perle, ça sera très utile pour mon site perso ! Gros bisouxxxxxx |
| |
Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120621 Re: Menu Intéractif | | Je suis ravie, d'apprendre qu'il va être utile p our ton site, âme |
| |
âmeMessages : 113 Venue : 28/01/2010 Je suis : Je vie à : Gard. Humeur : Heureuse ! Mes Points : 104289 Re: Menu Intéractif | | Il faudra que je regarde dans la semaine car je viens de le mettre en place et il doit y avoir une erreur dans le codage car ça ne fonctionne pas sur mon site et c'est pourtant placé entre "Body" Je ferais un cop/col dans un fichier texte afin de mieux voir. Bonne nuit et bon week-end ma 'tite Perle, bisouxxxx. |
| |
Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120621 Re: Menu Intéractif | | Oui surement quelques choses ne va pas, car sur la page que j'ai crée il fonctionne le menu Je te met le code source de ma page, si ca peut aider, je te permet même de prend le code source - Code:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Menu intéractif</title> <style type="text/css"> <!-- body { background-color: #492142; } .Style3 {font-size: 12px; color: #FFFFFF; } .Style1 {color: #FFFFFF} --> </style> </head> <p> <center class="Style1">Un joli menu intéractif <br /> Sur le menu quelques liens fonctionnent pour vous montrez les réactions </center> <p> <body><style> img { border: none; } /* dock - top */ .dock { z-index: 111111111111111111; 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> <!--[if lt IE 7]> <style type="text/css"> div, img { behavior: url(iepngfix.htc) } </style> <![endif]--> <div class="dock" id="dock"> <div class="dock-container"> <a href="http://www.creaillusionfantasy.com/" target="_blank" class="dock-item"><img src="http://sd-4.archive-host.com/membres/up/99685358053205863/Caroussel/1.png" /> <span class="Style3">Accueil</span></a><a href="http://www.creaillusionfantasy.com/codexcrea.html" target="_blank" class="dock-item"><span><a href="http://www.creaillusionfantasy.com/codexcrea.html" target="_blank" class="dock-item"><img src="http://sd-4.archive-host.com/membres/up/99685358053205863/Caroussel/11.png"/><span class="Style3">Creations</span></span></a> <a href="http://forumcrea.forumactif.org/" target="_blank" class="dock-item"><img src="http://sd-4.archive-host.com/membres/up/99685358053205863/Caroussel/3.png" /> <span class="Style3">Forum</span></a><a class="dock-item" href="#"><img src="http://sd-4.archive-host.com/membres/up/99685358053205863/Caroussel/4.png" /> <span class="Style3">Sympa</span> </a> <a href="http://www.kazmag.com/" target="_blank" class="dock-item"><img src="http://sd-4.archive-host.com/membres/up/99685358053205863/Caroussel/5.png" /> <span class="Style3">KazMag</span> </a> <a href="http://www.creaillusionfantasy.com/" target="_blank" class="dock-item"><img src="http://sd-4.archive-host.com/membres/up/99685358053205863/Caroussel/6.png" /> <span class="Style3">A voir</span><a class="dock-item" href="#"><img src="http://sd-4.archive-host.com/membres/up/99685358053205863/Caroussel/8_2.png" /> <span class="Style3">Musique</span> </a> <a class="dock-item" href="#"><img src="http://sd-4.archive-host.com/membres/up/99685358053205863/Caroussel/7.png" /> <span class="Style3">Dossiers</span> </a> <a class="dock-item" href="#"><img src="http://sd-4.archive-host.com/membres/up/99685358053205863/Caroussel/12.png" /> <span class="Style3">CoolMenu</span> </a> <a class="dock-item" href="#"><img src="http://sd-4.archive-host.com/membres/up/99685358053205863/Caroussel/10.png" /> <span class="Style3">Nous ecrire</span> <span class="Style3"> <script type="text/javascript"> </script> </span></a><span class="Style3"> <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> </span></div> </div> <p> </p> <p> </p> <p> </p> <p> </p> <p align="center" class="Style1">Voila un joli menu pas trop difficile à réaliser avec un mininum de connaissance html</p> <p align="center" class="Style1">Ptite_Perle</p> </body> </html>
|
| |
âmeMessages : 113 Venue : 28/01/2010 Je suis : Je vie à : Gard. Humeur : Heureuse ! Mes Points : 104289 Re: Menu Intéractif | | Merci Ptite_Perle, je regarderais déjà ton codage de menu interactif et si je ne trouve pas je le montrerais à mon fils neomaster. Au cas où, je repasserais ici voir ton code source mais rien ne presse de toute façon car avec le travail, je suis moins présente sur les fo' et le site Encore merci pour ta proposition ! Bisouxxxx et bon Dimanche. |
| |