AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le deal à ne pas rater :
Smartphone Xiaomi 14 – 512 Go- 6,36″ 5G Double SIM à 599€
599 €
Voir le deal

    Problème de recadrage de la page d'accueil

    Tewson
    Tewson
    MasculinAge : 31Messages : 26

    Sam 13 Avr 2013 - 17:10

    Bonjour,

    Je suis depuis quelques temps le créateur d'un forum RPG sur Pokémon (mais ça, on s'en moque ...) et je rencontre un petit soucis. En effet, ma page d'accueil décale tout mon forum.

    Explication et images ...:

    Ensuite, je pense que c'est dû au problème suivant que j'aimerai corrigé pour seul but esthétique ...

    Ce que je veux enlever:

    C'est pourquoi je vous note ci-dessous le code de ma page d'accueil afin de voir ce que je peux enlever et ce qu'il faut modifier pour rendre mon forum centré et sans les zones de vides.

    Code:
    <script type="text/javascript">
      //<!--
          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:800px;
          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:0px solid black;
          cursor:pointer;
      }
      .onglet_inactif
      {
          background:#F9CB73;
          border-bottom:1px solid black;
      }
      .onglet_actif
      {
          background:#F9CB73;
          border-top:0px solid #F9CB73;
      }
      .contenu_onglet
      {
          background-color:#F9CB73;
          border:0px solid black;
          margin-top:0px;
          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"><div class="titre_pa">Le contexte</div><div class="corps_pa" style="padding:10px;"><div align="justify">Vous souvenez-vous de votre vie passée ? Votre vie antérieure ? Vous souvenez-vous de la vie réelle ? De votre famille, de vos amis ? Dans un autre espace-temps, ces derniers sont inquiets, en avez-vous conscience ? Ils vous pensent kidnappés, ou peut-être avez-vous fugué ? Êtes-vous morts ? Une seule certitude : vous avez disparu du monde tel que nous le connaissons. Bienvenue dans le Pokémonde...</div></div>
                  </div>
               
               
                  <div class="contenu_onglet" id="contenu_onglet_deuxieme">
                  <div class="titre_pa">Les derniers Pokémons capturés</div><a href="http://pokemonrevolution.forumactif.org/t39-le-soleil-s-amene?tid=32a21e29771e604269a16183ba6ca100" class="postlink"><img src="http://www.pokebip.com/pokemon/pokedex/images/bw_animes/276.gif" border="0" alt="" /></a><a href="http://pokemonrevolution.forumactif.org/t39-le-soleil-s-amene?tid=32a21e29771e604269a16183ba6ca100" class="postlink"><img src="http://www.pokebip.com/pokemon/pokedex/images/bw_animes/263.gif" border="0" alt="" /></a><a href="http://pokemonrevolution.forumactif.org/t49-sixieme-chapitre-frissons-dans-le-dos" class="postlink"><img src="http://www.pokebip.com/pokemon/pokedex/images/bw_animes/155.gif" border="0" alt="" /></a><a href="http://pokemonrevolution.forumactif.org/t46-cinquieme-chapitre-patience-patience-ca-mord?highlight=Chapitre" class="postlink"><img src="http://www.pokebip.com/pokemon/pokedex/images/bw_animes/116.gif" border="0" alt="" /></a><a href="http://pokemonrevolution.forumactif.org/t33-troisieme-chapitre-le-cherche-miel?highlight=Chapitre" class="postlink"><img src="http://www.pokebip.com/pokemon/pokedex/images/bw_animes/001.gif" border="0" alt="" /></a><a href="http://pokemonrevolution.forumactif.org/t34-une-grande-ville-au-loin-a-cloturer" class="postlink"><img src="http://www.pokebip.com/pokemon/pokedex/images/bw_animes/037.gif" border="0" alt="" /></a><a href="http://pokemonrevolution.forumactif.org/t28-quand-on-rencontre-son-premier-ami" class="postlink"><img src="http://www.pokebip.com/pokemon/pokedex/images/bw_animes/335.gif" border="0" alt="" /></a><a href="http://pokemonrevolution.forumactif.org/t32-le-debut-du-debut-du-debut-a-cloturer?highlight=D%C3%A9but" class="postlink"><img src="http://www.pokebip.com/pokemon/pokedex/images/bw_animes/425.gif" border="0" alt="" /></a><a href="http://pokemonrevolution.forumactif.org/t25-premier-chapitre-l-or-au-bout-des-griffes?highlight=Chapitre" class="postlink"><img src="http://www.pokebip.com/pokemon/pokedex/images/bw_animes/216.gif" border="0" alt="" /></a>
                  </div>
               
               
                  <div class="contenu_onglet" id="contenu_onglet_troisieme">
                  <div class="titre_pa">Les joueurs les plus actif du mois</div><table><tr style="height: 50px;"><td><img src="http://i73.servimg.com/u/f73/13/00/54/81/sans_t35.png" /></td><td>Mike Tay - 6 RP</td></tr><tr style="height: 50px;"><td><img src="http://i73.servimg.com/u/f73/13/00/54/81/fghjkl11.png" /></td><td>Aron Animus - 3 RP</td></tr><tr style="height: 50px;"><td><img src="http://i73.servimg.com/u/f73/13/00/54/81/sans_t34.png" /></td><td>Myko Taho - 2 RP</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');">Contexte</span>
                  <span class="onglet_inactif bloc_general_onglet" id="onglet_deuxieme" onclick="javascript:change_onglet('deuxieme');">Derniers Pokémons capturés</span>
                  <span class="onglet_inactif bloc_general_onglet" id="onglet_troisieme" onclick="javascript:change_onglet('troisieme');">Joueurs du mois</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 du staff -->
            <div style="width:39%;float:right;border:0px solid black;height:100px;padding:5px;margin-right:5px;margin-top:5px;">
                <div class="titre_pa">Staff'</div><div class="corps_pa"><center><table>
    <tr>
    <td><div class="imginfo"><img src="http://i73.servimg.com/u/f73/13/00/54/81/aronsp10.png"><span><table width="100" border="0" cellpadding="1" cellspacing="1"><tr><td style="text-align: center;"><div class="imginfo"><img src="http://www.pokebip.com/pokemon/pokedex/images/bw_front_m/335.png"><br />Aron A.<br />Admin</div></td></tr></table></span></div></td><td><div class="imginfo"><img src="http://i73.servimg.com/u/f73/13/00/54/81/mykosp10.png"><span>
    <table width="100" border="0" cellpadding="1" cellspacing="1"><tr><td style="text-align: center;"><div class="imginfo"><img src="http://www.pokebip.com/pokemon/pokedex/images/bw_front_m/425.png"><br />Myko T.<br />Fonda'</div></td></tr></table></span></div></td><td><div class="imginfo"><img src="http://i73.servimg.com/u/f73/13/00/54/81/mikesp10.png"><span><table width="100%" border="0" cellpadding="1" cellspacing="1">
    <tr><td style="text-align: center;"><div class="imginfo"><img src="http://www.pokebip.com/pokemon/pokedex/images/bw_front_m/216.png"><br />Mike T.<br />Admin</div></td></tr></table></span></div></td></tr></table></center></div></div><div style="width:39%;float:right;border:0px solid black;height:100px;padding:5px;margin-right:5px;margin-top:5px;">
                <div class="titre_pa">Top-Sites</div><div class="corps_pa">
    <center><a href="http://en.root-top.com/toplist/mew/in.php?ID=405"><img src="http://www.pokebip.com/pokemon/pokedex/images/bw_front_m/335.png" /></a><a href="http://www.root-top.com/topsite/gnik/in.php?ID=999"><img src="http://www.pokebip.com/pokemon/pokedex/images/bw_front_m/425.png" /></a><a href="http://www.root-top.com/topsite/virtu4lgames/in.php?ID=3590"><img src="http://www.pokebip.com/pokemon/pokedex/images/bw_front_m/216.png" /></a><br /></center></div>
            </div>
          </div></td></tr>
          </div>

    Ensuite, j'ai activé la barre d'annonce avec le texte défilent, je ne pense pas, mais ce peut-il que ce soit une raison du décalage de mon forum ? D'ailleurs, je vous laisse le lien ici pour voir de vous même.

    Un grand merci à(aux) personne(s) qui prendront en compte ma demande d'aide. :)
    Neva
    Neva
    FémininAge : 33Messages : 18565

    Dim 14 Avr 2013 - 10:22

    Salut,

    Pourrais-tu aller te présenter avant toute chose ? :)


    Mais...Qui es-tu ??Bonjour, la présentation est obligatoire sur Never-Utopia. En plus, elle te permettra de gagner 100 PeaNUt's (=points du forum) pour demander d'éventuels services ! Merci donc d'aller nous en dire un peu plus sur toi et tes motivations à venir ici Wink



     
    Tewson
    Tewson
    MasculinAge : 31Messages : 26

    Dim 14 Avr 2013 - 15:35

    Chose faite ! Merci de m'avoir prévenu ! :)
    Tewson
    Tewson
    MasculinAge : 31Messages : 26

    Mar 16 Avr 2013 - 9:18

    Up up up ? :3
    Anonymous
    Invité

    Mar 23 Avr 2013 - 11:15

      Yop,

      Problème toujours d'actualité ? Fais-nous signe si tu as toujours besoin d'aide Wink
      Première relance.

      Bonne chance.
    Tewson
    Tewson
    MasculinAge : 31Messages : 26

    Mar 23 Avr 2013 - 20:47

    Et mon "up up up" il compte pas ? J'attends personnellement, je vois pas l'intérêt de flooder ^^
    Anonymous
    Invité

    Mar 23 Avr 2013 - 20:57

      Sauf que si tu ne remontes pas au moins une fois par semaine on ignore si le sujet est toujours d'actualité, et le sujet tombe dans l'oubli. Qui plus est, je te trouve un peu sec sachant que je ne fais que jouer mon rôle et que les relances permettent de mettre en avant les sujets ...
    Tewson
    Tewson
    MasculinAge : 31Messages : 26

    Mer 24 Avr 2013 - 6:03

    Merci de ta précision, je pensais qu'il fallait uper une fois les premières 48heures puis qu'ensuite il restait plus qu'à attendre. Désolé si j'ai été sec, c'était pas mon but ^^'
    Tewson
    Tewson
    MasculinAge : 31Messages : 26

    Dim 28 Avr 2013 - 18:36

    Second up ^^'
    Neva
    Neva
    FémininAge : 33Messages : 18565

    Dim 28 Avr 2013 - 21:24

    Salut,

    Tout d'abord, le CSS est à mettre dans la feuille CSS et pas sur la PA. Tu compliques le code, là.

    Essaie de remplacer :
    Code:
          <div style="width: 800px; margin:auto;height:250px;">

    Par
    Code:
          <div style="width: 100%; margin:auto;height:250px;">



     
    Tewson
    Tewson
    MasculinAge : 31Messages : 26

    Jeu 2 Mai 2013 - 21:36

    J'ai modifié et ça n'a rien changé ^^'
    Neva
    Neva
    FémininAge : 33Messages : 18565

    Dim 5 Mai 2013 - 23:33

    Ca m'a l'air bon maintenant, non ? http://pokemonrevolution.forumactif.org/



     
    Tewson
    Tewson
    MasculinAge : 31Messages : 26

    Lun 6 Mai 2013 - 2:09

    Non, c'est pas centré, si vous regardez dans une catégorie vous verrez la différence ^^
    Neva
    Neva
    FémininAge : 33Messages : 18565

    Jeu 9 Mai 2013 - 0:43

    Ah ! Je viens de me rendre compte que si tu voulais enlever ces vides, c'était pour autre chose...

    Donc, commence par enlever le CSS de ta pa (mets le dans la partie Feuille de style du panneau d'admin) et supprime :

    Code:
      body
      {
          width:800px;
          margin:auto;
      }



     
    Tewson
    Tewson
    MasculinAge : 31Messages : 26

    Ven 10 Mai 2013 - 2:05

    Je vous ai écouté à moitié pour dire vrai. J'ai laissé mon css sur la pa et j'ai enlevé ce que vous avez dit et du coup c'est enfin centré, merci beaucoup !
    Neva
    Neva
    FémininAge : 33Messages : 18565

    Ven 10 Mai 2013 - 11:01

    Je ne dis pas ça pour le plaisir d'embêter, hein. C'est seulement que ce n'est absolument pas fait pour être mis là. La balise style va dans head, c'est une règle (la partie body est pour ce qui est visible, par définition le style ne l'est pas). Tu peux avoir des problèmes de compatibilité entre les navigateurs et leurs différentes versions.

    Je marque comme terminé vu que le problème de largeur est réglé :)



     
    Contenu sponsorisé


      La date/heure actuelle est Lun 25 Nov 2024 - 6:06