Partage
  • Partager sur Facebook
  • Partager sur Twitter

Image en bas de menu

    27 mai 2011 à 13:52:45

    bonjour, je souhaiterais positionner une image dans mon menu sous les liens pour le rendre moins monotone.

    j'arrive a l’insérer en mettant ceci

    <div id="menu">
    <div class="element_menu">
    <h3>Rubriques</h3>
    <ul>
    <li><a href="accueil.html">Accueil</a></li>
    <li><a href="news.html">News</a></li>
    <li><a href="resultats.html">Résultats et classement</a></li>
    <li><a href="multimédia.html">Multimédia</a></li>
    <li><a href="historique.html">Historique</a></li>
    <li><a href="forum.html">Forum</a></li>
    <li><a href="livre.html">Livre d'or</a></li>
    </ul>
    <img src="terrain.jpg" alt="terrain" title="Menu" />
    </div>
    </div>

    cela a pour effet d'afficher l'image mais voilà elle n'es pas positionner comme je voudrais , je souhaiterai la centrer mettre une marge basse etc....

    comment puis je faire ?

    merci d'avance et bonne continuation .
    • Partager sur Facebook
    • Partager sur Twitter
      27 mai 2011 à 16:03:53

      Tu peux mettre ton image dans un paragraphe et tu pourras alors appliquer du CSS dessus.

      <p><img src="terrain.jpg" alt="terrain" title="Menu" /></p>
      
      #menu p
        {
        text-align:center;
        margin-bottom:10px;
        }
      
      • Partager sur Facebook
      • Partager sur Twitter
        27 mai 2011 à 16:04:36

        Bonjour,

        il faut que tu passes par du CSS si tu veux simplement la mettre en image de fond

        #menu {
        background-image:url(ton_image.jpg);
        background-repeat:no-repeat;
        background-position:bottom;
        padding:Xpx;
        }
        


        Tu peux asussi déclarer une class ou un id dans ton image pour faire ça.
        • Partager sur Facebook
        • Partager sur Twitter
          27 mai 2011 à 16:19:33

          bonjour,

          si tu veux l'image en dessous de chaque lien de ton ou dans ton menu

          1) image sur lien
          <div id="menu"> 
          <div class="element_menu">
          <h3>Rubriques</h3>
          <ul>
          <li><a href="accueil.html">Accueil</a><br />
          <img src="terrain.jpg" alt="terrain" title="Menu" />
          <!-- je pense que comme cela l'image vas êtres sous ton lien--></li>
          <li><a href="news.html">News</a></li>
          <li><a href="resultats.html">Résultats et classement</a></li>
          <li><a href="multimédia.html">Multimédia</a></li>
          <li><a href="historique.html">Historique</a></li>
          <li><a href="forum.html">Forum</a></li>
          <li><a href="livre.html">Livre d'or</a></li>
          </ul>	
          </div> 
          </div>
          


          voila de cette façon tu aura l'image sous ton lien j'espère avoir pu t'aidée
          • Partager sur Facebook
          • Partager sur Twitter
            27 mai 2011 à 16:29:07

            en fait je ne veux pas une image de fond ni une image sous chaque lien .
            c'est juste que mon menu lateral parai un peu petit en hauteur par rapport a mon corps de site ou il y aura mes articles etc .... ! et pour justement l'agrandir un peu j'ai au préalable agrandi mon corps de menu ( ca j'y suis arrivé ) et maintenant en bas de mon menu je veut juste mettre une image pour habiller . là je l'ai insérée ( vu sur mon code html ) mais elle se met d'office en bas a gauche collée a mon cadre de menu .

            moi par exemple je la veux en bas centrée avec une petite marge en bas qu'elle ne soit pas collée a mon cadre .

            je ne sais pas si je me suis bien expliqué !

            merci d'avance en tout cas !!
            • Partager sur Facebook
            • Partager sur Twitter
              27 mai 2011 à 16:34:24

              <div id="menu"> 
              <div class="element_menu">
              <h3>Rubriques</h3>
              <ul>
              <li><a href="accueil.html">Accueil</a></li>
              <li><a href="news.html">News</a></li>
              <li><a href="resultats.html">Résultats et classement</a></li>
              <li><a href="multimédia.html">Multimédia</a></li>
              <li><a href="historique.html">Historique</a></li>
              <li><a href="forum.html">Forum</a></li>
              <li><a href="livre.html">Livre d'or</a></li>
              </ul>
              </div> 
              <img src="terrain.jpg" alt="terrain" title="Menu" />
              </div>
              
              • Partager sur Facebook
              • Partager sur Twitter
                27 mai 2011 à 16:50:51

                la le problème avec ce code mrludo40 c'est que l'image es maintenant hors de mon cadre menu ( car j'ai créer un border autour du menu ) moi je la veu en bas de mon menu mais dans le cadre . dans le cadre avec mon code de base et mon insertion d'image c'est ok moi je cherche juste a jouer sur le centrage ou bien mettre une marge en bas pour ne pas coller a au border en fait .

                merci
                • Partager sur Facebook
                • Partager sur Twitter
                  27 mai 2011 à 17:28:08

                  Pas sur d'avoir compris ou tu veut mettre ton image ^^ mais tu pourras t'inspirer et adapter ce code.
                  Si le html est ainsi :
                  <div id="menu"> 
                   <div class="element_menu">
                   <h3>Rubriques</h3>
                    <ul>
                     <li><a href="accueil.html">Accueil</a></li>
                     <li><a href="news.html">News</a></li>
                     <li><a href="resultats.html">Résultats et classement</a></li>
                     <li><a href="multimédia.html">Multimédia</a></li>
                     <li><a href="historique.html">Historique</a></li>
                     <li><a href="forum.html">Forum</a></li>
                     <li><a href="livre.html">Livre d'or</a></li>
                    </ul>
                    <img src="tonimage.jpeg" alt="terrain" title="Menu" />	
                   </div> 
                  </div>
                  


                  tu utilise ce css :
                  .element_menu{
                  	 background-color:#33F;
                  	 width:150px;}
                  	 
                   .element_menu img{
                  	 display:block;
                  	 margin:0 auto;
                  	 padding-bottom:20px;}
                  

                  • Partager sur Facebook
                  • Partager sur Twitter

                  Image en bas de menu

                  × 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