Faire une fiche de partenariat sofistiqué.

[La-Pouic-Team]

Bonjours,
J'ai remarquer que c'était très "tendance" de faire des fiches de partenariat que les forum RPG s'échange.
Mais je n'arrive pas à comprendre comme il font pour insérer des codes tel que des onglets, des tableau coloré etc. dans des messages !?
Comment peut-on crée des onglets par exemple sur un message ??

[La-Pouic-Team]

UP please :3

[Invité]

Salut,

Tu n'aurais pas un exemple ?

[La-Pouic-Team]

Coucou :3
Alors quelques exemple ... Voilà, trouvé !
http://crazy-d.1fr1.net/fiches-de-nos-partenaires-f23/slayers-hunters-t417.htm
http://crazy-d.1fr1.net/fiches-de-nos-partenaires-f23/a-new-beginning-t434.htm
Bon ça n'est pas terrible comme exemple f'in bon :S Des fois on vois des onglets sur certaine fiche... J'étais étonner d'en voir sur des messages normaux quoi !
Mais là tout de suite, je ne me souvient plus où je les ait vu :S

[Invité]

Pour faire ça il faut créer des tableaux en HTLM, ... J'ai pas trouvé de tuto qui explique ça sur le forum mais je sais qu'il y en a un très bon sur le forum CSSActif !

Ces difficiles de t'aider étant donné que je ne sais pas quel résultat tu souhaites obtenir exactement ... mais je te conseille vraiment le tuto de CSSActif

[La-Pouic-Team]

Ha ... Et comment le trouver ce tuto de CssActif exactement ? :S ( Désolé j'y connais rien moi xD)
Bah par exemple faire un tableau coloré banal c'est possible ? ( Peut-on faire des infobulle également ou pas à propos ? )

[Invité]

Voilà le forum dont je parle : http://www.css-actif.com/
Je vais essayé de t'expliquer comment faire un tableau classique.

Les balises qui servent à créer un tableau sans bordure sont celles-ci :

Code:

<TABLE> </TABLE>

Les balises qui servent à créer un tableau avec bordures sont celles-ci :

Code:

<TABLE BORDER> </TABLE BORDER>

Les balises qui servent à créer une ligne sont celles-ci :

Code:

<TR> </TR>

Les balises qui servent à créer une colonne sont celles-ci :

Code:

<TD> </TD>

Ces balises sont très importantes pour la construction du tableau !

Par exemple pour créer un tableau à 2 lignes & 2 colonnes le codes serait celui-ci :

Avec bordures :

Code:

<TABLE BORDER>
<TR><TD> Ton texte ici </TD><TD> Ton texte ici</TD></TR>
<TR><TD> Ton texte ici </TD><TD> Ton texte ici</TD></TR>
</TABLE BORDER>

Sans bordure :

Code:

<TABLE>
<TR><TD> Ton texte ici </TD><TD> Ton texte ici</TD></TR>
<TR><TD> Ton texte ici </TD><TD> Ton texte ici</TD></TR>
</TABLE>

Après à toi de bidouiller && personnaliser! Bon là on peut pas voir ce que ça donne parce que le HTLM est désactivé alors essaies ça sur ton forum.
Je t'ai donné les bases des bases là ^_^ && Je te conseille vraiment le tuto de CSSActif.

[La-Pouic-Team]

Humm ... Sauf que moi quand je met mon code ça s'affiche comme un code en faite ... C'est ça mon vrai problème en faite. La nature des codes et tout, je connais, mais le problème c'est comment les intégrer à un message normal ...

[Invité]

Le HTLM est activé ?

[Lixyr]

Okay, Pouic Pouic, Me voilà ! xD

Pas besoin de CSS Actif pour faire ça. C'est très simple. ^^

Il faut juste que tu dises ce que tu veux dans ta fiche partenariat.

Genre, par exemple, au départ, le titre, après le lien, le logo, etc etc

Après un tableau avec le titre dans la ligne du dessus, le contenu, etc etc.

Si tu pouvais, par exemple, faire un petit montage de ce qui viendrait par la tête. Et je te fais ça avec tuto expliqué. ^^

[La-Pouic-Team]

LOL comme on se retrouve x)
supernana >> Humm ... Je suppose vu que sur la page d'accueil ça marche très bien.

Lixyr >> Eh bien heuu comme ça je sais pas vraiment x) Par exemple heuu bin en tout premier le nom du forum évidement "United by the fate" puis heumm par exemple le contexte ou je sais pas ... F'in pour l'instant on a pas trop réfléchis à ce qu'on voulait y mettre, faut juste qu'on en fasse une quoi ...
Par exemple mettre des truc comme : tableau, bordure, ombre, pourquoi pas onglets etc.

[Lixyr]

Des onglets dans un message, ça va être dur pour toi comme il faut y intégrer du css. Ca va être une page extrêmement lourde. Je te propose les codes basiques dont tu peux directement intégrer l'aspect dans le code.

Les fiches dont tu as donné l'exemple, ce n'est que du html donc c'est tout à fait faisable.

Je vais t'envoyer quelques codes utiles, comme ça tu en auras déjà, et avec ça tu pourras réfléchir à ce que tu veux faire.

1) Les Cadres

• Un cadre normal :

On insère ça généralement dans un tableau :

<table style="border:1px solid red;"> <tr> <td>
CONTENUE
</td></tr></table>

Explications :

~> style, c'est ce qui te permet d'insérer du code css dans ton code html. Très pratique pour la suite.
~> En orange : le code css.
* Border, c'est la bordure du cadre. Ici je lui ai mis une épaisseur de "1", d'aspect "solid" : donc un simple cadre, de couleur "red" donc rouge.

• Un cadre Arrondis :

<table style="border: 1px solid red; -moz-border-radius: 8px; border-radius: 8px; -webkit-border-radius: 8px;">

Donc là on a le même cadre. Un cadre normal, d'épaisseur 1 et rouge.
Tu remarqueras que le code de l'arrondis est à la suite du code de la bordure. Il faut mettre les deux code entre les guillemets de la classe style: style="ICI; ICI; ICI; ICI;">
/\ Les codes sont séparés par un point majuscule. Pas par autre chose.

-moz-border-radius: 8px; (attention à ne pas oublier le trait d'union du début -)
border-radius: 8px;
-webkit-border-radius: 8px; (pareil)
=> c'est un code pour l'arrondis. Je te conseil de mettre les trois, parce que l'arrondis n'est pas visible sur tous les navigateurs (et d'ailleurs pas du tout visible sous Internet Explorer).
La valeur marque l'arrondis. Plus la valeur est élevée et plus l'arrondis est marqué. Ici il n'y a qu'une valeur, qui prend sur les quatre coins, mais tu peux par exemple mettre quatre valeurs pour déterminer chacun des coins, en partant dans le sens des aiguilles d'une montre :

border-radius: 8px 8px 8px 8px;

• Un cadre en pointillées :

<table style="border:1px dotted red;">
~> La valeur qui change ici, c'est le solid que j'ai changé en dotted. Ainsi, ici, tu auras un cadre d'épaisseur 1px, rouge en pointillet.

• Un cadre en tiret :

<table style="border:1px dashed red;">
~> La valeur qui change ici, c'est le solid que j'ai changé en dashed. Ainsi, ici, tu auras un cadre d'épaisseur 1px, rouge en tirets.

• Un cadre double (effet de deux cadres)

<table style="border:3px double red;">
~> La valeur qui change ici, c'est le 1px, qui change pour 3px, parce que le cadre double doit être d'épaisseur minimal de 3px pour être visible comme tel. Si tu mets moins tu ne verras qu'un simple cadre,
et solid que j'ai changé en double. Ainsi, ici, tu auras un cadre d'épaisseur 3px, rouge et double.

• Les cadres à effet de relief.

A la place de solid, tu peux mettre quatre autres valeurs, qui fonctionne avec 2px minimum :

* groove (effet de cadre en 3D)
* ridge (effet de cadre creusé)
* inset (autre effet de cadre creusé)
* outset (autre effet de cadre en 3D)

• Les cadres avec un fond de couleur.

<table style="border: 1px dotted red; background-color:pink;">

Je pense que tu connais déjà ce code.

Code:

background-color: +VALEUR DE LA COULEUR

2) Les Ombres

• URL ombrée

<a href="URL DE TON LIEN" class="postlink" style="color:black !important; text-shadow: 1px 1px 2px #A60000;">NOM DE TON LIEN</a>

~> style, on l'a déjà vu, je ne ré explique plus. :p
~> Le contenu en orange, ce sont les codes.
*color: c'est la couleur de ton lien
* text-shadow: l'ombre de ton lien. Les deux premiers chiffres correspondent au décalage de l'ombre par rapport au mot, vers la droite, et vers le bas. Le troisième chiffre c'est l'effet flou donné à ton ombre. Plus le chiffre est élevé et plus l'effet flou sera marqué, donc moins on pourra lire l'ombre. Et ensuite, c'est la couleur de l'ombre.

Évidemment, ça marche aussi sur des mots simples. Pas uniquement sur des liens. ^^

• Cadre ombré

Le code c'est

Code:


-moz-box-shadow: 3px 6px 9px red;
  box-shadow: 3px 6px 9px red;
-webkit-box-shadow: 3px 6px 9px red; 

C'est exactement la même explication que pour les liens ou mots ombrés, sauf que là, ça marche sur les cadre avec le terme

"box"

Exemple de code :

• cadre en pointillet + ombre :

<table style="border: 1px dotted red; -moz-box-shadow: 3px 6px 9px red; box-shadow: 3px 6px 9px red; -webkit-box-shadow: 3px 6px 9px red;">

• cadre en double, + arrondis + ombre + fond de couleur jaune :

<table style="border: 3px double red; -moz-border-radius: 8px; border-radius: 8px; -webkit-border-radius: 8px; -moz-box-shadow: 3px 6px 9px red; box-shadow: 3px 6px 9px red; -webkit-box-shadow: 3px 6px 9px red; background-color:yellow; ">

Donc évidemment, tout ceci se place dans un tableau, comme je le disais (je parle pour le cadre, hein)

Donc ça donne ceci :

<table style="TON CODE"> <tr> <td> TON CONTENU </td></tr></table>

Hop. Passons à autre chose.


3) La Liste Déroulante (exemple en image)

Code:

<form>
<label for="NOM ">TITRE DE TA LISTE</label>

<select onChange="location = this.options
[this.selectedIndex].value">
<option value="" selected>-- PHRASE QUI APPARAIT DANS LE CADRE --<option>
<option value="FIN DE TON URL">NOM DE TON CHOIX 1</option>
<option value="FIN DE TON URL">NOM DE TON CHOIX 2</option>
<option value="FIN DE TON URL">NOM DE TON CHOIX 3</option>
<option value="FIN DE TON URL">NOM DE TON CHOIX 4</option>
<option value="FIN DE TON URL">NOM DE TON CHOIX 5</option>
</select>
</form>

Bon pour ce code-là, ça dépend où tu le mets, mais comme c'est une fiche partenariat que tu veux, tu ne prendras pas compte de ce que je vais dire.

Alors je vais prendre mon exemple.
Moi j'utilise ce code dans ma page d'accueil pour t'envoyer à des endroits (partenariat, tops sites etc). Comme ils sont sur mon forum, sur la même page, je ne suis pas obligée de mettre tout l'URL. Juste, et très EXACTEMENT cette partie en rouge :

http://NOM DE MON FORUM.NOM DU DOMAINE.com/BLABLA/BLABLA/BLABLA

Mais j'ai bien dit ! Et j'ESPERE que personne ne dira que je ne l'ai pas expliqué, que ceci n'est valable que si le lien de renvoie est SUR LA MEME PAGE que la liste déroulante. SINON, il faut mettre tout le lien.
Donc toi Pouic Pouic, tu mets tout le lien, puisque les fiches partenariats vont sur d'autres forums (et sera certainement dans ta partie Partenariat).


4) La Barre de Défilement (un exemple de ce que c'est)

Celle-là, tout le monde la veut. x)

Code:

<div style="height: 100px; overflow:auto;">BLABLA</div>

C'est simple. Le contenu est dans un cadre. La div entoure le contenu.
Ce qui donne par exemple ceci :

<table style="border:1px solid red;"> <tr> <td><div style="height: 100px; overflow:auto;">
CONTENUE</div>
</td></tr></table>

Alors, explication du code :

~> height c'est la hauteur du contenu avec la barre de défilement. Plus la valeur sera petite et plus on verra de texte d'un coup. Plus la valeur est petite et moins on voit de texte d'un coup.
~> Overflow, je te conseille de ne pas y toucher, c'est pour savoir si la barre se met automatiquement ou si elle ne s'affiche pas. Mais comme ici le but c'est d'en avoir une... xD


4) Le Titre du Cadre dans la Bordure Haute du Cadre (exemple dans les liens cités dans tes exemples, pouic pouic)

Code:

<blockquote><FIELDSET style="border:#514554 3px solid; width: 400px;">
<LEGEND><font color="#7F6BBF">TITRE</font></LEGEND>

CONTENU

</LEGEND>
</FIELDSET></blockquote>

Tu vas reconnaitre une partie du code (enfin j'espère) :

<FIELDSET style="border:#514554 3px solid; width: 400px;">

C'est l'aspect du cadre. Tu connais maintenant.

width: c'est la largeur du cadre.
Tu peux également définir sa hauteur avec

Code:

height:

<LEGEND><font color="#7F6BBF">TITRE</font></LEGEND>

C'est la Partie Titre qui se trouve dans la bordure haute du cadre.

<font color="#7F6BBF"> indique la couleur du titre.


Voilà Voilà.

4) La mise en tableau

Dans ensuite comme le disait Supernana, le mieux c'est de mettre ton contenu dans un tableau.

<table> c'est la bordure du tableau
<tr> c'est une ligne
<td> c'est une colonne

Un tableau contient plusieurs lignes.
Une ligne peut contenir plusieurs colonnes.

/\ Il faut un même nombre de colonne pour chaque ligne, SINON ton tableau ne ressemblera à rien.
On peut bien évidemment fusionner des lignes ou des colonnes, mais ça je t'apprendrai plus tard, quand tu auras déjà saisi le principe d'un tableau simple.


Alors le contenu se met entre les cellules.

Il ne faut pas OUBLIER de refermer les balises. Sinon le tableau déformera tout ton forum puisque le forum est un GRAND tableau.

Comme ceci :

Code:

<table>
  <tr>
      <td> CONTENU ligne 1 cellule 1 </td>
      <td> CONTENU ligne 1 cellule 2 </td>
  <tr>
  <tr>
      <td>  CONTENU ligne 2 cellule 1 </td>
      <td> CONTENU ligne 2 cellule 2 </td>
  </tr>
</table>

Voilà un tableau de deux lignes, et pour chaque ligne deux cellules, soit un total de quatre cellules.

Il peut y avoir autant de ligne et de cellule que tu veux, tant qu'il y a le même nombre de cellule à chaque ligne.

Pour centrer les contenu, tu insères ton code dans une classe style, comme pour les classes précédents, que tu incorpores dans tes cellules. Comme ceci :

Code:

<td style="CODE; CODE; CODE;">  BLABLA CONTENU </td>

En code tu peux mettre par exemple :

text-align:center;
Pour centrer le contenu

color:red;
Pour mettre le contenu en rouge (ou autre couleur)

font-size:16px;
Pour choisir la taille du contenu

etc. Mais /^\ ceci aura effet sur le contenu de toute la cellule, pas que sur un seul mot ou une seule phrase. Donc choisis bien ton codage dans la cellule.



5) Régler les tableaux et les cadres

Ensuite, pour que ce soit plus esthétique, tu peux régler les tailles (largeur et hauteur).

La largeur se règle avec :

Code:

width: 10px;

La hauteur avec :

Code:

height: 10px;

Pas forcément 10px, c'est toi qui choisira.
Tu incorpores ces codes dans les

Code:

[i]style[/i]="CODE; CODE; CODE"

exemple :

<table style="width: 50px;height: 80px;">

Voilà. Ai-je rien oublié ??
Tu vas t'en sortir ?? [list=1][*]

[La-Pouic-Team]

Oulalala O.O
Je le lirais plus attentivement ce week ( Vacannnnces * Baaave * O.O) à tête reposé parce que là j'avoue que 'jai pas le courage de réfléchir ce soir --' (F'in pour réfléchir faut avoir un cerveau, alors je sais pas si le mot est bien adapté ...)
Bref, d'ici là, soyez gentil de ne pas le corbeiller *.*
Et merci beaucoup Lyxir pour cette superbe explication *.*

[Lixyr]

Ben je up, alors, parce que j'ai mis du temps à le faire ce petit tuto. ^^

[La-Pouic-Team]

T'inquiète pas, je laisserais pas tombé comme ça heein ! Au pire je le mettrais en résolut sinon

[Lixyr]

Okay. ^^ Mais si jamais tu as une question, un problème ou autre, n'hésite pas à demander, hein ! ^^

[La-Pouic-Team]

T'inquiète pas, vu comme je suis débile, j'aurai sans doute plein de question ^^'

[La-Pouic-Team]

Oui mais non ... C'est toujours le même problème, regarde ce que ça me fait moi quand je met un code par exemple:

[Invité]

Le HTLM est-il bien activé partout ?

[La-Pouic-Team]

Comment peut-on le savoir ...... ? ( LOOL * I am nullisime * )

[Invité]

Alors, d'abord dans le panneau d'administration il faut voir si la ligne Autoriser le HTML est cochée à Oui. Pour ça :

Panneau d'administration Général Messages & Emails Configuration.

&& Vérifies aussi que dans ton profil, dans la partie Préférences, la ligne Toujours autoriser le HTML est cochée Oui.

[La-Pouic-Team]

Ha oui, voilà, c'est ça qu'il me manquait (I)
Merci beaucoup, maintenant je vais pouvoir un peu mieux comprendre le message de Lixyr xD
Ha aussi, vous connaitriez pas le code pour faire une sorte de titre surexposé sur l'autre ? j'ai pas d'exemple la tout de suite, mais je peux toujours chercher ...

[Lixyr]

Un code qui surexpose des titres ? oO
Si, il me faut un exemple !

[Invité]

Ce code devrait faire l'affaire !(?)

Code:


<div style="TEXT-ALIGN: center" align=center><SPAN style="FONT-FAMILY: georgia"><FONT face=Georgia size=7><blockquote>
[color=#353232]Mot[/color]
[color=#6d6969]Deuxième mot[/color]</FONT></SPAN></div>

[La-Pouic-Team]

Huum oui d'accord, mais il n'y aurait pas un moyen de le faire allé par exemple plus sur la droite ou plus sur la gauche ou de le rendre plus transparent un truc comme ça ?

[Lixyr]

Euh je ne comprends pas l'effet voulu du code. D'autant plus qu'il y a des erreurs dedans. ^^

Ca donnerait plus ceci :

Code:

<div style="text-align: center;"><span style="font-family: georgia;font-size:15px;"><blockquote>
<font color="#353232">Mot</font>
<font color="#6d6969">Deuxième mot</font></blockquote></span></div>

[La-Pouic-Team]

L'effet voulut du code c'est de faire une sorte de titre avec le nom du forum et sa traduction superposé un peu dessous, mais il faut que ce soit lisible quoi :S
Là le problème c'est que les deux textes ne sont pas du tout superposer.
Sinon merci beaucoup pour votre super longue explication, ce week j'ai fait joujou avec tous les codes, ça marche super bien A priori j'ai pas rencontrer de problème pour l'instant ^^

[Lixyr]

Ouah ben j'ai rien trouvé pour ce code ... : x
Je ne sais pas si tu peux, même avec le float ... hum ...

[La-Pouic-Team]

C'est bizarre je crois avoir déja vu ce genre de truc >.< ( F'in en tout cas jl'ai pas inventé hein xD )
Bon bah peut importe je vais mettre en résolu, merci beaucoup pour tout :D:D