Sujets similaires

Bonjour,
Je poste ici pour enfin trouver la solution à mon problème. J'ai tenté de bidouiller par moi-même plusieurs fois, mais finalement, je crois que je vais demander de l'aide & donc me voici.
Donc, j'aimerai ajouter à côté du header, un petit menu que j'ai donc codé en HTML, hébergé sur FA. Sauf, que voilà, lorsque j'ajoute le code iframe sur "message d'accueil" et je l'encadre avec des div pour l'avoir où je veux, MAIS ça déforme le forum, ici : http://daribiridaradu.forumgratuit.org/?tt=1
Donc, si quelqu'un aurait l'amabilité de me dire comment m'y prendre pour que ça surplombe le tout sans déformer le tout :')

Code:: <div style="margin-top:-550px; padding-left:700px;">
<iframe src="http://daribiridaradu.forumgratuit.org/h4-menu-rond" target="_blank" border="0" frameborder="0" height="210px" width="210px" scrolling="no"></iframe>
</div>

EDIT: Et pour ceux qui peuvent, j'aimerai savoir comment faire pour que ça soit visible sur toute les pages, donc s'il y a un moyen pour afficher ce code partout & de manière fixe:O !

Merci d'avance !

Bonjour,

C'est une question d'ajustement. Il suffit d'adapter:

Code:: <div style="margin-top:-550px; padding-left:700px;">

en changeant la taille du 700px pour 605px, par exemple.

Code:: <div style="margin-top:-550px; padding-left:605px;">

Pour l'afficher partout, il faudrait que tu nous fournisses ton template Overall_header Wink

Bonjour,
Merci d'avoir lu ma demande **
Je pense que je me suis mal exprimée & j'aurai du faire un schéma pour être plus clair. Donc, voici l'effet que j'aimerai obtenir: https://2img.net/r/hpimg15/pics/5735850jae.png mais je ne sais pas si c'est possible >_< !
Voici le template demandé:

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
<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 http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />


<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />

{META_FAVICO}
{META}
{META_FB_LIKE}
<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="{JQUERY_PATH}" type="text/javascript"></script>
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>


<script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
<script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>



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



<script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
   /* Definir le sens de direction en fonction du panneau admin */
   var tickerDirParam = "{switch_ticker.DIRECTION}";
   var slid_vert = false;
   var auto_dir = 'next';
   var h_perso = parseInt({switch_ticker.HEIGHT});

   switch( tickerDirParam )
   {
      case 'top' :
         slid_vert = true;
         break;

      case 'left':
         break;

      case 'bottom':
         slid_vert = true;
         auto_dir = 'prev';
         break;

      case 'right':
         auto_dir = 'prev';
         break;

      default:
         slid_vert = true;
   }

   $(document).ready(function() {
      var w_cont = $('#fa_ticker_container').width();

      if (w_cont > 0)
      {
         $('#fa_ticker_container').width(w_cont);

         /* Affichage de la liste */
         $('#fa_ticker_content').css('display','block');

         /* Calcul des dimensions du conteneur et des elements */
         var width_max = $('ul#fa_ticker_content').width();
         var width_item = Math.floor(width_max / {switch_ticker.SIZE});
         var height_max = h_perso;

         /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
         $('ul#fa_ticker_content li').each( function () {
            if ($(this).height() > height_max)
            {
               height_max = $(this).height();
            }
         } );

         /* Redimensionnement des elements et des images trop larges */
         $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
            if ($(this).width() > width_item)
            {
            var ratio    = $(this).width() / width_item;
            var new_height = Math.round($(this).height() / ratio);
            $(this).height(new_height).width(width_item);
            }
         });

         /* Redimensionnement et centrage du conteneur en mode vertical */
         if (slid_vert)
         {
            $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
         }

         /* Initialisation du caroussel */
         $('#fa_ticker_content').jcarousel({
               vertical: slid_vert,
            wrap: 'circular',
            auto: {switch_ticker.STOP_TIME},
            auto_direction: auto_dir,
         scroll: 1,
         size: {switch_ticker.SIZE},
         height_max: height_max,
         animation: {switch_ticker.SPEED}
         });
      }
      else
      {
         $('ul#fa_ticker_content li:not(:first)').css('display','none');
         $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
      }
   });
//]]>
</script>


<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 = true, logInBackgroundClass = false;



$(document).ready( function() {
   $(window).resize(function() {
      var windowWidth = document.documentElement.clientWidth;
      var popupWidth = $("#login_popup").width();
      var mypopup = $("#login_popup");

      $("#login_popup").css({
      "left": windowWidth/2 - popupWidth/2
         });
   });
});

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

<style>
.jcarousel-skin-tango .jcarousel-item {
   text-align:center;
   width: 10px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
   margin-right: {switch_ticker.SPACING}px;
}

.jcarousel-skin-tango .jcarousel-item-vertical {
   margin-bottom: {switch_ticker.SPACING}px;
}
</style>

{HOSTING_JS}

<script type="text/javascript">
//<![CDATA[
   var _gaq = _gaq || [];
   _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
   _gaq.push(['_trackPageview']);

   (function() {
   var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
   ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
   })();
//]]>
</script>

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

<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">
                  
                  <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}<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">
                        <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                           
                           <li>{switch_ticker.ticker_row.ELEMENT}</li>
                           
                        </ul>
                     </div>
                  </td>
               </tr>
            </table>
         </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>

Merci :')

Bonjour,
Pour que cette petite bulle rouge s'affiche sur toutes les pages, tu places ton iframe dans ton Overall-Header. Overall-Header est l'entête qui est affiché partout. Après, pour le positionnement, je te conseil l'utilisation de la propriété CSS suivante :
z-index: 999;
position:relative;
Elle permet de spécifier la position d'empilement d'un bloc par rapport aux autres. Ainsi, ta bulle passera "par dessus" le Header (= ta bannière). Après, il te restera "plus qu'à" le positionner à l'aide de
left: x px ;
right: x px;
top: x px;
La difficulté est de trouver les bonnes valeurs Wink

J'espère avoir aider. A Bientôt Wink

Merci, ça m'a aidé à y voir mieux !
Cependant, je ne sais pas où placer mon code dans le template, car il est plutôt vaste et lorsque je le place, il crée un grand espace, donc, j'aimerai savoir où je pourrai le placer sans qu'il n'engendre une déformation ailleurs sur le forum s'il vous plaît ^^

Je ne comprends pas?
Il suffit que ta bulle ait un div qui l'entoure/soit un div. Si c'est le cas, tu utilises le z-index et la position (il serait mieux d'utiliser absolute, pour problèmes de comptabilités!)

Ceci sont à mettre dans une balise style (déconseillé) ou dans le CSS, en ayant mit au préalable un id ou une class (id conseillé, si la bulle est unique) à ta div.

Tu emts alors ta bulle dans overall_header, au-dessus de la position du header.

Haa, merci !
Dernière question, j'aimerai savoir une chose, c'est que si je veux faire la même chose en suivant ce schèma: https://2img.net/r/hpimg11/pics/854760banessaieSHD2.png , il faudra dont que je passe par du HTML et que je refasse la manipulation, tout en en globant le rond, mettant mon code dans le template overall_header ?
En tout cas, merci d'avoir pris la peine de répondre **

Attends, je comprends plus rien, y'a plus de rond, juste une bannière! xD
Tu veux faire une image cliquable maintenant? @_@

Ah, je me suis mal exprimée, je suis désolée ^^
Ce que je voudrais au final en fait, c'est que la PA soit intégré sur la bannière, donc en haut à gauche, il y a aura un système d'onglet par exemple, ensuite le rond sera positionné là où il est actuellement. Et donc, ma question, c'est de savoir si pour ajouter des éléments de la PA sur ma bannière, faut-il que je m'y prenne de la même façon que pour le rond rouge que je viens d'installer grâce à vos aide.
(soit, coder sur un page HTML,n et ensuite poser iframe dans le template overall_header et l'entourer d'une div pour bien positionner mon rendu :'D)

Oui, je te conseil de le faire de la même façons.
Sinon, tu peux déplacé la partie qui concerne le PA (dans une Template).
L’affichage du PA se situe dans "Index_Body" et voilà le code par défaut.

Code:: 
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

<tr>
   <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
</tr>


<tr>
   <td class="row1" rowspan="3" align="center" valign="middle">
   <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
   </td>
</tr>

</table>

Si tu encadre {message_admin_index.message_admin_txt.MES_TXT} dans un div, tu pourras faire les modifications du PA directement dans Affichage > Général, mais cela devient un peu plus compliqué. Wink

N'oublie pas que tu dois le placer dans "Overall-Header". Je ne sais pas si tu as bien compris ce que ce genre de déplacement engendre comme modification. Je te conseil de bien enregistrer tes Templates avant d'effectuer des testes Wink

D'accord ! Merci beaucoup pour votre aide **
J'ai beaucoup appris grâce à vous, donc je ferai de mon mieux pour réussir mon entreprise :'D
Ma demande d'aide peut donc être archivé, mille mercis ♥

Je suis contente d'avoir pu t'aider. Quand on veut on peut Wink

Tu peux aller loin avec une motivation comme celle que je viens de voir.

A Bientôt !

Désolé, je viens de remarqué un petit truc °° !
Le rond "bouge" en fonction des dimensions des écrans, alors que j'ai mit "position:absolute;" & lorsque je met relative, une grosse marge se crée ôo !

Oui, c'est un risque assez problématique.
Dans ce cas, je te conseil de mettre les valeurs en pixel si ce n'est pas déjà fait.
Mais c'est assez difficile de faire en sorte que cela ne sois pas influencé par la taille des écrans.

Absolute se met en fonction de l'écran, en haut à gauche.
Relative par rapport à l'élément précédent, soit en haut à gauche, soit en bas à droite, selon les navigateurs (d'où les problèmes de comptabilité!).

Il n'y a pas de solution possible hormis celle de fixer la position de mon forum par rapport à la fenêtre ?

Je pense qu'il faudrait mettre ta pa en position:relative, puis tu met ton iframe dedans en position:absolute; (de façon à ce que l'iframe se positionne par rapport à ta pa et non au forum, ce qui fait qu'il n'y aurait aucune déformation du moment que la fenêtre n'est pas plus petite que la pa) Smile

De cette façon ?

Code:: <div style="left: 810px ; right: x px; top: 233px;z-index: 999; position:relative;">
<iframe src="http://daribiridaradu.forumgratuit.org/h4-menu-rond" target="_blank" border="0" frameborder="0" height="210px" width="220px" scrolling="no" position="absolute"></iframe>
</div>

Merci en tout cas :'D

Bonjour Jonquille !
Ton sujet est-il toujours d'actualité ?
Si nous n'avons pas de réponse dans 3 jours, le problème sera considéré comme résolu et archivé.
Merci de ta compréhension. Smile

Oui, le sujet est toujours d'actualité ^^ !
Merci d'être passé :')

On en est où? Le problème est résolu? ^^"
Tu as testé l'iframe?

Jonquille a écrit:

De cette façon ?

Code:: <div style="left: 810px ; right: x px; top: 233px;z-index: 999; position:relative;">
<iframe src="http://daribiridaradu.forumgratuit.org/h4-menu-rond" target="_blank" border="0" frameborder="0" height="210px" width="220px" scrolling="no" position="absolute"></iframe>
</div>

Merci en tout cas :'D

Je demandais si je devais mettre ceci pour éviter que le code "bouge" en fonction de la résolution de chacun. Enfin, je vois pas comment m'y prendre sur le coup, si ce n'est qu'établir une margin-left pour l'ensemble du forum.

Bonjour Jonquille,
Je vois que ton sujet est resté en suspens...!
Si il est résolu, merci de le signaler. Sinon, attendons de voir si un codeur saura t'aider... Smile

Je n'ai toujours pas résolu mon soucis >o<
Donc je vais sagement attendre que quelqu'un m'apporte la solution à mon problème.
Merci d'être passé :')

Pour moi il faudrait que tu mettes ta div juste après la ligne de ton template suivante:

Code:: <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">

L'élément se positionnera donc en fonction de ton forum et non de toute la fenêtre, il suffira de l'ajuster.

déformation non désirée

déformation non désirée

Sujets similaires

Sujets similaires

Partenaires Or