Affichage de mon QEEL personnalisé

[Khayalan]

Bonsoir,

J'ai finalement décidé de coder mon propre qeel, en visant ce schéma (qeel à deux colonnes):



Voici le code que j'ai obtenu pour la partie qeel de l'index_body:

Code:

<!-- BEGIN disable_viewonline -->
<center>
<img src="http://i77.servimg.com/u/f77/18/10/66/85/qeel2212.jpg">
<div class="tableauqueel">
<table style="width: 100%; border-collapse:collapse;">
<tr><td width="50%"><div class="partiedroite"><center><img src="http://i77.servimg.com/u/f77/18/10/66/85/captur42.jpg"></center><br>
<center><span class="groupes"> <a href="URL DU GROUPE" style=text-decoration:none;"><font color=#COULEUR size="2"><b>Administrateurs</b></font></a></span> &nbsp<font color=#COULEUR size="2"> =»★«= &nbsp
<span class="groupes"> <a href="URL DU GROUPE" style=text-decoration:none;"><font color=#COULEUR size="2"><b>Modérateurs</b></font></a></span> &nbsp<font color=#COULEUR size="2"> =»★«= &nbsp
<span class="groupes"> <a href="URL DU GROUPE" style=text-decoration:none;"><font color=#COULEUR size="2"><b>Correcteurs</b></font></a></span> &nbsp<font color=#COULEUR size="2"> =»★«= &nbsp 
<span class="groupes"> <a href="URL DU GROUPE" style=text-decoration:none;"><font color=#COULEUR size="2"><b>Graphistes</b></font></a></span> &nbsp<font color=#COULEUR size="2"> =»★«= &nbsp 
<span class="groupes"> <a href="URL DU GROUPE" style=text-decoration:none;"><font color=#COULEUR size="2"><b>Animateurs</b></font></a></span></center></td>
<td rowspan=2><td width="50%"><div class="partiegauche"><span class="logged-in user list"><td style="text-align: justify;"><font size="2"><table>{LOGGED_IN_USER_LIST}
<center><br><img src="lien de l'image des 24h"></center><br>
<span class="last 24h"><td style="text-align: justify;"><font size="2">{L_CONNECTED_MEMBERS}</table></td>
</tr>
<tr>
<td><td style="text-align: justify;"><font size="2"><br>{TOTAL_USERS}<br><br>
{TOTAL_POSTS}<br><br>{NEWEST_USER}<br><br>{TOTAL_USERS_ONLINE}</td></tr></table>
<!-- END disable_viewonline -->

Et le résultat en image sur mon forum de test:



Est-ce que quelqu'un pourrait m'aider sur ces deux points:

Décaler le bloc entouré en noir (X messages, X utilisateurs, Dernier enregistré etc...) dans la deuxième partie de ma première colonne, en dessous des groupes.
Afficher correctement ma deuxième colonne, avec en haut les utilisateurs enregistrés et dans la deuxième partie les dernières 24h (comme sur mon schéma).

Merci d'avance!

[Lixyr]

Bonsoir.

J'ai relevé beaucoup d'erreurs dans votre QEEL, notamment
des erreurs de guillemets, qui ont été oubliées pour introduire un css dans l'attribut style :

style=alalala;

ça s'écrit

style="alalaa;"

des oublies de fermeture de balises, le plus souvent le font :

<font color="#COULEUR" size="2"> =»★«= &nbsp

deux erreurs dans cet exemple en plus :

<font color="#COULEUR" size="2"> =»★«= &nbsp; </font>

ne pas oublier de mettre le point-virgule dans le code html de l'espace. Et ne pas oublier de fermer les balises.

Je corrige votre code, pour la partie que j'ai, mais pouvez vous fournir le CSS qui va avec ? Ça me sera plus simple d'apporter les modifications désirées tout en faisant les choses bien.

deux cellules qui se suivent ?

<td rowspan=2><td width="50%">

<td rowspan="2" width="50%">

ne pas oublier de fermer les balises de retour à la ligne :

<br>

<br />

des parties de code très bizarres :

<td rowspan="2" width="50%">
<div class="partiegauche">
<span class="logged-in user list">
<td style="text-align: justify;">
<font size="2">
<table>{LOGGED_IN_USER_LIST}
<center><br /><img src="lien de l'image des 24h" />
</center><br />
<span class="last 24h">
<td style="text-align: justify;">
<font size="2">{L_CONNECTED_MEMBERS}
</table>
</td>
</tr>

1) oublie de fermer beaucoup de balises
2) on ne met de span avant une cellule, c'est comme entourer un pot de fleur avec le terreau. (c'est plutôt le terreau qu'on met dans le pot, non ?)
idem avec le font qui entoure la balise table ... on entoure pas un mur avec une couleur.
Et puis, ce bout de code est un capharnaüm, il me faudrait le css pour que je puisse le comprendre... =3

ne pas oublier de fermer les balises images

<img src="lien de l'image des 24h" />

[Khayalan]

Bonjour,

Merci de votre réponse. C'est la première fois que je code, la seule base que j'ai est la structure désirée et la réponse de quelqu'un dans un autre topic qui conseillait ces balises-ci :

Code:

<TABLE BORDER width="100%">
  <TR>
      <TD width="50%" align="center"><img src="http://img15.hostingpics.net/pics/28743834japl1copie.png">
GROUPE 1 - GROUPE 2 - GROUPE 3 - GROUPE 4 - GROUPE 5 - GROUPE 6 - GROUPE 7 - GROUPE 8 - GROUPE 9 </TD>
      <TD ROWSPAN=2>les utilisateurs enregistrés
possibilité d'image
liste des membres connectés au cours des 24 dernières heures</TD>
  </TR>
  <TR>
      <TD>le texte de base</TD>
  </TR>
</TABLE>

pour un résultat semblable...

Je n'ai pas encore de css dédié (au qeel) puisque j'ai commencé à coder moi-même, mais mon principal problème réside dans la structure qui, si j'ai bien compris, se règle avec le template... Cependant, si cela peut vous aider, je vais déjà corriger les erreurs de base dans mon template (sauf le "rowspan", je crois n'avoir pas tout saisi: il en faut un premier et un deuxième, c'est cela?) et voir ce que je peux faire en css.

Ou peut-être préférez-vous que je reprenne ce code de template étape par étape avec vous?

Bonne journée, merci^^

EDIT:
2ème essai de codage du template (à partir d'un tableau html simple):

Code:

<!-- BEGIN disable_viewonline -->
<center><img src="http://i77.servimg.com/u/f77/18/10/66/85/qeel2212.jpg"/></center>
<div class="tableauqueel">
<table style="width: 100%; border-collapse:collapse;">
<tr>
  <td width="50%"><div class="partiedroite"><center><img src="http://i77.servimg.com/u/f77/18/10/66/85/captur42.jpg"/></center><br></br></td><td><span class="logged-in user list"><td style="text-align: justify;"><font size="2">{LOGGED_IN_USER_LIST}</td>
</tr>
<tr>
<td><center><span class="groupes"> <a href="URL DU GROUPE" style="text-decoration:none;"><font color=#COULEUR size="2"><b>Administrateurs</b></font></a></span> &nbsp<font color=#COULEUR size="2"> =»★«=  </font>
<span class="groupes"> <a href="URL DU GROUPE" style="text-decoration:none;"><font color=#COULEUR size="2"><b>Modérateurs</b></font></a></span> &nbsp<font color=#COULEUR size="2"> =»★«=  </font>
<span class="groupes"> <a href="URL DU GROUPE" style="text-decoration:none;"><font color=#COULEUR size="2"><b>Correcteurs</b></font></a></span> &nbsp<font color=#COULEUR size="2"> =»★«=  </font>
<span class="groupes"> <a href="URL DU GROUPE" style="text-decoration:none;"><font color=#COULEUR size="2"><b>Graphistes</b></font></a></span> &nbsp<font color=#COULEUR size="2"> =»★«=  </font>
<span class="groupes"> <a href="URL DU GROUPE" style="text-decoration:none;"><font color=#COULEUR size="2"><b>Animateurs</b></font></a></span></center><br></br></td>
<td><br></br><center><img src="http://i77.servimg.com/u/f77/18/10/66/85/captur42.jpg"/></center><br></br></td>
</tr>
<tr>
<td width="50%"><div class="partiegauche"><font size="2">{TOTAL_USERS}<br></br>
  {TOTAL_POSTS}<br></br>{NEWEST_USER}<br></br>{TOTAL_USERS_ONLINE}<br></br></td><td><span class="last 24h"><td><font size="2"></font><table>{L_CONNECTED_MEMBERS}</table></td>
</tr>
</table>
<!-- END disable_viewonline -->

Et le résultat:



On s'approche... Le principal problème, c'est l'image des 24h qui ne veut pas se centrer et décale toute la colonne de droite...

Merci!

[Khayalan]

Re-bonjour,

Voici un essai de correction de mon template avec ce que vous m'avez signalé, sauf pour le rowspan (j'avoue n'avoir pas tout saisi et m'être inspirée "bêtement" du code plus haut pour la structure générale du tableau...) et pour les "span" (en l'occurence "span class", qui servent de repère pour définir un css?

Code:

<!-- BEGIN disable_viewonline -->
<center>
<img src="http://i77.servimg.com/u/f77/18/10/66/85/qeel2212.jpg"/>
<div class="tableauqueel">
<table style="width: 100%; border-collapse:collapse;">
<tr><td width="50%"><div class="partiedroite"><center><img src="http://i77.servimg.com/u/f77/18/10/66/85/captur42.jpg"></center><br></br>
<center><span class="groupes"> <a href="URL DU GROUPE" style="text-decoration:none;"><font color=#COULEUR size="2"><b>Administrateurs</b></font></a></span> &nbsp<font color=#COULEUR size="2"> =»★«=   </font>
<span class="groupes"> <a href="URL DU GROUPE" style="text-decoration:none;"><font color=#COULEUR size="2"><b>Modérateurs</b></font></a></span> &nbsp<font color=#COULEUR size="2"> =»★«=   </font>
<span class="groupes"> <a href="URL DU GROUPE" style="text-decoration:none;"><font color=#COULEUR size="2"><b>Correcteurs</b></font></a></span> &nbsp<font color=#COULEUR size="2"> =»★«=   </font>
<span class="groupes"> <a href="URL DU GROUPE" style="text-decoration:none;"><font color=#COULEUR size="2"><b>Graphistes</b></font></a></span> &nbsp<font color=#COULEUR size="2"> =»★«=   </font>
<span class="groupes"> <a href="URL DU GROUPE" style="text-decoration:none;"><font color=#COULEUR size="2"><b>Animateurs</b></font></a></span></center></td>
<td rowspan=2><td width="50%"><div class="partiegauche"><span class="logged-in user list"><td style="text-align: justify;"><font size="2"><table>{LOGGED_IN_USER_LIST}
<center><br></br><img src="lien de l'image des 24h"/></center><br></br>
<span class="last 24h"><td style="text-align: justify;"><font size="2">{L_CONNECTED_MEMBERS}</table></td>
</tr>
<tr>
<td><td style="text-align: justify;"><font size="2"><br></br>{TOTAL_USERS}<br></br>
{TOTAL_POSTS}<br></br>{NEWEST_USER}<br></br>{TOTAL_USERS_ONLINE}</td></tr></table>
<!-- END disable_viewonline -->

Pour le css, est-il vraiment nécéssaire (vu que polices, tailles de police, alignements peuvent se régler dans les templates)?

Ne serait-il pas plus simple que j'essaye de reprendre étape par étape, pour que vous puissiez m'aider à me corriger au fur et à mesure?

Merci pour tout

[Khayalan]

Le troisième essai a porté ses fruits, j'y suis!!!
Merci beaucoup pour votre aide!

[Lixyr]

Comme vous voulez. ^^
Pour le code donné plus haut, oui, il est exact. C'est une fois que vous l'avez rempli qu'il devient étrange.


Pour le Rowspan, voici un exemple pour que vous compreniez comment ça fonctionne :

COLONNE 1	COLONNE 2
ICI CELLULE 1 LIGNE 1 & 2	CELLULE 2 LIGNE 1
	CELLULE 2 LIGNE 2

réalisée avec ce code en HTML:

Code:

<table border="1"><tr><td rowspan="2">ICI CELLULE 1 LIGNE 1 & 2</td><td>CELLULE 2 LIGNE 1</td></tr><tr><td>CELLULE 2 LIGNE 2</td></tr></table>

=> explications :
Quand on a dans une colonne deux cellules, et dans une autre colonne, une seule cellule, il faut obligatoirement que la cellule toute seule prenne la même place que s'il y avait deux cellules, comme pour l'autre colonne. Pour ça, on fusionne deux cellules en une seule (ce qui est le cas pour ici, la cellule "ICI CELLULE 1 LIGNE 1 & 2", qui prend la même place que les deux cellules "CELLULE 2 LIGNE 1" et "CELLULE 2 LIGNE 2". On fusionne dans le sens vertical, donc on utilise un rowspan. La cellule seule possède un attribut rowspan, dont la valeur est à "2" pour lui indiquer qu'elle doit prendre la même place que deux cellules.

Schématiquement, ça donne :

CELLULE avec ROWSPAN="2"	CELLULE 2.1
	CELLULE 2.2

Si on devait faire cette fusion de manière horizontale on utiliserait un colspan.

CELLULE 1 & 2 LIGNE 1
CELLULE 1.2	CELLULE 2.2

réalisée avec ce code en HTML:

Code:

<table border="1"><tr><td colspan="2">CELLULE 1 & 2 LIGNE 1</td></tr><tr><td>CELLULE 1 LIGNE 2</td><td>CELLULE 2 LIGNE 2</td></tr></table>

Vous, votre QEEL ressemble à du

COLONNE 1

COLONNE 2

On a pas besoin de rowspan ou de colspan.

Donc on va recommencer le QEEL si vous voulez bien.
Et oui, le CSS est très important, croyez-moi. Vous verrez que ça sera beaucoup plus pratique de modifier l'apparence de QEEL via le css, qu'en allant à chaque fois modifier le template, le valider, l'afficher, et risquer de perdre tout son contenu à cause des cookies..
Surtout que vous aviez mis des classes dans votre code, donc je pensais que vous en aviez fait usage.



Alors, on commence déjà par poser le tableau. Bien que je ne code absolument plus avec des tableaux, ceux-ci étant fait uniquement pour les bases de données et valeurs numériques, on va quand même procéder ainsi, sinon vous allez vous perdre dans mes explications. ^^


Donc le QEEL :
on va d'abord créer un tableau de deux colonnes, avec dans la première colonne, vos groupes.

Ça commence par

Code:

<!-- BEGIN disable_viewonline -->
ICI LE CONTENU QUI FORMERA LE QEEL
<!-- END disable_viewonline -->

On insère le tableau à deux colonnes désiré :

Code:

<table width="100%" border="1">
  <tr>
    <td>COLONNE 1</td>
    <td>COLONNE 2</td>
  </tr>
</table>

Ce qui donne :

Code:

<!-- BEGIN disable_viewonline -->
<table width="100%" border="1">
  <tr>
    <td>COLONNE 1</td>
    <td>COLONNE 2</td>
  </tr>
</table>
<!-- END disable_viewonline -->

Un tableau à deux colonnes, avec une bordure d'1 épaisseur, pour que vous puissiez voir le résultat.

On insère vos groupes :

Votre partie de code correspondant aux groupes et corrigée donne :

Code:

          <span class="groupes">
            <a href="URL DU GROUPE" style="text-decoration:none;"><font color="#COULEUR" size="2"><b>Administrateurs</b></font></a>
          </span> &nbsp
          <font color="#COULEUR" size="2"> =»★«=   </font>
          <span class="groupes">
            <a href="URL DU GROUPE" style="text-decoration:none;"><font color="#COULEUR" size="2"><b>Modérateurs</b></font></a>
          </span>  
          <font color="#COULEUR" size="2"> =»★«=   </font>
        <span class="groupes">
          <a href="URL DU GROUPE" style="text-decoration:none;"><font color="#COULEUR" size="2"><b>Correcteurs</b></font></a>
          </span>  
          <font color="#COULEUR" size="2"> =»★«=   </font>
        <span class="groupes">
          <a href="URL DU GROUPE" style="text-decoration:none;"><font color="#COULEUR" size="2"><b>Graphistes</b></font></a>
        </span>  
          <font color="#COULEUR" size="2"> =»★«=   </font>
          <span class="groupes">
            <a href="URL DU GROUPE" style="text-decoration:none;"><font color="#COULEUR" size="2"><b>Animateurs</b></font></a>
          </span>

Sauf que moi, je vais la modifier, et vous expliquer pourquoi.


1) une classe pour tout coder via le CSS :

Vos groupes ont chacun une couleur. Et tous sont séparés par des symboles. Ok. Mais ce sont aussi des liens. Des liens auxquels vous ne voulez pas de soulignement. On va donc créer un bloc qui contiendra tous ces groupes. On l'appelera "groupes_membre" et ensuite, on codera tout ça via le css.


DONC !

On créé un bloc appelé groupes_membre :

Code:

<div class="groupes_membre">
      </div>

pour chaque groupe, on indiquera une couleur :

Code:

        <a href="URL DU GROUPE"><font color="#COULEUR">Administrateurs</font></a>

ICI on obtient un groupe, avec une couleur, menant à un lien que vous redéfinirez.
On l'insère dans le bloc créé plus haut :

Code:

      <div class="groupes_membre">
        <a href="URL DU GROUPE"><font color="#COULEUR">Administrateurs</font></a>
      </div>

et ce bloc est inséré dans la cellule 1. Donc remplacez

<td>
COLONNE 1
</td>

par

Code:

    <td>
      <div class="groupes_membre">
        <a href="URL DU GROUPE"><font color="#COULEUR">Administrateurs</font></a>
      </div>
    </td>

On a une cellule, celle de gauche, contenant un groupe.

CE QUE J'AI MODIFIE PAR RAPPORT A VOUS :
- j'ai supprimé les balises <b> de gras,
- ainsi que le css text-decoration:none que vous aviez mis dans le template, au niveau de la balise de lien <a>
- ainsi que le size="2" de la balise font

Pourquoi ?
Parce que tout ça, on va pouvoir l'indiquer directement dans le CSS, et on aura qu'une seule fois à le faire, pas à chaque groupe, ce qui permettra non seulement de prendre moins de ligne de code, mais en plus, ça ramera moins. Bon, je ne vais pas dire que ça rame énormément si on ajoute cinq balises en plus dans tout le template, mais ... c'est vrai quand même !!

Donc, maintenant, si je rajoute les autres groupes, avec les symboles qui séparent chaque groupe, ça donne au final, en tout et pour tout, tableau compris :

Code:


<table width="100%" border="1">
  <tr>
    <td>
      <div class="groupes_membre">
        <a href="URL DU GROUPE"><font color="#COULEUR">Administrateurs</font></a>
            =»★«=  
        <a href="URL DU GROUPE"><font color="#COULEUR">Modérateurs</font></a>
            =»★«=  
        <a href="URL DU GROUPE"><font color="#COULEUR">Correcteurs</font></a>
          =»★«=   <br />
        <a href="URL DU GROUPE"><font color="#COULEUR">Graphistes</font></a>
           =»★«=  
        <a href="URL DU GROUPE"><font color="#COULEUR">Animateurs</font></a>     
      </div>
    </td>
    <td>COLONNE 2</td>
  </tr>
</table>

Modifier tout ça via le CSS :

donc, comme je l'ai dit plus haut, on a utilisé la classe groupes_membre pour définir le bloc entier.

On va donc direction le CSS :
panneau d'admin >> affichage >> couleur >> feuille de style css

On rajoute la classe :

Code:


.groupes_membre {
/* ICI LES INSTRUCTION */
}

centrer le contenu
comme on a utilisé une balise de type bloc : div, on peut centrer le contenu, ce qui n'est pas le cas d'un span, par exemple, qui est de type inline. Donc on rajoute en instruction dans le css :

Code:

text-align:center;

mettre le texte globale en rouge :
votre rouge à vous est #c00e00; donc dans le css on rajoute :

Code:

  color:#c00e00;

mettre en gras :

Code:

  font-weight:bold;

de taille 12 px :

Code:

  font-size:12px;

ce qui donne dans le css :

.groupes_membre {
text-align:center;
color:#c00e00;
font-weight:bold;
font-size:12px;
}

validez et éditez votre forum. Ca commence à prendre forme. Seulement, les liens sont toujours soulignés.
Pas de soucis, encore dans le CSS, on va indiquer que les liens contenus dans la classe groupes_membre ne doivent pas être soulignés.

Pour ça, en dessous de ce code, on rajoute

Code:

.groupes_membre a {
/* ici les instructions */
}

=> vous remarquerez qu'on a ajouté un a à la suite de la classe. C'est pour signifier qu'on veut que ça ne prenne effet que les contenus de balises a, donc les liens (<a href="...">)
on rentre le code qui retire le soulignement et que vous aviez mis dans le template :

Code:

.groupes_membre a {
  text-decoration:none;
}

on enregistre et pouf c'est merveilleux, tous les liens ne sont plus soulignés. Ça va plus vite, non ? Et sans toucher au template. ^^

[Lixyr]

Aaaah et bien tant mieux. Cela dit votre code a encore plein d'erreurs. Je doute que ça s'affiche bien, je vois encore des <td><td>...
Vous ne voulez pas continuer étape par étape avec moi ? Vous saurez faire un QEEL sans fautes, comme ça. Je préfère ça que vous laisser avec un code pleiiin de fautes et vous laisser croire que c'est réellement bien affiché. T-T