Petit soucis de placement d'une boite.. Help!

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Petit soucis de placement d'une boite.. Help!

Message par Ectra Dim 6 Nov 2011 - 16:24

Bonjour,

Voici un screen: https://i.servimg.com/u/f43/12/33/79/32/screen10.jpg

Voila, vous voyez le menu de navigation? Bien. En fait il y a une partie du menu que je ne peux pas cliquer. Pourquoi? Parce qu'il est partiellement placé en dessous du bodyline.
Un screen pour que ce soit plus visible: https://i.servimg.com/u/f43/12/33/79/32/screen11.jpg

Voila maintenant le template (je vous épargne la balise head) de haut de page et le css qui se rapport à ma navig. J'ai essayé de le placer le plus haut possible mais à l'évidence ça ne marche pas.
Code:

</head>
  <div class="navcadre">{GENERATED_NAV_BAR}</div>
 
  <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
      <div class="content">
         <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            

            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
         </p>
      </div>
   </div>
   <!-- END hitskin_preview -->

   <!-- BEGIN switch_login_popup -->
   <div id="login_popup">
      <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
         <tr height="25">
            <td class="catLeft">
               <span class="genmed module-title">{SITENAME}</span>
            </td>
         </tr>
         <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
            <td class="row1" align="left" valign="top">
               <div id="login_popup_buttons">
                  <form action="{S_LOGIN_ACTION}" method="get">
                     <input type="submit" class="mainoption" value="{L_LOGIN}" />
                     <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                     <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                  </form>
               </div>
               <span class="genmed">{LOGIN_POPUP_MSG}</span>
            </td>
         </tr>
      </table>
   </div>
   <!-- END switch_login_popup -->

   <a name="top"></a>
   {JAVASCRIPT}
 
   <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
         <td class="bodyline">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_left -->
                  <td align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     

                     <!-- END switch_logo_center -->
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     

                     <span class="gen">{SITE_DESCRIPTION}
  </span>
                  </td>
                  <!-- BEGIN switch_logo_right -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_right -->
               </tr>
            </table>

            <div style="clear: both;"></div>
                       

<div class="upandown"><table border="0" cellpadding="0" cellspacing="2"><tr><td style="text-align: center;"><a href="#top"><img class="imgupanddown" src="http://img534.imageshack.us/img534/6476/27313310.gif"></a><br>Up</td><td style="text-align: center;">Down<br><a href="#bottom"><img  class="imgupanddown" src="http://img153.imageshack.us/img153/4827/downz.gif"></a></td></tr></table></div>

            <!-- BEGIN switch_ticker_new -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <div id="fa_ticker_container">
                           <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                           </ul>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker_new -->

            <!-- BEGIN switch_ticker -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <div id="fa_ticker_container">
                           <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                 <!-- BEGIN ticker_row -->
                                 <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                 <!-- END ticker_row -->
                              </div>
                           </div>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker -->

            <div id="page-body">
               <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                     <tbody>
                        <tr>
                           <td valign="top" width="{C1SIZE}">
                              <div id="{ID_LEFT}">
                                 <!-- BEGIN giefmod_index1 -->
                                 {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                 <!-- END giefmod_index1 -->
                              </div>
                           </td>
                           <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </td>
      </tr>
   </table>
</body>
</html>
<!-- END html_validation -->
Code:
.navcadre{
width: 400px;
position: relative;
top: 335px;
left: 5px;
text-align: center;
background-color: #3c5159;
border: 1px # solid;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-khtml-border-top-left-radius: 20px;
-khtml-border-top-right-radius: 20px;
-khtml-border-bottom-left-radius: 20px;
-khtml-border-bottom-right-radius: 20px;
opacity: 0.6;
-moz-opacity: 0.6;
-khtml-opacity: 0.6;
box-shadow: 3px 3px 3px #000000;}

a.mainmenu img {
display:none;}

a.mainmenu{
font-family: Verdana;
padding-left:2px;
padding-right:2px;}

a.mainmenu:hover {
font-style: italic;}

Donc voila ma question. Est-ce que quelqu'un pourrait m'aider ou aurait une idée pour que je puisse cliquer la totalité de ma navig.. En gros, une idée pour qu'elle soit au dessus du reste =) J'ai une solution de substitution qui est de réduire la largeur pour qu'elle n'empiète pas sur le bodyline mais bon.. ça sera le dernier recours!
Merci à ceux qui essayeront =D


Dernière édition par Ectra le Mer 9 Nov 2011 - 15:40, édité 1 fois
Ectra

Ectra
**

Masculin
Messages : 56
Inscrit(e) le : 25/04/2011

https://calypsorpg.forumactif.com
Ectra a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit soucis de placement d'une boite.. Help!

Message par Ectra Mar 8 Nov 2011 - 19:24

Up!! (pas taper! pas taper!)
Ectra

Ectra
**

Masculin
Messages : 56
Inscrit(e) le : 25/04/2011

https://calypsorpg.forumactif.com
Ectra a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit soucis de placement d'une boite.. Help!

Message par diedblack Mer 9 Nov 2011 - 1:04

J'aurait une idée (simplement une idée)
Mettre la priorité d'affichage à la barre de navigation.
Je sait pas trop mais j'ai en tête quelque chose comme
Priority="absolute"

Je sait pas si ce code marche ^^ mais quelque chose du genre.

EDIT: à faire à partir du CSS je crois.
diedblack

diedblack
****

Masculin
Messages : 206
Inscrit(e) le : 09/04/2011

http://www.frsociety.com
diedblack a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit soucis de placement d'une boite.. Help!

Message par Ectra Mer 9 Nov 2011 - 1:11

Non, ça ne marche pas (j'ai testé dans la fiche css et directement dans le template)
Merci quand même =D

C'est fou ça, pourtant le code de la navig est placé au dessus le code du bodyline, ça devrait du coup se retrouver par dessus normalement nan?
Ectra

Ectra
**

Masculin
Messages : 56
Inscrit(e) le : 25/04/2011

https://calypsorpg.forumactif.com
Ectra a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit soucis de placement d'une boite.. Help!

Message par diedblack Mer 9 Nov 2011 - 14:06

Non c'est pas vraiment comme sa que sa fonctionne, le code ayant une priorité d'affichage a le dessus je crois, il doit exister des codes pouvant donner une priorité à un élément, juste rechercher sur internet Wink
diedblack

diedblack
****

Masculin
Messages : 206
Inscrit(e) le : 09/04/2011

http://www.frsociety.com
diedblack a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit soucis de placement d'une boite.. Help!

Message par Ectra Mer 9 Nov 2011 - 15:40

Wouhouuu j'ai trouvé!

Alors en fait, le principe de priorité oui ca existe, c'est le code z-index
Du coup j'ai mis z-index: 1; à ma naviv et z-index: 2; à mon body, du coup la navig est placé au dessus du body et j'ai accés total à ma navig =D
Et ça marche sur Google chrome, mais aussi sur Firefox. (j'ai bannis IE de mon ordi donc je sais pas pour lui par contre)

Du coup si d'autres cherchent une solution à ce problème, elle est là =D
Merci quand même Dieldblack ^^
Ectra

Ectra
**

Masculin
Messages : 56
Inscrit(e) le : 25/04/2011

https://calypsorpg.forumactif.com
Ectra a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum