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 du moment : -40%
-40% sur le Pack Gaming Mario PDP Manette filaire + ...
Voir le deal
29.99 €

    Un Queel de Science Fiction [Commande Terminée] Merci Shay Altanir

    Elroth
    Elroth
    MasculinAge : 54Messages : 48

    Dim 25 Déc 2011 - 22:38

    Bonsoir à tous et à toutes j'aimerai pouvoir avoir un Queel dans un style SF voici ci-dessous le schéma en espérant que cela soit réalisable par un des codeurs de Never Utopia

    Merci d'avance à tous ceux ou toutes celles qui pourront m'aider à réaliser ce queel.

    Amicalement Elroth Fan de SF

    Commande
    Elément à coder : Queel (Le panneau d'affichage du qui est en ligne)
    Adresse du forum : http://bountyhunter.forumgratuit.org/
    Description du résultat voulu : Voici le schéma du queel


    Le plan du Queel avec la partie haute et la partie basse >>> la dimension totale du Queel doit faire 846 pixels de largeur et 380 pixels de hauteur
    Un Queel de Science Fiction [Commande Terminée] Merci Shay Altanir Plan-du-queel-2ffc7c5


    Partie Haute du Queel
    ========================
    Maintenant voici la partie haute du Queel le texte en rouge sur le screen sont les liens qui devront ouvrir les 4 différents panneaux d'informations du queel. le début du texte doit s'afficher avec une marge gauche de 143 pixels et une marge à partir du haut de 65 pixels
    Un Queel de Science Fiction [Commande Terminée] Merci Shay Altanir Queel-haut-2ffce0f

    Partie Basse du Queel
    ========================
    Maintenant voici la partie Basse du Queel d'une taille de 846 pixels de largeur et de 180 pixels de hauteur
    Un Queel de Science Fiction [Commande Terminée] Merci Shay Altanir Queel-bas-2ffc138

    Partie statistiques du Queel
    ========================
    Le texte des infos de la partie Statistiques est de la taille de 12 pixels et le début du texte doit s'afficher avec une marge gauche de 42 pixels et une marge à partir du haut de 47 pixels
    Un Queel de Science Fiction [Commande Terminée] Merci Shay Altanir Queel-stats-2ffc600

    Partie Groupes du Queel
    ========================
    Dans la partie groupes il doit y avoir 10 images de 145 pixels de large par 45 pixels de hauteur
    Un Queel de Science Fiction [Commande Terminée] Merci Shay Altanir Queel-groupe-2ffc64c

    Partie Effectifs du Queel
    ========================
    Le texte des infos de la partie Effectifs est de la taille de 12 pixels et le début du texte doit s'afficher avec une marge gauche de 42 pixels et une marge à partir du haut de 47 pixels
    Un Queel de Science Fiction [Commande Terminée] Merci Shay Altanir Queel-effectifs-2ffc618

    Partie Partenaires du Queel
    ========================
    Dans la partie groupes il doit y avoir 21 images de 110 pixels de large par 40 pixels de hauteur
    Un Queel de Science Fiction [Commande Terminée] Merci Shay Altanir Queel-partenaires-2ffc628


    Couleurs ou tons : Le fond du Queel est transparent

    Images :

    Image en format Png taille réel du haut du queel
    http://img68.xooimage.com/files/d/c/9/queel-haut2-2ffcdef.png

    Image en format Png taille réel du bas du queel
    http://img71.xooimage.com/files/d/e/0/queel-bas-2ffc138.png

    Image des Boutons partenaires en format Png taille réell
    Un Queel de Science Fiction [Commande Terminée] Merci Shay Altanir Partenaire-2ffcfc7

    Image des Boutons groupes en format Png taille réel
    Un Queel de Science Fiction [Commande Terminée] Merci Shay Altanir Groupes-2ffcfd5

    Merci à tous ceux ou toutes celles qui pourront m'aider............Elroth




    Dernière édition par Elroth le Mer 28 Déc 2011 - 14:43, édité 2 fois
    • Revenir en haut
    Ayael
    Ayael
    FémininAge : 28Messages : 598

    Mar 27 Déc 2011 - 22:07

    Est ce que par hasard, tu aurais déjà l'image du QEEL? (que tu veux mettre en haut à gauche) Je suis en train de tenter un truc et ça m'aiderai beaucoup!

    Quel est l'écriture que tu aimerais que j'utilise?


    Tu veux une barre de défilement sur la première case? Sinon dès qu'il y aura beaucoup de co, on les verra pas^^" (elle n'apparaitra que si il y a trop de texte pour que tout rentre^^)

    Edit : j'ai fais le système d'onglet et la première case, j'ai mis en calibri en attendant : http://ayaelforumtest.forumgratuit.org/
    • Revenir en haut
    Elroth
    Elroth
    MasculinAge : 54Messages : 48

    Mer 28 Déc 2011 - 9:17

    Merci Shay Altanir je voit que tu as bien avancé déjà.

    Pour l'image du queel je l'a mettrai moi même dans l'image png de la partie haute du queel donc te prend pas la tête avec ça

    Pour la police d'écriture c'est nikel laisse tel quel comme tu l'a mise.

    Pour la barre de défilement c'est une excellente idée je n'y avait pas pensé donc oui tu peut la rajouter.

    Je te remercie d'avance pour ce super boulot que tu as déjà fait.

    Une fois fini je te mettrai un copyright avec ton pseudo pour te remercier du travail que tu as fait.
    • Revenir en haut
    Ayael
    Ayael
    FémininAge : 28Messages : 598

    Mer 28 Déc 2011 - 12:10

    Tant mieux, par contre justement j'ai un léger soucis avec le positionnement, de ladite image, donc ça serait beaucoup plus simple si elle était déjà incrusté dans l'image du haut^^!

    Je finis ça et si tu tiens vraiment à la mettre toi même, je me re pencherai sur ce problème de positionnement^^

    (et c'est gentil pour le copyright)

    A tout hasard, est ce que tu voudrais qu'une infobulle apparaisse (ou tu pourrais mettre la description des groupes et un lien vers ledit groupe??) quand on passe sa souris sur les groupes?
    • Revenir en haut
    Elroth
    Elroth
    MasculinAge : 54Messages : 48

    Mer 28 Déc 2011 - 12:36

    Voici l'image du haut intégrer dans le png pour l'instant j'ai mis ça

    Un Queel de Science Fiction [Commande Terminée] Merci Shay Altanir Haut-queel-300e41d

    Pour les groupes pas besoin d'infobulles juste l'image cliquable qui renvoi sur les groupes et leurs descriptions

    Merci
    • Revenir en haut
    Ayael
    Ayael
    FémininAge : 28Messages : 598

    Mer 28 Déc 2011 - 12:45

    l'image à un problème, il manque les quatre petites flèches, et l'image est trop lourde, donc la transparence s'affiche en blanc.
    Essaie de réduire un peu le poids si tu peux et je vais l’héberger sur un autre hébergeur que servimg, normalement ça devrai suffire^^
    • Revenir en haut
    Elroth
    Elroth
    MasculinAge : 54Messages : 48

    Mer 28 Déc 2011 - 12:56

    Voici l'image en format jpeg de 87ko en poids
    Un Queel de Science Fiction [Commande Terminée] Merci Shay Altanir Haut2-300e678

    http://img74.xooimage.com/files/0/a/1/haut2-300e678.jpeg

    le fait de la mettre en jpeg règlera le problème de transparence du png je pense
    • Revenir en haut
    Elroth
    Elroth
    MasculinAge : 54Messages : 48

    Mer 28 Déc 2011 - 13:04

    Je vois sur ton forum test un petit problème sur le panneau qui affiche les partenaires tu peut effacer une colonne si tu veut donc cela donnera 3 lignes de 6 au lieu de 7

    Voici la partie basse en jpeg
    Un Queel de Science Fiction [Commande Terminée] Merci Shay Altanir Bas2-300e842

    En taille réelle ci-dessous
    http://img67.xooimage.com/files/8/8/d/bas2-300e842.jpeg
    • Revenir en haut
    Ayael
    Ayael
    FémininAge : 28Messages : 598

    Mer 28 Déc 2011 - 13:11

    J'allais te demander, car sincèrement, je ne sais pas comment tu as fais pour tout faire rentrer! XD

    Voilà voilà, quand dis tu?
    (Tu veux que quand on clique sur les groupes ça s'affiche dans un nouvel onglet ?)
    ♥
    • Revenir en haut
    Elroth
    Elroth
    MasculinAge : 54Messages : 48

    Mer 28 Déc 2011 - 13:13

    Non ça ira c'est parfait tu as fait du super boulot d'après ce" que je voit sur ton forum de test

    pour le nombre de bouton partenaires j'ai du me tromper je pense donc c'est bien 6 par ligne

    Voici ton copyright que j'inclus sur la partie basse
    Un Queel de Science Fiction [Commande Terminée] Merci Shay Altanir Bas2-300e997

    en taille réelle
    http://img71.xooimage.com/files/7/0/8/bas2-300e997.jpeg

    Je mettrai un lien sur mon panneau d'accueil qui renvoi sur ton forum également
    • Revenir en haut
    Ayael
    Ayael
    FémininAge : 28Messages : 598

    Mer 28 Déc 2011 - 13:29

    Trop tard XD, quand j'ai rajouté l'emplacement pour que tu puisses mettre des liens j'ai mis cette option mais je peux l'enlever facilement^^

    Voici donc le code répond à la suite pour le voir^^



    J'ai annoté un peu le CSS et le template pour que tu t'y retrouves un peu mieux, mais si tu as des questions n'hésites pas! ♥
    • Revenir en haut
    Elroth
    Elroth
    MasculinAge : 54Messages : 48

    Mer 28 Déc 2011 - 13:36

    Merci super boulot par contre l'image du haut du queel s'affiche pas?

    http://bountyhunter.forumgratuit.org/
    • Revenir en haut
    Ayael
    Ayael
    FémininAge : 28Messages : 598

    Mer 28 Déc 2011 - 13:59

    Hum ton forum à beaucoup d'image, et celle-ci est lourde...

    Dans ton CSS, remplace
    Code:
    .qeelh { /*gère l'affichage de l'image de la première partie*/
      background-image : url('http://img74.xooimage.com/files/0/a/1/haut2-300e678.jpeg');
      width:846px;
      height:180px;
      background-repeat:no-repeat;
    }

    Par

    Code:
    .qeelh {
      background-image : url('http://img4.hostingpics.net/thumbs/mini_892334haut2300e678.jpg');
      height:180px;
      background-repeat:no-repeat;
    }

    (je l'ai réhéberger sur l'autre hebergeur^^, il faudra que tu me donnes l'intégralité de ton CSS, car vu qu'elle s'affiche très bien chez moi, si ce n'est pas lié au poids, c'est lié à quelque chose que tu as et que je n'ai pas^^
    • Revenir en haut
    Elroth
    Elroth
    MasculinAge : 54Messages : 48

    Mer 28 Déc 2011 - 14:03

    ça ne marche toujours pas voici mon template complet index-boby

    Code:
    {JAVASCRIPT}
    <!-- BEGIN switch_user_logged_in -->
    <div id="pun-visit" class="clearfix">
    <a href="http://bountyhunter.forumgratuit.org/portal"><img src="http://img67.xooimage.com/files/0/5/e/loading2-2fbb229.gif"/></a>
    </div>
    <!-- END switch_user_logged_in -->
    <!-- BEGIN switch_user_logged_out -->
    <div id="pun-visit">
       <p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
    </div>
    <!-- END switch_user_logged_out -->

        <!-- BEGIN message_admin_index -->
        <table class="forumline2" width="100%" border="0" cellspacing="1" cellpadding="0">
          <!-- BEGIN message_admin_titre -->
          <tr>
              <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
          </tr>
          <!-- END message_admin_titre -->
          <!-- BEGIN message_admin_txt -->
          <tr>
              <td class="row1" rowspan="3" align="center" valign="middle">
              <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
              </td>
          </tr>
          <!-- END message_admin_txt -->
        </table>
        <!-- END message_admin_index -->

    <!-- BEGIN switch_user_login_form_header -->
    <div class="main">
    <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
       <div class="user_login_form main-box center">
          <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username" /></label> 
          <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password" /></label> 
          <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> 
          {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
          <!-- BEGIN switch_fb_connect -->
          <span class="fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
          <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
          <!-- END switch_fb_connect -->
       </div>
    </form>
    </div>
    <!-- END switch_user_login_form_header -->

    {CHATBOX_TOP}
    {BOARD_INDEX}

    <!-- BEGIN disable_viewonline -->

    <!-- Onglets -->
    <table><div class="qeelh"><tr><td valign="top">
                <div class="onglet"><span class="onglet_0 onglet" id="onglet_truc1" onclick="javascript:change_onglet('truc1');"><strong>Statistiques</strong></span><br>
                  <span class="onglet_0 onglet" id="onglet_truc2" onclick="javascript:change_onglet('truc2');"><strong>Groupes</strong></span><br>
                <span class="onglet_0 onglet" id="onglet_truc3" onclick="javascript:change_onglet('truc3');"><strong>Effectifs</strong></span><br>
                <span class="onglet_0 onglet" id="onglet_truc4" onclick="javascript:change_onglet('truc4');"><strong>Partenaires</strong></span></div>
    </td></tr>


    <!-- Onglet statistique -->

    <tr>    <td rowspan="2" width=40%><div class="contenu_onglets">


                <div class="contenu_onglet" id="contenu_onglet_truc1"><div style="text-align:justify; height:115px; overflow:auto; padding-right:10px;">{TOTAL_USERS_ONLINE}<br>
                  {RECORD_USERS}<br>
                  {LOGGED_IN_USER_LIST}
                  <table><div class="membreco24">{L_CONNECTED_MEMBERS}</div></table>
               
                  </div></div>
    </div>

    <!-- Onglet groupe -->

                <div class="contenu_onglet" id="contenu_onglet_truc2">
                <a href="mettre ici le lien"  target="_blank" ><img src="http://i46.servimg.com/u/f46/16/36/06/79/groupe10.jpg" /></a> <a href="mettre ici le lien"  target="_blank" ><img src="http://i46.servimg.com/u/f46/16/36/06/79/groupe10.jpg" /></a> <a href="mettre ici le lien"  target="_blank" ><img src="http://i46.servimg.com/u/f46/16/36/06/79/groupe10.jpg" /></a> <a href="mettre ici le lien"  target="_blank" ><img src="http://i46.servimg.com/u/f46/16/36/06/79/groupe10.jpg" /></a> <a href="mettre ici le lien"  target="_blank" ><img src="http://i46.servimg.com/u/f46/16/36/06/79/groupe10.jpg" /></a><br>
                  <a href="mettre ici le lien"  target="_blank" ><img src="http://i46.servimg.com/u/f46/16/36/06/79/groupe10.jpg" /></a> <a href="mettre ici le lien"  target="_blank" ><img src="http://i46.servimg.com/u/f46/16/36/06/79/groupe10.jpg" /></a> <a href="mettre ici le lien"  target="_blank" ><img src="http://i46.servimg.com/u/f46/16/36/06/79/groupe10.jpg" /></a> <a href="mettre ici le lien"  target="_blank" ><img src="http://i46.servimg.com/u/f46/16/36/06/79/groupe10.jpg" /></a> <a href="mettre ici le lien"  target="_blank" ><img src="http://i46.servimg.com/u/f46/16/36/06/79/groupe10.jpg" /></a><br>
               
                  </div></div>




    <!-- Onglet effectifs -->


                <div class="contenu_onglet" id="contenu_onglet_truc3">
                Marshall : <br>
    Chasseur de prime : <br>
    Pirate Galactique :<br>
    Pilote :<br>
    Force Militaire : <br>
                  Politiciens : <br>

    </div>
    </div>
               
    <!-- Onglet partenaire -->
                  <div class="contenu_onglet" id="contenu_onglet_truc4">
                    <a href="mettre ici le lien"  target="_blank" ><img src="http://i46.servimg.com/u/f46/16/36/06/79/parten10.jpg" class="imgpartenaire"/></a> <a href="mettre ici le lien"  target="_blank" ><img src="http://i46.servimg.com/u/f46/16/36/06/79/parten10.jpg" class="imgpartenaire"/></a> <a href="mettre ici le lien"  target="_blank" ><img src="http://i46.servimg.com/u/f46/16/36/06/79/parten10.jpg" class="imgpartenaire"/></a> <a href="mettre ici le lien"  target="_blank" ><img src="http://i46.servimg.com/u/f46/16/36/06/79/parten10.jpg" class="imgpartenaire"/></a> <a href="mettre ici le lien"  target="_blank" ><img src="http://i46.servimg.com/u/f46/16/36/06/79/parten10.jpg" class="imgpartenaire"/></a> <a href="mettre ici le lien"  target="_blank" ><img src="http://i46.servimg.com/u/f46/16/36/06/79/parten10.jpg" class="imgpartenaire"/></a><br>
                    <a href="mettre ici le lien"  target="_blank" ><img src="http://i46.servimg.com/u/f46/16/36/06/79/parten10.jpg" class="imgpartenaire"/></a> <a href="mettre ici le lien"  target="_blank" ><img src="http://i46.servimg.com/u/f46/16/36/06/79/parten10.jpg" class="imgpartenaire"/></a> <a href="mettre ici le lien"  target="_blank" ><img src="http://i46.servimg.com/u/f46/16/36/06/79/parten10.jpg" class="imgpartenaire"/></a> <a href="mettre ici le lien"  target="_blank" ><img src="http://i46.servimg.com/u/f46/16/36/06/79/parten10.jpg" class="imgpartenaire"/></a> <a href="mettre ici le lien"  target="_blank" ><img src="http://i46.servimg.com/u/f46/16/36/06/79/parten10.jpg" class="imgpartenaire"/></a> <a href="mettre ici le lien"  target="_blank" ><img src="http://i46.servimg.com/u/f46/16/36/06/79/parten10.jpg" class="imgpartenaire"/></a> <br>
                    <a href="mettre ici le lien"  target="_blank" ><img src="http://i46.servimg.com/u/f46/16/36/06/79/parten10.jpg" class="imgpartenaire"/></a> <a href="mettre ici le lien"  target="_blank" ><img src="http://i46.servimg.com/u/f46/16/36/06/79/parten10.jpg" class="imgpartenaire"/></a> <a href="mettre ici le lien"  target="_blank" ><img src="http://i46.servimg.com/u/f46/16/36/06/79/parten10.jpg" class="imgpartenaire"/></a> <a href="mettre ici le lien"  target="_blank" ><img src="http://i46.servimg.com/u/f46/16/36/06/79/parten10.jpg" class="imgpartenaire"/></a> <a href="mettre ici le lien"  target="_blank" ><img src="http://i46.servimg.com/u/f46/16/36/06/79/parten10.jpg" class="imgpartenaire"/></a> <a href="mettre ici le lien"  target="_blank" ><img src="http://i46.servimg.com/u/f46/16/36/06/79/parten10.jpg" class="imgpartenaire"/></a>
    </div>
    </div>

             
        <script type="text/javascript">
            //<!--
                    var anc_onglet = 'truc1';
                    change_onglet(anc_onglet);
            //-->
            </script></td></tr></table>


    <!-- END disable_viewonline -->

    <!-- BEGIN switch_user_login_form_footer -->
    <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
       <div class="user_login_form main-box center">
          <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username"/></label> 
          <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password"/></label> 
          <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> 
          {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
          <!-- BEGIN switch_fb_connect -->
          <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
          <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
          <!-- END switch_fb_connect -->
       </div>
    </form>
    <!-- END switch_user_login_form_footer -->

    {CHATBOX_BOTTOM}

    <!-- BEGIN switch_legend -->
    <ul id="pun-legend">
       <li>
          <img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /> {L_NEW_POSTS}
          <img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /> {L_NO_NEW_POSTS}
          <img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /> {L_FORUM_LOCKED}
       </li>
    </ul>
    <!-- END switch_legend -->

    {AUTO_DST}

    <!-- BEGIN switch_fb_index_login -->
    <div id="fb-root"></div>
    <script type="text/javascript">
    //<![CDATA[
    FB.init({
       appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
         status: true,
         cookie: true,
         xfbml: true
    });
    //]]>
    </script>
    <!-- END switch_fb_index_login -->
    • Revenir en haut
    Ayael
    Ayael
    FémininAge : 28Messages : 598

    Mer 28 Déc 2011 - 14:09

    J'ai entièrement copié ton template à la place du mien, et elle s'affiche bien, (http://ayaelforumtest.forumgratuit.org/) cela ne vient donc pas de là^^

    Donne moi ta feuille de style CSS s'il te plait^^
    • Revenir en haut
    Elroth
    Elroth
    MasculinAge : 54Messages : 48

    Mer 28 Déc 2011 - 14:13

    La voici la partie qui nous concernent est tout en bas

    Code:
    #textarea_content iframe#text_editor_iframe,#text_editor_textarea,*+ html #textarea_content iframe#text_editor_iframe,*+ html #text_editor_textarea,* html #textarea_content iframe#text_editor_iframe,* html #text_editor_textarea,*+ html #text_editor_textarea.quick_reply_textarea,* html #text_editor_textarea.quick_reply_textarea{
    background-color: #2e3337;border: 4px groove #000;
    }
    .wysiwyg{
    background-color: #000000;
    }
    #text_editor_textarea { background-color: #2e3337; }

    body{
    background-color: #000000;
    background-position: top center;
    background-repeat: no-repeat;
    }
    .pun{
    min-width: 1053px;
    width: 1053px;
    }
    #pun-intro{
    background-color: #;
    background-image: url('http://img71.xooimage.com/files/5/2/1/gh-2fa4971.png');
    background-repeat: no-repeat;
    height:361px ;
    width: 1053px;
    padding:0px;
    margin:0px;
    }

    #pun-navlinks{
    background-color: #;
    background-image: url('http://img72.xooimage.com/files/7/b/7/lignehaut-2fa3c3c.png');
    background-repeat: repeat-y;
    min-hight: 60px;
    width:1053px ;
    margin:0px;
    padding:  0px;
    }

    #fa_ticker_block{
    background-color: transparent;
    background-image: url('http://img67.xooimage.com/files/d/c/f/lignesf-2fa3b30.png');
    border: none;
    padding: 10px 95px 10px 95px;
    margin-top : -0px !important;
    margin-bottom : -0px !important;
    }

    #page-body{
    background-color: #;
    background-image: url('http://img68.xooimage.com/files/e/c/8/lignesf-2fa3c05.png');
    background-repeat: repeat-y;
    min-hight: 60px;
    width:1053px ;
    margin:0px;
    padding:  0px;
    }


    #pun-foot{
    background-color: #;
    background-image: url('http://img68.xooimage.com/files/6/3/1/bgh-2fa4b4c.png');
    background-position: bottom;
    background-repeat: no-repeat;
    height: 366px;
    width: 1053px;
    margin:0px;
    padding: 0px;
    }


    #main-content{
    background-color: #;
    width: 830px;
    margin-left: 110px;
    padding-bottom: 3px;
    }
    #pun-navlinks li a {
    padding: 0px;
    margin: 0px;
    text-decoration: none;
    }

    #pun-about{
    background-color: transparent;
    border: none;
    text-align: right;
    font-size: 10px;
    line-height: 20px;
    max-width: 760px;
    width: 760px;
    margin:    -20px 0px 0px  45px;
    padding-top: 25px;
    /padding-top: 45px;
    }

     .center{
    margin-top: 105px !important;

    /padding-top: 20px;
    }
    .pun table.table th {
      background-image: url('http://img70.xooimage.com/files/7/2/e/bcc-2f7be51.png');
    font-size: 11px;
      }

    button.button2, input.button2 {
    font-size: 0.7em;
    border: 3px double #000;
    width: auto !important;
    padding: 1px 0px;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    color: #000000;
    background-repeat: repeat-x;
    background-color: #FAFAFA;
    background-image: url('http://img69.xooimage.com/files/a/7/e/pft-2facd86.png');
    background-position: top;
    overflow: visible;
    vertical-align:middle;
    }

    #onlinelist{
    border-left: 0px solid #6a6a6a !important;
    border-right: 0px solid #6a6a6a !important;
    border-bottom: 0px solid #6a6a6a !important;
    }
    .pun .main-content{
    background-color: transparent;
    }
    #pun-visit, .main-box {
    background-color: transparent;
    color: #fff !important;
    background-image: url('http://img69.xooimage.com/files/d/3/4/infos-2fbb52b.png');
    background-repeat: no-repeat;
    text-align: center;
    margin: 0px;
    padding: 0px;
    height: 144px;
    padding-top: 60px;
    margin-bottom: -70px;
    padding-right: 10px;
    border: none;
    }
    #stats{
    background-color: transparent ! important;
    background-image: url('http://img70.xooimage.com/files/0/7/8/barrestats-2fa533c.png');
    background-repeat: no-repeat;
    padding: 5px;
    padding-top: 72px;
    border: none  !important;
    margin: 0px;
    }
    .pun table .tcl{
    width: 67% !important;
    }
    .pun table .tc2{
    width: 8% !important;
    }
    .pun table .tc3{
    width: 8% !important;
    }
    .pun table .tcr{
    width: 17% !important;
    }

    .pun table td.tc2, .pun table td.tcl, .pun table td.tc3, .pun table td.tcr{
    border: 0px solid #6a6a6a;
    }

    .main .main-head{
    height: 50px;
    }
    .main .main-head .page-title{
    padding-top: 4px;
    padding-left: 50px;
    }
    .pun .main .options{
    padding-top: 18px !important;
    }
    .pun .main-foot .h2{
    padding-top: 15px;
    }
    .main-foot{
    background-color: transparent;
    background-image: url("http://img68.xooimage.com/files/a/0/8/aba-2fa829d.png");
    background-position: top;
    background-repeat: no-repeat;
    padding-top: 28px;
    border: none;
    }
    #stats p{
    border: 0px solid #6a6a6a ;
    }
    .postfoot{
    background-color: #121212;
    }
    .pun .topic{
    border: 0px solid #6a6a6a ;
    }

    .pun .postfoot .user-contact{
    float: left;
    width:350px;
    }
    .pun .paged-head, .pun .paged-foot{
    background-color: transparent;
    }
    .main-content p.message{
    background-color: #252525 ;
    }
    .main-content.style1{
    border: 0px solid #6a6a6a ;
    }
    .faq.main-content{
    border: 0px solid #6a6a6a ;
    }
    .main .main-content.frm{
    border: 0px solid #6a6a6a ;
    }
    .pun .frm-form{
    background-color: transparent;
    }
    .main-content fieldset.frm-set{
    margin: 0px;
    border: 0px solid #6a6a6a ;
    }
    #profile-advanced-layout{
    float:none;
    margin: 0px;
    padding: 0px;
    width: 878px;
    }

    #profile-advanced-left{
    float : none;
    margin: 0px;
    padding: 0px;
    width: 750px;
    }

    #profile-advanced-right{
    float: none;
    margin: 0px;
    padding: 0px;
    margin-bottom: 0px;
    width: 750px;
    }
    #profile-advanced-right .module{
    margin-bottom: 0px;
    }
    button.button2:hover, input.button2:hover {
    background-image: url('http://img69.xooimage.com/files/a/7/e/pft-2facd86.png');
    background-position: top;
    color: #000000;
    border: 3px double #000;
    background-position: 0 100%;
    }

    .frm-buttons input{
    border: 3px double #000;
    background-image: url('http://img69.xooimage.com/files/a/7/e/pft-2facd86.png');
    background-position: top;
    color: #000000;
    }
    .frm-buttons input:hover{
    border: 3px double #000;
    background-image: url('http://img69.xooimage.com/files/a/7/e/pft-2facd86.png');
    background-position: center;
    color: #000000;
    }

    .pun input submit .pun select{
    border: 3px double #000;
    background-image: url('http://img69.xooimage.com/files/a/7/e/pft-2facd86.png');
    background-position: center;
    color: #000000;
    }
    .pun .post, .pun .posthead, .pun .postfoot{
    border-color: #000;
    }


    #profile-advanced-layout{
    float:none;
    margin: 0px;
    padding: 0px;
    width: 1053px;
    }

    #profile-advanced-left{
    float : none;
    margin: 5px;
    padding: 3px;
    width: 830px;
    }

    #profile-advanced-right{
    float: none;
    margin: 5px;
    padding: 3px;
    width: 830px;
    }
    .pun table .tcl{
    width: 67% !important;
    }
    .pun table .tc2{
    width: 8% !important;
    }
    .pun table .tc3{
    width: 8% !important;
    }
    .pun table .tcr{
    width: 17% !important;
    }
    .pun .postfoot .user-contact{
    float: left;
    width:430px;
    }
    #text_editor_textarea { background-color: #1f1f1f; color: #ffffff;}
    .tdtopics {
    padding-right: 0px !important;
    padding-left: 45px !important;
    }
    /*Les-boites-------------------*/
    .boitedatacenter{
    position: fixed; /* position de boite */
    top: 186px; /* position à partir du haut */
    right: 0px; /* position à partir de la droite */
    width: 198px; /* largeur de la boite */

    padding: 8px; /* marge intérieure */
    -moz-border-radius:0px; /* coins arrondis */
    -webkit-border-radius:0px; /* coins arrondis */
    border-radius:0px; /* coins arrondis */
    }
    .boitegalaxy{
    position: fixed; /* position de boite */
    top: 310px; /* position à partir du haut */
    right: 0px; /* position à partir de la droite */
    width: 198px; /* largeur de la boite */

    padding: 8px; /* marge intérieure */
    -moz-border-radius:0px; /* coins arrondis */
    -webkit-border-radius:0px; /* coins arrondis */
    border-radius:0px; /* coins arrondis */
    }
    .boiteplanetes{
    position: fixed; /* position de boite */
    top: 368px; /* position à partir du haut */
    right: 0px; /* position à partir de la droite */
    width: 198px; /* largeur de la boite */

    padding: 8px; /* marge intérieure */
    -moz-border-radius:0px; /* coins arrondis */
    -webkit-border-radius:0px; /* coins arrondis */
    border-radius:0px; /* coins arrondis */
    }
    .boiteavatars{
    position: fixed; /* position de boite */
    top: 426px; /* position à partir du haut */
    right: 0px; /* position à partir de la droite */
    width: 198px; /* largeur de la boite */

    padding: 8px; /* marge intérieure */
    -moz-border-radius:0px; /* coins arrondis */
    -webkit-border-radius:0px; /* coins arrondis */
    border-radius:0px; /* coins arrondis */
    }
    .boitegrades{
    position: fixed; /* position de boite */
    top: 484px; /* position à partir du haut */
    right: 0px; /* position à partir de la droite */
    width: 198px; /* largeur de la boite */

    padding: 8px; /* marge intérieure */
    -moz-border-radius:0px; /* coins arrondis */
    -webkit-border-radius:0px; /* coins arrondis */
    border-radius:0px; /* coins arrondis */
    }
    .boitevaisseaux{
    position: fixed; /* position de boite */
    top: 542px; /* position à partir du haut */
    right: 0px; /* position à partir de la droite */
    width: 198px; /* largeur de la boite */

    padding: 8px; /* marge intérieure */
    -moz-border-radius:0px; /* coins arrondis */
    -webkit-border-radius:0px; /* coins arrondis */
    border-radius:0px; /* coins arrondis */
    }
    .boiteweapons{
    position: fixed; /* position de boite */
    top: 600px; /* position à partir du haut */
    right: 0px; /* position à partir de la droite */
    width: 198px; /* largeur de la boite */

    padding: 8px; /* marge intérieure */
    -moz-border-radius:0px; /* coins arrondis */
    -webkit-border-radius:0px; /* coins arrondis */
    border-radius:0px; /* coins arrondis */
    }
    .boitemissions{
    position: fixed; /* position de boite */
    top: 658px; /* position à partir du haut */
    right: 0px; /* position à partir de la droite */
    width: 198px; /* largeur de la boite */

    padding: 8px; /* marge intérieure */
    -moz-border-radius:0px; /* coins arrondis */
    -webkit-border-radius:0px; /* coins arrondis */
    border-radius:0px; /* coins arrondis */
    }
    .boitecommerce{
    position: fixed; /* position de boite */
    top: 716px; /* position à partir du haut */
    right: 0px; /* position à partir de la droite */
    width: 198px; /* largeur de la boite */

    padding: 8px; /* marge intérieure */
    -moz-border-radius:0px; /* coins arrondis */
    -webkit-border-radius:0px; /* coins arrondis */
    border-radius:0px; /* coins arrondis */
    }
    /*Les encadrés de message-------------------*/
    .moder {
                color : black;
                font-weight : bold;
                    background-color : white;
                          border-radius:9px;
                    border: 1px solid black;
                    width: 80%;
                      margin: auto;
                    }
    /*Ecriture en gras-------------------*/
            .postbody {font-weight:bold !important;}
    /*Box des codes-------------------*/
    dl.codebox{
    background-color: #101010;
    border: 1px solid #888888;
    padding: 6px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    }
    .codebox dt{
    background-image: url('http://img71.xooimage.com/files/e/1/8/code-2fabb91.png');
    background-repeat: no-repeat;
    background-position: top right;
    padding: 5px 10px 3px 3px;
    color: #000;
    font-weight: bold;
    background-color: #707070;
    border: 1px solid #888888;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    }
    .codebox dd{
    background-color: #191919;
    background-image: url('http://i65.servimg.com/u/f65/11/95/30/70/fond12.jpg');
    border: 1px solid #888888;
    -moz-border-radius-topleft: 15px;
    -webkit-border-radius-topleft: 15px;
    -moz-border-radius-topright: 0px;
    -webkit-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 15px;
    -webkit-border-radius-bottomright: 15px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-radius-bottomleft: 0px;
    color : #fff;
    display: block;
    max-width: 770px;
    overflow: auto;
    padding: 5px;
    }

    /* test_quierra_11 */

    #le_tableau{
    color:#4169E1;
    font-size: 12px;
    font-family: Georgial;
    background-color: #1e1e1e;
    border: 3px solid #C0C0C0;
    margin: 3px;
    -moz-border-radius: 12px ;
    -webkit-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 2px 2px 2px #000;
    -webkit-box-shadow: 2px 2px 2px #000;
    box-shadow: 2px 2px 2px #000;
    -moz- text-shadow: 1px 1px 2px #000;
    -webkit- text-shadow: 1px 1px 2px #000;
    text-shadow: 1px 1px 2px #000;
    }

    .text_imag{
    color: #ffffff;
    text-align: center;
    vertical-align: center;
    font-family: Georgia;
    font-size: 30px;
    font-weight: bold;
    }

    .style_cellule{
    background-color: #0f100f;
    border: 3px solid #C0C0C0;
    margin: 3px;
    padding: 6px;
    -moz-border-radius: 12px ;
    -webkit-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 2px 2px 2px #000;
    -webkit-box-shadow: 2px 2px 2px #000;
    box-shadow: 2px 2px 2px #000;
    }

    #igauche{
    background-color: #0f100f;
    background-color: #0f100f;
    border: 3px solid #C0C0C0;
    padding: 6px;
    -moz-border-radius: 12px ;
    -webkit-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 2px 2px 2px #000;
    -webkit-box-shadow: 2px 2px 2px #000;
    box-shadow: 2px 2px 2px #000;
    }
    #idroite{
    background-color: #0f100f;
    background: url("http://img69.xooimage.com/files/8/a/0/droite-2fc1e00.png") no-repeat bottom right;
    background-color: #0f100f;
    border: 3px solid #C0C0C0;
    padding: 6px;
    -moz-border-radius: 12px ;
    -webkit-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 2px 2px 2px #000;
    -webkit-box-shadow: 2px 2px 2px #000;
    box-shadow: 2px 2px 2px #000;
    }

    .titre_4{
    font-size: 14px;
    color: #C0C0C0;

    }

    /* navigation */

    #nav-menu ul{
    list-style: none;
    padding: 0;
    margin: 0;
    }

    #nav-menu li{
    float: left;
    margin: 0 2px;
    }

    #nav-menu li a{
    background: url(http://img68.xooimage.com/files/d/6/d/link3-2fbd17e.jpeg);
    height: 25px;
    line-height: 25px;
    float: left;
    width: 138px;
    display: block;
    border: 0px solid #C0C0C0;
    color: #C0C0C0;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    -moz-border-radius: 12px 3px 12px 3px ;
    -webkit-border-radius: 12px 3px 12px 3px ;
    border-radius: 12px 3px 12px 3px ;
    -moz-box-shadow: 2px 2px 2px #000;
    -webkit-box-shadow: 2px 2px 2px #000;
    box-shadow: 2px 2px 2px #000;
    margin: 2px 0px 2px 0px;
    }

    #nav-menu li a:hover{
    color: #bfcd48;
    font-style: italic;
    }

    /* Hide from IE5-Mac \*/
    #nav-menu li a{
    float: none
    }
    /* End hide */


    /* fin navigation */


    /* Scroller Box */

    #scroller_container {
    width: 120px;
    height: 70px;
    overflow: hidden;
    }

    #dummy {;# }

    #scroller_container {
    overflow: auto;
    }

    /* fin Scroller Box */

    /* infobulle */

    div.info em {
    display:none;
    }

    div.info:hover {
    background: none;
    z-index: 999;
    cursor: hand;
    position: relative;
    text-decoration:none;
    border: 0;
    }

    div.info:hover em {
    font-style: normal;
    font-size: 10px;
    color:#000 !important;
    padding: 3px;
    display: inline;
    position: absolute;
    top: 62px;
    left: 35px;
    -moz-border-radius: 7px 7px 0px 7px ;
    -webkit-border-radius: 7px 7px 0px 7px ;
    border-radius:7px 7px 0px 7px ;
    -moz-box-shadow: 0px 0px 4px #000;
    -webkit-box-shadow: 0px 0px 4px #000;
    box-shadow: 0px 0px 4px #000;
    background-color: #424242;
    border: 2px solid #C0C0C0;
    width:auto;
    }

    .titre_info{
    text-align: center;
    font-size: 14px;
    font-style: italic;
    border-bottom: 1px dotted #C0C0C0;
    }

    /* fin infobulle */

    /* fin test quierra_11 */

    /* ----------- STAFF --------------- */

    /* SLIDE STAFF */

    .staff_slides{
    width: 260px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    overflow: hidden;
    }

    .staff_slides div{
    width: 260px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    }

    /* BLOC DE CONTENU */

    #content_staff{
    width: 260px;
    margin: 0 auto;
    padding: 5px;
    background: #438a97;
    border: 2px solid #ffffff;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    }


    /* Accueil */

    #accueil
    {
    width: 830px;
    height: 400px;
    overflow: hidden;
    background: url(http://img66.xooimage.com/files/d/e/2/orth800-2fdd45f.jpg) center no-repeat;
    }
    #page1
    {
    width: 40px;
    height: 400px;
    float: left;
    overflow: hidden;
    background: url(http://img68.xooimage.com/files/c/4/8/orth-2fd6047.png);
    background-repeat: no-repeat;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #page1:hover
    {
    width: 80%;
    height: 400px;
    overflow: hidden;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #page2
    {
    width: 40px;
    height: 400px;
    float: left;
    overflow: hidden;
    background: url(http://img67.xooimage.com/files/0/e/3/coalition-2fdb39f.png);
    background-repeat: no-repeat;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #page2:hover
    {
    width: 80%;
    height: 400px;
    overflow: hidden;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #page3
    {
    width: 40px;
    height: 400px;
    float: left;
    overflow: hidden;
    background: url(http://img67.xooimage.com/files/7/0/7/systems-2fd6088.png);
    background-repeat: no-repeat;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #page3:hover
    {
    width: 80%;
    height: 400px;
    overflow: hidden;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #page4
    {
    width: 40px;
    height: 400px;
    float: left;
    overflow: hidden;
    background: url(http://img71.xooimage.com/files/5/2/d/ship-2fd605f.png);
    background-repeat: no-repeat;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #page4:hover
    {
    width: 80%;
    height: 400px;
    overflow: hidden;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #page5
    {
    width: 40px;
    height:400px;
    float: left;
    overflow: hidden;
    background: url(http://img71.xooimage.com/files/2/6/7/station-2fd6106.png);
    background-repeat: no-repeat;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #page5:hover
    {
    width: 80%;
    height: 400px;
    overflow: hidden;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }

    .contenu_page
    {
    width: 100%;
    height: 400px;
    }
    .page_titre
    {
    display: inline-block;
    height: 40px;
    width: 400px;
    color: #000000;
    margin-left: -180px;
    text-align: center;
    font-size: 24px;
    font-family: arial black;
    letter-spacing: 2px;
    text-shadow: 1px 1px 0px #5f5f5f;
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    }
    .contenu
    {
    width: 0px;
    height: 0px;
    background-color: black;
    overflow: hidden;
    padding: 6px;
    opacity: 0;
    -moz-opacity: 0;
    -khtml-opacity: 0;
    filter: alpha(opacity=0);
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    #page1:hover .contenu, #page2:hover .contenu, #page3:hover .contenu, #page4:hover .contenu, #page5:hover .contenu
    {
    width: 580px;
    height: 380px;
    background: url();
    background-repeat: no-repeat;
    margin-left: -180px;
    overflow: none;
    opacity: 1;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    filter: alpha(opacity=100);
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }

    .credit
    {
    display: block;
    text-align: right;
    margin-right: 20px;
    }
    .credit a
    {
    font-size: 10px;
    text-decoration: none !important;
    }


    #pacolor1
    {
    width: 200px;
    }
    #partiea1
    {
    width: 200px;
    height: 150px;
    background-image: url('http://img74.xooimage.com/files/2/0/8/elroth22-2fff532.png');
    overflow: hidden;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #partieb1
    {
    width: 200px;
    height: 20px;
    overflow: hidden;
    background-color: #234CA5;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #partiec1
    {
    width: 200px;
    height: 20px;
    overflow: hidden;
    background-color: #495CFF;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #partied1
    {
    width: 200px;
    height: 20px;
    overflow: hidden;
    background-color: #6E81BD;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #partiee1
    {
    width: 200px;
    height: 20px;
    overflow: hidden;
    background-color: #91BACF;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #partief1
    {
    width: 200px;
    height: 20px;
    overflow: hidden;
    background-color: #B5DED0;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #partieb1:hover, #partiec1:hover, #partied1:hover, #partiee1:hover, #partief1:hover
    {
    height: 120px;
    overflow: hidden;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    .titre1
    {
    display: block;
    text-align: center;
    width: 200px;
    height: 18px;
    font-size: 14px;
    letter-spacing: 2px;
    font-variant: small-caps;
    font-family: courier;
    font-weight: bold;
    padding-top: 5px;
    text-shadow: 0px 0px 2px #000000;
    }
    .content1
    {
    width: 90%;
    margin: auto;
    padding: 6px;
    color: #000000;
    font-size: 11px;
    text-align: justify;
    }

    #pacolor2
    {
    width: 200px;
    }
    #partiea2
    {
    width: 200px;
    height: 150px;
    background-image: url('http://img74.xooimage.com/files/9/d/5/pilote-2fff912.png');
    overflow: hidden;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #partieb2
    {
    width: 200px;
    height: 20px;
    overflow: hidden;
    background-color: #234CA5;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #partiec2
    {
    width: 200px;
    height: 20px;
    overflow: hidden;
    background-color: #495CFF;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #partied2
    {
    width: 200px;
    height: 20px;
    overflow: hidden;
    background-color: #6E81BD;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #partiee2
    {
    width: 200px;
    height: 20px;
    overflow: hidden;
    background-color: #91BACF;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #partief2
    {
    width: 200px;
    height: 20px;
    overflow: hidden;
    background-color: #B5DED0;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #partieb2:hover, #partiec2:hover, #partied2:hover, #partiee2:hover, #partief2:hover
    {
    height: 120px;
    overflow: hidden;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    .titre2
    {
    display: block;
    text-align: center;
    width: 200px;
    height: 18px;
    font-size: 14px;
    letter-spacing: 2px;
    font-variant: small-caps;
    font-family: courier;
    font-weight: bold;
    padding-top: 5px;
    text-shadow: 0px 0px 2px #000000;
    }
    .content2
    {
    width: 90%;
    margin: auto;
    padding: 6px;
    color: #000000;
    font-size: 11px;
    text-align: justify;
    }

    #pacolor3
    {
    width: 200px;
    }
    #partiea3
    {
    width: 200px;
    height: 150px;
    background-image: url('http://img72.xooimage.com/files/8/2/a/hunter-2fff70a.png');
    overflow: hidden;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #partieb3
    {
    width: 200px;
    height: 20px;
    overflow: hidden;
    background-color: #234CA5;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #partiec3
    {
    width: 200px;
    height: 20px;
    overflow: hidden;
    background-color: #495CFF;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #partied3
    {
    width: 200px;
    height: 20px;
    overflow: hidden;
    background-color: #6E81BD;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #partiee3
    {
    width: 200px;
    height: 20px;
    overflow: hidden;
    background-color: #91BACF;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #partief3
    {
    width: 200px;
    height: 20px;
    overflow: hidden;
    background-color: #B5DED0;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #partieb3:hover, #partiec3:hover, #partied3:hover, #partiee3:hover, #partief3:hover
    {
    height: 120px;
    overflow: hidden;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    .titre3
    {
    display: block;
    text-align: center;
    width: 200px;
    height: 18px;
    font-size: 14px;
    letter-spacing: 2px;
    font-variant: small-caps;
    font-family: courier;
    font-weight: bold;
    padding-top: 5px;
    text-shadow: 0px 0px 2px #000000;
    }
    .content3
    {
    width: 90%;
    margin: auto;
    padding: 6px;
    color: #000000;
    font-size: 11px;
    text-align: justify;
    }

    #pacolor4
    {
    width: 200px;
    }
    #partiea4
    {
    width: 200px;
    height: 150px;
    background-image: url('http://img67.xooimage.com/files/a/7/2/pirate-2fff71a.png');
    overflow: hidden;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #partieb4
    {
    width: 200px;
    height: 20px;
    overflow: hidden;
    background-color: #234CA5;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #partiec4
    {
    width: 200px;
    height: 20px;
    overflow: hidden;
    background-color: #495CFF;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #partied4
    {
    width: 200px;
    height: 20px;
    overflow: hidden;
    background-color: #6E81BD;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #partiee4
    {
    width: 200px;
    height: 20px;
    overflow: hidden;
    background-color: #91BACF;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #partief4
    {
    width: 200px;
    height: 20px;
    overflow: hidden;
    background-color: #B5DED0;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #partieb4:hover, #partiec4:hover, #partied4:hover, #partiee4:hover, #partief4:hover
    {
    height: 120px;
    overflow: hidden;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    .titre4
    {
    display: block;
    text-align: center;
    width: 200px;
    height: 18px;
    font-size: 14px;
    letter-spacing: 2px;
    font-variant: small-caps;
    font-family: courier;
    font-weight: bold;
    padding-top: 5px;
    text-shadow: 0px 0px 2px #000000;
    }
    .content4
    {
    width: 90%;
    margin: auto;
    padding: 6px;
    color: #000000;
    font-size: 11px;
    text-align: justify;
    }


    a { text-decoration: none; }
    A:hover{text-transform:uppercase;}



    .class="right">{TOTAL_POSTS}
    {
      width: 3620px;
      height: 39px;
      background-image:url('http://img75.xooimage.com/files/c/1/b/aza-30075ab.jpg');
    }



    .qeelh {
      background-image : url('http://img74.xooimage.com/files/0/a/1/haut2-300e678.jpeg');
      height:190px;
      background-repeat:no-repeat;
    }

    .imggroupe { /*gère l'affichage des images de groupe*/
      padding-top:5px;
     
    }
    .onglet { /*gère l'affichage des onglets*/
    padding-left:213px;
    margin-top:-137px;
      line-height: 22px;
      color:#4040FF;
     
    }

    .membreco24{ /*gère l'affichage des membres connectés c'est 24 dernières heures*/
      font-size:12px;
      font-family:calibri;
    }

    .imgpartenaire { /*gère l'affichage des images partenaires*/
      margin-right:0px;
      margin-bottom:-2px;
    }
     
    .contenu_onglet{ /*gère l'affichage des contenus en général*/
               
    background-image : url('http://img71.xooimage.com/files/7/0/8/bas2-300e997.jpeg'); /*image de fond*/
      background-repeat:no-repeat;
    width: 777px;
    height: 170px;
    display:none; /*IMPORTANT*/
    overflow:hidden; /*IMPORTANT*/
    margin-top:5px;
      font-size:12px; /*taille de la police*/
      font-family:calibri; /*Police d'écriture*/
     
            }

    #contenu_onglet_truc1 { /*gère l'affichage du contenu statistiques*/
      padding-right:20px;
      padding-left:50px;
      padding-top:39px;
    }
    #contenu_onglet_truc2 { /*gère l'affichage du contenu groupe*/
      padding-right:20px;
      padding-left:50px;
      padding-top:39px;
    }

    #contenu_onglet_truc3 { /*gère l'affichage du contenu Effectif*/
      padding-right:20px;
      padding-left:50px;
      padding-top:39px;
    }

    #contenu_onglet_truc4 { /*gère l'affichage du contenu Partenaire*/
      padding-right:20px;
      padding-left:85px;
      padding-top:28px;
    }

    • Revenir en haut
    Ayael
    Ayael
    FémininAge : 28Messages : 598

    Mer 28 Déc 2011 - 14:20

    j'ai fais pareil que tout à l'heure avec le template et le CSS, et il s'affiche aussi!
    Par contre je suis aller sur ton forum et il s'affiche, tout décalé mais il s'affiche^^"
    Essaie ça: dans affichage → couleur → feuille de style CSS

    Code:
    .qeelh { /*gère l'affichage de l'image de la première partie*/
      background-image : url('http://img74.xooimage.com/files/0/a/1/haut2-300e678.jpeg');
      width:846px;
      height:180px;
      background-repeat:no-repeat;
    }

    .imggroupe { /*gère l'affichage des images de groupe*/
      padding-top:5px;
     
    }
    .onglet { /*gère l'affichage des onglets*/
    padding-left:213px;
      line-height: 22px;
      color:#4040FF;
     
    }

    .membreco24{ /*gère l'affichage des membres connectés c'est 24 dernières heures*/
      font-size:12px;
      font-family:calibri;
    }

    .imgpartenaire { /*gère l'affichage des images partenaires*/
      margin-right:0px;
      margin-bottom:-2px;
    }
     
    .contenu_onglet{ /*gère l'affichage des contenus en général*/
               
    background-image : url('http://img71.xooimage.com/files/d/e/0/queel-bas-2ffc138.png'); /*image de fond*/
      background-repeat:no-repeat;
    width: 777px;
    height: 170px;
    display:none; /*IMPORTANT*/
    overflow:hidden; /*IMPORTANT*/
    margin-top:5px;
      font-size:12px; /*taille de la police*/
      font-family:calibri; /*Police d'écriture*/
     
            }

    #contenu_onglet_truc1 { /*gère l'affichage du contenu statistiques*/
      padding-right:20px;
      padding-left:50px;
      padding-top:39px;
    }
    #contenu_onglet_truc2 { /*gère l'affichage du contenu groupe*/
      padding-right:20px;
      padding-left:50px;
      padding-top:39px;
    }

    #contenu_onglet_truc3 { /*gère l'affichage du contenu Effectif*/
      padding-right:20px;
      padding-left:50px;
      padding-top:39px;
    }

    #contenu_onglet_truc4 { /*gère l'affichage du contenu Partenaire*/
      padding-right:20px;
      padding-left:85px;
      padding-top:28px;
    }

    (il y aura sans doute un léger ajustement à faire^^)
    • Revenir en haut
    Elroth
    Elroth
    MasculinAge : 54Messages : 48

    Mer 28 Déc 2011 - 14:22

    Le décalage c'est normal j'ai essayé de regrouper le haut et le bas en une image mais comme tu dit ça décale tout donc je suis revenu aux deux images j'essaye ton code CSS

    Non toujours rien je pense que ça vient du fait que je suis en version punbb

    Sinon la dernière solution de regrouper les deux images le haut et le bas

    Un Queel de Science Fiction [Commande Terminée] Merci Shay Altanir Hautetbas-300efdf

    En taille Réelle 846 par 400
    http://img70.xooimage.com/files/a/8/2/hautetbas-300efdf.jpeg


    Dernière édition par Elroth le Mer 28 Déc 2011 - 14:26, édité 2 fois
    • Revenir en haut
    Ayael
    Ayael
    FémininAge : 28Messages : 598

    Mer 28 Déc 2011 - 14:24

    Ok, ça peut marcher aussi si tu as fais ça, mais essai le système d'onglet, je suis pas sûre que ça ne fasses pas quelque bug, c'est quand même bizarre que cette image s'affiche pas >.>
    • Revenir en haut
    Elroth
    Elroth
    MasculinAge : 54Messages : 48

    Mer 28 Déc 2011 - 14:27

    j'ai même vidé mon cache internet et déco/reco rien à faire cette foutue image du haut s'affiche pas

    regarde j'ai testé sur un forum test en php2 et là c'est l'inverse
    http://yautja.fantastique.tv/
    • Revenir en haut
    Elroth
    Elroth
    MasculinAge : 54Messages : 48

    Mer 28 Déc 2011 - 14:37

    Super cheers ça marche par contre faut que j'ajuste le problème venait de ça un code que j'avais mis hier pour faire un test et j'ai oublié de l'enlever

    Code:
    .class="right">{TOTAL_POSTS}
    {
      width: 3620px;
      height: 39px;
      background-image:url('http://img75.xooimage.com/files/c/1/b/aza-30075ab.jpg');
    }

    Merci beaucoup Shay tu as fait un super boulot pour ce superbe queel bravo à toi tu gère
    • Revenir en haut
    Ayael
    Ayael
    FémininAge : 28Messages : 598

    Mer 28 Déc 2011 - 16:14

    Donc c'est fini ^o^?
    De toute manière, comme je te l'ai dit : au moindre soucis MP moi^^ ♥
    • Revenir en haut
    Elroth
    Elroth
    MasculinAge : 54Messages : 48

    Mer 28 Déc 2011 - 16:52

    Oui c'est fini merci beaucoup pour le boulot que tu as fait je mettrai la bannière de ton forum dans les partenaires dès que le mien sera ouvert comme ça avec le copyright ce sera nikel.

    Comme le copyright de Never Utopia figure en bonne place sur mon P.A Provisoire tous les crédits sont distribués Merci encore à Never Utopia et son Staff et à toi Shay.......
    • Revenir en haut
    Taktiik
    Taktiik
    MasculinAge : 29Messages : 2292

    Mer 28 Déc 2011 - 18:17

    Aloha ~~

    Merci d'avoir utilisé les services de Never Utopia.
    Merci de ne pas retirer les crédits, s'ils ont été appliqué ;
    Si ce n'est pas le cas, merci d'en faire un pour le codeur qui s'est occupé de ta commande.
    Merci d'avoir fait confiance aux services du forum et aux compétences de Shay Altanir.

    Commande Terminée&Archivée~~
    Taktiik.

    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Jeu 9 Mai 2024 - 15:15