Ajouté un icone devant le titre d'un menu déroulant

[mariok13]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Safari
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : demande d'amélioration
Lien du forum : http://amarid.forum-pro.fr/

Description du problème

bonjour

voila j'ai une demande d'apparence je voudrait rajouté un icone ou image devant les titres des menu déroulant j'ai essayé mais j'ai toujours un décale de ligne et l'icone n'est jamais centre par rapport au texte
je voudrait aussi lui imposé une taille

voici comment est codé le menu

Code:


    <!-- DÉBUT DU MENU -->
                          <br>
<table align="center" width="82%" class="forumline_1" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td>
<div id="containez">
<div class="align-center" width="82%" id="cssmenu">
<ul>


<li><a href="{U_INDEX}"><span>Home</span></a></li>
 
   
    <!-- BEGIN switch_user_logged_in -->
            <li class='has-sub'><a href="" id="">Menu Membre</span></a>
                <ul>
                  <li> <a href="{U_PRIVATEMSGS}">Votre messagerie du forum</a></li>
                  <li><a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a></li>
                    <li><a href="{U_VIEWONLINE}">Qui est en ligne</a></li>
                    <li><a href="{U_MEMBERLIST}">Liste des membres</a></li>
                <li class='last'><a href="{U_GROUP_CP}">Groupes du forum</a></li>
                   
              </ul>
            </li>

            <!-- END switch_user_logged_in -->

       
<li class='has-sub'><a href="{U_INDEX}"><span>Adhérent(e)s</span></a>
 <ul>
  <li><a href="http://amarid.forum-pro.fr/f4-adherentes-posez-vos-questions">Adhérentes posez vos questions</span></a>
  <li><a href="http://amarid.forum-pro.fr/t28-renouvellement-adhesion-amarid">Renouvellement d'adhésion</span></a>
  <li><a href="http://amarid.forum-pro.fr/t77-votre-nomenclature-de-classeur#79">Nomenclature du classeur</span></a>
  <li class='has-sub'><a href="http://amarid.forum-pro.fr/f7-documents-administratifs" class="fly">Documents administratifs</a>
            <ul>
            <li class='has-sub'><a href="http://amarid.forum-pro.fr/f8-contrat-de-travail">Contrat de travail</a>
            <ul>
              <li><a href="http://amarid.forum-pro.fr/t1-contrat-de-travail">Contrat de travail PDF</a></li>
                <li class='last'><a href="http://amarid.forum-pro.fr/f8-contrat-de-travail">Posez vos questions sur ce sujet</a></li>
          </ul>
    </li>
 <li class='has-sub'><a href="http://amarid.forum-pro.fr/f9-avenant-et-annexe-1-au-contrat-de-travail">Avenant et annexe 1 au contrat de travail</a>
            <ul>
              <li><a href="http://amarid.forum-pro.fr/t78-annexe-nouveau-calcul-mensualisation-fichier-pdf#80">Mensualisation fichier PDF</a></li>
              <li><a href="http://amarid.forum-pro.fr/t79-annexe-nouveau-calcul-mensualisation-fichier-xls-ou-open-office#81">Mensualisation fichier Excel ou open office</a></li>
              <li><a href="http://amarid.forum-pro.fr/t80-avenant-contrat-de-travail#82">Avenant au contrat de travail PDF</a></li>
              <li class='last'><a href="http://amarid.forum-pro.fr/f9-avenant-et-annexe-1-au-contrat-de-travail">Posez vos questions sur ce sujet</a></li>
            </ul>
    </li>       
        <li class='has-sub'><a href="http://amarid.forum-pro.fr/f19-fiche-de-presence">Fiche de présence</a>
            <ul>
              <li><a href="http://amarid.forum-pro.fr/t81-fiche-de-presence">Fiche de présence PDF</a></li>
              <li class='last'><a href="http://amarid.forum-pro.fr/f19-fiche-de-presence">Posez vos questions sur ce sujet</a></li>
            </ul>
        </li>           
    <li class='has-sub'><a href="http://amarid.forum-pro.fr/f20-engagement-reciproque">Engagement réciproque</a>
            <ul>
              <li><a href="http://amarid.forum-pro.fr/t82-engagement-reciproque">Engagement réciproque PDF</a></li>
              <li class='last'><a href="http://amarid.forum-pro.fr/f20-engagement-reciproque">Posez vos questions sur ce sujet</a></li>
          </ul>
  </li>

    <li class='has-sub'><a href="http://amarid.forum-pro.fr/f21-fiche-absence-exceptionnelle">Fiche de congé exceptionnel</a>
        <ul>
            <li><a href="http://amarid.forum-pro.fr/t83-fiche-de-conge-exceptionel#85">Fiche de congé exceptionnel PDF</a></li>
            <li class='last'><a href="http://amarid.forum-pro.fr/f21-fiche-absence-exceptionnelle">Posez vos questions sur ce sujet</a></li>
        </ul>
    </li>

    <li class='has-sub'><a href="http://amarid.forum-pro.fr/f22-fiche-conges-payes">Fiche de congés payés</a>
        <ul>
            <li><a href="http://amarid.forum-pro.fr/t84-fiche-de-conges-payes#86">Fiche congé payé PDF</a></li>
            <li class='last'><a href="http://amarid.forum-pro.fr/f22-fiche-conges-payes">Posez vos questions sur ce sujet</a></li>
        </ul>
    </li>
 
    <li class='has-sub'><a href="http://amarid.forum-pro.fr/f23-attestation-impot">Attestation d'impôt</a>
        <ul>
            <li><a href="http://amarid.forum-pro.fr/t4-attestation-impot">Attestation d'impôt PDF</a></li>
          <li class='last'><a href="http://amarid.forum-pro.fr/f23-attestation-impot">Posez vos questions sur ce sujet</a></li>
        </ul>
    </li>

    <li class='has-sub'><a href="http://amarid.forum-pro.fr/f25-autorisations-parentales">Autorisations parentales</a>
        <ul>
            <li><a href="http://amarid.forum-pro.fr/t85-autorisations-parentales#87">Autorisations parentales PDF</a></li>
            <li class='last'><a href="http://amarid.forum-pro.fr/f25-autorisations-parentales">Posez vos questions sur ce sujet</a></li>
        </ul>
    </li>

  <li class='has-sub'><a href="http://amarid.forum-pro.fr/f26-solde-de-tout-compte">Solde de tout compte</a>
        <ul>
            <li><a href="http://amarid.forum-pro.fr/t86-solde-de-tout-compte">Solde de tout compte PDF</a></li>
            <li class='last'><a href="http://amarid.forum-pro.fr/f26-solde-de-tout-compte">Posez vos questions sur ce sujet</a></li>
        </ul>
  </li>

  <li class='has-sub'><a href="http://amarid.forum-pro.fr/f27-certificat-de-travail">Certificat de travail</a>
        <ul>
            <li><a href="http://amarid.forum-pro.fr/t87-certificat-de-travail#89">Certificat de travail PDF</a></li>
            <li class='last'><a href="http://amarid.forum-pro.fr/f27-certificat-de-travail">Posez vos questions sur ce sujet</a></li>
        </ul>
  </li>

  <li class='has-sub'><a href="http://amarid.forum-pro.fr/f28-fiche-de-liaison">Fiche de liaison</a>
        <ul>
            <li><a href="http://amarid.forum-pro.fr/t88-la-fiche-de-liaison#90">Fiche de liaison PDF</a></li>
            <li class='last'><a href="http://amarid.forum-pro.fr/f28-fiche-de-liaison">Posez vos questions sur ce sujet</a></li>
        </ul>
  </li>

  <li class='has-sub'><a href="http://amarid.forum-pro.fr/f30-indemnites-de-ruptures-1-5-ou-1-120">Indemnités de rupture</a>
        <ul>
            <li><a href="http://amarid.forum-pro.fr/t89-calcul-prime-de-fin-de-contrat-format-pdf#91">Calcul fin de contrat PDF</a></li>
            <li><a href="http://amarid.forum-pro.fr/t90-calcul-prime-de-fin-de-contrat-format-excel-open-office">Calcul fin de contrat  format excel et open office</a></li>
              <li class='last'><a href="http://amarid.forum-pro.fr/f30-indemnites-de-ruptures-1-5-ou-1-120">Posez vos questions sur ce sujet</a></li>
        </ul>
  </li>
     
    </li>
</ul>

<li class='has-sub'><a href="/f35-Salaire.htm">Salaire</a>
        <ul>
          <li class='has-sub'><a href="/f60-Bullelin-de-salaire.htm">Bulletin de salaire 2015</a>
        <ul>
          <li><a href="/t980-SALAIRE-Bulletin-de-salaire-2015-avec-calcul-nouveau-mod-le.htm">B.salaire Nouveau modele Excel & open office</a></li>
            <li><a href="/t981-SALAIRE-Bulletin-de-salaire-2015-format-PDF-nouveau-mod-le.htm">B.salaire Nouveau modele format PDF</a></li>
            <li><a href="t122-bulletin-de-salaire-01-janvier-2010-avec-calcul-sans-les-heures-travaillees.htm">B.salaire Ancien modele Excel & open office</a></li>
            <li><a href="/t121-bulletin-de-salaire-01-janvier-2010-sans-calcul-sans-calcul-des-heures.htm">B.salaire Ancien modele format PDF</a></li>
            <li class='last'><a href="/f60-Bullelin-de-salaire.htm">Posez vos questions sur ce sujet</a></li>
        </ul>
 </li>
     
 <li class='has-sub'><a href="http://amarid.forum-pro.fr/f35-systeme-remuneration">Systeme de rémunération</a>
        <ul>
            <li><a href="http://amarid.forum-pro.fr/t97-systeme-de-remuneration-2015">Systeme de rémunération PDF</a></li>
            <li class='last'><a href="http://amarid.forum-pro.fr/f35-systeme-remuneration">Posez vos questions sur ce sujet</a></li>
        </ul>
        </li>

  <li class='has-sub'><a href="http://amarid.forum-pro.fr/f36-indemnite-entretien">Indemnités d'entretien</a>
        <ul>
          <li><a href="http://amarid.forum-pro.fr/t98-indemnites-entretien-taux-minimum-2015?tt=1">Indemnités d'entretien 2015 </a></li>
          <li class='last'><a href="http://amarid.forum-pro.fr/f36-indemnite-entretien">Posez vos questions sur ce sujet</a></li>
        </ul>
        </li>

 <li class='has-sub'><a href="/f65-Tableau-annuel-recapitulatif-des-salaires-et-indemnites-d-entretien.htm">Tableau annuel récapitulatif</a>
        <ul>
          <li><a href="/t96-Tableau-annuel-recapitulatif-des-salaires-et-indemnites-d-entretien.htm">Tableau format Excel & open office</a></li>
          <li class='last'><a href="/f65-Tableau-annuel-recapitulatif-des-salaires-et-indemnites-d-entretien.htm">Posez vos questions sur ce sujet</a></li>
        </ul>
        </li>
      </ul>
      </li>

<li class='has-sub'><a href="http://amarid.forum-pro.fr/f38-impots?tt=1">Impôt</a>
        <ul>
            <li><a href="http://amarid.forum-pro.fr/t9-tableau-pour-calcul-montant-des-impots-a-declarer-pour-2015?tt=1">Tableau au format Excel & open office</a></li>
            <li><a href="http://amarid.forum-pro.fr/t11-tableau-calcul-du-montant-a-declarerimpots-2015-format-pdf?tt=1">Tableau au format PDF</a></li>
            <li class='last'><a href="http://amarid.forum-pro.fr/f38-impots?tt=1">Posez vos questions sur ce sujet</a></li>
        </ul>
        </li>
<li class='has-sub'><a href="/f161-Impots.htm">Attestation éval. des repas & indemnités km</a>
        <ul>
          <li><a href="http://amarid.forum-pro.fr/t10-attestation-des-repas?tt=1">Attestation évaluation  montant des repas PDF</a></li>
          <li><a href="http://amarid.forum-pro.fr/t12-indemnites-frais-km-2015?tt=1">Barème automobile 2015</a></li>
          <li class='last'><a href="http://amarid.forum-pro.fr/f38-impots?tt=1">Posez vos questions sur ce sujet</a></li>
        </ul>
        </li>
 </ul>
 </li>
<li class='has-sub'><a href="{U_INDEX}">Catégories</span></a>
    <ul>

      <li class='has-sub'><a href="http://amarid.forum-pro.fr/f6-amarid?tt=1">Accueil</a>
        <ul>
          <li><a href="http://amarid.forum-pro.fr/f6-amarid?tt=1">AMARID</a></li>
          <li><a href="https://mapsengine.google.com/map/edit?mid=zO-uUHlzuHeA.keqQe1fGPUno" TARGET="_blank">Ou nous trouver (carte de france)</a></li>
          <li><a href="http://amarid.forum-pro.fr/f51-places-disponibles?tt=1">Assistante maternelle vos places disponibles</a></li>
          <li><a href="http://amarid.forum-pro.fr/f52-recherche-assistantes-maternelles?tt=1">Parents recherchez une assistante maternelle</a></li>
          <li class='last'><a href="http://amarid.forum-pro.fr/f53-sante-de-l-enfant-produits-defectueux-trouvailles"> Santé de l'enfant, Produits défectueux</a></li>
        </ul>
        </li>
      <li><a href="http://amarid.forum-pro.fr/f49-bulletin-d-adhesion-amarid-ou-renouvellement">Bulletin d'adhésion et renouvellement AMARID</a></li>
      <li class='has-sub'><a href="/f3-Assistante-Maternelle.htm">Posez vos questions</a>
          <ul>
            <li><a href="http://amarid.forum-pro.fr/f4-adherentes-posez-vos-questions">Adhérentes posez vos questions</a></li>
            <li><a href="http://amarid.forum-pro.fr/f15-assmats-non-adherentes-posez-vos-questions">Assmats non adhérentes posez vos questions</a></li>
            <li><a href="http://amarid.forum-pro.fr/f16-parents-posez-vos-questions">Parents posez vos questions</a></li>
            <li class='last'><a href="http://amarid.forum-pro.fr/f17-vos-suggestions-vos-demandes">Vos suggestions vos demandes</a></li>
        </ul>
        </li>
      <li><a href="http://amarid.forum-pro.fr/f62-agenda-amarid">Agenda AMARID</a></li>
      <li class='has-sub'><a href="http://amarid.forum-pro.fr/c9-maisons-d-assistantes-maternelles-mam?tt=1">Maison d'assistant(e)s Maternel(le)s MAM</a>
          <ul>
          <li><a href="http://amarid.forum-pro.fr/f64-textes-lois?tt=1">Textes et lois</a></li>
          <li><a href="http://amarid.forum-pro.fr/f65-m-a-m-laissez-vos-cordonnees?tt=1">Laissez vos coordonnées</a></li>
          <li class='last'><a href="http://amarid.forum-pro.fr/f66-vos-experiences-interrogations?tt=1">Vos experiences & interrogations</a></li>
          </ul>
          </li>
      <li class='has-sub'><a href="http://amarid.forum-pro.fr/c5-detente?tt=1">Détente (cuisine, travaux manuels, etc...)</a>
          <ul>
          <li><a href="http://amarid.forum-pro.fr/f5-coin-cuisine?tt=1">Vos recettes pour vos petits</a></li>
          <li class='last'><a href="http://amarid.forum-pro.fr/f72-activites-manuelles?tt=1">Activitées manuelles pour vos petits</a></li>
          </ul>
          </li>
  </ul>
  </li>

  <li class='has-sub'><a href="{U_INDEX}">Contacts</span></a>
  <ul>
  <li><a href="http://amarid.fr/index.php/amarid-contact/12-contacts/5-association-amarid" TARGET="_blank">Contact AMARID</span></a>
  <li><a href="http://amarid.fr/index.php/amarid-contact/12-contacts/3-amarid-secretariat" TARGET="_blank"><span>Secretariat AMARID</span></a>   
  <li class='last'><a href="http://amarid.fr/index.php/amarid-contact/12-contacts/1-administrateur" TARGET="_blank">Contact Administrateur Site & Forum</span></a>
</li>
</ul>
 
 <li><a href="http://amarid.fr/" target="_blank"><span>Site internet</span></a></li>
   
  <li><a href="http://amarid.forum-pro.fr/faq"><span>FAQ</span></a></li> 
   
   
<li class='has-sub'><a href="{U_INDEX}">Outils</span></a>
  <ul>
  <li><a href="https://translate.google.com/" TARGET="_blank">Google traducteur</span></a>
  <li><a href="http://www.gimp.org/" TARGET="_blank">Gimp outil graphique gratuit</span></a>
  <li class='last'><a href="http://www.openoffice.org/fr/Telecharger/" TARGET="_blank">Open office</span></a>
    <li><a href="https://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Accueil_principal" TARGET="_blank">Wikipedia</span></a> 
</li>
</ul>
</ul>
</div>
</div> </td> </tr> </table> 
            <!-- Fin du menu -->


merci de vos réponses

[Invité]

slt bruno ^^

exemple >> d'insertion d'image >>

Code:

<div id="containez">
<div class="align-center" width="82%" id="cssmenu">
<ul>
  <li>><a href="{U_INDEX}"><img src="http://i21.servimg.com/u/f21/16/87/83/03/arrow_11.png" id="imgg"/><span>Home</span></a></li>
    <!-- BEGIN switch_user_logged_out -->
            <li><a href="{U_REGISTER}"><span>S'inscrire</span></a></li>
            <li><a href="{U_LOGIN_LOGOUT}"><span>{L_LOGIN_LOGOUT}</span></a></li>
    <!-- END switch_user_logged_out -->

    <!-- BEGIN switch_user_logged_in -->
  <li class='has-sub'><a href="" id=""><img src="http://i21.servimg.com/u/f21/16/87/83/03/arrow_11.png" id="imgg"/><span>Menu Membre</span></a></li>
                <ul>

exemple de css >> associer a cette exemple >>

Code:

/**------img dans menu ---------**/
#imgg {
    float: left;
    margin-top: -15px;
  width:40px;
  height:40px;
}
#cssmenu ul {
    display: inline-block !important;
    list-style: none;
    margin: 0;
    padding: 0;
    width: auto;
}

par contre je pense que tu va devoir sortir le menu de la toolbar , avec toutes ces image !!!! a voir

[mariok13]

ok je te suis les 40 px c'est la taille de l'icone ?
l'image en faite j'aimerais la mettre devant certain sous menu style dans outils wikipedia, gimp open office ou autres

[Invité]

les 40 px oui c'est la taille . tu peut la changé , c'est pour mettre ou au juste car la demande dis >devant les titres des menus (titre des menus ) = la ou j'ai mis la fléche.

si c'est dans les onglets il faut tester ..

[mariok13]

je te met une image

[Invité]

le mieux et de placé a gauche ,

exemple de css

Code:

/**------img dans menu -----fleche------------------------**/
#imgg{width:20px;height:20px;float:left;margin-right:7px;}
/**------ img dans menu----logo------------------------**/
#imggmi{width:20px;height:20px;float:left;margin-right:7px;}
/**------fin img dans menu--------------------------------**/

exemple d'insertion d'image

Code:

<li class='has-sub'><a href="{U_INDEX}">Outils</a>
  <ul>
    <li><a href="{U_SEARCH}"><img src="http://i21.servimg.com/u/f21/16/87/83/03/arrow_11.png" id="imgg"/><span>Recherche sur le forum</span><img src="http://i21.servimg.com/u/f21/16/87/83/03/wikipe11.jpg" id="imggmi"/></a>
    <li><a href="/t35-unique-formulaire-de-commande.htm"><img src="http://i21.servimg.com/u/f21/16/87/83/03/arrow_11.png" id="imgg"/><span>Formulaire de Demande Graphique</span><img src="http://i21.servimg.com/u/f21/16/87/83/03/wikipe11.jpg" id="imggmi"/></a>
    <li><a href="/t49-Formulaire-de-Demande-de-Code.htm"><img src="http://i21.servimg.com/u/f21/16/87/83/03/arrow_11.png" id="imgg"/><span>Formulaire de Demande d'aide en Codage</span><img src="http://i21.servimg.com/u/f21/16/87/83/03/wikipe11.jpg" id="imggmi"/></a>
    <li><a href="https://translate.google.com/" TARGET="_blank"><img src="http://i21.servimg.com/u/f21/16/87/83/03/arrow_11.png" id="imgg"/><span>Google traducteur</span><img src="http://i21.servimg.com/u/f21/16/87/83/03/wikipe11.jpg" id="imggmi"/></a>
    <li><a href="http://www.gimp.org/" TARGET="_blank"><img src="http://i21.servimg.com/u/f21/16/87/83/03/arrow_11.png" id="imgg"/><span>Gimp outil graphique gratuit</span><img src="http://i21.servimg.com/u/f21/16/87/83/03/wikipe11.jpg" id="imggmi"/></a>
    <li class='last'><a href="http://www.openoffice.org/fr/Telecharger/"TARGET="_blank"><img src="http://i21.servimg.com/u/f21/16/87/83/03/arrow_11.png" id="imgg"/><span>Open office</span><img src="http://i21.servimg.com/u/f21/16/87/83/03/wikipe11.jpg" id="imggmi"/></a>
</li>

resulta



si tu veut placé que 1 image sur un menu ,et qu'il n'y a pas de decalage ,place dans les autres une image vide

[mariok13]

Bonjour

Merci mon ami (du coup je n'est pas utilisé l'option de la flèche devant) voici le résultat

[Invité]

Très bien nickel .
Bonne journée.