Translation




 

 

 
 
French to English French to German French to Italian French to Spanish
French to Japanese French to Korean French to Russian French to Chinese (Simplified)
 

 

 
 

 

 

 

 

Ombre et lumière

1 février 1995 3 01 /02 /février /1995 01:00


 

exemple 2 exemple 3 exemple 4




Voici le code à mettre dans le html


<table border="0" bordercolor="#000000"  align="center">
<tbody>
<tr>


<td><a class="menu3" title="blabla exemple 1" href="http://chateau.over-blog.net/article-13475146.html">Exemple 1</a></td>

<td><a class="menu3" title="blabla exemple 2" href="http://chateau.over-blog.net/article-5560154.html" target="_blank">exemple 2</a></td>

<td><a class="menu3" title="blabla exemple 3" href="http://chateau.over-blog.net/article-3300915.html">exemple 3</a></td>

<td><a class="menu3" title="blabla exemple 4" href="http://chateau.over-blog.net/article-27336809.html">exemple 4</a></td>

</tr>
</tbody>
</table>




<style type="text/css">
a.menu3 { display:block; margin-top:1px; text-align:center; font:10pt; font:bold;
width:154px; border-style:ridge; border-width:5px; border-color:#0000AA; padding:0px; }

a.menu3:link { color:#2F485D; text-decoration:none; }
a.menu3:visited { color:#2F485D; text-decoration:none; }
a.menu3:hover {  color:#ffffff; background-color: red; text-decoration:none; border-color:#000000; }
a.menu3:active { color:#ffffff; background-color:#4A546F; text-decoration:none; }
</style>

<style type="text/css">
a.lien {color:#2F485D;text-decoration:none;}
a.lien:hover{color:#969696;filter:glow(color=#ffa900,strength=4);width=50%;}
</style>




===============================================================

Explication de ce "bidule"

* Les textes en couleurs entre les <td> et </td> sont les rectangles pour le menu.
J'en ai mis 4 mais on peut agrandir à l'infini... heu.. presque
 :
* Evidemment, il faut changer la prose; Par exemple :
 
exemple 4, on peut mettre -->  MUSIQUE
  exemple 1, on peut mettre -->  CINEMA
etc....

*
http://chateau.over-blog.net/article-13475146.html    représente l'url (adresse) de destination... Le lien en réalité

* et blabla exemple 4 c'est... l'info bulle  (le texte qui apparait quand la souris est sur le rectangle).

Nota : Après avoir collé ce code dans le html, il est possible de modifier le tableau, les proses, les infobulles, les liens avec le clic droit (sans revenir dans le html)

 
=============================================

J'ai mis en gras les couleurs.
Il faut simplement mettre le code couleur précédé d'un # ..... ou ..... la couleur primaire comme red, blue....

* color:#ffffff représente la couleur de l'écriture.
* background-color:#4A546F correspond à la couleur du fond des cellules.
*border-color:#0000AA définit la couleur de la bordure des cellules.

==> a.menu:hover  est pour définir les caractéristiques de la cellule lorsque la souris pointe dedans.

--> Vous avez remarqué que sur la ligne  a.menu3:hover  j'ai redéfini la couleur de la bordure quand la souris pointe dans la cellule : border-color:#000000;   La couleur peut évidemment être modifiée.
.. Si vous pensez que le changement de bordure surcharge la vue, vous pouvez supprimer cette instruction : border-color:#000000;

============================================

Faites des essaies.... ce script est très facile à comprendre avec un peu de patience.



Limitation
   Aucune. Ce code ne contient pas de Javascript. Il suffit de le coller dans le texte libre en haut de votre blog dans le mode html.




 

  Retour menu Widget 

 

 

Partager cet article

Repost 0
Published by Le Chevalier Dauphinois - dans ** Mes Widgets
commenter cet article

commentaires

Evelyne 01/04/2013 11:24

Encore une petite question SVP ... et si, à la place du texte on met une image ? comment faut il faire..
Merci pour votre réponse

Le Chevalier Dauphinois 02/04/2013 12:42



Pour mettre les images, il ne faut pas utiliser mon astuce.


* Il faut faire un tableau sans bordure


* Puis dans chaque cellule faire un rollover si tu souhaites une animation.


Le rollover est très bien expliqué sur google



Evelyne 01/04/2013 10:31

très très bien expliqué .... Merci
mais j'ai un problème ... j'ai mis plusieurs rectangles et, évidemment, ça ne reste que sur une seule ligne.. Comment fait-on pour en mettre sur plusieurs lignes ..
Merci pour votre aide .. je suis une débutante qui bidouille ..

Le Chevalier Dauphinois 02/04/2013 12:27



Je suis heureux que ma petite astuce soit facilement compréhensible.


  Pour avoir plusieurs lignes (et plusieurs design) ce qui est mon cas..... il suffit de remettre un autre css et le htm mais en remplaçant menu3 par
menu4


 Puis pour une autre ligne, il faut menu4


* Cette méthode est rapide et facilement faisable 


* Il existe une autre méthode mais il faut modifier le CSS et HTML 



Claude 27/12/2011 15:12

Bonjour Chevalier Dauphinois,
Merci pour ce script qui marche à merveille dans mon blog.
J'ai pourtant un petit souci : je n'arrive pas à centrer cette barre de menu bien que j'y ai mis et avant et après .
De plus, je souhaiterai que les titres des menus soient plus "voyants"...
Merci infiniment pour ton aide !

Deeann S. 03/05/2011 20:40


Merci pour votre menu sans javascript. On peut l'insérer directement dans html sans aller dans le css ce qui es plus simple pour moi qui n'aime pas trop aller jouer dans le css. Il m'a permis de
faire des sous-menus dans ma catégorie 'zodiaque chinois', c'est merveilleux. J'espère que d'autres pourront en profiter et j'ai fait un lien sur votre site qui es des plus intéressants (article
sur les menus sans script:http://marrainedeeann.over-blog.com/article-24588129.html). Encore merci.


Le Chevalier Dauphinois 03/05/2011 21:25



  Heureux je suis que ce modeste article soit utilisable. Il y a 3 ans, je souhaitais un système simple, paramétrable mais sans devoir entrer dans le css.


  La solution Rollover était sympa, mais un peu lourde pour 10 menus. Le web étant riche d'astuces, j'ai modifié un peu celles trouvées pour créer ce "truc".



mehdi 11/03/2011 01:37


Merci chevalier dauphinois. j'ai joué sur les 2 paramètres.

comme le css que j'ai choisi est non modifiable j'ai ajouter:




en modifiant comme tu m'a dis "letter-spacing:" et cela marche nickel.

merci beaucoup. il ne me reste plus qu'a m'occuper des liens et de la déco.


Bonne soirée, cela faisait longtemps que je cherchais un menu moins lourd qu'un javascript et surtout facilement adaptable.


Le Chevalier Dauphinois 11/03/2011 12:19



Heureux je suis de voir ta réussite. Expert tu deviens chaque jour.