Sujets similaires

Dernière édition par Nye-Hael le Dim 02 Mar 2014, 11:26, édité 1 fois

Bonjour !

Je rencontre quelques petits problèmes avec les codes de mon QEEL, comme l'image qui déborde sur la cellule des statistiques, les groupes dont la police ne change pas, ainsi que la rayure qui se sépare mystérieusement en deux dans la hauteur.
J'aimerais donc pouvoir éradiquer ces petits "bugs" afin de pouvoir harmoniser l'ensemble.

Petit aperçu de la catastrophe ici

Et voici les codes du monstre :

CSS :

Code:: /* Mise en forme des cellules de statistiques */
.statistiques {
   background-color: #c6cdd5;
   padding:20px;
   text-align:left;
  height: 164px;
  width:540px;
  font-family:tahoma;
  text-transform: lowercase;
}

/* QEEEEEEEEL */

.qeelhaut {
  color: #955e74;
  font-family: times new roman;
  font-size:70px;
  letter-spacing:-3px;
  text-transform:lowercase;
  font-style:italic;
  text-shadow:-1px -1px 0px white;
  margin-top:-100px;
  margin-right:-40px;
}

.qeeltitre {
  font-family: georgia;
  font-size: 30px;
  letter-spacing:-3px;
  color: #955e74;
  text-transform: uppercase;
}

.qeeltout {
  width: 820px;
}

.qeel2 {
  background-color:#c6cdd5;
width:350px;
  height:120px;
  padding:15px;
  overflow:auto;
  line-height:12px;
  margin-left:-26px;
  margin-top:-30px;
  border:10px solid white
}

qeellink.{
  text-align:left;
  font-family:Georgia;}


/* QEEEEEEL FIN */

/*QEEL TEST 2 (à revoir)*/

   /* conteneur du QEEL */
.QeelPerso {
   border: 2px solid #;
   padding: 10px;
  background-color:#ffffff;
   -moz-border-radius: 0px;
   -webkit-border-radius: 0px;
   border-radius: 0px;
   width: 770px;
  margin-left: 6px;
}

/* Centrage image du QEEL */
.ImgQeel {text-align:center;}

/* Mise en forme des liens vers les groupes */
.ListeGroupes a {
   font-size:14px;
   text-transform:uppercase;
   font-family: georgia;
   text-decoration: none!important;
   letter-spacing:1px;
   background-color:#FFFFFF;
   height:40px;padding-right:10px;padding-left:10px;padding-bottom:3px;
   font-size:16px ;text-align:center;
   text-decoration: none !important;
   margin-bottom: 7px;
}

/* Couleurs des groupes */
a.groupe1 { color:#663366 ; }
a.groupe2 { color:#cc3333 ; }
a.groupe3 { color:#336699 ; }
a.groupe4 { color:#339933 ; }
a.groupe5 { color:#666666 ; }
a.groupe6 { color:#663333 ; }

a.groupes_all{
  text-shadow: 0px 0px 1px #ffffff;}

/* Limitation en hauteur des blocs de statistiques */
.BlocStats {
   overflow:auto;
   max-height: 300px;
}

/* Debuggage : on retire le fond de la liste des dernières 24h */
.DeBug td.row1 { background : none; }

/*QEEL TEST 2 FIN*/

Template :

Code:: 
   <div class="QeelPerso">
   <div class="ImgQeel">
   
   <a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></a>
   

   
   <img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" alt="{TOTAL_USERS_ONLINE}" />
   
   </div>

<div class="qeeltout"> <center><div class="qeeltitre">« we are all that we are » </div>
  <div style="margin-left:-30px;"><table><tr><td><div style="height:204px;width:30px; background-color: #837f90; "> </div></td><td><img src="http://image.noelshack.com/fichiers/2013/52/1388338124-qeeltest.png"></td><td><div class="statistiques"><div class="BlocStats"><span class="gensmall">{TOTAL_USERS}<br />
   {NEWEST_USER}<br />
   {TOTAL_USERS_ONLINE}<br />
   {LOGGED_IN_USER_LIST}</span></div></div></td></tr></table></div>

  <br><div class="qeelhaut"><span id="bert">{TOTAL_POSTS}<script type="text/javascript">document.getElementById('bert').innerHTML=document.getElementById('bert').innerHTML.replace(/Nos membres ont posté un total de/," ");</script><script type="text/javascript">document.getElementById('bert').innerHTML=document.getElementById('bert').innerHTML.replace(/messages/,"messages");</script></span> </div></center>





   <div class="qeel2">
   <table class="DeBug"><P align="justify"><div style="line-height: 25px;">{L_CONNECTED_MEMBERS}</div></P></table>
   </div>
  <div style="background: url('http://image.noelshack.com/fichiers/2014/03/1389789588-test.png');width:438px;height:150px; text-align:left; background-repeat:no-repeat;margin-left:370px; margin-top:-160px; line-height: 20px;">
<a href="http://yggdrasill-treet.forumgratuit.org/g9-pnj" class="groupe1" class="groupes_all">« PNJ » </a>
   <br><a href="http://yggdrasill-treet.forumgratuit.org/g3-raiksos" class="groupe2" class="groupes_all">« RAIKSOS »</a>
   <br><a href="http://yggdrasill-treet.forumgratuit.org/g4-rakennus" class="groupe3" class="groupes_all">« RAKENNUS » </a>
   <br><a href="http://yggdrasill-treet.forumgratuit.org/g6-frilagen" class="groupe4" class="groupes_all">« FRILAGEN » </a>
   <br><a href="http://yggdrasill-treet.forumgratuit.org/g7-villageois" class="groupe5" class="groupes_all">« CIVILS » </a>
  <br><a href="http://yggdrasill-treet.forumgratuit.org/g16-nomades" class="groupe6" class="groupes_all">« NOMADES » </a></div>
   </div>

Merci d'avance !

Oulalalala, ce code me semble être "un peu compliqué" pour ce que tu veux faire Very Happy

Attention à l'ouverture et la fermeture de tes balises Wink

, par exemple au tout début tu as ouvert une div avec la class "QeelPerso", mais où se ferme-t-elle ?
Autre chose aussi, évite de mettre du code CSS directement dans les balises avec "style", c'est pas très "propre" ^^

Si tu le souhaites je peux t'aider à simplifier et nettoyer quelque peu ce code Wink

Petite question, l'espace blanc entre les blocs (pas la coupure horizontale, les espaces entre les cellules) est il volontaire ?

Pour la police des groupes, tu as simplement oublié de rajouter la Google Font ^^
Rappel du tuto : http://forum.forumactif.com/t343855-utiliser-des-polices-personnalisees-avec-google-web-fonts

Bonsoir !

Oui, ce code est compliqué mais c'est une amie qui l'a mis en place pour moi et en bidouillant ici et là je crois bien avoir fait planter quelques trucs.

Pour l'espace entre les blocs du QEEL, il est volontaire, oui.
Et je pensais mettre les groupes en Georgia, c'est pour ça que je me demandais pourquoi ça ne fonctionnait pas, puisque c'est une des typos "classiques" sur FA.

Et sinon, je veux bien un coup de main pour dégrossir un peu l'ensemble. Merci beaucoup !

L'un des premiers problèmes est que ton CSS a du code qui ne correspond à rien O_o.

Par exemple tu as ceci :

Code:: /* Mise en forme des liens vers les groupes */
.ListeGroupes a {
font-size:14px;
text-transform:uppercase;
font-family: georgia;
text-decoration: none!important;
letter-spacing:1px;
background-color:#FFFFFF;
height:40px;padding-right:10px;padding-left:10px;padding-bottom:3px;
font-size:16px ;text-align:center;
text-decoration: none !important;
margin-bottom: 7px;
}

Mais nul part dans ton template tu as une div avec la class "ListeGroupes". Je pense que cela vient du mélange entre l'ancien code et le nouveau code. Ce surplus de code CSS risque de t'embrouiller encore plus ^^'

Dans ton CSS, tu as un petit bug à un endroit, tu as ceci :

Code:: qeellink.{
text-align:left;
font-family:Georgia;}

Il faut mettre le point avant qeellink si c'est une classe ^^ (.qeellink).

Petite question, où devrait se placer le "63 messages" ? Et seconde question, quelles sont les cellules avec une 'taille fixée' et quelle est cette taille ?
Le mieux c'est d'abord de faire un schéma, avec les dimensions, etc.
Une fois cela fait, grâce aux schéma tu peux faire juste le HTML (placer le contenu).
Puis, ensuite tu mets enfin le CSS pour mettre en page ^^

Merci beaucoup pour le coup de main.

Le 63 messages est censé être là où il est actuellement sur le QEEL. Ce n'est pas moi qui ai fait le code donc je ne peux pas vraiment répondre à ces questions.
Les templates et moi c'est une longue histoire de mésentente cordiale (même si c'est du HTML tout bête), j'ai du mal à m'y repérer et j'ai tendance à faire autant n'importe quoi en modifiant quelques détails qu'en codant tout un élément. Enfin bref.

Je vais essayer de voir ce que je peux faire, mais j'avoue que je suis quand même un peu perdue.

Citation :: Le 63 messages est censé être là où il est actuellement sur le QEEL. Ce n'est pas moi qui ai fait le code donc je ne peux pas vraiment répondre à ces questions.

En fait je pose la question pour pouvoir faire le schéma du QEEL.

Dessiner en gros (même vite fait sous paint) quelles tailles feront les blocs, etc, cela permet ensuite de coder plus facilement Very Happy

. Le but ici c'est de savoir à quel résultat définitif tu veux arriver (donc connaitre le placement + la taille de chaque élément, car là sur l'actuel il y a des bug, et je ne sais pas ce qui est volontaire et ce qui ne l'est pas) pour ensuite proposer un code un peu plus simple.

Sujet: Re: Problème de QEEL [résolu] Dim 02 Mar 2014, 11:26

Bonjour !

Désolée pour le temps de réponse, j'ai fini par coder un QEEL beaucoup plus simple et beaucoup moins bugué. :3
Un grand merci quand même pour ton aide !

Le sujet peut être archivé.

Problème de QEEL [résolu]

Problème de QEEL [résolu]

Sujets similaires

Sujets similaires

Partenaires Or