Centrer mon QEEL

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Centrer mon QEEL

Message par NCB le Mer 3 Sep 2014 - 17:21

Bonjour !

J'ai un petit problème ^^ Je n'arrive pas à centrer mon QEEL que j'ai récupérer en libre service par un code sur un site connu ^^ Malgré plusieurs essais , impossible de mettre les balises au bon endroit apparemment dans le template index body Sad

Si quelqu'un peut m'aider svp ! Wink

Ci dessous le code du template à partir du début du QEEl:

Code:
<!-- BEGIN disable_viewonline -->
<!-- [ CREDITS ]
------------------------------------
Template QEEL par 'Christa Lostmindy
Distribution autorisée sur :
  L'Enae Volare    : http://enaevolare.lostmindy.fr
  CSSActif      : http://www.css-actif.com/
  l'Annuaire FdF  : http://www.forumsdeforumactif.com/
----
Utilisation personnelle et non commerciale autorisée
Modification autorisée
Redistribution strictement interdite
----
Il est strictement interdit de retirer
les crédits présents dans ce code.
<script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
--------------------------------------
-->


<center><div valign="middle" id="tableauQeel">
  <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
      <tr>
        <td width="200"  align="center" valign="middle" rowspan="2">
            <div class="imgOnline">
              <a href="{U_VIEWONLINE}">
                  <img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" />
              </a>
            </div>
        </td>
       
   
       
        <td align="center" valign="middle" id="tabBlocGroupes">
            <div id="blocGroupes">
              <h2>{LEGEND}</h2>
              <div class="contenuQeel hauteurFixe noSpaceTitre">
                  <div class="qeel-groupes">{GROUP_LEGEND}</div>
              </div>
            </div>
        </td>
      </tr>
      <tr>
        <td colspan="2" align="center" valign="middle">
            <div class="espace"> </div>
            <h2>Activité du forum</h2>
            <div class="contenuQeel noSpaceTitre">
              <span id="totalUsersOnline">{TOTAL_USERS_ONLINE}</span>
              <br />
              <span id="loggedInUsers">{LOGGED_IN_USER_LIST}</span>
             
            <!-- BEGIN switch_chatbox_activate -->
             
            </div>
            <div class="espace"></div>
            <div class="contenuQeel">
              <span class="gensmall">
                  <span id="totalChattersOnline">{TOTAL_CHATTERS_ONLINE}</span>
                  <br />
                  {CHATTERS_LIST}
              </span>
            <!-- END switch_chatbox_activate -->
            </div>
        </td>
      </tr>
  </table></center>
 
 

<!-- END disable_viewonline -->
        {CHATBOX_BOTTOM}
        <br clear="all" />
        <!-- BEGIN switch_legend -->
        <table border="0" cellspacing="3" cellpadding="0" align="center">
          <tr>
              <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
              <td><span class="gensmall">{L_NEW_POSTS}</span></td>
              <td></td>
              <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
              <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
              <td>&nbsp;&nbsp;</td>
              <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
              <td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
          </tr>
        </table>
        <!-- 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,
          oauth: true
        });
        //]]>
        </script>
 
<!-- END switch_fb_index_login -->


Dernière édition par NCB le Jeu 4 Sep 2014 - 16:41, édité 1 fois

NCB
**

Masculin
Messages : 53
Inscrit(e) le : 28/12/2013

http://republique.2morpg.com/
NCB a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer mon QEEL

Message par Kinotto le Mer 3 Sep 2014 - 18:15

Bonsoir,

Vous pouvez d'ores et déjà supprimer

Code:
valign="middle"

car il s'agit d'un attribut de la balise td.

Ensuite, essayez plutôt ainsi :

Code:
<div align="center"><div id="tableauQeel">
  <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

Ou essayez de placer la première balise div après la seconde.

Si cela ne marche pas, pourrions-nous avoir :
- une capture du rendu
- le CSS correspondant à l'identifiant "tableauQeel"

Merci. Smile


Cordialement.

Kinotto
+ Hyperactif +

Masculin
Messages : 2177
Inscrit(e) le : 12/09/2012

http://test-nightmare.superforum.fr/
Kinotto a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer mon QEEL

Message par NCB le Jeu 4 Sep 2014 - 16:22

Salut !

Merci de ta réponse mais ça n'a pas fonctionné. Le QEEL apparaît à droite en bas , au dessus de la chat box qui elle est centrée.


Voici le CSS du QEEL:

Code:
/*------------------------------------
Template QEEL par 'Christa Lostmindy
Distribution autorisée sur :
  L'Enae Volare    : http://enaevolare.lostmindy.fr
  CSSActif      : http://www.css-actif.com/
  l'Annuaire FdF  : http://www.forumsdeforumactif.com/
----
Utilisation personnelle et non commerciale autorisée
Modification autorisée
Redistribution strictement interdite
----
Il est strictement interdit de retirer
les crédits présents dans ce code.
--------------------------------------*/
/****************************************
/* MISE EN FORME GENERALE
/****************************************/
/* mise en page générale */
#tableauQeel {
  width: 100%;
  padding: 4px;
  margin: 0 auto;
  color: #000000;
  font-size: 12px;
}
/* Liens statistiques */
.liensStats {
  margin: 5px 0;
}
.liensStats a:link {
  color: #3333cc;
}
.liensStats a:hover,
.liensStats a:active,
.liensStats a:focus {
  color: ##E6E6E6;
}
.liensStats a:visited {
  color: #3333cc;
}
/* largeur bloc contenant l'image du QEEL*/
.imgOnline {
  min-width: 200px;
}
/* espacement entre certains blocs */
.espace {
  padding: 3px;
}
/* taille des cellules de tableau */
#tabBlocStats,
#tabBlocGroupes {
  width: 50%;
}
#blocStats {
  width: auto;
}
#blocGroupes {
  width: auto;
}
/*********************************
/*  TITRES DU QEEL
/*********************************/
#tableauQeel h2 {
  display: inline-block;
  font-family: "corbel", Corbel, monospace, serif;
  font-size: 16px;
  font-weight: bold;
  color: #000000;
  text-shadow: 0.1em 0.1em 0.2em #000000;
  margin-top: 4px;
  margin-bottom: 0px;
  padding: 4px 10px;
  background-color: ;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-border-top-left-radius: 15px;
  -moz-border-radius-topleft: 15px;
  border-top-left-radius: 15px;
  -webkit-border-top-right-radius: 15px;
  -moz-border-radius-topright: 15px;
  border-top-right-radius: 15px;}



/*************************************
/* MISE EN FORME DES BOITES DE CONTENU
/************************************* */
.contenuQeel {
  background-color: ;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  padding: 4px;
  margin: 2px;
  font-size: 12px;
}
.noSpaceTitre {
  margin-top: 0;
}
.liste24h {
  text-align: center;
}
.deBug td {
  background-color: #d1d7dc;
}
/* Ce css permet d'avoir les deux premières boites (statistiques et légendes)
à la même taille en hauteur */
.hauteurFixe {
  height: 45px;
  overflow: auto;
}
/*************************************
/* MISE EN FORME LISTE DES GROUPES
/************************************* */
.qeel-groupes {
  font-size: 0px;
  line-height: 0;
  text-align: center;
}
.qeel-groupes a {
  font-size: 17px;
  line-height: normal;
  display: inline-block;
  padding: 2px 5px;
  margin: 1px 4px;
  font-variant: small-caps;
  font-weight: bold;
  background: transparent;
}
/********************************
/* Affichage des crédits
/********************************/
.lostCredits {
  color: #999999;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  padding: 2px 4px;
  background: transparent;
  font-weight: bold;
}
.bulleCredits {
  position: relative;
  cursor: pointer;
  color: #ffffff;
  background: ;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  padding: 1px 4px;
}
.bulleCredits  > span {
  position: absolute;
  display: block;
  bottom: 150%;
  left: -20%;
  width: 150px;
  background: #000000;
  color: #ffffff;
  padding: 2px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  opacity: 0;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  transform: scale(0) rotate(12deg);
}
.bulleCredits  > span:after {
  display: block;
  content: " ";
  width: 0;
  border-width: 8px 5px 0 5px;
  border-color: #000000 transparent transparent transparent;
  border-style: solid;
  position: absolute;
  bottom: -8px;
  left: 5px;
}
.bulleCredits:hover  > span,
.bulleCredits:focus  > span {
  z-index: 500;
  opacity: 1;
  transform: scale(1) rotate(0);
  cursor: default;
}
/*------------------------------------
Template QEEL par 'Christa Lostmindy
http://enaevolare.lostmindy.net
[FIN]
--------------------------------------*/


.bouton-profil {
    cursor: pointer; /* curseur au survol */
    margin: 2px 0; /* petite marge en haut et en bas */
    padding: 2px; /* espacement entre le texte et la bordure */
    text-align: center; /* centrage du texte dans le bloc */
  /* -- mise en forme -- */
  background: #CCCCCC; /* couleur de fond */
    border: 3px double #000000; /* bordure */
    color: #B74C08; /* couleur texte */
    font-size: 11px; /* taille du texte */
    font-variant: small-caps; /* effet petites majuscules */
    font-weight: bold; /* effet gras */
    letter-spacing: 2px; /* espace entre les lettres */
}

.profil-cache {
  border: 3px double #000000;
    margin: 2px 0;
    padding: 2px;
}

NCB
**

Masculin
Messages : 53
Inscrit(e) le : 28/12/2013

http://republique.2morpg.com/
NCB a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer mon QEEL

Message par MlleAlys le Jeu 4 Sep 2014 - 16:35

Bonjour,
Essayez avec ce template :
Code:
<!-- BEGIN disable_viewonline -->
<!-- [ CREDITS ]
------------------------------------
Template QEEL par 'Christa Lostmindy
Distribution autorisée sur :
  L'Enae Volare    : http://enaevolare.lostmindy.fr
  CSSActif      : http://www.css-actif.com/
  l'Annuaire FdF  : http://www.forumsdeforumactif.com/
----
Utilisation personnelle et non commerciale autorisée
Modification autorisée
Redistribution strictement interdite
----
Il est strictement interdit de retirer
les crédits présents dans ce code.
<script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
--------------------------------------
-->
 
 
<center><div valign="middle" id="tableauQeel">
  <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
      <tr>
        <td width="0" align="center" valign="middle" rowspan="2">
            <div class="imgOnline">
              <a href="{U_VIEWONLINE}">
                  <img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" />
              </a>
            </div>
        </td>
     
 
     
        <td align="center" valign="middle" id="tabBlocGroupes">
            <div id="blocGroupes">
              <h2>{LEGEND}</h2>
              <div class="contenuQeel hauteurFixe noSpaceTitre">
                  <div class="qeel-groupes">{GROUP_LEGEND}</div>
              </div>
            </div>
        </td>
      </tr>
      <tr>
        <td colspan="2" align="center" valign="middle">
            <div class="espace"> </div>
            <h2>Activité du forum</h2>
            <div class="contenuQeel noSpaceTitre">
              <span id="totalUsersOnline">{TOTAL_USERS_ONLINE}</span>
              <br />
              <span id="loggedInUsers">{LOGGED_IN_USER_LIST}</span>
           
            <!-- BEGIN switch_chatbox_activate -->
           
            </div>
            <div class="espace"></div>
            <div class="contenuQeel">
              <span class="gensmall">
                  <span id="totalChattersOnline">{TOTAL_CHATTERS_ONLINE}</span>
                  <br />
                  {CHATTERS_LIST}
              </span>
            <!-- END switch_chatbox_activate -->
            </div>
        </td>
      </tr>
  </table></center>
 
 
 
<!-- END disable_viewonline -->
        {CHATBOX_BOTTOM}
        <br clear="all" />
        <!-- BEGIN switch_legend -->
        <table border="0" cellspacing="3" cellpadding="0" align="center">
          <tr>
              <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
              <td><span class="gensmall">{L_NEW_POSTS}</span></td>
              <td></td>
              <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
              <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
              <td>&nbsp;&nbsp;</td>
              <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
              <td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
          </tr>
        </table>
        <!-- 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,
          oauth: true
        });
        //]]>
        </script>
 
<!-- END switch_fb_index_login -->

et ce code css :
Code:
/*------------------------------------
Template QEEL par 'Christa Lostmindy
Distribution autorisée sur :
  L'Enae Volare    : http://enaevolare.lostmindy.fr
  CSSActif      : http://www.css-actif.com/
  l'Annuaire FdF  : http://www.forumsdeforumactif.com/
----
Utilisation personnelle et non commerciale autorisée
Modification autorisée
Redistribution strictement interdite
----
Il est strictement interdit de retirer
les crédits présents dans ce code.
--------------------------------------*/
/****************************************
/* MISE EN FORME GENERALE
/****************************************/
/* mise en page générale */
#tableauQeel {
  width: 100%;
  padding: 4px 0;
  margin: 0 auto;
  color: #000000;
  font-size: 12px;
}
/* Liens statistiques */
.liensStats {
  margin: 5px 0;
}
.liensStats a:link {
  color: #3333cc;
}
.liensStats a:hover,
.liensStats a:active,
.liensStats a:focus {
  color: ##E6E6E6;
}
.liensStats a:visited {
  color: #3333cc;
}
/* espacement entre certains blocs */
.espace {
  padding: 3px;
}

/*********************************
/*  TITRES DU QEEL
/*********************************/
#tableauQeel h2 {
  display: inline-block;
  font-family: "corbel", Corbel, monospace, serif;
  font-size: 16px;
  font-weight: bold;
  color: #000000;
  text-shadow: 0.1em 0.1em 0.2em #000000;
  margin-top: 4px;
  margin-bottom: 0px;
  padding: 4px 10px;
  background-color: ;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-border-top-left-radius: 15px;
  -moz-border-radius-topleft: 15px;
  border-top-left-radius: 15px;
  -webkit-border-top-right-radius: 15px;
  -moz-border-radius-topright: 15px;
  border-top-right-radius: 15px;}



/*************************************
/* MISE EN FORME DES BOITES DE CONTENU
/************************************* */
.contenuQeel {
  background-color: ;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  padding: 4px;
  margin: 2px;
  font-size: 12px;
}
.noSpaceTitre {
  margin-top: 0;
}
.liste24h {
  text-align: center;
}
.deBug td {
  background-color: #d1d7dc;
}
/* Ce css permet d'avoir les deux premières boites (statistiques et légendes)
à la même taille en hauteur */
.hauteurFixe {
  height: 45px;
  overflow: auto;
}
/*************************************
/* MISE EN FORME LISTE DES GROUPES
/************************************* */
.qeel-groupes {
  font-size: 0px;
  line-height: 0;
  text-align: center;
}
.qeel-groupes a {
  font-size: 17px;
  line-height: normal;
  display: inline-block;
  padding: 2px 5px;
  margin: 1px 4px;
  font-variant: small-caps;
  font-weight: bold;
  background: transparent;
}
/********************************
/* Affichage des crédits
/********************************/
.lostCredits {
  color: #999999;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  padding: 2px 4px;
  background: transparent;
  font-weight: bold;
}
.bulleCredits {
  position: relative;
  cursor: pointer;
  color: #ffffff;
  background: ;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  padding: 1px 4px;
}
.bulleCredits  > span {
  position: absolute;
  display: block;
  bottom: 150%;
  left: -20%;
  width: 150px;
  background: #000000;
  color: #ffffff;
  padding: 2px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  opacity: 0;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  transform: scale(0) rotate(12deg);
}
.bulleCredits  > span:after {
  display: block;
  content: " ";
  width: 0;
  border-width: 8px 5px 0 5px;
  border-color: #000000 transparent transparent transparent;
  border-style: solid;
  position: absolute;
  bottom: -8px;
  left: 5px;
}
.bulleCredits:hover  > span,
.bulleCredits:focus  > span {
  z-index: 500;
  opacity: 1;
  transform: scale(1) rotate(0);
  cursor: default;
}
/*------------------------------------
Template QEEL par 'Christa Lostmindy
http://enaevolare.lostmindy.net
[FIN]
--------------------------------------*/

(certaines largeurs étaient fixées, comme celle de l'image sensée apparaître à gauche, d'où l'espace, et d'autres détails ^^)

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer mon QEEL

Message par NCB le Jeu 4 Sep 2014 - 16:41

Magnifique Very Happy

Merci beaucoup à toi , ça fonctionne parfaitement Wink

NCB
**

Masculin
Messages : 53
Inscrit(e) le : 28/12/2013

http://republique.2morpg.com/
NCB a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


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