Sujets similaires

Bonjour !

Je rencontre un petit soucis avec mon forum de test :/
J'ai placé une bannière de fond (en ajoutant un second fond) et je souhaitais placer une bannière transparant à l'emplacement du logo afin que l'on puisse attérire directement sur l'index ; classique quoi Smile

Mais lorsque j'ajoute ma bannière transparante, elle vient se placer en dessous de la bannière de fond, décalant du même coup tout la barre de navig' et tout le forum vers le bas :/

J'ai essayé de suivre les tutos concernant les doubles fond mais rien à faire, je ne vois pas ce qui cloche Surprised

Pour plus de clarté, voila un imprim écran :

Spoiler:

Mon Css :

Code:: body {
margin : 0px;
}

.fond2{
background-image: url('http://i41.tinypic.com/105blp0.jpg');
background-position: top left;
backgroun: 1000px;
height: 407px;
}

Et mon template overall_header_new :

Spoiler:

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

<title>{SITENAME_TITLE}{PAGE_TITLE}</title>
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
{META_FAVICO}
{META}
<meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
{T_HEAD_STYLESHEET}
{CSS}
<link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
<link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

<script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
   
      pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
      pm.focus();
   
   
      report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
      report.focus();
   
   
      ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});
   
});


   var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = false, logInBackgroundClass = false;

//]]>
</script>
{GREETING_POPUP}

<style type="text/css">
#hitskin_preview {
   margin: 0; padding: 0;
   position: fixed;
   top: 0; left: 0;
   width: 100%;
   height: 65px;
   background: url('http://2img.net/i/fa/hitskin/hitskin_bar.png') repeat-x left -15px;
   color: #fff;
}
* html #hitskin_preview { /* Fix for IE6 since it doesn't implement fixed positionning */
   position: absolute;
   top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop);
   z-index: 2;
   background: transparent url('http://2img.net/i/fa/hitskin/hitskin_bar-ie6.gif') repeat-x left -15px;
}
* html { /* Gunlaug's Speed fix for the above positionning fix. Sorry for the fix for the fix */
background: #fff url(foo) fixed;
}
#hitskin_preview h1 {
   float: left;
   margin: 3px 0 0 0;
   padding: 0 0 0 10px;
   font: italic normal 25px Arial,sans serif;
   color: #fff;
}
#hitskin_preview h1 img {
   vertical-align: middle;
}
#hitskin_preview em {
   color: #7CBA2C;
   font-weight: bold;
}
#hitskin_preview a {
color: #fff;
}
#hitskin_preview a:hover {
text-decoration: underline;
}

#hitskin_preview .content {
   text-align: right;
}
#hitskin_preview .content p {
   margin: 4px 1em 0px 1em;
   font-size: 13px;
   line-height: 1.8em;
   color: #fff;
   font-weight: bold;
}
#hitskin_preview .content p span {
   font-weight: normal;
   font-size: 0.8em;
}
body {
   margin-top: 40px !important;
}
{hitskin_preview.HITSKIN_RTL_CSS}
</style>

</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}"><div class=fond2></div>


<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}
         <br />
         <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
      </p>
   </div>
</div>



<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>


<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>
               
               <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
               <td align="center" width="100%" valign="middle">
                  <div class="maintitle">{MAIN_SITENAME}</div>
                  <br />
                  <span class="gen">{SITE_DEscriptION}<br /> </span>
               </td>
               

               
               <td align="center" width="100%" valign="middle">
                  <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a><br />
                  <div class="maintitle">{MAIN_SITENAME}</div>
                  <br />
                  <span class="gen">{SITE_DEscriptION}</span>
               </td>
               

               
               <td align="center" width="100%" valign="middle">
                  <div class="maintitle">{MAIN_SITENAME}</div>
                  <br />
                  <span class="gen">{SITE_DEscriptION}<br /> </span>
               </td>
               <td>
                  <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
               </td>
               
            </tr>
         </table>

         <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
            <tr>
               <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
            </tr>
         </table>

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

         
         <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">
                              
                              <div>{switch_ticker.ticker_row.ELEMENT}</div>
                              
                           </div>
                        </div>
                     </div>
                  </td>
               </tr>
            </table>
         </div>
         

         <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}">
                              
                              {giefmod_index1.MODVAR}
                                 
                                 <div style="height:{SPACE_ROW}px"></div>
                                 
                              
                           </div>
                        </td>
                        <td valign="top" width="100%">

                        </td>
                     </tr>
                  </tbody>
               </table>
            </div>
         </div>
      </td>
   </tr>
</table>
</body>
</html>

Voila, merci d'avance pour votre aide

J'ai déjà remarqué un problème dans ton CSS :

Code:: body {
margin : 0px;
}

.fond2{
background-image: url('http://i41.tinypic.com/105blp0.jpg');
background-position: top left;
backgroun: 1000px;
height: 407px;
}

Tu as oublier un «d» à background
Donc déjà ça :

Code:: body {
margin : 0px;
}

.fond2{
background-image: url('http://i41.tinypic.com/105blp0.jpg');
background-position: top left;
background: 1000px;
height: 407px;
}

Ca devrait t'aider ^^

Hello !
Ajoute position : absolute au propriété de ton .fond2

Et background : 1000px n'est pas une propriété valide. A enlever.
Si le but était de régler la taille, c'est width. mais je te conseil dans ce cas un réglage relatif, pour les gens qui ont des petit écran.
width : 100% pour toute la largeur.

Merci de vos réponses ^w^

Clecle57400 : pour le background sans "d", j'avais déjà remarqué mais en ajoutant le "d" la bannière ne s'affichait plus donc je l'avais re-retiré x)

Et effectivement, comme l'a dis VPeybernes, ce n'était pas une valeur valide (a force de trop relire le code, on dois finir par plus voir les fautes cons .__.)

Alors j'ai essayé ça :

Code:: body {
margin : 0px;
}

.fond2{
background-image: url('http://i41.tinypic.com/105blp0.jpg');
background-position: top left;
position : absolute;
width : 100%;
height: 407px;
}

La bannière transparente ne va plus en dessous de celle de fond mais je sais pas tout court où elle va puisqu'elle n'est pas non plus cliquable :/

Du coup dans le doute j'ai essayé ce code aussi :

Code:: body {
margin : 0px;
}

.fond2{
background-image: url('http://i41.tinypic.com/105blp0.jpg');
background-position: absolute;
width : 100%;
height: 407px;
}

Mais retour à la case départ, la bann' transparente se place dessous et décale tout :s

background-position: absolute; n'est pas valide non plus.

En fait elle doit être en dessous.
Rester sur la première version et ajoutez z-index : 0 pour que la bannière passe dessous. Si ça marche par ajoutez #i_logo { z-index : 1 } pour remonter la bannière transparente par rapport à l'autre que l'on à mis à 0

Ni l'un ni l'autre ne change quoi que ce soit :/

C'est possible d'avoir l'URL de la page en question ?

Oui pas de soucis, c'est un forum de test ^^

/lien retiré maintenant que le soucis est résolu /

on laisse tombé le #i_logo et met radicalement z-index : -1 à .fond2 et la ça devrait être bon.
Sinon -100 carrément lol!

Mais sinon c'était bien ça, elle était dessous.

Ah !! *o*

Ça fonctionne

Merci ^^

Par contre du coup y'a le titre du forum et la sa description qui empiètent sur la bann' maintenant .___.
Tu aurai une idée de comment résoudre ça s'il te plaît ?
/désolée de t'embêter >_

#i_logo { height : 350px ; }
Ajuste le 300 pour le positionner comme tu veux. Sa va agrandir ta bannière transparente, et donc pousser le titre ver le bas.

Super ! Merci beaucoup pour ton aide ! *o*
Problème résolu

Soucis bann tranparante + bann de fond

Soucis bann tranparante + bann de fond

Sujets similaires

Sujets similaires

Partenaires Or