Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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
avatar

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.
avatar

Kinotto
Membre actif

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;
}
avatar

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 ^^)
avatar

MlleAlys
Membre actif

Messages : 4669
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
avatar

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