Partage
  • Partager sur Facebook
  • Partager sur Twitter

Petit problème de semi-transparence par-dessus un menu

Impossible de cliquer sur mes liens T_T

Sujet résolu
    2 janvier 2010 à 3:06:11

    Bonsoir à tous!
    Premièrement, bonne année (faut toujours bien commencer une année, non? ^^)
    Deuxièmement, mon problème.Donc voilà, je m'amuse à monter une page web pour m'amuser sur mon ordinateur. Mais malheur, j'ai un bug général en ce qui concerne la semi-transparence du fond de mon corps (Je parle du corps du site, pas du mien...). J'ai utilisé deux div pour délimiter mon premier et mon second corps, mon fond est semi-transparent à souhait et mon texte est inchangé. Mais pour une raison que j'ignore totalement (ça fait deux superbes heures que je perds mon temps à me casser la tête et à chercher de l'aide sur le forum ici) mon fond en semi-transparence est apparu au-dessus de mon menu vertical. Ce qui en bloque totalement l'accès aux liens. Il m'est même impossible de vouloir surligner avec ma souris le texte qui s'y trouve, comme si mon menu avait pâli, mais qu'en plus il n'était qu'une vulgaire image.
    Je sais que mon explication peut s'avérer du charabia pour certains, alors je vais y aller en images si vous le voulez bien.

    Image utilisateur
    Ceci est le résultat problématique de mon code. Qu'importe ce que j'ai tenté, rien ne veut fonctionner. Le fond s'obstine à embarquer par-dessus mon menu (Sans blague, vous avez reconnu la bannière? J'ai bien dit que c'était que pour m'amuser à développer mes codes, ça me prenait bien un design facile à trouver et à installer, sinon c'est moche)

    Voici le code CSS que j'ai utilisé, du moins, la partie concernée:
    #menu
    {
       float: left;
       width: 185px;
       margin-left: 20px;
       margin-right: 15px;
    
    }
    
    .element_menu
    {
       background-color: ;
       background-image: url("fond_menu_1.jpg");
       background-repeat: repeat-x;
       border: 2px inset black;
       
       margin-bottom: 20px;
    }
    
    
    /* Quelques effets sur les menus */
    
    
    .element_menu h3
    {    
       color: #000000;
       font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
       text-align: center;
    }
    
    .element_menu ul
    {
       list-style-type: none;
       padding: 0px;
       padding-left: 20px;
       margin: 0px;
       margin-bottom: 5px;
    
    }
    
    .element_menu a
    {
       color: #000000;
       text-decoration: none;
    }
    
    .element_menu a:hover
    {
       background-color: ;
       color: #413D34;
       text-decoration: underline;
    }
    
    
    /* Le corps de la page */
    
    #corps
    {
       margin-left: 20px;
       margin-right: 0px;
       margin-bottom: 0px;
       padding: 5px;
       text-indent: 30px;
       color: #000000;
       background-color: #C7A361;
       background-image: url("");
       border: px solid black;
    }
    
    #corps h1
    {
       color: black;
       text-align: center;
       font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
    }
    
    #corps h2
    {
       height: 30px;
    
       background-image: url("images/titre.png");
       background-repeat: no-repeat;
       
       padding-left: 30px;
       color: #000000;
       text-align: left;
    }
    
    #corps2
    {
       margin-left: 10px;
       margin-right: 10px;
       margin-bottom: 10px;
       padding: 5px;
       text-indent: 30px;
       color: #000000;
       background-color: ;
       background-image: url("");
       border: px solid black;  
    }
    
    #corps2 h1
    {
       color: black;
       text-align: center;
       font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
    }
    
    #corps2 h2
    {
       height: 30px;
    
       background-image: url("images/titre.png");
       background-repeat: no-repeat;
       
       padding-left: 30px;
       color: #000000;
       text-align: ;
    }
    


    Bon, après, si vous avez besoin du code xHtml, je peux toujours le fournir, mais comme je l'ai déjà expliqué, j'ai utilisé deux div (et ce très convenablement, tout fonctionnait sur mon ordinateur avant de devoir le changer dû à un bris de disque dur). Je ne le fournirai donc qu'à la demande puisque ça m'emmerderait un peu pas mal en ce premier de l'an de devoir tout trouver le code source à travers tout ce texte... Tentez de me comprendre ^^"

    Sur ce, je vous souhaite bonne chance afin de trouver une réponse à mes problèmes!
    À la prochaine ^^
    • Partager sur Facebook
    • Partager sur Twitter
      2 janvier 2010 à 3:34:06

      Utilises les z-index .
      Si la valeur de z-index d'un élément est grande, il sera au dessus d'un autre avec un z-index plus petit.
      En gros :
      <div id="div1"></div>
      <div id="div2"></div>
      

      #div1
      {
          z-index : 2;
      }
      #div2
      {
          z-index : 1;
      }
      

      Là, le div1 sera au dessus du div2 si jamais ils se chevauchent. ;)

      Sinon une autre solution utiliserai la manière dont le code est lu.
      Vu qu'il est lu de haut en bas, si le div avec ton background est après celui avec ton menu, c'est normal qu'il soit au dessus ;)

      EDIT : Twilight Beuaaaaaaah :-°
      • Partager sur Facebook
      • Partager sur Twitter
        2 janvier 2010 à 6:22:55

        Bonjour.

        Voici ce qui cloche :
        background-color: ;
        


        Si tu voulais le background-color transparent, tu n'avais qu'à utiliser la valeur transparent, comme ceci :

        background-color: transparent;
        


        Ou bien tu n'en mets pas tout simplement (même chose pour le background-image)

        Sinon, ça nous aurait pris le code XHTML aussi.
        • Partager sur Facebook
        • Partager sur Twitter
        Pour des raisons personnelles, mon cours sur Gimp ne sera plus mis à jour ici, mais plutôt sur http://zestedesavoir.com
          2 janvier 2010 à 17:52:09

          Bon, pour commencer, je remercie ceux qui ont tenté de m'aider dans mon problème. Malheureusement, j'avais déjà tenté le coup du z-index de différentes manières afin d'obtenir une solution. Mais voilà, le problème ne vient pas de mon corps, mon texte apparait très bien par-dessus mon fond semi-transparent (Ishimaru, aurais-tu mal compris mon problème? C'est pas grave ;) ) Le véritable maux de tête c'est que ce fond, pour une raison que j'ignore (et que j'aimerais bien comprendre, voilà pourquoi je suis ici), se place par-dessus mon menu qui se trouve à gauche de la page et que j'ai entouré sur l'image de mon premier post. Comme si mon menu apparaissait sous une feuille de papier calque et qu'il devenait inaccessible. Pourtant, mon texte se situe parfaitement bien autour de mon menu. Le fond serait donc supposé suivre le texte, non? Pourtant, il s'entête à se placer par-dessus mon menu. Lorsque j'ai tenté le z-index (et qu'il a fonctionné pour l'unique fois), mon menu était placé par-dessus son problème, sauf que le texte de mon corps s'était placé tout en dessous de mon block menu.

          Sans doute qu'avec le code xhtml, vous pourriez m'aider un peu plus:
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
             <head>
                 <title>TEST</title>
                 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
          	   <link rel="stylesheet" media="screen" type="text/css" title="Design de base" href="design_3.css" />
          </head>
           
             <body>
           
                 <!-- L'en-tête -->
           
                 <div id="en_tete">
          	   
          	   <a href="index.html"><img src="banniere.jpg" alt="Bannière du site" title="Revenir à l'accueil" /></a>
                 </div>
           
                 <!-- Les menus -->
          	   
          	   
          	   
                 <div id="menu">        
                     <div class="element_menu">
                         <h3>Mes fics</h3>
                         <ul>
                             <li><a href="under_my_umbrella.php">Under my umbrella...</a></li>
                             <li><a href="notre_fils.php">Notre fils</a></li>
                             <li><a href="live_your_dream.php">Live your dream</a></li>
                         </ul>
                     </div>
                 
                     <div class="element_menu">
                         <h3>Mes écrits</h3>
                         <ul>
                             <li><a href="ange_et_le_demon.php">L'ange et le démon</a></li>
                             <li><a href="romances_medievales.php">Les romances médiévales</a></li>
                             <li><a href="test.php">Test</a></li>
                         </ul>
                     </div> 
          
          		   <div class="element_menu"><h3>Extras</h3>
                         <ul>
                             <li><a href="projets_futurs.php">Projets futurs</a></li>
                             <li><a href="personnages.php">Personnages</a></li>
                             <li><a href="extra.php">Extra</a></li>
                         </ul></div>
          		   
                         
                     
          		   </div>
                 </div>
           
                 <!-- Le corps -->
           
                 <div style="filter:alpha(opacity=65);-moz-opacity:0.65;-khtml-opacity: 0.65;opacity: 0.65; margin-right: 20px;" id="corps"><div style="position:relative;" id="corps2">
          	   <p><div id="navcontainer">
          	   <ul id="navlist">
          	   <li><a href="accueil.html">Accueil</a></li>
          	   <li><a href="faq.html">F.A.Q.</a></li>
                 <li><a href="whoami.html">Qui suis-je?</a></li>
          	   <li><a href="contacts.html">Contacts</a></li>
          	   </ul>
          	   </p>
                 <p>La pluie. Les cheveux tout dégoulinants pour les garçons, ceux qui frisent pour la plupart des filles que je connais. Les impers horribles qui finissent par ne plus être agréables à porter. Tout ce mauvais temps qui assombrit les âmes et les curs. Le pire des ennemis de tous, nest-ce pas? Eh bien, cest ce que je croyais moi aussi, au départ. Pourtant, jai changé davis sur le sujet. Du moins, jai cessé de voir seulement le côté sombre de la chose. Certes, lon peut rester maussade lorsquil pleut, je ne dis pas dêtre super heureux. Pourtant, il ny a pas que de sombres choses qui se produisent pendant un temps pareil. Lon croit souvent que lorsque le ciel est à lorage, il y a toute une famille habillée de noir, le regard rivé sur un cercueil fermé, tenant des parapluies tout aussi sombres pour se protéger des intempéries, pleurant tout autant que le ciel le nouveau défunt. Ou bien même, une scène de film où se déroule alors une séparation cuisante entre deux personnes depuis longtemps en couple. Toutes les tragédies sont reliées à la pluie, sans pourtant quil y ait un seul événement un tant soit peu plus gai. Ce qui fait que nous avons une mauvaise, très mauvaise, opinion de cette température un peu plus grise.</p>
          </div>
          	   </div>
          	   </div>
          	   
          	   
           
                 <!-- Le pied de page -->
           
                 <div id="pied_de_page">
                     <p>Copyright, tous droits réservés.</p>
                 </div>
           
             </body>
          </html>
          


          C'est toujours le même code CSS par contre. Et merci pour les réponses pertinentes. Je sais que c'est le site du Zéro, mais ça fait trois ans et plus que je me base sur ce site lors de mes problèmes et c'est mon domaine d'étude alors je sais quand même de quoi je parle.
          Bonne journée à tous ^^
          • Partager sur Facebook
          • Partager sur Twitter
          Anonyme
            3 janvier 2010 à 23:12:40

            Bonjour,

            As-tu essayé de donner au corps une marge gauche égale à la largeur du menu plus la marge voulue?

            Par exemple ici:

            #corps
            {
            margin-left: 205px;
            }
            


            Cela devrait empêcher le fond du corps de passer sur le menu.
            • Partager sur Facebook
            • Partager sur Twitter
              9 janvier 2010 à 21:09:37

              Oui, c'est ce que j'ai fait. J'ai réussi à régler mon problème depuis un moment, mais n'arrivant plus à éditer mes messages (Un petit bug ou un problème causé par mon ordinateur? Aucune idée), je n'ai pas pu prévenir. Par contre, si quelqu'un arrive à faire passer un menu vertical par-dessus son corps de site, je suis partante pour savoir comment y arriver!

              Merci à tous ceux qui m'ont répondu ^^
              • Partager sur Facebook
              • Partager sur Twitter

              Petit problème de semi-transparence par-dessus un 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