Forum Crea illusion Fantasy


Coucou,

Merci de nous rejoindre sur le forum, j'espère que l'on passera de bons moments ensembles.

Au plaisir de te lire dans les différentes catégories.

Le Staff du forum Crea illusion Fantasy.


Aides,Codes,Conseils,Forum,Sites web,blogs,Tout supports,Photographie,Graphismes,Dessins,Peintures,Tutoriels,Publicités.
 
AccueilPortailÉvènementsFAQPublicationsPublicationsS'enregistrerConnexion
Ta bannière, Ici !


Partagez | .
 

 Menu Intéractif

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Ptite_Perle
Admin


avatar


Messages : 6200
Venue : 27/06/2009 Je suis: : Féminin
Né(e) le : 17/09/1963
Age : 54
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 9272

MessageSujet: Menu Intéractif   Sam 31 Juil 2010 - 23:18


Réalisez votre menu intéractif

Voir ici le 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>
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/
Capucine
Expert Adobe


avatar


Messages : 303
Venue : 11/11/2009 Je suis: : Féminin
Né(e) le : 06/11/1971
Age : 45
Je vie à : Auvergne : In Truffade we trust !
Humeur : bonne =)
Mes Points : 3148

MessageSujet: Re: Menu Intéractif   Dim 1 Aoû 2010 - 1:18

Haaaaaan la classouille !! Merci Perle =)
Revenir en haut Aller en bas
http://blog-adobegfx.com/wordpress/
Ptite_Perle
Admin


avatar


Messages : 6200
Venue : 27/06/2009 Je suis: : Féminin
Né(e) le : 17/09/1963
Age : 54
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 9272

MessageSujet: Re: Menu Intéractif   Dim 1 Aoû 2010 - 10:01

De rien capucine Smile
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/
âme
inactif
avatar


Messages : 115
Venue : 28/01/2010 Je suis: : Féminin
Je vie à : Gard.
Humeur : Heureuse !
Mes Points : 243

MessageSujet: Re: Menu Intéractif   Ven 29 Oct 2010 - 23:58

Merci beaucoup ma 'tite Perle, ça sera très utile pour mon site perso !
Gros bisouxxxxxx
Revenir en haut Aller en bas
http://www.color-avenue.net/forum
Ptite_Perle
Admin


avatar


Messages : 6200
Venue : 27/06/2009 Je suis: : Féminin
Né(e) le : 17/09/1963
Age : 54
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 9272

MessageSujet: Re: Menu Intéractif   Sam 30 Oct 2010 - 9:13

Je suis ravie, d'apprendre qu'il va être utile p our ton site, âme Smile
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/
âme
inactif
avatar


Messages : 115
Venue : 28/01/2010 Je suis: : Féminin
Je vie à : Gard.
Humeur : Heureuse !
Mes Points : 243

MessageSujet: Re: Menu Intéractif   Dim 31 Oct 2010 - 2:27

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.
Revenir en haut Aller en bas
http://www.color-avenue.net/forum
Ptite_Perle
Admin


avatar


Messages : 6200
Venue : 27/06/2009 Je suis: : Féminin
Né(e) le : 17/09/1963
Age : 54
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 9272

MessageSujet: Re: Menu Intéractif   Dim 31 Oct 2010 - 9:53

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>&nbsp;</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>
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/
âme
inactif
avatar


Messages : 115
Venue : 28/01/2010 Je suis: : Féminin
Je vie à : Gard.
Humeur : Heureuse !
Mes Points : 243

MessageSujet: Re: Menu Intéractif   Dim 31 Oct 2010 - 14:52

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 Smile
Encore merci pour ta proposition !
Bisouxxxx et bon Dimanche.
Revenir en haut Aller en bas
http://www.color-avenue.net/forum
Contenu sponsorisé




MessageSujet: Re: Menu Intéractif   

Revenir en haut Aller en bas
 

Menu Intéractif

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» [Permissions] Mettre les permissions dans le PA sous forme de tableau intéractif
» Intégrer un code HTML dans le menu vertical de la page d'accueil du forum ?
» Je souhaite insérer un Menu défilant sur toutes les pages du Forum
» Barre de menu flash : Comment intégrer du HTML au dessous le logo titre sur chaque pages?
» Couleur intérieur du menu déroulant sélectionner un forum

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Forum Crea illusion Fantasy  :: Codes-