L'annuaire des forums Forumactif
votre référence en terme de référencement et de développement de forums.
 




 Demande de "réparation"

HellionWestavatar
Messages : 10
Le lien du forum où le code sera installé : http://eternal-saints.forumactif.org/
Lien de la publicité sur l'annuaire : http://www.forumsdeforumactif.com/t15135-eternal-saints#137743
Support de mise en page : Message de la page d'accueil - Messages du forum - page HTML - Qui est en ligne - Modifications des catégories - Fiche de présentation ou relations
Résultat en : HTML - BBcode
Type de mise en page :  Personnalisée
----------------------------------------------------

Je vais plutôt vous expliquer mon problème, et donc l'origine de ma requête. Je me suis servi de ce forum : http://testforumes.forumactif.org/ (de test, donc) pour faire une nouvelle PA, ce qui m'a donné quelque chose que j'apprécie. Le problème, c'est que le portage vers la PA de mon forum est catastrophique. Tout est déformé, et puis, je ne sais pas du tout où est le problème.

Code:
<span style="display: block;  background-image: url('http://img4.hostingpics.net/pics/775057Bluesky.jpg'); box-shadow: 1px 1px 2px; border: 1px solid #000000; padding-top: 5px; padding-right: 15px;padding-bottom:0px">
<script type="text/javascript">
   //<!--
   // La fonction Javascript va permettre de changer d'onglet lorsque l'on clique sans recharger la page.
   // Le principe est simple. Le cadre g�rant le contenu que l'on souhaite voir recoit la calver onglet_actif alors que les autres recoivent onglet_inactif pour les cacher.
      function change_onglet(name)
      {
         document.getElementById('onglet_'+anc_onglet).className = 'onglet_inactif bloc_general_onglet';
         document.getElementById('onglet_'+name).className = 'onglet_actif bloc_general_onglet';
         document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
         document.getElementById('contenu_onglet_'+name).style.display = 'block';
         anc_onglet = name;
      }
   //-->
   </script>
   <style type="text/css">
   body
   {
      width:1000px;
      margin:auto;
   }
   img
   {
      border:none;
   }
   .systeme_onglets
   {
      margin-top:5px;
      margin-left:5px;
      width:57%;
      float:left;
   }
   .bloc_general_onglet
   {
      display:inline-block;
      margin-left:3px;
      margin-right:3px;
      padding:3px;
      border:1px solid black;
      cursor:pointer;
   }
   .onglet_inactif
   {
      background:#bbbbbb;
      border-bottom:1px solid black;
   }
   .onglet_actif
   {
      background:#eeeeee;
      border-top:1px solid #eeeeee;
   }
   .contenu_onglet
   {
      box-shadow: 1px 1px 2px;      
      background-color:#eeeeee;
      border:1px solid black;
      margin-top:1px;
      padding:5px;
      display:none;
      -moz-border-radius: 10px 10px 10px 10px ;
      height:200px;
   }
   .titre
   {
      text-align:center;
      text-decoration:underline;
   }
  
  /* Le css suivant permet de mettre l'info bulle... */
   a.info_bulle
   {            
     text-decoration : none;
     padding        : 2px 16px 2px 2px; /*D�finition des marges int�rieures de notre lien */
     position        : relative; /* Indispensable pour le bon positionnement de l'info-bulle */
   }
  a.info_bulle:hover
   {
     border          : 0;  /* ligne qui corrige le bug d'IE6 et inf�rieur */
   }
   /* Rend invisible tout notre bloc span */
   a.info_bulle span.info_bulle
   {
       position  :  absolute;
       top        :  -2000em;
       left      :  -2000em;
       width      :  1px;
       height    :  1px;
       overflow  :  hidden;
   }

   /* Rend visible tout notre bloc span et lui attribue une taille */
   a.info_bulle:hover span.info_bulle, a.info_bulle:focus span.info_bulle
   {
       top        :  auto;
       left      :  auto;
       height    :  auto;
       overflow  :  visible;
   }
   span.contenu
   {
      display    : block;
      padding    : 0 8px;
   }  

  </style>

      <div style="width:800px;margin:auto;height:250px;">
         <div class="systeme_onglets">

          <div class="contenu_onglets">
              <div class="contenu_onglet" id="contenu_onglet_premier">
              
<td><span style="display:block;width:92%;text-align:justify; padding:auto; font-family: Comic Sans;margin-left: 20px; font-size:14px">
<strong>Contexte entier d'Eternal Saints, <a href="http://eternal-saints.forumactif.org/t17-contexte-de-l-histoire" target=_parent>ICI</a>.</strong><br>

Lors de la précédente <i>Guerre Sainte</i>, <i>Athéna</i> a remporté le combat qui l'opposait à son rival <i>Hadès</i>.
Néanmoins, même si le <i>Dieu</i> a été emprisonné aux <i>Cinq Pics</i> avec ses <i>Spectres</i>,
les conséquences de ce conflit ont été catastrophiques.<br>

Pour annihiler cette puissance incontrôlable, les hommes ont
mis en place une cellule spéciale ralliée à l'<i>ONU</i>, l'<i>ETPR</i>, dans
le plus grand des secrets. Ainsi, les derniers <i>Chevaliers</i> se
cachent pour survivre, à l'aube d'une nouvelle <i>Guerre Sainte</i>.<br>

Nous commençons l'histoire en <strong>Octobre 2014</strong>. Il ne reste que
peu de temps pour reformer l'<i>Ordre des Saints</i> !<br>
<strong><div style="font-size: 11px">Envie de lire ce qu'il s'est déjà passé ? <a href="http://eternal-saints.forumactif.org/t16-historique-des-evenements" target=_parent>ICI</a> !</div>

</span></td>


              </div>
            
           
             <div class="contenu_onglet" id="contenu_onglet_deuxieme">

<table><tr><td><span style="display: block; width:100px; height:160px; text-align: left; font-family: arial narrow; letter-spacing: 3px; color: #000000; font-style: italic; text-shadow: 2px 2px 5px #000000; font-size: 21px; margin-left: 3px; margin-bottom: 4px;"><span style="display: block; box-shadow: 2px 2px 4px; center; border: 1px solid #000000; text-align: justify;">
<a href="http://eternal-saints.forumactif.org/u3contact" target=_parent><img src="http://img11.hostingpics.net/pics/458848Helena.png" /> </a></span><center>Helena </center></span><td>

<td><span style="display: block; width:100px; height:160px; text-align: left; font-family: arial narrow; letter-spacing: 3px; color: #000000; font-style: italic; text-shadow: 2px 2px 5px #000000; font-size: 21px; margin-left: 6px; margin-bottom: 4px;"><span style="display: block; box-shadow: 2px 2px 4px; center; border: 1px solid #000000; text-align: justify;">
<a href="http://eternal-saints.forumactif.org/u4contact" target=_parent><img src="http://img11.hostingpics.net/pics/366556Caridd.png" /> </a></span><center>Andrew</center></span><td>

<td><span style="display: block; width:100px; height:160px; text-align: left; font-family: arial narrow; letter-spacing: 3px; color: #000000; font-style: italic; text-shadow: 2px 2px 5px #000000; font-size: 21px; margin-left: 6px; margin-bottom: 4px;"><span style="display: block; box-shadow: 1px 1px 2px; center; border: 1px solid #000000; text-align: justify;">
<a href="http://eternal-saints.forumactif.org/u2contact" target=_parent><img src="http://img11.hostingpics.net/pics/646780Eden.jpg" /> </a></span><center>Eden</center></span><td>

<td><span style="display: block; width:100px; height:160px; text-align: left; font-family: arial narrow; letter-spacing: 3px; color: #000000; font-style: italic; text-shadow: 2px 2px 5px #000000; font-size: 21px; margin-left: 6px; margin-bottom: 4px;"><span style="display: block; box-shadow: 1px 1px 2px; center; border: 1px solid #000000; text-align: justify;">
<a href="http://eternal-saints.forumactif.org/u5contact" target=_parent><img src="http://img11.hostingpics.net/pics/843824Alice.png" /> </a></span><center>Alice</center></span><td>


</tr></table>

              </div>
            
           
           
         </div>
        
          <div class="onglets" style="padding-left:10px;">
              <span class="onglet_inactif bloc_general_onglet" id="onglet_premier" onclick="javascript:change_onglet('premier');">Accueil</span>
              <span class="onglet_inactif bloc_general_onglet" id="onglet_deuxieme" onclick="javascript:change_onglet('deuxieme');">Staff</span>
            </div>
       </div>
       <script type="text/javascript">
      //<!--
         var anc_onglet = 'premier'; // Cette ligne informe qu'on va en premier voir l'onglet 1
         change_onglet(anc_onglet);
      //-->
      </script>

<!-- Ci dessous le cadre Top-sites-->
         <div style="width:15%;float:left;border:1px solid black;background-color:#eeeeee;box-shadow: 1px 1px 2px;height:200px;padding:5px;margin-left:19px;margin-top:6px;">
            <span style="display: block; font-family: arial narrow; margin: auto; letter-spacing: 3px; padding: 0px 2px; color: #000000; font-style: italic; text-shadow: 2px 2px 5px #000000; font-size: 18px;">TOP-SITES</span><div style="padding-top:5px">

                     <center><a href="http://www.root-top.com/topsite/virtu4ldreaiviz/in.php?ID=3991" target=_parent><img src="http://img.root-top.com/topsite/virtu4ldreaiviz/banner.gif" /><div style="padding-top:5px;"><a href="http://www.root-top.com/topsite/virtu4lgames/in.php?ID=3871" target=_parent><img src="http://img.root-top.com/topsite/virtu4lgames/banner.gif" /></div><div style="padding-top:5px;"><a href="http://www.root-top.com/topsite/gilgamesh/in.php?ID=6693" target=_parent><img src="http://img.root-top.com/topsite/gilgamesh/banner.gif" /></div><div style="padding-top:5px;"><a href="http://www.root-top.com/topsite/azzare34/in.php?ID=8169" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/azzare34/banner.gif" border="0" alt="" /></a></div><div style="padding-top:5px;"><a href="http://www.root-top.com/topsite/chenshen/in.php?ID=1053" class="postlink" target="_blank" rel="nofollow"><img src="http://oi50.tinypic.com/5pri3l.jpg" border="0" alt="" /></a></div>

</center></div>

         </div>
      </div>
      <!-- Fin du cadre Top-sites-->

<!-- Ci dessous le cadre Partenaires-->
         <div style="width:19%;float:right;background-color:#eeeeee;box-shadow: 1px 1px 2px;border:1px solid black;height:200px;padding:3px;margin-right:60px;margin-top:-243px;">
            <span style="display: block; font-family: arial narrow; margin: auto; margin-top: 1px; margin-left: 3px;letter-spacing: 3px; padding: 0px 2px; color: #000000; font-style: italic; text-shadow: 2px 2px 5px #000000; font-size: 18px;"><center>NOS AMIS</center></span><div style="padding-top:10px;">
                    <tr> <td><div style="float:left;padding-top:3px"><a href="http://www.sawen.net/" target=_parent><img src="http://parle-net.com/spd/linkage/bouton-sawen.jpg" /></a><div style="padding-top:5px;">
<a href="http://www.frole-pbf.net/" target=_parent><img src="http://parle-net.com/spd/linkage/bouton-frole.jpg" /></a></div><div style="padding-top:5px;"><a href="http://www.forumsdeforumactif.com"> <img src="http://img15.hostingpics.net/pics/930926lannuaire.png" /></a></div><div style="padding-top:5px;"><img src="http://www.ratdirectory.com/images/88x31.png" alt="" /></div><div style="padding-top:5px;"><img src="http://www.ratdirectory.com/images/88x31.png" alt="" /></div><div style="padding-top:5px;"><img src="http://www.ratdirectory.com/images/88x31.png" alt="" /></div></div>
</left></td>

<td><div style="float:right; "><img src="http://www.ratdirectory.com/images/88x31.png" alt="" /><div style="padding-top:4px;"><img src="http://www.ratdirectory.com/images/88x31.png" alt="" /></div><div style="padding-top:4px;"><img src="http://www.ratdirectory.com/images/88x31.png" alt="" /></div><div style="padding-top:4px;"><img src="http://www.ratdirectory.com/images/88x31.png" alt="" /></div><div style="padding-top:4px;"><img src="http://www.ratdirectory.com/images/88x31.png" alt="" /></div></div>
</td></tr>

</div></div>
             </div>
      </div>
      <!-- Fin du cadre Partenaires-->

</span>
Voici le code qui marche, et en même temps ne marche pas. Je suis sur Firefox, et la largeur du forum est de 1000 px (pour les deux). Je ne suis vraiment pas bon en code, je débute juste, donc si c'est quelque chose d'élémentaire (ou pas), n'hésitez pas à me corriger. Merci d'avance, j'ai vraiment besoin d'aide sur ce coup ! ^^

EDIT : J'espère, d'ailleurs, que cette partie du forum correspond à mon problème !
ThreaxV.I.P.avatar
Messages : 7332
Bonjour,

On pourrait avoir un screen du rendu sur le forum en question, pour bien voir le problème ? Smile
HellionWestavatar
Messages : 10
Aucun problème ! L'affichage est plutôt gros, donc je vous envoie deux screens, dans l'ordre.

Screen 1

Screen 2

Ce sont des liens Hosting Pics, vous les aurez en plein écran au lieu de déformer la page.
Merci de votre aide !

EDIT : J'ai changé le second screen, j'ai raté mon Imprim. Ecran...
ThreaxV.I.P.avatar
Messages : 7332
Ah oui en effet... Moi j'obtiens ça quand je mets votre code sur votre forum :



C'est pas parfait, mais c'est moins pire que votre résultat. Maintenant, pour en trouver la source...
Peut-être pourriez-vous installer le code sur le bon forum, pour qu'on puisse analyser ça directement ? (même si j'admets que c'est pas très esthétique pour les utilisateurs Confused )
HellionWestavatar
Messages : 10
C'est fait, je vous laisse le rendu jusqu'à nouvel ordre ! Merci encore.

EDIT :: J'ai remarqué que les versions des deux forums ne correspondent pas. Le forum de test, donc là où le code de la PA marche, est en phpBB3 (prosilver), alors que le forum de base est en phpBB2 (subsilver). Est-ce qu'il y a un moyen d'adapter le code ?
HellionWestavatar
Messages : 10
Je fais un douple-post spécialement pour upper le sujet, et donc dire que j'avais régler le problème !
Je me suis débrouillé pour faire quelque chose d'à peu près correct, pour l'instant c'est bon Smile

J'apprécie l'assistance apportée !

EDIT :: Vous pouvez clore ce sujet.
LixyrAdministratriceavatar
Messages : 12690

Recherches personnelles
Ma recherche de staff: http://www.forumsdeforumactif.com/f3-proposez-vos-services
Mon projet:
Ma commande:
En ligne
Bonjour.
Le problème est donc résolu, et le sujet, clos ?

,
 Sujets similaires
-
» [Annulée] Demande de page d'aceuil
» [Annulée] Demande de description des catégories.
» [résolu] demande d'aide à l'optimisation
» [Basil] Demande de mise en page
» Demande de CSS

Répondre au sujet


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

Modérer

Trames

  • Nos services
  • Prés. obligatoire
  • Référencé
  • Réf. (comp)
  • Prérelance
  • 1ère relance
  • 2ème relance
  • Recherche (relance)
  • Recherche (corbeille)
  • Formulaire manquant
  • Formulaire incomplet
  • 1
  • 2
  • 3
  • 4
  • 5
  • Evaluation