Bonjour,

Dans mon site à droite il y a un mini sommaire déplaçable. Je voudrais qu'à l'ouverture de la page que celui-ci soit un peu plus bas pour qu'on puisse voir le sélecteur de langue. Voici une des pages traduites comme essais http://la.climatologie.free.fr/facteur-climat/climatic-factors1.htm .

Voici le code Java où il doit y avoir la ou les lignes à modifier d'après moi :

var isHorizontal=0;

var iconTopWidth = 16;

var iconTopHeight = 16;

var subMenuAlign = "left";

var moveImage = "../movepic4.gif";

var moveWidth = 12;

var moveHeight = 18;

var blankImage="../blank.gif";

var fontStyle="normal 8pt Tahoma";

var fontColor=["#000000","#0000ff"];

var fontDecoration=["none","underline"];

var itemBackColor=["#E2EEFF","#ffffff"];

var itemBorderWidth=1;

var itemAlign="left";

var itemBorderColor=["#c0e0FF","#80A0FF"];

var itemBorderStyle=["solid","solid"];

var itemBackImage=["",""];

var menuBackImage="";

var menuBackColor="#ffffff";

var menuBorderColor="#000000";

var menuBorderStyle="solid";

var menuBorderWidth=0;

var transparency=100;

var transition=6;

var transDuration=300;

var shadowColor="#ffffff";

var shadowLen=0;

var menuWidth=""; // NEW (NN% or NNpx. Default - 0px)

var statusString="text";

var iconWidth=16;

var iconHeight=16;

var arrowImageMain=["../arrow_r.gif","../arrow_r.gif"];

var arrowImageSub=["../arrow_r.gif","../arrow_r.gif"]; // NEW

var arrowWidth=7;

var arrowHeight=7;

var itemSpacing=1;

var itemPadding=3;

var separatorImage="../separ1.gif";

var separatorWidth="100%";

var separatorHeight="5";

var separatorAlignment="center";

var separatorVImage="../separv1.gif";

var separatorVWidth="5";

var separatorVHeight="16";

var movable=1;

var absolutePos=1;

var posX=5;

var posY=135;

var itemCursor = "hand";

var itemTarget = "_self";

var moveCursor = "move";

var floatable=0;

var floatIterations=5;

var menuItems =

ETC

Quelle(s) modification(s) faudrait-il faire pour se décalage ??

Merci

Williams

Bonjour

Tu utilises beaucoup de Javascript (et non de java) dans ta page et si on désactive plus de menu sur le coté !!

Bon, tu as une ligne que tu devras retrouver dans ton code :

<div style="width:0px; position:absolute;left:5px; top:135px;z-index:1000;visibility:visible" id="apy0m0">

Il te suffit d'augmenter le top, par exemple à 190px pour qu'il n'y ait plus de chevauchement !!

Bonjour Dreamer,

Je viens de chercher avec Dreamweaver (Edit/rechercher et remplacer...) avec différents mots clef comme par exemple "position:absolute;" ou "135px" etc dans le code source du fichier http://la.climatologie.free.fr/facteur-climat/climatic-factors1.htm . Mais par surprise cela ne trouve pas la ligne que tu me parles qu'il faudrait modifier

C'est pourtant bien dans ce fichier qu'il devrait y avoir cette ligne donc pourquoi Dreamweaver ne la trouve pas, de plus même dans les 2 autres fichiers qui ont un lien avec ce menu dynamique il n'y a pas cette ligne suivant Dreamweaver ?? Si oui, à quelle ème ligne ce trouve cette ligne comme en regardant avec le navigateur (Google, ou Internet explorer...) le code source cela nous dit que c'est ème ligne ??

merci

Williams

Re

J'ai regardé dans data20.js et essaye de modifier ce paramètre qui se rapproche le plus de ce que l'on cherche (une position)

var posY=135;

En

var posY=180;

A+

Ok, merci Dreamer,

Ainsi d'ici quelques jours je modifierais mes pages pour y intégrer la fonction traducteur sur les pages de mon site.

merci

Williams

Dreamer a écrit :

Tu utilises beaucoup de Javascript (et non de java) dans ta page et si on désactive plus de menu sur le coté !!

Et rien pour le remplacer...

elle a écrit :

Dreamer a écrit :

Tu utilises beaucoup de Javascript (et non de java) dans ta page et si on désactive plus de menu sur le coté !!

Et rien pour le remplacer...

Bonjour elle,

Je ne comprends pas trop ce que tu veux dire suite à la phrase de Dreamer.

Car sur le coté de la page le menu déplaçable est justement ce qu'il ne faut pas désactiver ou remplacer mais qu'il fallait seulement déplacer. Donc pourquoi dis-tu ceci ??

merci

Williams

Certaines personnes désactivent, pour diverses raisons (rapidité de navigation, sécurité...) JavaScript dans leur navigateur. Donc, ton menu n'apparaît pas (en passant, quel est l'intérêt d'un menu déplaçable... qu'il faut déplacer soi-même? ) et comme tu ne fournis pas de menu alternatif en simple HTML (un menu en bas de page, par exemple, comme ici, pratique aussi pour ceux et celles qui utilisent tablettes et téléphones intelligents), il devient difficile de naviguer dans le site...

elle a écrit :

Certaines personnes désactivent, pour diverses raisons (rapidité de navigation, sécurité...) JavaScript dans leur navigateur. Donc, ton menu n'apparaît pas (en passant, quel est l'intérêt d'un menu déplaçable... qu'il faut déplacer soi-même? ) et comme tu ne fournis pas de menu alternatif en simple HTML (un menu en bas de page, par exemple, comme ici, pratique aussi pour ceux et celles qui utilisent tablettes et téléphones intelligents), il devient difficile de naviguer dans le site...

Le but de ce menu n'est pas le fait qu'il soit déplaçable mais la présentation car dans le menu de gauche il y aussi des sous menu qui apparaissent comme il le faut. Si je pouvais avoir un menu qui serrait exactement de la même forme (avec des sous menus...) et qui serrait pas déplaçable et donc sans être sous un javaScript cela serrait bon aussi. Mais des menus comme ou semblable à celui-ci je n'en connais pas sans que cela passe par un JavaScript.

Puis mis en bas cela prendrait trop de place voir serrait impossible avec des sous-menu.

A moins que tu aurais une idée ??

merci

Williams

L'idée derrière le menu du bas, c'est justement de le rendre accessible, donc pas de sous-menus cachés mais des liens visibles vers toutes les sections du site, ou au moins vers les principales à condition qu'on puisse accéder au reste du contenu depuis ces dernières.

Quant à un menu du même genre avec sous-menus, ça se fait très bien en CSS, comme dans mon menu du haut sur maboite.qc.ca.

Il y a plein d'exemples sur ce site : http://www.cssplay.co.uk/menus/

elle a écrit :

L'idée derrière le menu du bas, c'est justement de le rendre accessible, donc pas de sous-menus cachés mais des liens visibles vers toutes les sections du site, ou au moins vers les principales à condition qu'on puisse accéder au reste du contenu depuis ces dernières.

Quant à un menu du même genre avec sous-menus, ça se fait très bien en CSS, comme dans mon menu du haut sur maboite.qc.ca.

Il y a plein d'exemples sur ce site : http://www.cssplay.co.uk/menus/

OK, je ne connaissais pas les CSS.

Par exemple je vois qu'ici http://www.cssplay.co.uk/menus/ipad-flyout.html#url ou http://www.cssplay.co.uk/menus/iPad-iMage.html ou http://www.cssplay.co.uk/menus/css-time-flyout.html ou http://www.cssplay.co.uk/menus/breadcrumb.html cela ressemble assez comme le menu de mon site.

Sur ces 4 exemples, avec le dernier exemple est-il possible de faire que le menu de mon site soit exactement semblable donc avec aussi des mini-icones aussi aux sous menu comme les menu ??

Car je ne connais pas les CSS.

Merci

Williams

J'ai tenté de mettre ce CSS http://www.cssplay.co.uk/menus/css-time-flyout.html dans cette page http://la.climatologie.free.fr/facteur-climat/climatic-factors1.htm mais cela n'apparaît comme il le faudrait. Donc pour cela ne fonctionne pas car je ne connais pas les CSS ??

Merci

Williams

Il te faut l'adapter ....

Peux-tu rajouter ceci entre <head>et </head>

<style type="text/css">
/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/css-time-flyout.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#menu {height:132px; width:132px; position:relative; margin-left:10px; margin-bottom:100px;}

#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;}

#menu li {margin:0; padding:0; list-style:none;}
#menu li {display:inline-block; display:inline;}
#menu ul ul {position:absolute; left:-9999px;}
#menu ul#toplevel {position:absolute; left:0; top:0;}

#menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#000; background:#8cb; line-height:22px; text-decoration:none;padding:0 20px 0 10px; border-left:1px solid #fff;}

#menu ul li a:hover {background-color:#09c;}
#menu ul li:hover > ul {left:100%; margin-top:-22px;}

#menu li:hover > a {background:#09c; color:#fff;}
#menu li a.fly {background: #7ba url(anywidth/arrow.gif) no-repeat right top;}
#menu li:hover > a.fly {background:#09c url(anywidth/arrow.gif) no-repeat right top;}

</style>

Évidemment, il te faudra changer les couleurs (background et color) pour mettre en conformité à ton site !!

Oups, j'ai oublié de te mettre le lien de l'image de la flèche : http://www.cssplay.co.uk/menus/anywidth/arrow.gif

L'utilisation du menu en question est sujette à conditions :

Copyright

1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
   A donation to the 'Support CSSplay' fund is now required for this demonstration.
2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a donation to the 'Support CSSplay' fund is required.
3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.

Terms and Conditions

1. If you wish to use this demonstration in your website(s) please email me stu{at}cssplay.co.uk seeking permission.
2. You may NOT place this demonstration on another site for others to download.
3. You may NOT redistrubute or resell this demonstration.
4. Users agree not to remove or edit the credit notice within the stylesheet, or claim that this demonstration is their own.
5. Please see the Copyright statement above regarding the requirement for a support donation.

Et à ton avis pourquoi n'ai-je pas modifié le texte dans le css ?,

If you are using this on a personal web site then please retain the copyright comment in the stylesheet.

En bon français...

Si vous utilisez ceci sur un site web personnel, puis s'il vous plaît, garder le commentaire du droit d'auteur dans la feuille de style.

Évidemment une obole est la bienvenue

A donation to the 'Support CSSplay' fund is now required for this demonstration.

Toujours en bon français

Un don au Support de cssplay est maintenant nécessaire pour cette démonstration.

Combien donne de $ ou d'€ ??

... enter the amount, however small or large...

Merci Elle et Dreamer,

demain et voir les jours suivants je vais tenter d'améliorer et de faire que ce menu CSS soit comme le précédent. Je vous recontacterais

Williams

Je viens d'arranger le menu déroulant CSS pour qu'il soit comme le précédent qui était en script mais la seul différence c'est qu'il n'y a pas les petits icones a gauche des textes car je n'y suis pas arrivé. Comme par exemple avant "Atmosphere" ou bien avant "The influence of sun" etc.

Comment peut-on mettre ces icones avant le texte ??

Merci

Williams

williamsss a écrit :

Je viens d'arranger le menu déroulant CSS pour qu'il soit comme le précédent qui était en script mais la seul différence c'est qu'il n'y a pas les petits icones a gauche des textes car je n'y suis pas arrivé. Comme par exemple avant "Atmosphere" ou bien avant "The influence of sun" etc.

Comment peut-on mettre ces icones avant le texte ??

Merci

Williams

Tu vas devoir mettre une class pour tes <li> et chacune devra être personnalisée...

Bon je vais te faire un exemple avec ton script

<div id="menu">
<ul class="toplevel">
<li class="climatic"><a href="../facteur-climat/climatic-factors.htm">Climatic factors</a></li>
</ul>
<ul class="toplevel">
<li class="liTop atmosphere"><a class="fly" href="../atmosphere/atmosphere-english.htm">Atmosphere<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../atmosphere/atmosphere-english.htm">Atmosphere</a></li>
<li><a href="../atmosphere/atmosphere-english.htm#atmosenergie">Atmos.
and energy</a></li>
<li><a href="../troposphere/troposphere-english.htm">Tropospere</a></li>
<li><a href="../stratosphere/stratosphere-english.htm">Stratosphere</a></li>
<li><a href="../mesosphere/mesosphere-english.htm">Mesosphere</a></li>
<li><a href="../mesosphere/mesosphere-english.htm#thermos">Termosphere</a></li>
<li><a href="../nuages/cloud.htm">Types of clouds</a></li>
<li><a href="../pheno-optique/optical.htm">Light phenomena</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

</ul>

Bon pour ton css, ça va se faire comme ceci

li.climatic {

background:url('images/climatic.gif') no-repeat 0 50%;

}

li.atmosphere {

background:url('image/atmosphere.gif') no-repeat 0 50%;

}

Désolé de ne pas être revenu sur ce sujet depuis un moment mais ces derniers temps j'ai été débordé.

Comme tu me l'as conseillé Dreamer j'ai mis une class pour les <li> dont chacune est personnalisée.

Par contre mettre l'icône avant le texte je n'y suis pas arrivé même en regardant des exemples sur d'autres sites car ceci ne me mets pas de message d'erreur mais malgré cela l'icône n'apparaît pas.

Par exemple pour le 1er lien j'ai mis :

<ul class="toplevel">

<li {background:url(../icone-facteur.gif) no-repeat 0 50%;}class="climatic"><a href="../facteur-climat/climatic-factors.htm">Climatic factors</a></li>

</ul>

Comment devrais-je écrire cette ligne pour qu'il y a l'icône avant "Climatics factors" ?

Merci

Williams

Tu fais une erreur tu mets du css dans ton html, pa bo !!

tu ne dois pas avoir ceci

<li {background:url(../icone-facteur.gif) no-repeat 0 50%;}class="climatic"><a href="../facteur-climat/climatic-factors.htm">Climatic factors</a></li>

mais cela

<li class="climatic"><a href="../facteur-climat/climatic-factors.htm">Climatic factors</a></li>

Si tu n'as pas de page css externe, il te suffit de mettre ton css

li.climatic {

background:url('images/climatic.gif') no-repeat 0 50%;

}

entre <head> et </head> sous cette forme :

<style type="text/css>

li.climatic {

background:url('images/climatic.gif') no-repeat 0 50%;

}

</style>

...

...

</head>

<body>

Entre <head> et </head> j'ai mis pour positionner... le menu :

<style type="text/css">

#menu {height:132px; width:145px; position:relative; margin-left:10px; margin-bottom:100px;}

#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;}

#menu li {margin:0; padding:0; list-style:none;}

#menu li {display:inline-block; display:inline;}

#menu ul ul {position:absolute; left:-9999px;}

#menu ul#toplevel {position:absolute; left:0; top:0;}

#menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#000; background:#CEECE9; line-height:22px; text-decoration:none;padding:0 20px 0 10px; border-left:1px solid #fff;}

#menu ul li a:hover {background-color:#E1F1F2;}

#menu ul li:hover > ul {left:100%; margin-top:-22px;}

#menu li:hover > a {background:#D8F0F1; color:#000000;}

#menu li a.fly {background: #CEECE9 url(../arrow_1.gif) no-repeat right top;}

#menu li:hover > a.fly {background:#D8F0F1 url(../arrow_1.gif) no-repeat right top;}

</style>

Puis dans le "corps" du site j'ai mis :

<div id="menu">

<ul class="toplevel">

<li class="factors"><a href="../facteur-climat/climatic-factors.htm">Climatic factors</a></li>

</ul>

<ul class="toplevel">

<li class="liTop atmosphere"><a class="fly" href="../atmosphere/atmosphere-english.htm">Atmosphere<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li class="atmosphere"><a href="../atmosphere/atmosphere-english.htm">Atmosphere</a></li>

<li class="energy"><a href="../atmosphere/atmosphere-english.htm#atmosenergie">Atmos.

and energy</a></li>

<li class="tropospere"><a href="../troposphere/troposphere-english.htm">Tropospere</a></li>

<li class="stratospere"><a href="../stratosphere/stratosphere-english.htm">Stratosphere</a></li>

<li class="mesosphere"><a href="../mesosphere/mesosphere-english.htm">Mesosphere</a></li>

<li class="thermosphere"><a href="../mesosphere/mesosphere-english.htm#thermos">Thermosphere</a></li>

<li class="clouds"><a href="../nuages/cloud.htm">Types of clouds</a></li>

<li class="light phenomena"><a href="../pheno-optique/optical.htm">Light

phenomena</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

</ul>

<ul class="toplevel">

<li class="liTop turbulences"><a class="fly" href="../turbulance-atm/turbatmosphere-english.htm">Atmos.

turbulences

<!--[if gte IE 7]><!-->

</a>

<!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li class="winters"><a href="../hiver/winter.htm">Cold winters</a></li>

<li class="blizzards"><a href="../blizzard/blizzard-english.htm">Blizzards</a></li>

<li class="tornadoes"><a href="../tornade/tornadoe.htm">Tornadoes</a></li>

<li class="hurricanes"><a href="../cyclone/cyclone-english.htm">Hurricanes</a></li>

<li class="precipitations"><a href="../inondation/flood.htm">Precipitations</a></li>

<li class="thunderstorm"><a href="../orage/thunderstorm.htm">Thunderstorm</a></li>

<li class="storms"><a href="../tempete/storm.htm">Storms</a></li>

<li class="drought"><a href="../secheresse/drought-heat_wave.htm">Drought-heat

and wave</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

</ul>

<ul class="toplevel">

<li class="liTop oceans"><a class="fly" href="../ocean/ocean-english.htm">Ocean and climate<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li class="currents"><a href="../ocean/ocean-english.htm#circulation">Ocean

currents</a></li>

<li class="guf-stream"><a href="../ocean/ocean-english1.htm#gulfstream">Gulf-Stream</a></li>

<li class="exchange-energy"><a href="../ocean/ocean-english1.htm#echange">Exchange

energy</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

</ul>

<ul class="toplevel">

<li class="sea-ice"><a href="../banquise/sea-ice.htm">North and South Pole</a></li>

</ul>

<ul class="toplevel">

<li class="liTop natural-factors"><a class="fly" href="../phenomene-climat/climatic-phenomena.htm">Natural Factors<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li class="phenomenas"><a class="fly" href="../phenomene-climat/climatic-phenomena.htm">Climatic

and oceanic phenomenas

<!--[if gte IE 7]><!-->

</a>

<!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li class="iod"><a href="../iod/iod-english.htm">Indiana Ocean

Dipole</a></li>

<li class="mjo"><a href="../MJO-english.htm">M.J.O.</a></li>

<li class="pna"><a href="../PNA/PNA-english.htm">PNA</a></li>

<li class="enso"><a href="../enso/ENSO-PDO-english.htm">El

Nino and La Nina</a></li>

<li class="pdo"><a href="../enso/enso-pdo3-english.htm">PDO</a></li>

<li class="amo"><a href="../amo/amo-english.htm">AMO</a></li>

<li class="nao"><a href="../nao/NAO-english.htm">NAO</a></li>

<li class="tav"><a href="../tav/tav-english.htm">TAV</a></li>

<li class="ao"><a href="../ao/AO-english.htm">AO</a></li>

<li class="aao"><a href="../aao/aao-english.htm">AAO</a></li>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</ul>

<li class="sun"><a href="../soleil/sun.htm">The influence of Sun</a></li>

<li class="volcanoes"><a href="../volcan/effect-volcanoes.htm">The

influence of volcanoes</a></li>

<li class="glaciation"><a href="../glaciation/glaciation-english.htm">Glacial

and interglacial periods</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

</ul>

<ul class="toplevel">

<li class="change climatic"><a href="../rechauffement/climat-change.htm">Change climatic</a></li>

</ul>

<ul class="toplevel">

<li class="seasonal forecasts"><a href="../prevision-saisoniere-english.htm">Seasonal forecasts</a></li>

</ul>

<ul class="toplevel">

<li class="liTop photos"><a class="fly" href="../image/photo-orage2004.htm">Photos, videos<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li class="my-photos"><a href="../image/photo-orage2004.htm">My photos</a></li>

<li class="videos"><a href="../video.htm">Videos and animations</a><b></b></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

</ul>

<ul class="toplevel">

<li class="liTop Divers"><a class="fly" href="../record-english.htm">Divers<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li class="records"><a href="../record-english.htm">the Records</a></li>

<li class="converter"><a href="../convertisseur-english.htm">Converter of unity</a></li>

<li class="simulation"><a class="fly" href="#url">Simulations...

<!--[if gte IE 7]><!-->

</a>

<!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li class="temperature"><a href="http://www.ipcc-data.org/">Average temperature</a></li>

<li class="evolution"><a href="../schema/jcm/index.html">The climatic evolution</a></li>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</ul>

<li class="lexicon"><a href="../lexique-english.htm">Lexicon</a></li>

<li class="websites"><a href="../websites">Websites</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

</ul>

<ul class="toplevel">

<li class="presentation"><a href="../presentation-english.htm">Presentation</a></li>

</ul>

</div>

Donc j'ai mis une class pour les <li> dont chacune est personnalisée.

Mais si entre <head> et </head> je mets en plus :

<style type="text/css>

li.factors {background:url(../icone-facteur.gif) no-repeat 0 50%;}

</style>

pour avoir l'icône avant "Climatic factors" cela ne fonctionne pas et idem si je mets la ligne du milieu entre <head> et </head> entre les <style et </style> qu'il y a déjà.

Donc pour cet icône comment doit-faire puisqu'en mettant la ligne que tu dis dans la tête du site cela ne fonctionne pas, peux-tu donner l'exemple ??

Merci

Williams

RE, il existe un truc sympa c'est le :before (avant) et le :after (après) donc il te suffit de faire l'essai sur cette ligne par exemple

<li class="factors"><a href="../facteur-climat/climatic-factors.htm">Climatic factors</a></li>

que l'on modifie ainsi

<li><a class="factors" href="../facteur-climat/climatic-factors.htm">Climatic factors</a></li>

et dans ton css, tu vas écrire ceci

.factors:before {content: url('icone-facteur.gif');}

Bien évidemment ton image doit être hébergée et tu auras ceci !!

A+

Ok merci, après 2 essais cela fonctionne, ainsi demain voir les jours suivants je mettrais tout à jours

Il est sur que je faisais des essais avec l'icône en ligne puisque c'est celui du menu dynamique en script.

Williams