Problème avec mon QEEL

2 participants

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

Résolu Problème avec mon QEEL

Message par malice1329 Dim 18 Nov 2012 - 7:32

Bonjour j'ignore si je suis a la bonne place ou non et il me semble qu'en cherchant je n'ai pas trouvé de sujet semblable si c'est le cas je suis désolé,

J'ai aujourd'hui modifié mon QEEL et j'adore le résultat final, mais je voudrais l'améliorer un peu plus en séparant mes groupes en deux colonnes comme sur l'image que je poste dès maintenant. Je trouve que cela ferait encore plus jolie.

Spoiler:

Je vous envoie aussi mon css
Code:
.qeel_titre
{
  width: 800px;
  height: 100px;
  margin: auto;
  background: url(http://obsession27.free.fr/divers/buttons/onlinejaune.png) no-repeat;
}
.groupe1, .groupe2, .groupe3, .groupe4, .groupe5, .groupe6, .groupe7, .groupe8, .groupe9, .groupe10, .groupe11, .groupe12
{
  display: block;
 text-transform: small-caps;
 color: #AA5544;
  border-bottom: 1px solid #cacaca;
  margin-top: 5px;
  border: 1px dotted #c0c0c0;
  text-align: center;font-size: 11px;
  -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.groupe1
{
  color: #FFFAFA !important;
}
.groupe2
{
  color: #FC088A !important;
}
.groupe3
{
  color: #1376F0 !important;
}
.groupe4
{
  color: #F0B111 !important;
}
.groupe5
{
  color: #2DC48D !important;
}
.groupe6
{
  color: #03F795 !important;
}
.groupe7
{
  color: #C054D1!important;
}
.groupe8
{
  color: #C91414 !important;
}
.groupe9
{
  color: #173D12 !important;
}
.groupe10
{
  color: #409BEB!important;
}
.groupe11
{
  color: #784E4E !important;
}
.groupe12
{
  color: #AB9F9F !important;
}
.groupe_contenu
{
  display: none;
}
.qeel_infos
{
  width: 100%;
  margin-top: 2px;
  margin-bottom: 5px;
  background: #f3f3f3;
  border: 1px dotted #c0c0c0;
  padding: 4px;
  font-size: 10px;
  text-align: justify;
}
.groupe1:hover .groupe_contenu, .groupe2:hover .groupe_contenu, .groupe3:hover .groupe_contenu, .groupe4:hover .groupe_contenu, .groupe5:hover .groupe_contenu,
.groupe6:hover .groupe_contenu, .groupe7:hover .groupe_contenu, .groupe8:hover .groupe_contenu, .groupe9:hover .groupe_contenu, .groupe10:hover .groupe_contenu,
.groupe11:hover .groupe_contenu, .groupe12:hover .groupe_contenu
{
  display: inline-block;
  position: absolute;
  margin-left: 50px;
  width: 250px;
  background: #882288;
  padding: 4px;
  border: 1px dotted #D6CFCF;
  color: #989898;
  font-size: 10px;
  font-weight: normal;
}

et mon template qui se rapporte a mon QEEL
Code:
<div class="qeel_titre"></div>
<div class="forumline">
  <table>
    <tr>
      <td><a href="http://once-in-storybrooke.forum-canada.com/g2-snow-white-story" class="groupe1">Snow White Story<span class="groupe_contenu">Texte d'essais</span></a>
      <a href="http://once-in-storybrooke.forum-canada.com/g3-aurora-story" class="groupe2">Aurora Stroy<span class="groupe_contenu">Personnages de l'histoire d'Aurora</span></a>
      <a href="http://once-in-storybrooke.forum-canada.com/g4-cinderella-story" class="groupe3">Cinderella Story<span class="groupe_contenu">Personnage de l'histoire d'Ella</span></a>
      <a href="http://once-in-storybrooke.forum-canada.com/g5-belle-story" class="groupe4">Belle Story<span class="groupe_contenu">Personnage de l'histoire de Belle</span></a>
      <a href="http://once-in-storybrooke.forum-canada.com/g6-ariel-story" class="groupe5">Ariel Story<span class="groupe_contenu">Personnage de l'histoire d'Ariel</span></a>
      <a href="http://once-in-storybrooke.forum-canada.com/g7-jasmine-story" class="groupe6">Jasmine Story<span class="groupe_contenu">Personnage de l'histoire de Jasmine</span></a>
      <a href="http://once-in-storybrooke.forum-canada.com/g8-rapunzel-story" class="groupe7">Rapunzel Story<span class="groupe_contenu">Personnage de l'histoire de Rapunzel</span></a>
      <a href="http://once-in-storybrooke.forum-canada.com/g9-red-story" class="groupe8">Red Story<span class="groupe_contenu">Personnage de l'histoire de Red</span></a>
      <a href="http://once-in-storybrooke.forum-canada.com/g10-peter-pan-story" class="groupe9">Peter Pan Story<span class="groupe_contenu">Personnage de l'histoire de Peter Pan</span></a>
      <a href="http://once-in-storybrooke.forum-canada.com/g11-pinocchio-story" class="groupe10">Pinocchio Story<span class="groupe_contenu">Personnage de l'histoire de Pinocchio</span></a>
      <a href="http://once-in-storybrooke.forum-canada.com/g12-evil-story" class="groupe11">Evil Story<span class="groupe_contenu">Personnage Evil de l'univers</span></a>
      <a href="http://once-in-storybrooke.forum-canada.com/g13-other-story" class="groupe12">Other Story<span class="groupe_contenu">Autres personnages des histoires</span></a></td>
      <td>   
        <div class="qeel_infos">{TOTAL_POSTS}. {TOTAL_USERS}. {NEWEST_USER}<br />
        {TOTAL_USERS_ONLINE}<br />
      {RECORD_USERS}<br />
      <br />
      {LOGGED_IN_USER_LIST}</div>
        <div class="qeel_infos"><table>   {L_CONNECTED_MEMBERS}
   {L_WHOSBIRTHDAY_TODAY}
          {L_WHOSBIRTHDAY_WEEK}</table></div>
      </td>
    </tr>
  </table>
</div>
avatar

malice1329
Nouveau membre

Féminin
Messages : 8
Inscrit(e) le : 03/12/2009

http://mutant-x-season-4.forumactif.org/
malice1329 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec mon QEEL

Message par Lixyr Dim 18 Nov 2012 - 23:06

Bonsoir.

Pourquoi ne faites-vous pas une autre cellule à droite pour y mettre la deuxième moitié des groupes ? Si ce sont les info-bulles qui vous dérangent, on peut remédier à ça :

TEMPLATE :

Code:
        <div class="qeel_titre"></div>
        <div class="forumline">
          <table>
            <tr>
              <td><a href="http://once-in-storybrooke.forum-canada.com/g2-snow-white-story" class="groupe1">Snow White Story<span class="groupe_contenu">Texte d'essais</span></a>
              <a href="http://once-in-storybrooke.forum-canada.com/g3-aurora-story" class="groupe2">Aurora Stroy<span class="groupe_contenu">Personnages de l'histoire d'Aurora</span></a>
              <a href="http://once-in-storybrooke.forum-canada.com/g4-cinderella-story" class="groupe3">Cinderella Story<span class="groupe_contenu">Personnage de l'histoire d'Ella</span></a>
              <a href="http://once-in-storybrooke.forum-canada.com/g5-belle-story" class="groupe4">Belle Story<span class="groupe_contenu">Personnage de l'histoire de Belle</span></a>
              <a href="http://once-in-storybrooke.forum-canada.com/g6-ariel-story" class="groupe5">Ariel Story<span class="groupe_contenu">Personnage de l'histoire d'Ariel</span></a>
              <a href="http://once-in-storybrooke.forum-canada.com/g7-jasmine-story" class="groupe6">Jasmine Story<span class="groupe_contenu">Personnage de l'histoire de Jasmine</span></a>
              </td>
              <td> 
                <div class="qeel_infos">{TOTAL_POSTS}. {TOTAL_USERS}. {NEWEST_USER}<br />
                {TOTAL_USERS_ONLINE}<br />
              {RECORD_USERS}<br />
              <br />
              {LOGGED_IN_USER_LIST}</div>
                <div class="qeel_infos"><table>  {L_CONNECTED_MEMBERS}
          {L_WHOSBIRTHDAY_TODAY}
                  {L_WHOSBIRTHDAY_WEEK}</table></div>
              </td>
              <td>
                <a href="http://once-in-storybrooke.forum-canada.com/g8-rapunzel-story" class="groupe7">Rapunzel Story<span class="groupe_contenu">Personnage de l'histoire de Rapunzel</span></a>
              <a href="http://once-in-storybrooke.forum-canada.com/g9-red-story" class="groupe8">Red Story<span class="groupe_contenu">Personnage de l'histoire de Red</span></a>
              <a href="http://once-in-storybrooke.forum-canada.com/g10-peter-pan-story" class="groupe9">Peter Pan Story<span class="groupe_contenu">Personnage de l'histoire de Peter Pan</span></a>
              <a href="http://once-in-storybrooke.forum-canada.com/g11-pinocchio-story" class="groupe10">Pinocchio Story<span class="groupe_contenu">Personnage de l'histoire de Pinocchio</span></a>
              <a href="http://once-in-storybrooke.forum-canada.com/g12-evil-story" class="groupe11">Evil Story<span class="groupe_contenu">Personnage Evil de l'univers</span></a>
              <a href="http://once-in-storybrooke.forum-canada.com/g13-other-story" class="groupe12">Other Story<span class="groupe_contenu">Autres personnages des histoires</span></a>

              </td>
            </tr>
          </table>
        </div>

CSS :

Code:
        .qeel_titre
        {
          width: 800px;
          height: 100px;
          margin: auto;
          background: url(http://obsession27.free.fr/divers/buttons/onlinejaune.png) no-repeat;
        }
        .groupe1, .groupe2, .groupe3, .groupe4, .groupe5, .groupe6, .groupe7, .groupe8, .groupe9, .groupe10, .groupe11, .groupe12
        {
          display: block;
        text-transform: small-caps;
        color: #AA5544;
          border-bottom: 1px solid #cacaca;
          margin-top: 5px;
          border: 1px dotted #c0c0c0;
          text-align: center;font-size: 11px;
          -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
  width:110px;
        }
        .groupe1
        {
          color: #FFFAFA !important;
        }
        .groupe2
        {
          color: #FC088A !important;
        }
        .groupe3
        {
          color: #1376F0 !important;
        }
        .groupe4
        {
          color: #F0B111 !important;
        }
        .groupe5
        {
          color: #2DC48D !important;
        }
        .groupe6
        {
          color: #03F795 !important;
        }
        .groupe7
        {
          color: #C054D1!important;
        }
        .groupe8
        {
          color: #C91414 !important;
        }
        .groupe9
        {
          color: #173D12 !important;
        }
        .groupe10
        {
          color: #409BEB!important;
        }
        .groupe11
        {
          color: #784E4E !important;
        }
        .groupe12
        {
          color: #AB9F9F !important;
        }
        .groupe_contenu
        {
          display: none;
        }
        .qeel_infos
        {
          width:97%;
          margin-top: 2px;
          margin-bottom: 5px;
          background: #f3f3f3;
          border: 1px dotted #c0c0c0;
          padding: 4px;
          font-size: 10px;
          text-align: justify;
        }
        .groupe1:hover .groupe_contenu, .groupe2:hover .groupe_contenu, .groupe3:hover .groupe_contenu, .groupe4:hover .groupe_contenu, .groupe5:hover .groupe_contenu,
        .groupe6:hover .groupe_contenu
        {
          display: inline-block;
          position: absolute;
          margin-left: 50px;
          width: 250px;
          background: #882288;
          padding: 4px;
          border: 1px dotted #D6CFCF;
          color: #989898;
          font-size: 10px;
          font-weight: normal;
        }

 .groupe7:hover .groupe_contenu, .groupe8:hover .groupe_contenu, .groupe9:hover .groupe_contenu, .groupe10:hover .groupe_contenu,
        .groupe11:hover .groupe_contenu, .groupe12:hover .groupe_contenu

{
          display: inline-block;
          position: relative;
          right:280px;top:-50px;
          width: 250px;
          background: #882288;
          padding: 4px;
          border: 1px dotted #D6CFCF;
          color: #989898;
          font-size: 10px;
          font-weight: normal;
  margin-bottom:-50px;
        }

::fleur::
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec mon QEEL

Message par malice1329 Lun 19 Nov 2012 - 0:16

Merci beaucoup je n'y avais pas pensé de faire une deuxième cellule

Le résultat est tout simplement parfait...Je crois que je devrais vraiment arrêter de faire mes modifications le soir avant de me coucher ^^

Problème résolu
avatar

malice1329
Nouveau membre

Féminin
Messages : 8
Inscrit(e) le : 03/12/2009

http://mutant-x-season-4.forumactif.org/
malice1329 a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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