Partage
  • Partager sur Facebook
  • Partager sur Twitter

changement de puces

sur un passage de souris

    5 décembre 2006 à 17:37:56

    Tchô tous!
    Voila le truque :
    J'ai un menu basique en liste à puce et j'ai remplacer les puces par des image...
    J'aimerait que quand on passe sur le lien (qui je vous le rappelle fait parti du menu et donc de la liste à puces)l'image de la puce change.
    J'ai pensé à ça :

    .smenu1 a:hover
    {
    list-style-image: url("puce2.png");
    }


    quand on passerait sur le lien du menu, la puce deviendrait l'image "puce2.png".
    Seulement j'ai assayé et le problème est que cela "marche" que sur IE pas avec FF...
    Quelequ'un pourrait me trouver une solution, ou du mois me mettre sur une piste ???

    merci
    byby
    • Partager sur Facebook
    • Partager sur Twitter
      5 décembre 2006 à 17:42:55

      Pour une fois que IE marche plus que FF mdr ...
      essaie
      .smenu li:hover{list-style-image:url("puce.png");

      pas sur que sa marche :)
      (Moche mon code hein :)
      • Partager sur Facebook
      • Partager sur Twitter
        5 décembre 2006 à 18:10:34

        bonjour,

        tu y est presque :).

        la puce est en principe associer a li , qui ne prends pas le :hover dans IE

        a n'a en principe pas de puce , ff ou autre ne vas pas reperté une regle sur a vers une autre balise. (heureusement que non , c'est deja assez "chaotique" comme ça ces regles css/doctype et differents navigateurs...

        La solution la plus propre est :
        1) mettre
        list-style-type:none;
        a li;

        2)mettre les puce sur <a>
        a {display:list-item;}


        3) gerer le changement d'images de puce sur a et a:hover.
        a {
        list-style-image:url(puce.gif);
        }
        a:hover {
        list-style-image:url(pucehover.gif);
        }


        De cette façon , le principe est correcte et devrait etre accepté par l'ensemble des navigateurs.

        ++
        • Partager sur Facebook
        • Partager sur Twitter

        fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

          5 décembre 2006 à 18:20:51

          Super ta methode marche très bien, merci beaucoup

          Une autre question (qui n'a rien a voir) :

          Dans mon corps de page, j'ai pacé une image en fond qui ne se repete qu'en haut(cela donne une barre horizontale sur le haut de mon corps de page)...

          seulement je voudrait aussir mettre une "barre" horizontale sur le bas de la page (mais pas la même), or je ne peut pas placer de background image dans un meme div et je ne voi pas comment faire autrement.

          Une petite aide serait la bienvenue....

          • Partager sur Facebook
          • Partager sur Twitter
            5 décembre 2006 à 20:00:19

            Pour ton fond, dans ton CSS met "BODY { background-repeat: repeat; } "
            Puis pour ta barre de pied de page :
            #pied_de_page
            {
            height:auto;
            margin: auto;
            width: auto;
            padding: 5px;
            background-image: url("Images/motif.png");
            background-repeat: repeat-x;
            }
            Et tu insere le DIV dans le html :
            <div id="pied_de_page"> wesh wesh </div>
            • Partager sur Facebook
            • Partager sur Twitter
              6 décembre 2006 à 0:05:40

              bonsoir,

              pour les fonds , en effet , pour le moment c'est un seul par element :(

              mais ,par exemple , avec une page vide et un doctype xhtml 1.0 strict: tu peux deja utiliser 2 images si elle ne se repete pas toutes les 2 (+ un div et ça fait 3 images ):

              html {
              background:url(fondpage.gif);
              height:100%;
              }
              body {
              background:url(piedpage.gif) bottom repeat-x;
              height:100%;
              }
              div#principale {
              background:url(hautpage.gif)top repeat-x;
              height:auto!important;
              height:100%;
              min-height:100%;
              }


              Ce code , code de base et exemple, te permet d'inserer 3 images dans une page ou tu n'as qu'un div.

              Les hauteurs sont utilisé pour placé le pied en bas d'ecran ... ou plus bas si tu as du contenu ,c'est une petite base pour joué avec :) .

              Sans code ni lien vers ta page , il va etre difficile de te proposé ce qu'il te faut , mais je pense que tu comprends deja le principe et que tu vas trouvé ce qu'il te faut...

              ++
              • Partager sur Facebook
              • Partager sur Twitter

              fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

              changement de puces

              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
              × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
              • Editeur
              • Markdown