Un code qeel s'il vous plait.

[la_blonde2510]

Bonjour à tous et toutes,

Après m'être arraché des cheveux pour pouvoir faire un QEEL potable, j'ai abandonné et j'ai eu l'idée de venir vous demandez ici si ce serais possible d'être aidé?!

Voici ce dont j'aimerai:




Serait-il possible d'être aidé car vraiment je n'en peux plus, rien ne veux aller et si vous me demander de vous donner mon code html ou css... j'ai tout effacé pour redémarré à zéro avec vous.


Merci d'avance.

PS/ je ne sais pas si j'ai poster mon sujet au bon endroit, si c'est le cas, désolé. Sinon, merci à vous j'espère avoir une petite réponse dans la journée.

[Lixyr]

Bonjour. Vous êtes en phpbb2 ?
Ce que vous demandez est assez simple. ^^

Vous avez déjà manipulé de l'onglet ?
Et le code de mofication des phrases du QEEL ?

Vous avez plusieurs très bons tutos qui expliquent comment on fait.

- faire des onglets dans le qeel
- modifier les mots du qeel

vos onglets ne sont pas disposés comme dans le code donné, mais vous pouvez d'hors et déjà potasser tout ça si vous voulez comprendre ce que je vais expliquer.

[la_blonde2510]

Bonjour, oui je suis en Phbb2.

En faite, j'ai déjà essayer un code avec onglet sur la gauche mais il voulait pas se mettre un à coté de l'autre, j'ai essayé plusieurs chose qui à mon avis n'ont rien eu à voir (<br/> qui à pas marcher) alors, je me suis énervé.


Sinon, pour l'onglet, j'y arrive mais j'arrive pas à grand chose et pour les phrases oui, grâce aux codes donné pour nous aidez

Si je comprends vous prenez ma demande en charge? *-* C'est gentil

[Lixyr]

Les <br /> ne marchent pas pour les onglets, tout simplement parce qu'ils sont sous la forme <ul> et <li>. Il faut donc passer par le css pour pouvoir les modifier. ^^

Alors, oui, je peux prendre la demande en charge. Vous avez donc un template tout neuf, non modifié ?

On peut déjà commencer par découper le qeel en trois cellules. Vous savez comment on fait pour ça ?

[la_blonde2510]

*-* merci.

Donc pour le br j'avais faux x) ok *boulet #1*

Bref, j'ai un template tout beau tout neuf et pour le découpage non, je ne sais absolument pas...

[Lixyr]

Okay, donc je vais faire une petite explication sur : comment avoir un tableau avec deux cellule à gauche et une grande à droite ?

1) La base :

le tableau, c'est de cette forme-là :

Code:

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

• table : c'est le cadre, le contour du tableau et notamment des cellules (séparation des cellules et espacement dans la cellule)

• tr : c'est une ligne
  une ligne contient une cellule, au nombre de 1 à beaucoup plus tant que la largeur le permet.

• td : une cellule. C'est là qu'on met le contenu.

Il faut cependant savoir que deux lignes dans un même tableau doit contenir le même nombre de cellules :
si j'ai deux cellules dans la première ligne, je dois avoir deux cellules dans la deuxième ligne.

Pour faire un tableau avec trois cellules, comme vous le voyez, il faut bien voir qu'il y a un problème : il y a forcément une ligne dans laquelle il manque une cellule, pour avoir le même nombre de cellule dans chaque ligne.

Oui, dans ce cas-là, pour régler le problème, on va utiliser ce qu'on appelle la fusion des cellules.


2) La fusion des cellules :

Dans notre cas, la fusion se fait à la verticale. On utilise donc le code :

Code:

rowspan="nombredecelluleàfusionner"

.

On l'intègre dans une cellule comme ceci :

<td rowspan="nombredecellulesàfusionner">

en changeant le nombredecellulesàfusionner par le nombre correspondant à l'attente.

rowspan permet de fusionner un nombre indiqué de cellules dans la verticale, ce qui fera que, si on met un chiffre de 2 : une cellule sera fusionnée avec une autre dans la verticale pour ne former qu'une seule grande cellule qui a la même taille que deux cellules.

Ainsi, on peut donc avoir d'un côté, quand on regarde à la verticale : deux cellules, et de l'autre, une grande cellule qui prend la même place.

Les lignes auront donc le même nombre de cellules, mais dont deux d'entre elles seront fusionnées.

J'espère que c'est clair ce que j'ai dit. =3


---------------------------------------


Essayez de faire votre tableau dans votre qeel, pour voir.

En sachant que le QEEL, c'est ce qui se trouvent entre

<!-- BEGIN disable_viewonline -->

et

<!-- END disable_viewonline -->

Essayez de faire un tableau comme celui que vous voulez, en postant le code juste après :

<!-- BEGIN switch_viewonline_nolink -->
<span class="cattitle">{L_WHO_IS_ONLINE}</span>
<!-- END switch_viewonline_nolink -->

[la_blonde2510]

C'est clair, mais maintenant j'espère avoir compris

Sa donne sa? ::

Code:

 <table>
  <tr>
      <td rowspan="2">
      </td>
  </tr>
</table>

Ou je dois pas enlever le premier <td> ??

[Lixyr]

Ahhhhh !

Donc techniquement, si vous m'avez bien suivie, vous devriez avoir deux lignes, contenant deux cellules, pour commencer :

Code:


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

Ca c'est le tableau de base. Ensuite, il faut analyser la quelle cellule est celle qui va disparaitre; et celle qui va fusionner.
Comme je l'ai dit, on fait une fusion dans le sens vertical, donc de haut en bas, de la cellule de droite :

Donc la fusion se fait dans la deuxième cellule : celle de droite, de la première ligne : celle du haut.
C'est donc la cellule du bas, à droite qui va disparaitre, donc qu'il faut enlever.

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

ce qui nous donne :

Code:

<table>
  <tr>
      <td></td>
      <td rowspan="2"></td>
  </tr>
  <tr>
      <td></td>
  </tr>
</table>

[la_blonde2510]

Ouhla, j'étais ailleurs moi...

Donc on supprime celle du bas à droite, ce qui nous laissera juste une seule cellule et vue qu'on à mis le Rowspan="2" dans la première, c'est lui qui va nous donner deux cellule (celle ou l'on mettra onglet et celle ou l'on mettra les connecté)

C'est juste, je ne dis pas de bêtises?

^^ Pour le tableau c'est fait, désolé d'être nulle..

[Lixyr]

Faut pas s'excuser, moi aussi j'étais "nulle" il fut un temps. On apprend tous, y a pas de prodige. ^^

Donc, oui c'est ça. ^^ Vous avez compris.

Donc si on en suit votre schéma, les contenus seront de l'ordre de :

<table>
<tr>
<td>GROUPES EN ONGLETS</td>
<td rowspan="2">QUI EST EN LIGNE AVEC PHRASES MODIFIEES + RECORD</td>
</tr>
<tr>
<td>EN CE MOMENT SE PROMENE DANS LES RUES</td>
</tr>
</table>

Donc maintenant qu'on a le code du tableau, on va l'appliquer au cadre du qeel.

On va donc retirer une grande partie du template index_body pour travailler sur un bureau propre et sans bazars.

Alors on commence :

1) Le cadre du QEEL

Comme je l'ai déjà dit, on s’intéresse à ce qui se trouve entre <!-- BEGIN disable_viewonline --> & <!-- END disable_viewonline -->

et plus principalement au table :

Code:

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <td class="catHead" colspan="2" height="28">

ça commence comme ça.

Tu vas supprimer tout ce qui se trouve après, et t'arrêter jusqu'à :

Code:

      </td>
   </tr>
   <!-- END switch_chatbox_activate -->
</table>
<!-- END disable_viewonline -->

Pour ne plus avoir qu'une seule ligne avec une seule cellule dans un tableau.

On enlève tout le contenu du qeel en fait, mais c'est pas grave, on le remplira au fur et à mesure.

En retenant bien que les cellules dans le QEEL étaient gérées par la classe "row1".
Ça peut être important pour toi après, sauf si tu t'en fiche, et que tu veux un QEEL totalement indépendant, dans ce cas, on peut enlever les classes et garder des cellules vierges, entièrement modifiables.
C'est comme tu veux.

Donc, maintenant, que tu as ton tableau, avec ta ligne et ta cellule, tu fais en sorte d'avoir ton tableau avec tes deux lignes et tes quatre cellules dont deux fusionnées. Comme fait au dessus.

Là on va voir si tu as bien compris. ^^

[la_blonde2510]

huhu facile *stresse xD*

Code:

 <!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <td class="catHead" colspan="2" height="28">
      
<table>
<tr>
<td>GROUPES EN ONGLETS</td>
<td rowspan="2">QUI EST EN LIGNE AVEC PHRASES MODIFIEES + RECORD</td>
</tr>
<tr>
<td>EN CE MOMENT SE PROMENE DANS LES RUES</td>
</tr>
</table>
      
      </td>
   </tr>
   <!-- END switch_chatbox_activate -->
</table>
<!-- END disable_viewonline -->

C'est juste ?

[Lixyr]

^^ techniquement oui, tu as mis le code dans le tableau, mais au plus simple faire en sorte que le tableau soit le code, comme ça:

Code:

    <!-- BEGIN disable_viewonline -->
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
      <tr>
    <td>GROUPES EN ONGLETS</td>
    <td rowspan="2">QUI EST EN LIGNE AVEC PHRASES MODIFIEES + RECORD</td>
    </tr>
    <tr>
    <td>EN CE MOMENT SE PROMENE DANS LES RUES
          </td>
      </tr>
    </table>
    <!-- END disable_viewonline -->

[la_blonde2510]

Okay, voilà c'est fait

[Lixyr]

2) Mettre les onglets dans la première cellule.

Pour l'explication du code des onglets, je te renvoie au lien que je t'ai donné dans mes premiers postes.

Code:




<script src="http://www.archive-host.com/files/597546/96de005e35ffd2b9823d2b1d229d90d18341a601/onglets_2.js"></script><div id="mes_onglets">
<ul>
<li id="o_1" class="mon_onglet_selected" onmouseover="changeOnglet(this);">1ere onglet</li>

<li id="o_2" class="mon_onglet" onmouseover="changeOnglet(this);">2eme onglet</li>

<li id="o_3" class="mon_onglet" onmouseover="changeOnglet(this);">3onglets</li>



<div class="clear"><div id="mes_contenus">


<div id="co_1" class="mon_contenu">

<table>
<tr>

<td class="row1" width="100%" height="100%">

Contenu 1ere onglet

</td>
</tr>

</table>
</div>



<div id="co_2" class="mon_contenu" style="display: none;">
<table><tr><td class="row1" width="100%" height="100%">
Contenu 2eme onglet
</td></tr></table>
</div>



<div id="co_3" class="mon_contenu" style="display: none;">
<table>
<tr>
<td class="row1" width="100%" height="100%">Contenu 3eme onglet</td>
</tr>
</table>
</div>

</div></ul></div>

tu as là trois onglets.

Tu devras modifier ça de sorte d'avoir le nombre d'onglets voulus, et les contenus qui vont avec.


Voici le css de base qui va avec :
(à mettre dans Panneau d'administration >> affichage >> couleur >> feuille de style css :
copier le code dedans et enregistrer)

Code:

ul, li{
  list-style: none;}

.mon_onglet {
float: left;
border:1px #000 solid;
color:#000; }

.mon_onglet:hover {
color: #fff;}
            
.mon_onglet_selected {
float: left;
border:1px #000 solid;
color:#000; }

.clear{
  clear: both;}

.mon_contenu{
background-color: transparent;
border:1px #000 solid;}

#mes_contenus, #mes_onglets{
  width: 100%;margin-right:0px;}

Est-ce que tu connais à peu près la signification du css ?

[la_blonde2510]

Le css c'est ce qui nous permet de modifier la couleur, le texte, l'opacité des images, etc... la mise en forme en gros pour que sa fasse jolie

Merci du code

[Lixyr]

De rien. ^^
Donc pour le moment, les onglets. Si tu as un problème de mise en forme, ou d'apparence, demande-moi.

[la_blonde2510]

J'aurai bien aimé des petite image avec un cadre autour, et comment fait-on pour modifier la police dans la légende?

Ensuite je te demanderai pour le reste

[Lixyr]

Pour les images, tu les veux où ?
La légende, tu parles de quoi exactement ? La description des groupes ?

Tu veux le même cadre pour tes images, ou des cadres différents ?

[la_blonde2510]

Les images c'est les onglet en faite, genre une image représente un groupe.

La description des groupes c'est mettre une police et en Italic et (si possible) autre couleur.

le même cadre pour les images, comme sa, pas autant de chichi merci

[Lixyr]

1) Okay, alors déjà pour les images pour les titres des onglets, tu fais comme ça :

<li id="o_1" class="mon_onglet_selected" onmouseover="changeOnglet(this);"><img src="URLDELIMAGE" /></li>

ainsi pour tous les onglets.


2) Ensuite, pour la description de tes groupes, tu fais comme ça :

Code:

<div class="descriptiongroupe">BLABLA TA DESCRIPTION DE GROUPE</div>

et dans le css tu mets :

Code:

.descriptiongroupe {
font-style:italic;
font-family:Georgia;
}


tu peux modifier la valeur Georgia, par la police que tu veux.

3) Ensuite, pour les cadres des images, tu fais comme ceci :

Code:

<img src="URL DE LIMAGE" class="cadreimage" />

et dans le css :

Code:

.cadreimage {border:2px solid blue;"}

et tu changes les valeurs
2, solid, et blue par ce que tu veux.

[la_blonde2510]

Yeah, c'est super, pour le moment on voit que c'est en construction ^^

http://fofodessaie.forumactif.com/

Voila le forum sur lequel j'essaye le QEEL, seulement l'écriture est fort grande, c'est normal?

et il y à aussi les • qui sont dans le chemin, ont sait les enlever sa?

[Lixyr]

Oui. ^^ Et le plus dur est fait.

Normalement, les ronds ne devraient pas être visibles, puisqu'il y a un

Code:

  ul, li{
      list-style: none;}


Regarde dans ton css s'il n'y aurait pas un code dans le même genre.
Pour les écritures, tu peux modifier la taille avec ce code :

Code:

font-size:12px;

que tu rajoutes dans

.mon_onglet et .mon_onglet_selected
si c'est pour les onglets

et dans .mon_contenu
si c'est pour le contenu des onglets.

[la_blonde2510]

Voilà, maintenant sa marche mais j'ai un message d'erreur dans ma fiche css, il me dit que j'ai :

Code:

Erreur détectée
Nous avons compté un nombre impaire de guillemets donc une chaine est mal fermée. Cela signifie que votre CSS risque de ne pas être valide et ne sera pas affiché correctement sur votre forum.

Nous vous conseillons de relire votre code.

[Lixyr]

Ah oui, ce sont les balises de commentaires. Tu dois avoir un -, un / ou quelque chose en trop.
Il faut tout recompter ou tout enlever et tout remettre. ^^

[la_blonde2510]

Ouh trouvé !! y'avait un " en trop après avoir changer la couleur du cadre.

Alors, ensuite il faut mettre une ligne pour séparé entre les deux cellules et en dessous de la légende des groupes

Ps: j'aimerai mettre en justifier aussi car sa déforme à chaque passage de l'onglet 1 à 2

[Lixyr]

Pour justifier, tu rajoutes

Code:

text-align:justify;

Pour séparer, tu peux mettre des <hr>, des images, ou des border. En sachant que le border prend la taille ou la hauteur de toute la cellule, tu ne peux pas avoir qu'un demi-trait. Pour ça, il faut passer par l'image.

[la_blonde2510]

Euh, je met ou <hr> exactement?

[Lixyr]

Alors les <hr>, ça ne marche qu'à l'horizontal.

Tu peux les mettre juste avant les fermetures des cellules, et tu mets un retour à la ligne après, comme ceci :

Code:

<hr><br /></td>

fais attention de ne pas mettre deux </td>
Le mien dans le code c'est juste pour l'exemple.

tu peux aussi les mettre juste après une ouverture de cellule. Comme tu veux.

[la_blonde2510]

Voila on sait pas faire une qui sépare comme sur mon exemple? Verticalement?

[Lixyr]

Et bien j'ai déjà essayé de créer une balise du même style que la hr mais en inversant les données entre le width et le height, mais le height n'est pas pris en compte.
Et les codes (LE code) donné sur Internet ne fonctionne pas.

Donc il faut utiliser un border, ou passer par une image.