> Tous les forums > Forum des Webmasters
 positionner un menu dynamique
Ajouter un message à la discussion
Pages : [1] 2 ... Fin
Page 1 sur 2 [Fin]
williamsss
  Posté le 08/11/2014 @ 21:58 
Aller en bas de la page 
Petit astucien

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

Publicité
Dreamer
 Posté le 09/11/2014 à 08:52 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

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 !!

williamsss
 Posté le 09/11/2014 à 11:20 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

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



Modifié par williamsss le 09/11/2014 11:28
Dreamer
 Posté le 09/11/2014 à 11:40 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

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+

williamsss
 Posté le 09/11/2014 à 15:44 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

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

elle
 Posté le 09/11/2014 à 18:05 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

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...

williamsss
 Posté le 09/11/2014 à 18:23 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien
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



Modifié par williamsss le 09/11/2014 18:24
elle
 Posté le 09/11/2014 à 18:45 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

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...



Modifié par elle le 09/11/2014 18:46
williamsss
 Posté le 09/11/2014 à 21:05 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien
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

elle
 Posté le 09/11/2014 à 21:27 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

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
 Posté le 09/11/2014 à 22:50 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Regarde en particulier dans Multi-Level - Flyout.
williamsss
 Posté le 09/11/2014 à 23:03 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien
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



Modifié par williamsss le 09/11/2014 23:10
williamsss
 Posté le 15/11/2014 à 15:13 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

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

Dreamer
 Posté le 15/11/2014 à 18:50 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

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 !!

Dreamer
 Posté le 15/11/2014 à 18:54 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

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

elle
 Posté le 15/11/2014 à 19:03 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

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

Copyright

Because of all the time and effort spent in producing this demonstration
I would ask that you respect my 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

This demonstration can be used subject to the following 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.


Modifié par elle le 15/11/2014 19:04
Dreamer
 Posté le 15/11/2014 à 19:20 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

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'€ ??

elle
 Posté le 15/11/2014 à 19:27 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

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

williamsss
 Posté le 15/11/2014 à 20:54 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

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

williamsss
 Posté le 17/11/2014 à 11:53 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

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

Dreamer
 Posté le 17/11/2014 à 18:47 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

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%;

}

williamsss
 Posté le 08/12/2014 à 11:33 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

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

Dreamer
 Posté le 08/12/2014 à 18:15 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

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>

williamsss
 Posté le 09/12/2014 à 12:07 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

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

Dreamer
 Posté le 09/12/2014 à 20:34 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

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+

williamsss
 Posté le 09/12/2014 à 23:05 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

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

Publicité
Pages : [1] 2 ... Fin
Page 1 sur 2 [Fin]

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
9,99 €Lot de 32 piles Philips AA à 9,99 €
15 € -33%

Fnac fait une promotion sur le lot de 32 piles Philips AA qui passe à 9,99 € au lieu de 15 €.


Voir l'offre
209,99 €Ecran PC 24.5 pouces Dell S2522HG (FullHD, IPS, 240 Hz, 1 ms, FreeSync) à 209,99 €
299,99 € -30%

Fnac fait une promotion sur l'écran PC 24.5 pouces Dell S2522HG qui passe à 209,99 € au lieu de 299,99 € ailleurs. Cet écran possède une dalle IPS Full HD (1920x1080) à 240 Hz et avec un temps de réponse de 1 ms. Il est compatible FreeSync (et GSync via Adaptive Sync). La hauteur, l'inclinaison et la rotation de l'écran sont réglables. 2 ports HDMI et 1 port DP. Il peut faire également office de hub USB 3.2 (2 ports).


Voir l'offre
19,99 €Clé USB 3.1 Sandisk Ultra Luxe 128 Go à 19,99 €
25 € -20%

Cdiscount propose la clé USB Sandisk Ultra Luxe d'une capacité de 128 Go à 19,99 €. Cette clé USB 3.1 toute en métal est compatible USB 2.0 et offre de bons débits d'environ 150 Mo/s en lecture et en écriture. Elle inclut le logiciel SanDisk SecureAccess pour un cryptage et une protection par mot de passe de vos données sensibles.


Voir l'offre
499,99 €PC portable Asus VivoBook (FullHD, Core i5, 8 Go RAM, SSD 512Go) à 499,99 €
649 € -23%

Cdiscount fait une promotion sur le PC portable Asus 15.6 pouces Vivobook R515JA-BQ2070W qui passe à 499,99 € au lieu de 649 €. Ce portable possède un écran 15.6 pouces FullHD (1920x1080), un processeur Intel Core i5 1035G1, 8 Go de RAM et un SSD NVMe de 512 Go. Le tout tourne sous Windows 11. Webcam, WiFi, USB 3.2, USB Type C, Ethernet Gigabit et Bluetooth sont de la partie. 


Voir l'offre

Sujets relatifs
Le menu dynamique de deviantart.com
menu dynamique en html
Menu dynamique verticale
menu dynamique
menu dynamique sur page web
Menu dynamique
Menu Dynamique
[javascript] menu dynamique
menu dynamique
Menu qui bouge
Plus de sujets relatifs à positionner un menu dynamique
 > Tous les forums > Forum Forum des Webmasters