• Illustrer le blog avec des icônes


    Mercredi 6 Juin à 14:25
    chatom105

    Alors je vais mieux m'exprimer:

    Je voudrais que pour chaque onglet de ma rubrique (accueil, contact…), des icônes différentes à chacun de ces onglets.

    Imaginons que les émoticônes soit chacun, un icône spécifique:

    ^^ Accueil

    frown Contact

    Etc...

    Mercredi 6 Juin à 14:32
    stormalo

    Dans l'idée ce pourrait être un truc comme ça :

    #module_menu_contenu155664032 li:nth-child(1) a:before {content: url(adresse icone1);}
    #module_menu_contenu155664032 li:nth-child(2) a:before {content: url(adresse icone2);}
    #module_menu_contenu155664032 li:nth-child(3) a:before {content: url(adresse icone3);}

    etc..

    Mais je n'ai pas le temps de vérifier ......  smile

    Bon a.m.

    Mercredi 6 Juin à 16:30
    chatom105

    Non, il ne marche pas… 

    j'ai réussi avec ce code :li:nth-child(3) {
        list-style-type: none;
        background-image: url(http://ekladata.com/NV3zNXbA0VW0_5wkzAFwVOYvXek/user-comment.png);
        background-repeat: no-repeat;
        background-position: left;
        padding-left: 20px;
    }

    mais il m'affiche l'icône aussi ailleurs et je pense savoir pourquoi ! Dans mon code je lui donne la place 3, il se met alors à la place 3 partout: dans les gros titres, dans les sous-titres (à la bonne place) et aussi dans les menus pour modifier le blog

    Bonne fin d'après-midi

    Mercredi 6 Juin à 22:17
    stormalo

    Il y a un bug de communication:
    Ta question fait référence à ce qui est en ligne  (sur le blog chatom105) et tu expérimentes sur du contenu qui n'est pas en ligne. Il m'est donc impossible de connaitre le n° d'identification du module concerné et de proposer un code pertinent

    Dans le dernier questionnement il a été indiqué ceci :

    "...l'icône je la veux juste devant le titre dans le menu (sur l'image: devant Accueil en dessous de rubrique) et pas devant le titre comme sur la photo… "

    Les codes que j'ai proposés sont donc rédigés pour ajouter un icône différent devant les liens qui figurent dans ce module (identifié par le n°155664032)

    Après vérification, le principe indiqué dans ma précédente réponse fonctionne correctement, pour ce cas précis


    Copie d'écran de la simulation:>>> 

    J'ai utilisé ce css  :

    #module_menu_contenu155664032 li:nth-child(1) a:before {content: url("http://ekladata.com/1njqfFfKMtrHeT0ZRwVDNnA8ZB8@20x20.gif");}

    #module_menu_contenu155664032 li:nth-child(2) a:before {content: url("http://ekladata.com/l867eCw6Yan5fWKxrAGI_7MKW2c@16x16.gif");}

    --------------------------------------------
    --------------------------------------------

    Tel qu'il est rédigé, ton code li:nth-child(3) , sélectionne toutes les balises <li>  qui sont en 3ème position dans une liste.

    Pour le tester sur le module rubrique ce qui est visible en ligne  il faudrait écrire
    #module_menu_contenu155664032  li:nth-child(1)        ou (2)

    ça fait un code global plus long, mais il doit fonctionner aussi

    Jeudi 7 Juin à 07:51
    chatom105

    Merci beaucoup pour votre aide !!! J'ai trouvé !!




    Vous devez être membre pour poster un message.