Pa en tableau expliquation.

[shirabi]

Bonjour,voilà je voudrais qu'on m'explique petit à petit comment obtenir ça:

Shéma:

, donc il y à des infos bulles, et j'aimerais tout comme sur le shéma en faite, que les infos bulle ce place toujours à l'extérieur pour que ça fasse plus jolie.
Donc voilà j'espère que quelqu'un pourra m'expliquer ça :3.

Cordialement.

Edit modération: Déplacé dans la bonne section

[shirabi]

Up ^^

[shirabi]

up ^^

[shirabi]

up ^^

[shirabi]

up

[shirabi]

Personne ne sais comment faire?

[kheino]

Salut Shirabi,

C'est en fait du html pour le tableau de base et du css pour le reste.

As-tu déjà essayé quelque chose ne serait-ce qu'au niveau du tableau ?
Il y a beaucoup de tutos de tableaux ici, même une astuce de tableau à onglets, sans parler de la quantité de tutos pour les infobulles.

Je veux bien t'aider, mais sur la base de quelque chose et là où tu bloquerais...

[shirabi]

Oui j'en n'est vus beaucoup mais que j'ai beaucoup essayer mais je suis pas très douer, sa ne s'approchais jamais de ce que je voulais et surtout que normalement c'est soit un tableau normal avec les infobulle ou sans ou soit avec onglet et moi c'est un truc avec onglet et les autres sans, et j'ai beau chercher je n'est pas trouver comment mettre un cadre automatique au tour d'une image. >.< compliquer tous sa a dire.

[shirabi]

UP ^^

[kheino]

Salut Shirabi,

Si tu avais essayé de faire un tel tableau, tu saurais que ça ne se pond pas en un jour quand on ne dispose que d'une paire d'heures en moyenne par jour sur l'ordi, par faute de cours...
Le HTML va encore, mais ensuite il faut tout imbriquer dans un seul tableau avec le CSS.
Mais j'y suis, ne t'inquiète pas.

[shirabi]

Bonjour,

Je sais que cela ne se fait pas en 3/4 d'heures, et j'y est passer plusieurs heures, mais j'ai tendance à oublier plein de balise et les tableaux ne ressemble à rien, car pour les largeures et hauteurs je ne sais pas ou les placer, et la feuille de Css me passe au-dessus de la tête, et en suivant les tuto de forumactif, il parle tous d'un cas bien précis et souvent pas très détailler, c'est souvent du style "mes ça dans la description de la page d'accueil et ça dans la css" bref sa n'explique en rien, et je n'est pas trouver de tuto fait par un membre du staff de ForumActif qui serais déjà surement plus détailler et général.
En recherchant sur internet cette fois les tuto était pas vraiment des tutos, ce que je trouvais c'était le nom des balises uniquement, et en aucun cas comment les mettres. donc voilà ^^.
merci encore de t'occuper de moi.

[kheino]

Bon, j'ai déjà de quoi t'occuper pour un moment...

Avec les tableaux, il faut en fait résonner comme pour structurer un quartier, ou une maison (un peu comme ton schéma, très bien fait celà dit)...
le quartier (table grand) qui contient :
des pâtés de maisons (table intermédiaire moyen) qui contiennent chacun :
des maisons (table ou div petit) qui elles contiennent chacune :
plusieurs niveaux (lignes=row=tr) qui elles contiennent chacune :
plusieurs chambres (colonnes=cellules=col=td)

Le reste est de l'agencement (HTML + CSS) et de la décoration (CSS).

OK, nous allons créer un grand tableau principal qui contiendra les autres divers tableaux et blocs (div).
Comme dit plus haut, ce n'est pas sorcier, mais il faut avancer selon le plan et méticuleusement.
Le premier tableau, n'a rien de spécial si ce n'est qu'il définit les dimensions d'ensembles qu'aura le tout.

Ce qui importe dans ce premier tableau, ce sont les colonnes-cellules (à partir de là tu verras plus haut à ça correspond en termes balises).
Ces td principales il y en a quatre.
Ce tableau principal ne contient que deux lignes "tr" principales : Une pour le titre et une autre pour les autres tableaux.
Ceux sont elles qui comporteront les différentes sections des différents tableaux.

Dans le code qui va suivre, tu vas comprendre plus facilement aussi grâce au attribut "class" reporté dans le CSS et que je développerai plus bas.
Pour que tu comprennes mieux (et que je me repère aussi mieux), des couleurs selon ton schéma ont été attribuées, mais tu les personnaliseras à ton goût.

Tout d'abord le HTML :

Code:

<script type="text/javascript" src="http://fb-testing.forumactif.com/11725.js"></script> <!-- tablo onglets -->

<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr>
<td colspan="4" align="center" valign="middle"><div class="titlone">TITRE</div></td></tr>
<tr>
<td>
<table class="secondone"><tr><td colspan="2" valign="top" align="center"><span class="titlone2">STAFF</span></td></tr>
<tr><td><div class="littlone">100*100<br />/</div></td><td><div class="littlone">100*100<br />/</div></td></tr>
<tr><td><div class="littlone">100*100<br />/</div></td><td><div class="littlone">100*100<br />/</div></td></tr>
<tr><td><div class="littlone">100*100<br />/</div></td><td><div class="littlone">100*100<br />/</div></td></tr>
</td></tr></table>
</td>

<td valign="top" width="40%">
<table style="margin: auto; width: auto; height: auto; margin: 0 4px 0 4px;" class="thirdone"><tr><td style="padding-bottom: 4px;" align="center"><div id="mes_onglets">
<span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</span>
<span id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</span>
</td></tr>
<tr><td><div class="clear"><div id="mes_contenus" style="text-align: justify;"><div id="co_1" class="mon_contenu">Cumque pertinacius ut legum gnarus accusatorem flagitaret atque sollemnia, doctus id Caesar libertatemque superbiam ratus tamquam obtrectatorem audacem excarnificari praecepit, qui ita evisceratus ut cruciatibus membra deessent, inplorans caelo iustitiam, torvum renidens fundato pectore mansit inmobilis nec se incusare nec quemquam alium passus et tandem nec confessus nec confutatus cum abiecto consorte poenali est morte multatus. et ducebatur intrepidus temporum iniquitati insultans, imitatus Zenonem illum veterem Stoicum qui ut mentiretur quaedam laceratus diutius, avulsam sedibus linguam suam cum cruento sputamine in oculos interrogantis Cyprii regis inpegit.</div><div id="co_2" class="mon_contenu" style="display: none; text-align: justify;">Quaestione igitur per multiplices dilatata fortunas cum ambigerentur quaedam, non nulla levius actitata constaret, post multorum clades Apollinares ambo pater et filius in exilium acti cum ad locum Crateras nomine pervenissent, villam scilicet suam quae ab Antiochia vicensimo et quarto disiungitur lapide, ut mandatum est, fractis cruribus occiduntur.</div>
</div></div></div>
</td></tr></table>
</td>

<td>
<table class="secondone"><tr><td colspan="2" valign="top" align="center"><span class="titlone2">PREDEFINI</span></td></tr>
<tr><td><div class="littlone">100*100<br />/</div></td><td><div class="littlone">100*100<br />/</div></td></tr>
<tr><td><div class="littlone">100*100<br />/</div></td><td><div class="littlone">100*100<br />/</div></td></tr>
<tr><td><div class="littlone">100*100<br />/</div></td><td><div class="littlone">100*100<br />/</div></td></tr>
</td></tr></table>
</td>

<td width="25%" valign="top">
<table class="thirdone"><tr><td align="center"><span class="titlone2">LES AMIS</span><br /></td></tr>
<tr><td>
texte texte texte texte<br />
texte texte texte texte<br />
texte texte texte texte<br />
texte texte texte texte<br />
</td></tr></table>
<table class="thirdone"><tr><td align="center"><span class="titlone2">CREDITS</span><br /></td></tr>
<tr><td>
texte texte texte texte<br />
texte texte texte texte<br />
texte texte texte texte<br />
texte texte texte texte<br />
texte texte texte texte<br />
texte texte texte texte<br />
texte texte texte texte<br />
texte texte texte texte<br />
texte texte texte texte<br />
texte texte texte texte<br />
texte texte texte texte<br />
texte texte texte texte<br />
</td></tr></table>

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


La première balise et le rappel du js pour le tableau à onglet et nous y reviendrons plus tard.

Comme promis, tu as 4 blocs de codes et les dernières fermetures tu tableau principal.
- Dans la première ligne-tr, la première cellule-td comporte la propriété colspan="4" qui veut dire que cette cellule est fusionnée avec les 3 autres cellules que contient la ligne-tr pour le titre, et avec un bloc-div.
Ce bloc reçoit le class="titlone" pour gérer par le CSS avec cet identifiant (en bleu) tout ce qui concerne le titre principal :

div.titlone {
color: black;
font-size: 16px;
font-weight: bold;
font-style: italic;
background: #dbd2d2;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
border-radius: 13px;
padding: 4px;
margin-bottom: 7px;
}

Le bloc, la cellule et la ligne sont refermés.

- La prochaine ligne contient elle aussi la première cellule du corps du tableau.
Cette cellule comporte aussi un tableau plus petit qui sera le premier à gauche selon ton schéma.
Le class="secondone" est pour dire (dans mon jargon hein) que c'est le deuxième tableau hiérarchiquement parlant, et donc il revient plus loin dans la ligne-tr.
Dans le CSS c'est tout ce qui gérera la table, le fond de ce tableau (toute cette cellule est dupliquée dans la troisième colonne-td, tant en html qu'en CSS) :

.secondone {
background: #dbd2d2;
border: 3px solid #948e8e;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
-htm-border-radius: 13px;
-o-border-radius: 13px;
border-radius: 13px;
padding: 5px;
padding-top: 0px;
}

- Ce "deuxième" tableau a lui aussi 4 lignes (la première fusionnant deux cellules pour le titre) et deux colonnes chacune, qui contiennent des blocs-div avec le class class="littlone", sous-entend petites cellules, repris dans le CSS ;

.littlone {
background: #81e300;
width: 100px;
height: 100px;
color: black;
border: 3px solid #000000;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
-htm-border-radius: 13px;
-o-border-radius: 13px;
border-radius: 13px;
padding: 3px;
margin-top: 5px;
}

Ce qu'il faut bien appliquer dans les tableaux en contenant d'autres et d'autres blocs, etc, ce sont les fermetures de balises dans la hiérarchie des ouvertures.

Voilà pour la première partie, tu peux maintenant la personnaliser et je reviens avec la suite.
Garde peut-être les mêmes identifiants dans un premier temps, histoire que nous y retrouvions, mais après tu peux bien sûr donner n'importe lequel dès le moment où ça correspond ensuite au css.

[kheino]

Sorry, j'ai corrigé le code html, il y a eu un mélange de blocs... /-:

Quant aux infobulles, tu voudrais qu'elles s'ouvrent par le over du curseur et sur les deux dernières images des deux tableaux, c'est bien ça ?

[shirabi]

Beau tutoriel d'abors, après voilà j'ai lus 5 ou 6 fois tout ça:

-Dans le html je tout sauf le début:

Code:

<table width="100%" border="0" cellspacing="0" cellpadding="0">

Si je me trompe pas width=largeur border= bord/contour. Mais cellspacing et cellpadding servent à quoi?

- Pour le Css je viens de trouver ce qui me déranger surtout, car moi quand je le mettais, je ne méttais pas de titre comme "littlone" dans mon html et c'est grâce à sa que le Css c'est ce qu'il doit modifier en faite.

Bon après il faut que je révise mes code css car les

Code:

-moz-border-radius: 13px;
-webkit-border-radius: 13px;
-htm-border-radius: 13px;
-o-border-radius: 13px;
border-radius: 13px;
padding: 3px;
margin-top: 5px; etc...

ne viennent pas tout seul et je ne conner pas tous leur définition bien que certains soient évident.
En faite je viens de remarquer qu'un tableau est surtout une grande répétition pour la structure.

Merci encore.

[shirabi]

Désoler du double poste j'écrivais en même temps que toi,
Pour les info bulle je les aimerais sur le coté de l'image sur la qu'elle passe la souris à droite pour les image de droite et a gauche pour celle de gauche, pour éviter de cacher les autres. Donc en overmouse (au passage de la souris si je me trompe pas).

[kheino]

Pour les radius (angles arrondis), je n'ai pas enlever mon charabia, mais en fait ces trois lignes suffisent :

-moz-border-radius: 13px; /*pour FF*/
-webkit-border-radius: 13px; /*pour Safari, Google Chrome*/
border-radius: 13px; /*pour Opera et je ne sais plus encore lesquels*/

Je pense que pour la répétition là c'est bon. J'avais mal surligné en remettant le code.

[shirabi]

Encore un nouveau truc à savoir et utile car c'est vrai que des fois on voit pas pareil avec des navigateurs différents ^^.
Merci encore

[kheino]

Mais cellspacing et cellpadding servent à quoi?

Comme ça l'indique en anglais :
- cellspacing est l'espace entre les cellules
- cellpadding est l'espace dans le contenant ,entre le contenu et les bords

[shirabi]

Ah d'accord merci^^

[shirabi]

Du nouveau ou toujours pas ? ^^

[kheino]

Es-tu prêt pour la suite ?

Nous allons d'abord nous occuper des bu-bulles avant de terminer par le tableau à onglets, dont le tuto est ici (modèle1).
Je l'ai déjà modifié quelque peu avec du CSS, mais si tu préfère prendre le modèle2, libre à toi, tant que tu respectes la structure du tableau et de ses divisions.

Pour ce qui est des bu-bulles, c'est assez compliqué à expliqué, mais je le ferai volontiers plus tard, dès que j'ai le temps.
Tu peux volontiers préparer ta liste de questions, c'est parfois plus simple à expliquer que moi et mes pavés ! (-:


Alors dans le code-html des deux dernières petites "cases" vertes de chaque tableau (celui a gauche et celui à droite) contenant chacun 6 petites "cases" vertes, nous allons ajouter ces deux bu-bulles.
Sachant que je parle de "cellule" en disant "case", tu sais donc aussi qu'il s'agit de, de...
OUI, de td ! (vous avez gagné une barre de chocolat !), cette balise de tableau qui contient TOUT.

Celles qui nous intéressent sont les deux de la dernière lignes, donc la troisième balise... OUI tr ! (en pleine forme notre candidat !)
Surligne juste de la première balise-td jusqu'à la première balise/td de fermeture et colle à la place :

Code:

<td><span class="profilbullel"><div class="littlone">100*100<br />/</div><br />
<span><div class="bulimg" align="center">180*200<br />/</div><br /><div class="infobul" align="left">Nom<br />Rôle</div><div  class="infobulink" align="right"><a href="page-profil" target="_blank">Profil</a> / <a href="page-mp" target="_blank">MP</a></div></span></span><br /></td>

La deuxième vient juste à la suite, exactement la même chose à remplacer sauf que la grande infobulle devra avoir un autre identifiant lui commandant d'aller sur la droite et non sur la gauche comme la première.
Pour le deuxième"td" :

Code:

<td><span class="profilbuller"><div class="littlone">100*100<br />/</div><br />
<span><div class="bulimg" align="center">180*200<br />/</div><br /><div class="infobul" align="left">Nom<br />Rôle</div><div  class="infobulink" align="right"><a href="page-profil" target="_blank">Profil</a> / <a href="page-mp" target="_blank">MP</a></div></span></span><br /></td>

Et exactement pareil dans l'autre tableau à droite.

Dans le CSS, c'est un grand code, parce que les bu-bulles gauche et droite doivent agir de manière différente, alors même si elles sont identiques quant à leur apparence et la plupart de leurs propriétés , elles doivent avoir leur propre identifiant et reprendre les autres propriétés communes :
C'est pourquoi dans la cellule de gauche tu trouves : class="profilbullel" [/color]l pour "left"
dans celle de droite : class="profilbuller" [/color]r pour "right"

Et tu les retrouves ici dans le CSS :

Spoiler:

Je pense qu'avec les identifiants dans le html reportés dans le css, tu devrais plus ou moins comprendre ce qui agit et sur quoi...
En ce qui concerne les propriétés de l'emplacement, franchement je l'ai fait à vue...
Il y a un moyen de calculer cela géométriquement, mais là je suis quelque peu débordée par mon boulot de cours.
Il ne faut pas hésiter à poser des questions à "Google mon ami", on y trouve beaucoup d'explications pour avancer seul (si j'y ai réussi, n'importe qui le peut, je te le garantis !).

Mais encore une fois, n'hésite pas à poser tes questions.

Il ne restera plus que le tableau à deux onglets...


PS : Désolée pour les fautes, je ne peux pas rééditer sous peine de perdre des balises comme les "br /".

[shirabi]

Bon j'ai touché au html avec les codes et tout semble fonctionner, mais comme le but est d'apprendre avant tout bah j'ai réfléchis avant d'agir!
Donc pour récapituler:

-

Code:

<td><span class="profilbullel"><div class="littlone">100*100<br />/</div><br />


Ce code est pour les images de staff de gauche et il sert aussi à afficher la petite image 100*100

Code:

<span><div class="bulimg" align="center">180*200<br />/</div><br /><div class="infobul" align="left">Nom<br />Rôle</div><div  class="infobulink" align="right"><a href="page-profil" target="_blank">Profil</a> / <a href="page-mp" target="_blank">MP</a></div></span></span><br /></td>

Celui-là est pour l'info bulle suite au passe de la souris.
(le principe est le même avec celui pour la droite).

La Css rien de bien compliqué, on met les nom puis tous les codes.
Pour l'instant tout vas bien!

Ps: si tu veux voir ce que ça donne sur mon forum test c'est ici en caché:

[kheino]

La Css rien de bien compliqué, on met les nom puis tous les codes.

En copier-coller en effet, rien de bien compliqué... :-P
Mais comme tu le dis si bien, le but est de comprendre.

Application immédiate, il y a deux choses qui pêchent sur ton forum :
La position des infobulles de gauche, sachant qu'elles sont plus difficiles à régler vu que nous devons appliquer une valeur négative...
Essaie peut-être de mettre en positif avec un margin-right et non le margin-left.

L'autre truc qui me dérange, c'est le décalage des différents tableaux en haut sous le titre principal.

La suite.
Comme le tuto de Isolde l'indique pour le tableau à onglets, il te faut mettre le js dans une page de gestion du javascript.
Rependre l'adresse de celle-ci et la mettre dans le premier script du message d'accueil là où je l'ai indiqué.

Concernant ces deux codes HTML (le tableau à onglets et le dernier à droite), il faut que tu les recopie-colle, parce que je crois que j'ai modifié des identifiants (ou bien j'ai simplifié plutôt).

Donc voici tout le HTML et tout le CSS en beau et en propre :

Code:

<script type="text/javascript" src="http://fb-testing.forumactif.com/11725.js"></script> <!-- tablo onglets -->

<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr>
<td colspan="4" align="center" valign="middle"><div class="titlone">TITRE</div></td></tr>
<tr>
<td>
<table class="secondone"><tr><td colspan="2" valign="top" align="center"><span class="titlone2">STAFF</span></td></tr>
<tr><td><span class="profilbullel"><div class="littlone">100*100<br />/</div><br />
<span><div class="bulimg" align="center">180*200<br />/</div><br /><div class="infobul" align="left">Nom<br />Rôle</div><div  class="infobulink" align="right"><a href="page-profil" target="_blank">Profil</a> / <a href="page-mp" target="_blank">MP</a></div></span></span><br /></td>
<td><span class="profilbuller"><div class="littlone">100*100<br />/</div><br />
<span><div class="bulimg" align="center">180*200<br />/</div><br /><div class="infobul" align="left">Nom<br />Rôle</div><div  class="infobulink" align="right"><a href="page-profil" target="_blank">Profil</a> / <a href="page-mp" target="_blank">MP</a></div></span></span><br /></td></tr>
<tr><td><span class="profilbullel"><div class="littlone">100*100<br />/</div><br />
<span><div class="bulimg" align="center">180*200<br />/</div><br /><div class="infobul" align="left">Nom<br />Rôle</div><div  class="infobulink" align="right"><a href="page-profil" target="_blank">Profil</a> / <a href="page-mp" target="_blank">MP</a></div></span></span><br /></td>
<td><span class="profilbuller"><div class="littlone">100*100<br />/</div><br />
<span><div class="bulimg" align="center">180*200<br />/</div><br /><div class="infobul" align="left">Nom<br />Rôle</div><div  class="infobulink" align="right"><a href="page-profil" target="_blank">Profil</a> / <a href="page-mp" target="_blank">MP</a></div></span></span><br /></td></tr>
</td></tr></table>
</td>

<td valign="top" width="40%">
<table style="width: auto;" class="secondone"><tr><td style="padding-bottom: 4px;" align="center"><div id="mes_onglets">
<span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</span>
<span id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</span>
</td></tr>
<tr><td><div class="clear"><div id="mes_contenus" style="text-align: justify;"><div id="co_1" class="mon_contenu">Cumque pertinacius ut legum gnarus accusatorem flagitaret atque sollemnia, doctus id Caesar libertatemque superbiam ratus tamquam obtrectatorem audacem excarnificari praecepit, qui ita evisceratus ut cruciatibus membra deessent, inplorans caelo iustitiam, torvum renidens fundato pectore mansit inmobilis nec se incusare nec quemquam alium passus et tandem nec confessus nec confutatus cum abiecto consorte poenali est morte multatus. et ducebatur intrepidus temporum iniquitati insultans, imitatus Zenonem illum veterem Stoicum qui ut mentiretur quaedam laceratus diutius, avulsam sedibus linguam suam cum cruento sputamine in oculos interrogantis Cyprii regis inpegit.</div><div id="co_2" class="mon_contenu" style="display: none; text-align: justify;">Quaestione igitur per multiplices dilatata fortunas cum ambigerentur quaedam, non nulla levius actitata constaret, post multorum clades Apollinares ambo pater et filius in exilium acti cum ad locum Crateras nomine pervenissent, villam scilicet suam quae ab Antiochia vicensimo et quarto disiungitur lapide, ut mandatum est, fractis cruribus occiduntur.</div>
</div></div></div>
</td></tr></table>
</td>

<td>
<table class="secondone"><tr><td colspan="2" valign="top" align="center"><span class="titlone2">PREDEFINI</span></td></tr>
<tr><td><span class="profilbullel"><div class="littlone">100*100<br />/</div><br />
<span><div class="bulimg" align="center">180*200<br />/</div><br /><div class="infobul" align="left">Nom<br />Rôle</div><div  class="infobulink" align="right"><a href="page-profil" target="_blank">Profil</a> / <a href="page-mp" target="_blank">MP</a></div></span></span><br /></td>
<td><span class="profilbuller"><div class="littlone">100*100<br />/</div><br />
<span><div class="bulimg" align="center">180*200<br />/</div><br /><div class="infobul" align="left">Nom<br />Rôle</div><div  class="infobulink" align="right"><a href="page-profil" target="_blank">Profil</a> / <a href="page-mp" target="_blank">MP</a></div></span></span><br /></td></tr>
<tr><td><span class="profilbullel"><div class="littlone">100*100<br />/</div><br />
<span><div class="bulimg" align="center">180*200<br />/</div><br /><div class="infobul" align="left">Nom<br />Rôle</div><div  class="infobulink" align="right"><a href="page-profil" target="_blank">Profil</a> / <a href="page-mp" target="_blank">MP</a></div></span></span><br /></td>
<td><span class="profilbuller"><div class="littlone">100*100<br />/</div><br />
<span><div class="bulimg" align="center">180*200<br />/</div><br /><div class="infobul" align="left">Nom<br />Rôle</div><div  class="infobulink" align="right"><a href="page-profil" target="_blank">Profil</a> / <a href="page-mp" target="_blank">MP</a></div></span></span><br /></td></tr>
</td></tr></table>
</td>

<td width="25%" valign="top">
<table class="secondone"><tr><td align="center"><span class="titlone2">LES AMIS</span><br /></td></tr>
<tr><td align="center" class="fourthtext">
texte texte texte texte<br />
texte texte texte texte<br />
texte texte texte texte<br />
texte texte texte texte<br />
</td></tr></table>
<table class="secondone"><tr><td align="center"><span class="titlone2">CREDITS</span><br /></td></tr>
<tr><td align="center" class="fourthtext">
texte texte texte texte<br />
texte texte texte texte<br />
texte texte texte texte<br />
texte texte texte texte<br />
texte texte texte texte<br />
texte texte texte texte<br />
texte texte texte texte<br />
texte texte texte texte<br />
texte texte texte texte<br />
texte texte texte texte<br />
texte texte texte texte<br />
texte texte texte texte<br />
</td></tr></table>

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


CSS :

Spoiler:

Bien sûr tu peux poser tes questions.

EDIT : Voici ce que ça donnechez moi :

[kheino]

En fait cette différence d'écart avec le titre principal et les deux tableaux à infobulles, on peut le corriger en mettant aussi au deux grandes balises "td" qui les contiennent un :
valign="top" au deux :

Code:

<td valign="top">
<table class="secondone"><tr><td colspan="2" valign="top" align="center"><span class="titlone2">STAFF</span></td></tr>
<tr><td><span class="profilbullel">

[shirabi]

En effet c'est parfais, sauf que lorsque j'ia corriger la différence d'écart, le titre c'est réduit et c'est mit dans le coin gauche, mais grâce à ton tuto, j'ai sus quoi faire, il faillait que je mette à

Code:

<td colspan="4" align="center" valign="middle"><div class="titlone">TITRE</div></td></tr>

mettre td colspan="8" et la largeur du titre à repris tout le truc ^^, merci encore pour ce tuto qui ma été fort précieux.

ps: Je crois qu'on à fini non?

[kheino]

Pour le titre, tu as dû faire une erreur en voulant modifier, parce que le colspan, la fusion des colonnes, est bien de quatre et non de huit.
Le "valign="top" étaità mettre ici :

Code:

<td valign="top">
<table class="secondone"><tr><td colspan="2" valign="top" align="center"><span class="titlone2">STAFF</span></td></tr>
<tr><td><span class="profilbullel">

Attention avec les balises, leur fermeture, etc...
Il n'y a pas de raison sinon que le bins soit déstabiliser, à part l'erreur de codage.
C'est maintenant que tu commences ta part.
Si tu es attentif aux "class", aux propriétés CSS, etc, que tu relis le tuto, tout devrait bien se passer.

Encore une petite suggestion :
Modifie les paramètres les uns après les autres, en vérifiant bien. Ne touche pas à plusieurs codes à la fois, c'est le bon truc pour tout bousiller.
C'est un travail de précision, donc prends ton temps et reste concentré.
(-:

Oui, je pense aussi que nous avons terminé.

Je t'en prie et bonne soirée.