Aide - Recherche - Membres - Calendrier
Version complète : Créer vos propres bouton dynamique...
Utilisable > Référencement, développement et hébergement > Développement Web > Design & Graphisme
GoodRef
24-11-2005, 12:02
Vous pouvez assez facilement créer vos boutons réatifs, par exemple pour faire un menu dynamique !

Voici le marche à suivre :

- Créer deux boutons de taille identique, pour notre exemple nous dirons 102x18
- Modifier la couleur du second bouton, par exemple légèrement plus claire.
- Vous obtiendrez un plus bel effet avec des tons pastels dans la même gamme de couleurs.
- Nommer un des boutons "bouton_in.gif" et l'autre "bouton_out.gif"

Ensuite avec un editeur de texte, vous créer une feuille de style css
de la manière suivante :

Code
@charset "iso-8859-1";
/*
Realisation JBoyne©
http://www.jeannotweb.be
*/

.menu {
    font-family: Verdana, Arial;
    font-size: 10px;
    font-style: normal;
    line-height: 22px;
    font-weight: bold;
    color: #3C5A60;
    text-decoration: none;
    background-image: url(img/bouton_in.gif);
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    vertical-align: middle;
    display: block;
    height: 18px;
    width: 102px;
    
}
.menu:hover {
    background-image: url(img/bouton_out.gif);
    text-decoration: none;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    color: #57828A;
}


Enregistrer cette feuille à la racine de votre site et nommer la par exemple : menu_bout.css

Dans les pages ou vous souhaitez voir les boutons réactifs, vous devrez copier le bout de code suivant
comme indiquer ci-après :
Code
<head>
- meta titre -
- meta description -
- meta mots clés -
ICI : <link rel="stylesheet" href="menu_bout.css" type="text/css">
</head>


Enfin pour terminer ajouter [ class="menu" ] pour afficher les boutons dynamiques !

Exemple :

Code
<A HREF="index.html" class="menu">Acueil</A>
<A HREF="lien.html" class="menu">Lien</A>
<A HREF="http://www.lesite/chose" class="menu">Chose</A>
<A HREF="truc.php" class="menu">Truc</A>


Voilà, vous pouvez voir un exemple de ce procédé sur Label-annuaire (menu de gauche)

J'ai afficher quelques models de boutons sur cette page http://www.label-annuaire.com/bouton.html

Bonne création.....
Patrick
24-11-2005, 13:56
Et en plus ça marche ...

Merci Jeannot !

showoff.gif
GoodRef
24-11-2005, 14:25
Citation (Patrick @ jeudi 24 novembre 2005 à 13:56) *
Et en plus ça marche ...

Merci Jeannot !

showoff.gif


Je veux mon neveu rofl.gif

Et en plus j'ai même en réserve une série de boutons super cool !
Mais il me faudrais l'autorisation du boss pour les affichés sur un topic...

A vous de voir mon neveu.... heu pardon... Boss rofl.gif

++
Trouvemoica
24-11-2005, 19:50
Là je dis MONSIEUR GOODREF

Super sympas les boutons et sur tout l'info

Une SALUT ROMAIN pour l'artiste icon13.gif

pourles bouton de mon visage, ya possibilité de changer de couleur??? rofl.gif rofl.gif
GoodRef
24-11-2005, 20:25
Citation (Trouvemoica @ jeudi 24 novembre 2005 à 19:50) *
pourles bouton de mon visage, ya possibilité de changer de couleur??? rofl.gif rofl.gif


Oui mais la morale et la déscence m'interdise de répondre ici rofl.gif rofl.gif

bye2.gif
Patrick
25-11-2005, 01:27
Citation (GoodRef @ jeudi 24 novembre 2005 à 14:25) *
Et en plus j'ai même en réserve une série de boutons super cool !
Mais il me faudrais l'autorisation du boss pour les affichés sur un topic...


Hello, vas y ouvre un topic et met nous en plein les yeux w00t.gif

++

Patrick
GoodRef
25-11-2005, 16:25
Citation (Patrick @ vendredi 25 novembre 2005 à 01:27) *
Hello, vas y ouvre un topic et met nous en plein les yeux w00t.gif

++

Patrick


Plein la vue pour pas rond rofl.gif

J'ai ajouter un lien dans mon topic vers une page avec les boutons,
il n'y en pas encore des masses, mais ca viendra......simplement il faut que je fasse des fouilles dans car j'en ai qui trainent un peu partout whistle.gif

++
Woualy
27-11-2005, 22:02
Heuuuuu si on veut les boutons à l'horizontal et non pas en verticale on modifie quel parametres ?

vertical-align ?? j'ai essayé ça donne rien...

J'ai tout adapté pour mon annuaire mais je bute sur ce truc...Je sais je sais...
Rikaix
27-11-2005, 23:06
salut
Citation
Heuuuuu si on veut les boutons à l'horizontal et non pas en verticale on modifie quel parametres ?


il faut ajouter
Code
float:left;
à la classe .menu
et si tu ne veux pas qu'ils soient collés un margin de 1 ou 2 px (sinon pas de margin)


ce qui donne
Code
.menu {
     margin:2px;
     float:left;
     height: 18px;
    width: 102px;
     font-family: Verdana, Arial;
    font-size: 10px;
    font-style: normal;
    line-height: 22px;
     font-weight: bold;
    color: #3C5A60;
    text-decoration: none;
    background-image: url(img/bouton_in.gif);
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    vertical-align: middle;
    display: block;
  
}


Rikaix thumbsup.gif

Ps : vertical-align sert à aligner le texte verticalement dans le bloc (A ici) donc tu n'étais pas du tout sur la bonne voie ....
Woualy
27-11-2005, 23:38
Bon d'accord j'etais à coté de la plaque une fois de plus....et hop un coup de forumet j'ai encore appris un truc...

Bon maintenant tout est bien aligne horizontalement, MAIS MAIS MAIS tout est collé à gauche de ma page, et non plus centré....Je sais je suis CH****

Merci les copaings...
GoodRef
27-11-2005, 23:40
Merci d'avoir répondu Eric, je fouillais mon pc pour retrouver l'info, je n'aurais jamais plus su dire comment était la syntaxe pour l'horizontale !
Woualy
28-11-2005, 00:11
Oups j'ai encore un soucis....

Quand je teste la page haut.php avec mes boutons à la mode GoodRef, tout est nickel, mais quand je l'integre a ma page index, y'a un soucis...il doit y avoir un mélange entre les fichiers CSS, si vous voulez voir c'est ici => INDEX2

Le bandeau (avant2.php) en haut est en travaux, et les boutons (haut2.php) dessous me chagrine...Vous pouvez essayer les pages haut2.php et avant2.php, elles sont en lignes....si ça peut vous aiguiller...
Bon je vous laisse la nuit pour chercher, je reléve les copies demain matin... bleh.gif bleh.gif bleh.gif

Bonne nuit à tous... dormeur3.gif
Rikaix
28-11-2005, 08:55
Bonjour Woualy

Avec annuaire utilisable la balise a (a href ... ) est déjà déclarée dans utilisable css, le code donné par GoodRef utilise justement la balise A sous forme de bloc pour créer les boutons (ce qui est, à mon avis, pas la meilleure façon de proceder, il faut mieux inclure les liens dans une liste <li></li> (un menu étant par définition, une liste) , c'est mon avis et ça n'enléve rien au code de GoodRef qui est complétement fonctionnel)

Etone30.gif Alors 2 solutions ...

La 1ere : expliquer gentillement au code css que cette régle ne concerne que les balises A contenuent dans la classe .menu (aprés 2 heures de discussion devant votre écran vous n'arrivez à rien ... smile.gif ) bon, alors à la place de
Code
.menu
écrire
Code
a.menu
(uniquement les balises a de la classe menu)

2eme solution : réécrire le code en utilisant <li></li> (ah j'y tiens !! mais c'est en général comme ça qu'on fait)
(je fais un autre post)
Rikaix
28-11-2005, 09:34
note à Patrick (j'ai fait un autre post car en édition (compléte) control A, control C, control V ne fonctionnent pas (selection, copié,collé)

Comme expliqué par goodref plus haut , enregistrez les boutons et créer la feuille css.
Donc d'abord la feuille Css pour un menu horizontal, à sauver sous menu_bout.css ou à integrer à utilisable.css (en fin de fichier par ex.)
(en utilisant l'exemple de GoodRef)
Code
ul {list-style-type: none;} /* on supprime les puces */
li { float: left;} /* on aligne les listes sur la gauche , à supprimer si menu vertical*/
.menu a {
   font-family: Verdana, Arial;
      font-size: 10px;
      font-style: normal;
      line-height: 22px;
      font-weight: bold;
      color: #3C5A60;
      text-decoration: none;
      background-image: url(img/bouton_in.gif);
      background-repeat: no-repeat;
      background-position: center;
      text-align: center;
      vertical-align: middle;
      display: block;
     float: left; /* à supprimer si menu vertical */
      height: 18px;
      width: 102px /* on définit la taille du bouton de menu */
}
.menu a:hover {
   background-image: url(img/bouton_out.gif);
      text-decoration: none;
      font-weight: normal;
      text-align: center;
      vertical-align: middle;
      color: #57828A;
}
.menu a:active {
   background-image: url(img/bouton_out.gif);
      text-decoration: none;
      font-weight: normal;
      text-align: center;
      vertical-align: middle;
      color: #57828A;
}


ensuite le code des boutons Xhtml, hyper simple

Code
<ul class="menu">
<li><a href="index.php">Accueil</a></li>
<li><a href="lien2.html">lien2</a></li>
<li><a href="lien3.html">lien3</a></li>
etc
etc
</ul>


rikaix
Woualy
28-11-2005, 10:17
Je test tout ça ce soir, car là il faut que je bosse un peu pour de vrai.... rofl.gif rofl.gif

En tout ca : thumbsup.gif thumbsup.gif thumbsup.gif
volcanic1
28-11-2005, 16:25
sciences2.gif A vous tous les amis programmeurs Utilisable, encore merci pour les sous doués comme moi.
A force de vous fréquenter un jour, nous serons doués aussi et ce sera grâce à qui !!
à la communauté UTULISABLE, Bien sûr
Amicalement bye1.gif
Woualy
28-11-2005, 20:03
Bon ça prend forme....GRACE A VOUS !!!

Un scoop => NewLook, rien de cochon ici.... bye1.gif bye1.gif

Reste plus qu'a mettre une banniere, finir le bandeau, et CENTRER tout ça....mais là je coince sur le centrage.

hiya.gif hiya.gif

Bon c'est à 90% finit, nouveau bandeau, bouton qui clignotent (merci) et en prime la date et l'heure....

Il me reste plus qu'a trouver comment aligner les gauche et droite avec le haut....on vera plus tard....

Woualy, dormeur3.gif
Woualy
20-12-2005, 18:59
Heuuuuu, bonsoir c'est encore moi.... blush.gif blush.gif

Je viens de trouver le pourquoi du comment de mon decalage entre haut et avant...c'est la balise <ul> qui me permet d'avoir une liste horizontale pour le menu et des boutons qui clignotent, mais le probléme c'est que la balise de liste <ul> créer automatiquement une "marge" pour que la liste soit decalé du bord de page, donc......mes boutons sont décalés et mon site est de travers...

Y'a une ruse de sioux pour mettre ça droit ????


Et autres chose dans ma page inscription annuaire, j'ai ajouté le lien vers le fichier css des boutons, mais ils n'apparaissent pas du tout sur la page d'inscription.... ranting2.gif ranting2.gif

C'est grave docteur ?

Woualy, saut33.gif
GoodRef
20-12-2005, 20:03
Citation (woualy @ mardi 20 décembre 2005 à 18:59) *
Heuuuuu, bonsoir c'est encore moi.... blush.gif blush.gif

Je viens de trouver le pourquoi du comment de mon decalage entre haut et avant...c'est la balise <ul> qui me permet d'avoir une liste horizontale pour le menu et des boutons qui clignotent, mais le probléme c'est que la balise de liste <ul> créer automatiquement une "marge" pour que la liste soit decalé du bord de page, donc......mes boutons sont décalés et mon site est de travers...

Y'a une ruse de sioux pour mettre ça droit ????
Et autres chose dans ma page inscription annuaire, j'ai ajouté le lien vers le fichier css des boutons, mais ils n'apparaissent pas du tout sur la page d'inscription.... ranting2.gif ranting2.gif

C'est grave docteur ?

Woualy, saut33.gif


Salut Woualy,

je viens de jetter un oeil vite fait....et..je trouve déjà quelque chose de pas normale gun2.gif

Dans ta page inscription_annuaire tu as ceci :
Code
<!--Début Tableau principal-->
<table width="800" align="center" border="0" cellspacing="0" cellpadding="0">
  <!--DWLayoutTable-->
  <!--Début Tableau Interne pour le logo de fond-->
  <tr>
    <td width="302" height="100" valign="top" background="images/gauche2.png"><!--DWLayoutEmptyCell--> 
    <td width="478" align="center" valign="middle" background="images/milieu.png" valigne="top"><div align="right"><!--Publicités AnnOOnce-->
<script type="text/javascript"><!--
annoonce_id = "2030";
annoonce_color = "000000";
annoonce_background = "FFCC99";
annoonce_border = "000000";
annoonce_width = "468";
annoonce_height = "60";
//--></script>
<script type="text/javascript" src="http://www.annoonce.com/ads_thematic.js"></script>
      </div><td width="20" valign="top" valigne="top" background="images/droite.png"><!--DWLayoutEmptyCell--> 
  <tr>
    <td>
    <td>
    <td>
</table>

Tu peux m'expliquer le pourquoi des trois balises <td> ?????????????????????????

bye1.gif
Woualy
20-12-2005, 21:06
Toujours aussi fort le Goodref....J'ai un soucis dans ma page inscription_annuaire et il me trouve des erreurs dans ma page avant.php... icon13.gif icon13.gif

Ca y est j'ai fait le menage...Mais ce la ne change pas grand chose....
GoodRef
20-12-2005, 21:53
Citation (woualy @ mardi 20 décembre 2005 à 21:06) *
Toujours aussi fort le Goodref....J'ai un soucis dans ma page inscription_annuaire et il me trouve des erreurs dans ma page avant.php... icon13.gif icon13.gif

Ca y est j'ai fait le menage...Mais ce la ne change pas grand chose....


C'est pas dans la page avant que j'ai trouvé l'erreur.... c'est bien dans la inscription sciences2.gif
Woualy
20-12-2005, 22:50
Ouep mais dans la page Inscription y'a un Include pour les pages avant, haut et annonce, et les 3 <td> venaient de la page avant.....
GoodRef
20-12-2005, 23:47
Citation (woualy @ mardi 20 décembre 2005 à 22:50) *
Ouep mais dans la page Inscription y'a un Include pour les pages avant, haut et annonce, et les 3 <td> venaient de la page avant.....


Bien chef....oui chef.....je dis plus rien chef..... bye2.gif
Woualy
21-12-2005, 00:11
Le jour ou je serais chef, les poules auront un annuaire Utilisable....ou des dents....

Bon allez dormeur3.gif
Rikaix
21-12-2005, 09:45
Bonjour Woualy,

Comme te le dis Goodref il y a beaucoup d'erreurs dans ton code (un TD de 106 avec une TABLE de 800 à l'intérieur, des TR TD qui arrivent comme ça on ne sait d'ou ... des div fermés mais jamais ouverts, etc etc ... )

La ruse de sioux pour <ul> est simple il suffit de déterminer le margin dans la css,
exemple
ul {margin:0;} --> pas de marge

Allez bon courrage, mets ta tete entre tes 2 mains et étudie ton code sciences2.gif
Je regarde ça de loin icecream.gif
Enfin au cas ou il y a mon MSN dans mon profil wink.gif

Tiens j'en profite pour dire que je serais OFF LINE du 23 au 26 Décembre.

@++

thumbsup.gif Rikaix
Woualy
21-12-2005, 18:10
Citation (rikaix @ mercredi 21 décembre 2005 à 09:45) *
Comme te le dis Goodref il y a beaucoup d'erreurs dans ton code (un TD de 106 avec une TABLE de 800 à l'intérieur, des TR TD qui arrivent comme ça on ne sait d'ou ... des div fermés mais jamais ouverts, etc etc ... )


blush.gif blush.gif => sciences2.gif
Citation (rikaix @ mercredi 21 décembre 2005 à 09:45) *
La ruse de sioux pour <ul> est simple il suffit de déterminer le margin dans la css,
exemple
ul {margin:0;} --> pas de marge


à essayer , à pas marcher, mais faut peut etre que je passe le balais dans mon code avant....Vivement la semaine de vacances entre les fêtes... whistle.gif

Woualy, bye1.gif
Woualy
27-12-2005, 18:58
Ca y est TOUT est aligné et fonctionnel, j'ai (malheureusement) laissé tombé l'histoire de la liste et du CSS pour les boutons j'avais toujours le meme decalage entre haut & avant, maintenant tout est dans haut et ,donc, bien aligné.

Meme le margin-left = 0 ne change rien....

Woualy
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'informations, la mise en page et les images, veuillez cliquer ici.
Invision Power Board © 2001-2012 Invision Power Services, Inc.