Un titre

Désolé de vous bombarder comme ça, mais au moins je sais que j'ai du bon service rapide ici! Désolée si j'ai pas le droit de créer un nouveau sujet @w@

J'essaye de coder une PA pour le même forum. Je vais avouer que je suis assez fière de ce que ça donne jusqu'à maintenant, sachant que je pars carrément de zéro. Néanmoins, il y a beaucoup de problèmes, et il y a un aspect que je veux créer qui m'est totalement inconnu.

Je m'en remets donc à vous une fois de plus!

Alors déjà, la PA est en construction sur un de mes forums de test, ici

Comme vous pouvez voir, c'est une PA à onglets.
Je vous montre mon schéma de base, ça pourrait vous aider à m'aider
https://2img.net/r/ihimizer/img268/8237/pa1l.png ( réalisé )
et voici les aspects des trois onglets
https://2img.net/r/ihimizer/img593/9987/pa2w.png ( réalisé )
https://2img.net/r/ihimizer/img819/6986/pa3b.png ( besoin d'aide à ce niveau >< )
https://2img.net/r/ihimizer/img806/4092/pa4r.png ( je ne mets pas le cadre de droite finalement, mais bug un peu )

Les problèmes

Va savoir pourquoi, le cadre des animations se retrouve dans les autres onglets oO
J'aurais besoin d'aide pour coder le second onglet. J'aimerais qu'en survolant les images à gauche, une description sur le personnage apparaisse dans le cadre à droite, mais j'ai aucune idée des codes à utiliser dans ce genre de situations...

Voici donc la partie du CSS reliée à la PA

Code:: /*PA ONGLETS*/
.title_cat
{
margin-top: -1px;
margin-left: 1px;
background-color: #0d3a47;
color: #FFFFFF;
font-weight: bold;
font-size: 18px;
height: 21px;
width: 100%;
font-variant: small-caps;
font-family: Trebuchet MS;
text-align: left;
align: top;
padding: 1px;
border-bottom: 1px dotted #FFFFFF;
}
.title_cat2
{
margin-top: -1px;
margin-left: 1px;
background-color: #03171c;
color: #FFFFFF;
font-weight: bold;
font-size: 18px;
height: 21px;
width: 100%;
font-variant: small-caps;
font-family: Trebuchet MS;
text-align: left;
align: top;
padding: 1px;
border-bottom: 1px dotted #114d5e;
}
.credits
{
color: #FFFFFF;
font-size: 10px;
font-variant: small-caps;
font-family: Trebuchet MS;
margin-bottom: 2px;
margin-right: 4px;
}
.tableau_gauche
{
width: 190px;
height: 500px;
font-family: Trebuchet MS;
border-left: 1px solid #1b718b;
border-right: 1px solid #1b718b;
border-top: 3px solid #1b718b;
border-bottom: 3px solid #1b718b;
margin-left: 1px;
overflow: hidden;
}
.text_gauche
{
color: #FFFFFF;
font-size: 10px;
font-family: Trebuchet MS;
font-variant: small-caps;
margin-left: 5px;
margin-right: auto;
}
.palinks1{
font-weight: bold;
font-size: 14px;
font-variant: small-caps;
font-family: Trebuchet MS;
letter-spacing: 0px;
text-align: left;
color: #FFFFFF;
}
.palinks1:hover{
font-weight: bold;
font-size: 14px;
font-variant: small-caps;
font-family: Trebuchet MS;
letter-spacing: 0px;
text-align: left;
color: #7fd8f0;
}
.tableau_droite
{
width: 190px;
height: 500px;
border-left: 1px solid #1b718b;
border-right: 1px solid #1b718b;
border-top: 3px solid #1b718b;
border-bottom: 3px solid #1b718b;
margin-left: 1px;
font-family: Trebuchet MS;
overflow: hidden;
}
.tableau_center
{
width: 650px;
height: 440px;
border-left: 1px solid #1b718b;
border-right: 1px solid #1b718b;
border-top: 3px solid #1b718b;
border-bottom: 3px solid #1b718b;
font-family: Trebuchet MS;
overflow: hidden;
}
.tableau_bottom
{
width: 650px;
height: 50px;
border-left: 1px solid #1b718b;
border-right: 1px solid #1b718b;
border-top: 3px solid #1b718b;
border-bottom: 3px solid #1b718b;
font-family: Trebuchet MS;
overflow: hidden;
}
.paonglet
{
display:inline-block;
align: center;
padding:10px;
cursor:crosshair;
font-family: Trebuchet MS;
width: 198px;
margin-left: -2px;
margin-right: -2px;
background-color: #0d3a47;
color: #ffffff;
}
.paonglet_0
{

}
.paonglet_1
{
background-color: #03151a;
width: 198px;
cursor: crosshair;
font-family: Trebuchet MS;
margin-left: -2px;
margin-right: -2px;
color: #ffffff;
border-bottom: 1px dotted #FFFFFF;
}

.contenu_paonglet1
{
margin-top:-1px;
padding: 2px;
display:none;
width: 650px;
height: 390px;
background-color: #000000;
background: url(http://img703.imageshack.us/img703/126/fondpa1.png) no-repeat;
font-color: #C0BAC2;
border: 1px solid #1b718b;
}
.contenu_paonglet2
{
margin-top:-1px;
padding: 2px;
display:none;
width: 650px;
height: 390px;
background-color: #000000;
background: url(http://img842.imageshack.us/img842/5382/fondpa2.png) no-repeat;
font-color: #C0BAC2;
border: 1px solid #1b718b;
}
.contenu_paonglet3
{
margin-top:-1px;
padding: 2px;
display:none;
width: 650px;
height: 390px;
background-color: #040206;
background: url(http://img685.imageshack.us/img685/2486/fondpa3.png) no-repeat;
font-color: #C0BAC2;
border: 1px solid #1b718b;
}

.paonglet
{
display:inline-block;
align: center;
padding:10px;
cursor:crosshair;
font-family: Trebuchet MS;
background-color: #0d3a47;
color: #fff;
}
.paonglet_0
{
}
.paonglet_1
{
color: #9F0000;
background-color: #0a303b;
}

.contenu_paonglet
{
margin-top:-1px;
padding: 2px;
display:none;
height: 320px;
}

/*PARTENAIRES*/
div.cssactif_tableaupartenaire {
width: 208px; /* À adapter en fonction du nombre de colonnes désirées (typiquement: (NOMBRE_COLONNE * (2*MARGE)) + (4 * Largeur initiale) */
line-height: 0px; /* À ne pas modifier */
}

div.cssactif_tableaupartenaire a {
margin: 1px; /* MARGE entre les images */

}

div.cssactif_tableaupartenaire a, div.cssactif_tableaupartenaire a img {
display:inline-block; /* À ne pas modifier */
height: 18px; /* Hauteur initiale */
width: 50px; /* Largeur initiale */

}

div.cssactif_tableaupartenaire a:hover img {
display:inline-block; /* À ne pas modifier */
position: absolute; /* Permet de ne pas décaler les autres images */
height: 31px; /* Hauteur finale (possibilité de mettre 100% si images de différentes tailles )*/
width: 88px; /* Largeur finale (possibilité de mettre 100% si images de différentes tailles) */

/* Transitions pour différents navigateur */
/* navigateur: toutes_transitions durée type */
-webkit-transition: width 1s, height 1s;
-moz-transition: 0.2s linear;
-ms-transition: 0.2s linear;
-o-transition: 0.2s linear;
transition: 0.2s linear;

/* Facultatif: positionne le logo de pleine taille au centre - À adapter */
margin-left: -19px;
margin-top: -6px;
}

Et voici le code de la PA ( elle est probablement anarchique pour certains, je m'en excuse XD )

Code:: <br /><table><tr><td><div class="tableau_gauche"><div class="title_cat">liens importants</div><br />
<a href="http://untold-legends.keuf.net/t1-reglements#1" class="postlink"><div class="text_gauche"><div class="palinks1">» règlement</div></a><br />
<a href="http://untold-legends.keuf.net/t9-le-passe-survol-de-la-serie#12" class="postlink"><div class="palinks1">» le passé - survol de la série</div></a><br />
<a href="http://untold-legends.keuf.net/t16-contexte#19" class="postlink"><div class="palinks1">» contexte</div></a><br />
<a href="http://untold-legends.keuf.net/t4-liste-des-personnages#4" class="postlink"><div class="palinks1">» liste des personnages</div></a><br />
<a href="http://untold-legends.keuf.net/f5-o-faq-place-des-invites" class="postlink"><div class="palinks1">» faq ~ place invités</div></a><br />
<a href="http://untold-legends.keuf.net/t2-staff-du-forum#2" class="postlink"><div class="palinks1">» staff légendaire</div></a><br />
<a href="http://untold-legends.keuf.net/t6-devenir-partenaires#6" class="postlink"><div class="palinks1">» devenir frères d'armes</div></a><div class="credits" align="right" style="margin-top: 190px;">© Codage par <a href="http://www.never-utopia.com" target="_blank">Never-Utopia</a> & <a href="http://www.css-actif.com/" target="_blank">CSS-Actif</a>
<p />
<p />
Copyright © SoulCalibur Untold Legends
2012 - Version 2.0 - Tous droits réservés</div></div></div></td>

<br />
<td><table><tr><td><div class="tableau_center"><script type="text/javascript">
//
</script><div class="paonglets">
<span class="paonglet_0 paonglet" id="paonglet_accueil" onclick="javascript:change_paonglet('accueil');"><div class="palinks1"><center>Accueil</center></div></span>
<span class="paonglet_0 paonglet" id="paonglet_effectif" onclick="javascript:change_paonglet('effectif');"><div class="palinks1"><center>Wanted</center></div></span>
<span class="paonglet_0 paonglet" id="paonglet_autre" onclick="javascript:change_paonglet('autre');"><div class="palinks1"><center>Affiliations</center></div></span>

</div>

<div class="contenu_paonglets">
<div class="contenu_paonglet" id="contenu_paonglet_accueil"><div style="margin-top: 5px; margin-left: 2px; margin-bottom: 5px;border: 1px solid #0a2c36; width: 335px; height: 387px; overflow: hidden;" align="left"><div class="title_cat2">bienvenue sur untold legends</div><div class="credits" style="height: 180px;">message de bienvenue ici</div>
<br /><div style="margin-top: 2px;"><div class="title_cat2" style="border-top: 2px solid #0a2c36;">gagnants des concours</div>
<br /><div class="credits">les gagnants et leur photo ici</div></div></div>
</div><div style="margin-top:-317px; margin-left: 345px; border: 1px solid #0a2c36; width: 300px; height: 250px; overflow: hidden;" align="right"><div class="title_cat2">news</div>
<br /><div class="credits">les news ici</div></div><div style="margin-top: 5px; margin-left: 345px; border: 1px solid #0a2c36; width: 300px; height: 130px; overflow: hidden;" align="right"><div class="title_cat2">animations du moment</div>
<br /><div class="credits">la liste des animations ici</div></div>

</div>

<div class="contenu_paonglet" id="contenu_paonglet_effectif">

Contenu des Wanted

</div>

<div class="contenu_paonglet" id="contenu_paonglet_autre"><div style="margin-top: 5px; margin-left: 2px; border: 1px solid #0a2c36; width: 600px; height: 300px; overflow: hidden;" align="left"><div class="title_cat2">autre forum du staff</div><div class="credits" style="height: 50px;"><a href="http://redemption.probb.fr/" class="postlink" target="_blank" rel="nofollow"><img src="http://img690.imageshack.us/img690/1038/banner2lwz.png" border="0" alt="" /></a></div>
<br /><div class="title_cat2">coup de coeur <font color="red">♥</font></div><div class="credits" style="height: 50px;">Aucun pour le moment!</div>
<br /><div style="margin-top: 2px;"><div class="title_cat2" style="border-top: 2px solid #0a2c36;">top-affiliates</div>
<br /><div class="credits"><div class="cssactif_tableaupartenaire">
<a href="http://aceternal.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://img11.hostingpics.net/pics/197909100ac.jpg" border="0" alt="" /></a><a href="http://reinventeladestinee.forumactif.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://i51.tinypic.com/314qira.jpg" border="0" alt="" /></a>
</div></div></div></div>
</div>

</div></div>
<script type="text/javascript">
//
</script></div></td><tr><td><div class="tableau_bottom"><p /><center><marquee Class="Scroller" behavior="scroll" direction="left" width="100%" height="auto" scrollamount="3.5" scrolldelay="0" onmouseover="this.stop()" onmouseout="this.start()"><a href="http://redemption.probb.fr/" target="_blank" class="footer-link"><img src="http://img442.imageshack.us/img442/5919/banner1kb.png" class="imgvp"/></a> <a href="http://terramystica.forumotion.com/" target="_blank" class="footer-link"><img src="http://i22.servimg.com/u/f22/12/92/37/90/terra-10.gif" class="imgvp"/></a> <a href="http://funhouse-rpg.forumactif.com/" target="_blank" class="footer-link"><img src="http://img11.hostingpics.net/pics/152335partbouton.jpg" class="imgvp"/></a>
<a href="http://creatures.forumgratuit.org/" target="_blank" class="footer-link"><img src="http://sd-2.archive-host.com/membres/images/129749460537792328/banniere88-31.gif" class="imgvp"/></a></marquee></center></div></td></tr></tr></table></td>

<td><table><tr><td><div class="tableau_droite"><div class="title_cat">staff</div>
<table><tr><td align="left"><span style="display: block; width: 100px; height: 40px; margin: 5px; background: url(http://img43.imageshack.us/img43/5362/stafftira.png) center; ceter; border: 1px solid #FFFFFF;"></span></td>
<td><span style="text-align: justify; font-size: 11px; font-variant: small-caps; color: #27a9d1;">Tira
<br />
<span style="text-align: justify; font-size: 11px; font-variant: small-caps; color: #1b718b;">¤ Fonda
<br />
<a href="/u1" class="postlink">Profil</a> ¤ <a href="/privmsg?mode=post&u=1" class="postlink">MP</a></span></td></tr><tr><td align="left"><span style="display: block; width: 100px; height: 40px; margin: 5px; background: url(http://img252.imageshack.us/img252/5223/staffsiegfried.png) center; ceter; border: 1px solid #FFFFFF;"></span></td>
<td><span style="text-align: justify; font-size: 11px; font-variant: small-caps; color: #27a9d1;">Siegfried
<br />
<span style="text-align: justify; font-size: 11px; font-variant: small-caps; color: #1b718b;">¤ Co-Fonda
<br />
<a href="/u2" class="postlink">Profil</a> ¤ <a href="/privmsg?mode=post&u=2" class="postlink">MP</a></span></td></tr><tr><td align="left"><span style="display: block; width: 100px; height: 40px; margin: 5px; background: url(http://img33.imageshack.us/img33/4849/staffamy.png) center; ceter; border: 1px solid #FFFFFF;"></span></td>
<td><span style="text-align: justify; font-size: 11px; font-variant: small-caps; color: #27a9d1;">Amy
<br />
<span style="text-align: justify; font-size: 11px; font-variant: small-caps; color: #1b718b;">¤ Admin
<br />
<a href="/u6" class="postlink">Profil</a> ¤ <a href="/privmsg?mode=post&u=6" class="postlink">MP</a></span></td></tr><tr><td align="left"><span style="display: block; width: 100px; height: 40px; margin: 5px; background: url(http://img254.imageshack.us/img254/5651/staffdampierre.png) center; ceter; border: 1px solid #FFFFFF;"></span></td>
<td><span style="text-align: justify; font-size: 11px; font-variant: small-caps; color: #27a9d1;">Dampierre
<br />
<span style="text-align: justify; font-size: 11px; font-variant: small-caps; color: #1b718b;">¤ Admin
<br />
<a href="/u5" class="postlink">Profil</a> ¤ <a href="/privmsg?mode=post&u=5" class="postlink">MP</a></span></td></tr><tr><td align="left"><span style="display: block; width: 100px; height: 40px; margin: 5px; background: url(http://img100.imageshack.us/img100/8053/staffraphael.png) center; ceter; border: 1px solid #FFFFFF;"></span></td>
<td><span style="text-align: justify; font-size: 11px; font-variant: small-caps; color: #27a9d1;">Raphael
<br />
<span style="text-align: justify; font-size: 11px; font-variant: small-caps; color: #1b718b;">¤ Modo
<br />
<a href="/u3" class="postlink">Profil</a> ¤ <a href="/privmsg?mode=post&u=3" class="postlink">MP</a></span></td></tr></table><div style="margin-top: 2px;"><div class="title_cat" style="border-top: 3px solid #1b718b;">top-sites</div>
<br />
<center><a href="http://www.root-top.com/topsite/serpentgy/in.php?ID=8098" class="postlink" target="_blank" rel="nofollow"><img src="http://img84.imageshack.us/img84/365/miniedge.png" border="0" alt="" /></a><a href="http://www.root-top.com/topsite/horsevalleys/in.php?ID=1230" class="postlink" target="_blank" rel="nofollow"><img src="http://img824.imageshack.us/img824/3597/minicalibur.png" border="0" alt="" /></a><a href="http://www.root-top.com/topsite/lulu06/in.php?ID=2412" class="postlink" target="_blank" rel="nofollow"><img src="http://img84.imageshack.us/img84/365/miniedge.png" border="0" alt="" /></a><a href="http://www.root-top.com/topsite/belette/in.php?ID=2660" class="postlink" target="_blank" rel="nofollow"><img src="http://img824.imageshack.us/img824/3597/minicalibur.png" border="0" alt="" /></a><a href="http://www.root-top.com/topsite/spyro/in.php?ID=12" class="postlink" target="_blank" rel="nofollow"><img src="http://img84.imageshack.us/img84/365/miniedge.png" border="0" alt="" /></a>
<a href="http://www.root-top.com/topsite/everutopia/in.php?ID=238" class="postlink" target="_blank" rel="nofollow"><img src="http://img824.imageshack.us/img824/3597/minicalibur.png" border="0" alt="" /></a>
<br /><div style="margin-left: 1px; margin-right: 1px;">N'hésitez pas à voter pour faire <br />connaître notre forum !
<br />
<p />
<font color="cyan">LES TOP-SITES ONT ÉTÉ REMIS À ZÉRO!</font></center></div></div>
</div></td></tr></table></td></tr></table>

Désolée d'encore vous en demander! Je suis un peu perdue là X___X
Merci d'avance >w< !!

Bonjour !

Bon, premièrement, oui ton HTML est très peux organisé et biaisé, je vais essayé de le réorganiser un peu, je suis pas mal certaine que le problème de l'animation se trouve là. Je vais aussi faire le tour de ton CSS pour m'assurer qu'il soit dans les normes.

Pour ce qui est de tes personnages, rapidement je pense à des infobulles, il y a assurément un tutoriel là-dessus sur CSS-actif donc si tu veux aller voir, d'ici-là peut-être qu'un codeur aura une meilleure idée Wink

Je te reviens là-dessus!

J'avoue que l'idée de l'infobulle est très similaire, j'irai voir ça!

Et ouais, pardon pour l'anarchie XD Je viens d'ailleurs de réaliser que j'aurais dû mettre un autre code

pour les gagnants des concours au lieu de le mettre comme ça *paffffff*

Merci de prendre le temps de m'aider!

Bon!

À première vue, j'ai quelques petits conseils de trucs que j'ai remarqué dans ton code qui font mal aux yeux x)

1. L'une des plus importantes règles en matière de codage, règle générale, est de coder en ''sandwich".
Petit exemple, quoi ne pas faire:

Code:: <div class="blabla"><span><a href="...">LIEN</div></a></span>

Dans un cas comme ça, on devrait plutôt avoir:

Code:: <div class="blabla"><span><a href="..">LIEN</a></span></div>

Ça peut paraître inoffensif, mais ta PA est pleine de codes un peu classés n'importe comment, je dois t'avouer que je suis assez surprise que ton seul problème soit l’animation...

2. plusieurs div pour un seul truc, c'est inutile..

Je crois que j'ai vu 5 class différentes pour un seul truc. Ce n'est pas une bonne idée, ton code devient vraiment lourd et mélangeant.

3. proscrire CENTER

Cette balise:

Code:: <center> ... </center>

... est à éviter Wink

Mais bon, ça moi-même je l'ai appris aujourd'hui, alors n'en faisons pas un plat, c'était juste pour t'informer!

4. CLASS ou STYLE, pas les deux Wink

Avant de commencer à coder, tu choisis si tu fais ton CSS sur un feuille de style ou en STYLE. Les mixes abusifs des 2 ce n'est pas très bon!

5.

Code:: .class {
align: PROPRIÉTÉ;
}

Ça n'existe... pas. Ben en fait si, mais tu peux l'utiliser seulement dans les tableaux. En CSS, tu as ces deux options:

Code:: {
vertical-align: <= alignement vertical, ou tu peux mettre soit TOP, MIDDLE, ou BOTTOM
text-align: <= Alignement du texte, ou tu peux mettre LEFT, RIGHT, CENTER, JUSTIFY

Je te dis tout ça à titre informatif, pour t'aider!

Bref, c'est vraiment un casse-tête ton code et j'essaie de trimer le tout mais j'aurais grand besoin de voir le tutoriel que tu as suivis pour faire tes onglets, pourrais-tu me fournir le lien s'il-te-plaît?

Merci Coup de main pour une PA 90719

Ah oO ? J'en ai tant que ça de balises dans ce genre ( le point 1 )? Je fais pourtant attention.. désolée @w@

Pour les onglets, c'est le tuto de Sui' sur Never-Utopia

Désolé, étonnamment, je m'y retrouves.. je croyais pas que c'était AUSSI anarchique XD
Sinon si je mixe le CSS en feuille de style et l'autre, c'est que mon CSS actuel est déjà tellement long que j'préfère pas trop le surcharger encore, mais si ça peut éviter des bugs, pas de problèmes XD

Ouais en fait c'est le problème, dans ton HTML tu dis par exemple, dans ton CSS pour ton côté gauche, l'écriture doit avoir tel aspect, et bien tu le répète dans 2 autres CSS qui s'appliquent au même texte.

Le résultat fait que tes codes sont extrêmement long, autant du côté du HTML que tu CSS. Je peux te garantir que quand j'aurai fini ce sera beaucoup moins pire Razz

Pour le point 1, je n'ai analysé en profondeur que la première partie de ta PA et je l'ai vu hélas quelque fois, ce n'était par contre pas aussi évident que dans mon exemple, c'est notepad qui l'a vu puisque c'était une grosse partie de code, mais en tout cas.

Je vais continuer de regarder ça ce soir (heure du Québec) et je devrais te retrouver avec quelque chose de plus claire Wink

D'accord! Je m'en remets à toi et te remercie grandement! et ouais j'avoue que les codes se répètent, au début je voulais faire quelque chose de différent, mais finalement c'Est revenu pareil.. XD

J'ai hâte de voir ce que ça donnera! Merci beaucoup de ton aide!

Salut!

Bon, voilà où j'en suis rendu!

Code:: <table cellspacing="5">
<td rowspan="2" width="190" valign="top">
<div class="cadre">
<div class="titres_cellules">liens importants</div><div class="liens">
<br /><a href="http://untold-legends.keuf.net/t1-reglements#1">» règlement</a><br /><br />
<a href="http://untold-legends.keuf.net/t9-le-passe-survol-de-la-serie#12">» le passé - survol de la série</a><br /><br />
<a href="http://untold-legends.keuf.net/t16-contexte#19">» contexte</a><br /><br />
<a href="http://untold-legends.keuf.net/t4-liste-des-personnages#4">» liste des personnages</a><br /><br />
<a href="http://untold-legends.keuf.net/f5-o-faq-place-des-invites">» faq ~ place invités</a><br /><br />
<a href="http://untold-legends.keuf.net/t2-staff-du-forum#2">» staff légendaire</a><br /><br />
<a href="http://untold-legends.keuf.net/t6-devenir-partenaires#6">» devenir frères d'armes</a>
</div><div class="credits">
Codage par <a href="http://www.never-utopia.com" target="_blank">Never-Utopia</a> & <a href="http://www.css-actif.com/" target="_blank">CSS-Actif</a>
<br/>Copyright SoulCalibur Untold Legends <br/>2012 - Version 2.0 - Tous droits réservés</div>

</div>
</td>

<td width="650">
<script type="text/javascript">
//
</script><div class="cadre_centre"><div class="paonglets">
<span class="paonglet_0 paonglet" id="paonglet_accueil" onclick="javascript:change_paonglet('accueil');">Accueil</span>

<span class="paonglet_0 paonglet" id="paonglet_effectif" onclick="javascript:change_paonglet('effectif');">Wanted</span>

<span class="paonglet_0 paonglet" id="paonglet_autre" onclick="javascript:change_paonglet('autre');">Affiliations</span>

</div>

<div class="contenu_paonglets">
<div class="contenu_paonglet" id="contenu_paonglet_accueil">

<table valign="top" width="100%" border="0">
<tr>
<td width="50%"> <div class="titre_tabl">bienvenue sur untold legends</div>
</td>

<td width="50%"><div class="titre_tabl">news</div>
</td>

</tr>

<tr>

<td><div class="bienvenue">Message de bienvenue ici</div>
</td>

<td rowspan="2"><div class="news">les news ici</div>
</td>

</tr>

<tr>

<td><div class="titre_tabl">gagnants des concours</div>
</td>

</tr>

<tr>
<td rowspan="2"><div class="gagnants">les gagnants et leur photo ici</div>
</td>

<td><div class="titre_tabl">animations du moment</div>
</td>

</tr>

<tr>
<td><div class="animations">la liste des animations ici</div>
</td>

</tr>
</table>

</div>

<div class="contenu_paonglet" id="contenu_paonglet_effectif">

Contenue effectif

</div>

<div class="contenu_paonglet" id="contenu_paonglet_autre"><div class="contenu_affiliations"><div class="titre_tabl">autres forums du staff</div><div style="height:65px;"><a href="http://redemption.probb.fr/" class="postlink" target="_blank" rel="nofollow"><img src="http://img690.imageshack.us/img690/1038/banner2lwz.png" border="0" alt="" /></a></div><div class="titre_tabl">coup de coeur <span style="color:red;"></span></div><div style="height:65px;">Aucun pour le moment!</div><div class="titre_tabl">top-affiliates</div><div style="height:65px;"><a href="http://aceternal.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://img11.hostingpics.net/pics/197909100ac.jpg" border="0" alt="" /></a>
<a href="http://reinventeladestinee.forumactif.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://i51.tinypic.com/314qira.jpg" border="0" alt="" /></a></div>

</div>
</div>
</div>
</div>
<script type="text/javascript">
//
</script>
</td>

<td rowspan="2" width="190" valign="top">
<div class="cadre">
<div class="titres_cellules">staff</div><div class="staff_top">
<table><tr><td align="left"><span style="display: block; width: 100px; height: 40px; margin: 5px; background: url(http://img43.imageshack.us/img43/5362/stafftira.png) center; ceter; border: 1px solid #FFFFFF;"></span></td>
<td><span style="text-align: justify; font-size: 11px; font-variant: small-caps; color: #27a9d1;">Tira
<br />
<span style="text-align: justify; font-size: 11px; font-variant: small-caps; color: #1b718b;">¤ Fonda
<br />
<a href="/u1" class="postlink">Profil</a> ¤ <a href="/privmsg?mode=post&u=1" class="postlink">MP</a></span></td></tr><tr><td align="left"><span style="display: block; width: 100px; height: 40px; margin: 5px; background: url(http://img252.imageshack.us/img252/5223/staffsiegfried.png) center; ceter; border: 1px solid #FFFFFF;"></span></td>
<td><span style="text-align: justify; font-size: 11px; font-variant: small-caps; color: #27a9d1;">Siegfried
<br />
<span style="text-align: justify; font-size: 11px; font-variant: small-caps; color: #1b718b;">¤ Co-Fonda
<br />
<a href="/u2" class="postlink">Profil</a> ¤ <a href="/privmsg?mode=post&u=2" class="postlink">MP</a></span></td></tr><tr><td align="left"><span style="display: block; width: 100px; height: 40px; margin: 5px; background: url(http://img33.imageshack.us/img33/4849/staffamy.png) center; ceter; border: 1px solid #FFFFFF;"></span></td>
<td><span style="text-align: justify; font-size: 11px; font-variant: small-caps; color: #27a9d1;">Amy
<br />
<span style="text-align: justify; font-size: 11px; font-variant: small-caps; color: #1b718b;">¤ Admin
<br />
<a href="/u6" class="postlink">Profil</a> ¤ <a href="/privmsg?mode=post&u=6" class="postlink">MP</a></span></td></tr><tr><td align="left"><span style="display: block; width: 100px; height: 40px; margin: 5px; background: url(http://img254.imageshack.us/img254/5651/staffdampierre.png) center; ceter; border: 1px solid #FFFFFF;"></span></td>
<td><span style="text-align: justify; font-size: 11px; font-variant: small-caps; color: #27a9d1;">Dampierre
<br />
<span style="text-align: justify; font-size: 11px; font-variant: small-caps; color: #1b718b;">¤ Admin
<br />
<a href="/u5" class="postlink">Profil</a> ¤ <a href="/privmsg?mode=post&u=5" class="postlink">MP</a></span></td></tr><tr><td align="left"><span style="display: block; width: 100px; height: 40px; margin: 5px; background: url(http://img100.imageshack.us/img100/8053/staffraphael.png) center; ceter; border: 1px solid #FFFFFF;"></span></td>
<td><span style="text-align: justify; font-size: 11px; font-variant: small-caps; color: #27a9d1;">Raphael
<br />
<span style="text-align: justify; font-size: 11px; font-variant: small-caps; color: #1b718b;">¤ Modo
<br />
<a href="/u3" class="postlink">Profil</a> ¤ <a href="/privmsg?mode=post&u=3" class="postlink">MP</a></span></td></tr></table>
<br />
</div>

<div class="titres_cellules">top-sites</div>

<a href="http://www.root-top.com/topsite/serpentgy/in.php?ID=8098" class="postlink" target="_blank" rel="nofollow"><img src="http://img84.imageshack.us/img84/365/miniedge.png" border="0" alt="" /></a><a href="http://www.root-top.com/topsite/horsevalleys/in.php?ID=1230" class="postlink" target="_blank" rel="nofollow"><img src="http://img824.imageshack.us/img824/3597/minicalibur.png" border="0" alt="" /></a><a href="http://www.root-top.com/topsite/lulu06/in.php?ID=2412" class="postlink" target="_blank" rel="nofollow"><img src="http://img84.imageshack.us/img84/365/miniedge.png" border="0" alt="" /></a><a href="http://www.root-top.com/topsite/belette/in.php?ID=2660" class="postlink" target="_blank" rel="nofollow"><img src="http://img824.imageshack.us/img824/3597/minicalibur.png" border="0" alt="" /></a><a href="http://www.root-top.com/topsite/spyro/in.php?ID=12" class="postlink" target="_blank" rel="nofollow"><img src="http://img84.imageshack.us/img84/365/miniedge.png" border="0" alt="" /></a>
<a href="http://www.root-top.com/topsite/everutopia/in.php?ID=238" class="postlink" target="_blank" rel="nofollow"><img src="http://img824.imageshack.us/img824/3597/minicalibur.png" border="0" alt="" /></a>
<br /><div style="margin-left: 1px; margin-right: 1px;">N'hésitez pas à voter pour faire <br />connaître notre forum !
<br />
<p />
<font color="cyan">LES TOP-SITES ONT ÉTÉ REMIS À ZÉRO!</font>
</div>

</td>

</tr>

<tr>
<td><div class="cadre_centre" style="height: 40px;">
<marquee Class="Scroller" behavior="scroll" direction="left" width="100%" height="auto" scrollamount="3.5" scrolldelay="0" onmouseover="this.stop()" onmouseout="this.start()"><a href="http://redemption.probb.fr/" target="_blank" class="footer-link"><img src="http://img442.imageshack.us/img442/5919/banner1kb.png" class="imgvp"/></a>

<a href="http://terramystica.forumotion.com/" target="_blank" class="footer-link"><img src="http://i22.servimg.com/u/f22/12/92/37/90/terra-10.gif" class="imgvp"/></a>

<a href="http://funhouse-rpg.forumactif.com/" target="_blank" class="footer-link"><img src="http://img11.hostingpics.net/pics/152335partbouton.jpg" class="imgvp"/></a>

<a href="http://creatures.forumgratuit.org/" target="_blank" class="footer-link"><img src="http://sd-2.archive-host.com/membres/images/129749460537792328/banniere88-31.gif" class="imgvp"/></a>

</marquee>
</div>
</td>
</tr>

</table>

Code:: .paonglet {
display:inline-block;
padding:10px;
cursor:crosshair;
background-color: #0d3a47;
color: #fff;
text-align: center;
width:198px;
font-family: "Trebuchet MS";
font-weight: bold;
font-size: 14px;
font-variant: small-caps;
margin-left: -2px;
margin-right: -2px;

}

.paonglet:hover {
color: #7fd8f0;
}

.paonglet_1 {
background-color: #03151a;
color: #ffffff;
border-bottom: 1px dotted #FFFFFF;
}

.contenu_paonglet {
margin-top:-1px;
padding: 2px;
display:none;
height: 390px;
font-family: "Trebuchet MS";
font-size: 10px;
font-variant: small-caps;
color: #fff;
}

.titre_tabl {
font-size: 18px;
background-color: #03171c;
font-weight: bold;
height: 21px;
border-bottom: 1px dotted #114d5e;
border-top: 1px solid #114d5e;
border-left: 1px solid #114d5e;
border-right: 1px solid #114d5e;
font-family: "Trebuchet MS";
vertical-align: top;
text-align: left;
}

.bienvenue {
height: 190px;
border-left: 1px solid #114d5e;
border-right: 1px solid #114d5e;
border-bottom: 1px solid #114d5e;
vertical-align: top;
margin-top: -4px;
text-align: left;
}

.news {
height: 215px;
border-left: 1px solid #114d5e;
border-right: 1px solid #114d5e;
border-bottom: 1px solid #114d5e;
vertical-align: top;
text-align: right;
margin-top: -7px;
overflow: auto;
}

.gagnants {
height: 140px;
border-left: 1px solid #114d5e;
border-right: 1px solid #114d5e;
border-bottom: 1px solid #114d5e;
vertical-align: top;
text-align: left;
margin-top: -4px
}

.animations {
height: 111px;
border-left: 1px solid #114d5e;
border-right: 1px solid #114d5e;
border-bottom: 1px solid #114d5e;
vertical-align: top;
text-align: right;
margin-top: -5px
}

.contenu_affiliations {
margin-top: 30px;
margin-left: 20px;
margin-right: 20px;
border: 1px solid #114d5e;
}

.cadre {
vertical-align: top;
border-left: 1px solid #1b718b;
border-right: 1px solid #1b718b;
border-top: 3px solid #1b718b;
border-bottom: 3px solid #1b718b;
height: 482px;
text-align: left;
}

.cadre_centre {
border-left: 1px solid #1b718b;
border-right: 1px solid #1b718b;
border-top: 3px solid #1b718b;
border-bottom: 3px solid #1b718b;
}

.titres_cellules {
color: #fff;
font-family: "Trebuchet MS";
font-variant: small-caps;
font-size: 18px;
background-color: #03171c;
font-weight: bold;
height: 21px;
border-bottom: 1px dotted #ffffff;
border-top: 1px solid #114d5e;
text-align: left;
}

.liens a {
color: #fff;
font-family: "Trebuchet MS";
font-size: 14px;
font-variant: small-caps;
text-decoration: none;
font-weight: bold;
letter-spacing: 0px;
margin-left: 5px;
}

.liens a:hover {
color: #7fd8f0;
cursor:crosshair;
text-decoration: none !important ;
}

.credits {
margin-bottom: 2px;
margin-right: 4px;
text-align: right;
margin-top: 185px;
text-align: right;
color: #fff;
font-family: "Trebuchet MS";
font-variant: small-caps;
font-size: 10px;
letter-spacing: 0px;
}

.credits a {
color: #fff;
font-family: "Trebuchet MS";
font-variant: small-caps;
text-decoration: none;
}

.credits a:hover {
color: red;
text-decoration: none !important;
cursor:crosshair;
}

En gros, j'ai gardé la majorité de tes codes, je les ai simplifier et j'ai changé d'ordre, je me suis débrouillé pour que tout soit valide au niveau des normes du CSS et du HTML.

Beaucoup de noms de classes ont été changé aussi parce que quand je les gardais, ça me mélangeais plus que d'autre chose en faisant les changements Razz

Il me reste toutefois deux ou trois détails à vérifier, notamment le côté droit qui me semblait quand même bien sauf quelques petits détails (genre, enlever un peu de STYLE Wink

) et des proportions qui sont incertaines, et un bug du marquee sur IE (ça ne devrait pas être très long à faire!)

Bref, là mon cerveau refuse totalement de coopérer Coup de main pour une PA 4257895609

, comme il est 1h30 am, alors je vais dormir et je te terminer ça demain matin! Désolée du délais Coup de main pour une PA 186756

Bonne nuit!

Merci beaucoup! Vraiment, je sais pas comment te remercier. Tu as fait très rapide, au contraire! Je te remercie du travail et du temps que tu y as mis, et je vais étudier les codes pour comprendre ce que je faisais de mal +w+

Énorme merci à toi, je vais attendre tes dernières retouches avant d'installer le tout sur mon forum test!

Voilou

CSS:

Code:: /* Onglets du centre */

.paonglet {
display:inline-block;
padding:10px;
cursor:crosshair;
background-color: #0d3a47;
color: #fff;
text-align: center;
width:198px;
font-family: "Trebuchet MS";
font-weight: bold;
font-size: 14px;
font-variant: small-caps;
margin-left: -2px;
margin-right: -2px;

}

.paonglet:hover {
color: #7fd8f0;
}

.paonglet_1 {
background-color: #03151a;
color: #ffffff;
border-bottom: 1px dotted #FFFFFF;
}

.contenu_paonglet {
margin-top:-1px;
padding: 2px;
display:none;
height: 390px;
font-family: "Trebuchet MS";
font-size: 10px;
font-variant: small-caps;
color: #fff;
}

/*titres dans le tableau se trouvant dans le 1er onglet */

.titre_tabl {
font-size: 18px;
background-color: #03171c;
font-weight: bold;
height: 21px;
border-bottom: 1px dotted #114d5e;
border-top: 1px solid #114d5e;
border-left: 1px solid #114d5e;
border-right: 1px solid #114d5e;
font-family: "Trebuchet MS";
vertical-align: top;
text-align: left;
}

/*Différents contenus des cellules se trouvant dans le 1er onglet */

.bienvenue {
height: 190px;
border-left: 1px solid #114d5e;
border-right: 1px solid #114d5e;
border-bottom: 1px solid #114d5e;
vertical-align: top;
margin-top: -4px;
text-align: left;
}

.news {
height: 215px;
border-left: 1px solid #114d5e;
border-right: 1px solid #114d5e;
border-bottom: 1px solid #114d5e;
vertical-align: top;
text-align: right;
margin-top: -7px;
overflow: auto;
}

.gagnants {
height: 140px;
border-left: 1px solid #114d5e;
border-right: 1px solid #114d5e;
border-bottom: 1px solid #114d5e;
vertical-align: top;
text-align: left;
margin-top: -4px
}

.animations {
height: 111px;
border-left: 1px solid #114d5e;
border-right: 1px solid #114d5e;
border-bottom: 1px solid #114d5e;
vertical-align: top;
text-align: right;
margin-top: -5px
}

/* Structure du contenu du 3e onglet*/

.contenu_affiliations {
margin-top: 30px;
margin-left: 20px;
margin-right: 20px;
border: 1px solid #114d5e;
}

/*cadres, alignement et structure des 4 cellules de la PA */

.cadre {
vertical-align: top;
border-left: 1px solid #1b718b;
border-right: 1px solid #1b718b;
border-top: 3px solid #1b718b;
border-bottom: 3px solid #1b718b;
height: 482px;
text-align: left;
}

.cadre_centre {
border-left: 1px solid #1b718b;
border-right: 1px solid #1b718b;
border-top: 3px solid #1b718b;
border-bottom: 3px solid #1b718b;
}

/*Titres des cellules de gauche et de droite */

.titres_cellules {
color: #fff;
font-family: "Trebuchet MS";
font-variant: small-caps;
font-size: 18px;
background-color: #03171c;
font-weight: bold;
height: 21px;
border-bottom: 1px dotted #ffffff;
border-top: 1px solid #114d5e;
text-align: left;
}

/* liens dans la cellule de gauche de la PA */

.liens a {
color: #fff;
font-family: "Trebuchet MS";
font-size: 14px;
font-variant: small-caps;
text-decoration: none;
font-weight: bold;
letter-spacing: 0px;
margin-left: 5px;
}

.liens a:hover {
color: #7fd8f0;
cursor:crosshair;
text-decoration: none !important ;
}

.credits {
margin-bottom: 2px;
margin-right: 4px;
text-align: right;
margin-top: 185px;
text-align: right;
color: #fff;
font-family: "Trebuchet MS";
font-variant: small-caps;
font-size: 10px;
letter-spacing: 0px;
}

.credits a {
color: #fff;
font-family: "Trebuchet MS";
font-variant: small-caps;
text-decoration: none;
}

.credits a:hover {
color: red;
text-decoration: none !important;
cursor:crosshair;
}

/*Côté droite de la PA */

.staff {
text-align: justify;
font-size: 11px;
font-variant: small-caps;
color: #27a9d1;
}

.staff a {
color: #fff;
font-family: "Trebuchet MS";
font-variant: small-caps;
text-decoration: none;
}

.image {
border: 1px solid #fff;
margin-left: 5px;
}

.staff a:hover {
color: red;
text-decoration: none !important;
cursor:crosshair;
}

.top_aff {
color: #fff;
font-family: "Trebuchet MS";
font-variant: small-caps;
letter-spacing: 0px;
font-size: 11px;
text-align: center;
margin-left: 1px;
margin-right: 1px;
}

PA:

Code:: <table cellspacing="5">



<td rowspan="2" width="190" valign="top">
<div class="cadre">
<div class="titres_cellules">liens importants</div><div class="liens">
<br /><a href="http://untold-legends.keuf.net/t1-reglements#1">» règlement</a><br /><br />
<a href="http://untold-legends.keuf.net/t9-le-passe-survol-de-la-serie#12">» le passé - survol de la série</a><br /><br />
<a href="http://untold-legends.keuf.net/t16-contexte#19">» contexte</a><br /><br />
<a href="http://untold-legends.keuf.net/t4-liste-des-personnages#4">» liste des personnages</a><br /><br />
<a href="http://untold-legends.keuf.net/f5-o-faq-place-des-invites">» faq ~ place invités</a><br /><br />
<a href="http://untold-legends.keuf.net/t2-staff-du-forum#2">» staff légendaire</a><br /><br />
<a href="http://untold-legends.keuf.net/t6-devenir-partenaires#6">» devenir frères d'armes</a>
</div><div class="credits">
Codage par <a href="http://www.never-utopia.com" target="_blank">Never-Utopia</a> & <a href="http://www.css-actif.com/" target="_blank">CSS-Actif</a>
<br/>Copyright SoulCalibur Untold Legends <br/>2012 - Version 2.0 - Tous droits réservés</div>

</div>
</td>



<td width="650">
<script type="text/javascript">
//
</script><div class="cadre_centre"><div class="paonglets">
<span class="paonglet_0 paonglet" id="paonglet_accueil" onclick="javascript:change_paonglet('accueil');">Accueil</span>

<span class="paonglet_0 paonglet" id="paonglet_effectif" onclick="javascript:change_paonglet('effectif');">Wanted</span>

<span class="paonglet_0 paonglet" id="paonglet_autre" onclick="javascript:change_paonglet('autre');">Affiliations</span>

</div>

<div class="contenu_paonglets">
<div class="contenu_paonglet" id="contenu_paonglet_accueil">

<table valign="top" width="100%" border="0">
<tr>
<td width="50%"> <div class="titre_tabl">bienvenue sur untold legends</div>
</td>

<td width="50%"><div class="titre_tabl">news</div>
</td>

</tr>

<tr>

<td><div class="bienvenue">Message de bienvenue ici</div>
</td>

<td rowspan="2"><div class="news">les news ici</div>
</td>

</tr>

<tr>

<td><div class="titre_tabl">gagnants des concours</div>
</td>

</tr>

<tr>
<td rowspan="2"><div class="gagnants">les gagnants et leur photo ici</div>
</td>

<td><div class="titre_tabl">animations du moment</div>
</td>

</tr>

<tr>
<td><div class="animations">la liste des animations ici</div>
</td>

</tr>
</table>

</div>

<div class="contenu_paonglet" id="contenu_paonglet_effectif">

Contenue effectif

</div>

<div class="contenu_paonglet" id="contenu_paonglet_autre">
<div class="contenu_affiliations">
<div class="titre_tabl">autres forums du staff</div>
<div style="height:65px; text-align:left;"><a href="http://redemption.probb.fr/" class="postlink" target="_blank" rel="nofollow"><img src="http://img690.imageshack.us/img690/1038/banner2lwz.png" border="0" alt="" /></a></div>

<div class="titre_tabl">coup de coeur <span style="color:red;"></span></div>
<div style="height:65px; text-align:left;">Aucun pour le moment!</div>

<div class="titre_tabl">top-affiliates</div>
<div style="height:65px; text-align:left;"><a href="http://aceternal.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://img11.hostingpics.net/pics/197909100ac.jpg" border="0" alt="" /></a>
<a href="http://reinventeladestinee.forumactif.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://i51.tinypic.com/314qira.jpg" border="0" alt="" /></a></div>

</div>
</div>
</div>
</div>
<script type="text/javascript">
//
</script>
</td>



<td rowspan="2" width="190" valign="top">
<div class="cadre">
<div class="titres_cellules">staff</div><div class="staff_top">

<table>
<tr>
<td align="center">
<img src="http://img43.imageshack.us/img43/5362/stafftira.png" class="image"/>
</td>

<td><div class="staff">
<span style="font-weight: bold;">Tira </span><br />
¤ Fonda <br />
<a href="/u1">Profil</a> ¤ <a href="/privmsg?mode=post&u=1">MP</a>
</div>

</td>

</tr>
<tr>

<td align="center">
<img src="http://img252.imageshack.us/img252/5223/staffsiegfried.png" class="image"/>
</td>

<td><div class="staff">
<span style="font-weight: bold;">Siegfried</span><br />
¤ Co-Fonda <br />
<a href="/u2">Profil</a> ¤ <a href="/privmsg?mode=post&u=2">MP</a>
</div>
</td>

</tr>

<tr>
<td align="center">
<img src="http://img33.imageshack.us/img33/4849/staffamy.png" class="image"/>
</td>

<td><div class="staff">
<span style="font-weight: bold;">Amy</span><br />
¤ Admin <br />
<a href="/u6">Profil</a> ¤ <a href="/privmsg?mode=post&u=6" >MP</a>
</div>
</td>
</tr>

<tr>

<td align="center">
<img src="http://img254.imageshack.us/img254/5651/staffdampierre.png" class="image"/>
</td>

<td><div class="staff">
<span style="font-weight: bold;">Dampierre</span> <br />
¤ Admin <br />
<a href="/u5">Profil</a> ¤ <a href="/privmsg?mode=post&u=5">MP</a>
</div>
</td>
</tr>

<tr>
<td align="center">
<img src="http://img100.imageshack.us/img100/8053/staffraphael.png" class="image"/>
</td>

<td><div class="staff">
<span style="font-weight: bold;">Raphael</span><br />
¤ Modo<br />
<a href="/u3">Profil</a> ¤ <a href="/privmsg?mode=post&u=3">MP</a>
</div>
</td>
</tr>
</table>
<br />
</div>

<div class="titres_cellules">top-sites</div>

<a href="http://www.root-top.com/topsite/serpentgy/in.php?ID=8098" class="postlink" target="_blank" rel="nofollow"><img src="http://img84.imageshack.us/img84/365/miniedge.png" border="0" alt="" /></a><a href="http://www.root-top.com/topsite/horsevalleys/in.php?ID=1230" class="postlink" target="_blank" rel="nofollow"><img src="http://img824.imageshack.us/img824/3597/minicalibur.png" border="0" alt="" /></a><a href="http://www.root-top.com/topsite/lulu06/in.php?ID=2412" class="postlink" target="_blank" rel="nofollow"><img src="http://img84.imageshack.us/img84/365/miniedge.png" border="0" alt="" /></a><a href="http://www.root-top.com/topsite/belette/in.php?ID=2660" class="postlink" target="_blank" rel="nofollow"><img src="http://img824.imageshack.us/img824/3597/minicalibur.png" border="0" alt="" /></a><a href="http://www.root-top.com/topsite/spyro/in.php?ID=12" class="postlink" target="_blank" rel="nofollow"><img src="http://img84.imageshack.us/img84/365/miniedge.png" border="0" alt="" /></a>
<a href="http://www.root-top.com/topsite/everutopia/in.php?ID=238" class="postlink" target="_blank" rel="nofollow"><img src="http://img824.imageshack.us/img824/3597/minicalibur.png" border="0" alt="" /></a>
<br /><div class="top_aff">N'hésitez pas à voter pour faire <br />connaître notre forum !<br/>
<br />

<span style="color: cyan;">LES TOP-SITES ONT ÉTÉ REMIS À ZÉRO!</span></div>

</div>
</td>

</tr>



<tr>
<td><div class="cadre_centre" style="height: 40px;">

<marquee class="html-marquee" width="100%" direction="left" behavior="scroll" scrollamount="3.5" onmouseover="this.stop()" onmouseout="this.start()">

<a href="http://redemption.probb.fr/" target="_blank"><img src="http://img442.imageshack.us/img442/5919/banner1kb.png"/></a>

<a href="http://terramystica.forumotion.com/" target="_blank"><img src="http://i22.servimg.com/u/f22/12/92/37/90/terra-10.gif"/></a>

<a href="http://funhouse-rpg.forumactif.com/" target="_blank"><img src="http://img11.hostingpics.net/pics/152335partbouton.jpg"/></a>

<a href="http://creatures.forumgratuit.org/" target="_blank"><img src="http://sd-2.archive-host.com/membres/images/129749460537792328/banniere88-31.gif"/></a>

</marquee>

</div>
</td>
</tr>

</table>

Donc voilà, les codes ne sont pas vraiment plus court (je dirais même que j'ai probablement rallongé ton CSS loll!), mais l'important est que maintenant, tu n'as plus des trucs pour rien.

Je vais quand même te donner d'autres petits conseils pour tes futurs codages.

Premièrement, il y a une possibilité avec le CSS vraiment intéressante quant aux liens.
Dans tes codes, j'ai remarqué que lorsque tu avais des liens, tu les entourais individuellement de div (parfois 2 mêmes ! ) pour les décorer, alors que tu peux faire beaucoup plus simple.

Ta façon ressemblait donc à ceci:

Code:: <a href="lien"><div class="lien"> LIEN </div></a>
<a href="lien1"><div class="lien"> LIEN1 </div></a>

et ainsi de suite. Alors, dans ton CSS tu allais décorer le tout, ainsi qu'avec des '':hover'', ce qui est tout-à-fait correcte en soit. Mais tu pourrais aussi faire ceci:

Code:: <div class="liens">
<a href="lien">LIEN</a>
<a href="lien1">LIEN1</a>
<a href="lien2">LIEN2</a>
</div>

et faire ton css de cette façon:

Code:: .liens a {
color: ...;
text-decoration: ..;
}

.liens a:hover {
...
}

Dans le fond, le ".lien a {" veux dire: toutes les balises < a > présentent dans la partie de code affectée par la class ''liens'' prendront ses propriétés.

Ça t'évite simplement de toujours répéter la même chose.

Ensuite, je te conseillerais de faire attention avec l'utilisation de la balise

Code:: <span></span>

Tu l'as peut-être vu quelque part, mais cette balise est de type INLINE. En gros, ça veux dire que peu importe où tu iras la mettre dans un texte, elle passera ni vue ni connue et ne déformera rien.

Code:: <div></div>

... quant-à-elle, est une balise de type BLOCK. Son nom est selon moi la meilleur façon de l'illustrer, elle crée des blocks et par conséquent, si tu mets un div au milieu d'un texte, tu te retrouves avec des sauts de lignes pas toujours désirés (mais ça tu le savais sans doute déjà Wink

)

Tout ça pour en venir, j'ai vu dans ton texte des endroits où on retrouvait ceci:

Code:: <span style="display: block; ..."></span>

Bref, tu dis à ta balise INLINE (span) de devenir BLOCK. Ça ne sert pas à grand chose, pour être honnête... à part prendre de la place. Met un DIV dans ces cas là Wink

D'ailleurs, j'ai une question au sujet de ton code.

J'ai remarqué dans ton CSS que tu avais mis ceci à ta cellule du milieu:

Code:: background: url(http://img703.imageshack.us/img703/126/fondpa1.png) no-repeat;

L'image ne s'affichait pas parce que tu n'as pas mis tes "", alors je me demandais si tu la voulais toujours?

*

Code:: background: url("http://img703.imageshack.us/img703/126/fondpa1.png") no-repeat;

(tu dois toujours mettre des guillemets autour du URL de ton image Wink

)

Je ne l'ai pas mis, mais si tu la veux tu peux toujours essayé pour voir!

Bref, c'est tout ce qu'il me vient en tête à présent.

Alors, où en es-tu avec ton onglet central? As-tu commencé à essayer avec des infobulles?

Et dit moi si ça fonctionne avec les codes que je t'ai donné!

Bonne nuit Smile

Énorme merci à toi!
Pour les div sur les liens, j'avais fait ça pour une raison précise, mais je m'en souviens plus, haha XD !
Pour l'image en fond, non, je vais l'enlever, je vais en mettre, certes, mais seulement quand je finaliserai XD

Autrement, le seul truc qui m'accroche je dirais, c'est que le texte étant directement dans les cellules, il n'y a pas de marges avec les bordures.
Sinon, y aurait moyen pour forcer les 3 onglets à rester sur la même ligne? Parce que la taille que tu as mis les faisait décaler de mon bord, et j'ai un écran assez large, alors pour les plus petites résolutions, ce serait pas top je pense o.o

Autrement, aucun problème! J'adore!

Pour les info-bulles, disons que je me suis royalement perdue en me battant avec les codes, beaucoup de problèmes d'alignement. J'essayais juste de mettre une bordure à mes images et ça se mettait à planter, alors j'ai décidé de laisser faire pour la soirée avant de faire une bêtise XD !

Je vais essayer de regarder ça à l'instant, et un peu en fin de soirée demain, mais je garantis rien XD

Bonjour,

Fire-fly, n'oublie pas que le but de CSS Actif est de guider les membres pour qu'ils fassent eux même leurs codes, si tu fais tout à la place de Ravener l'objectif ne sera pas trop atteint Wink

La question que je me pose en regardant le forum de test, c'est pourquoi utiliser des tableaux si vous faites des bordures, etc, via les div ? Je vois plein "d'ajustements" qui ont été rajoutés pour corriger les bugs d'affichage alors qu'en principe un code propre se serait affiché correctement Wink

En particulier vos différents blocs titre+contenu ça pouvait être fait sans une once de tableau, comme ça :

Un titre

Un div conteneur avec la largeur et le centrage parce que c'est mieux, un titre h1 avec un padding pour ne pas être collé aux bords et une bordure noire, suivi d'un bloc div avec une bordure aussi, sauf la bordure supérieure, et un padding pour que le texte ne soit pas collé au bord.

Bon, prise 3 x)

J'ai suivis la suggestion (/en partie du moins) de 'Christa pour le premier onglet (c'est plus léger de cette façon, merci, je n'y avais pas pensé! Et le code propre ne s'affichait pas 100% correctement, je n'étais pas obligée de le mettre en tableau, c'est simplement une préférence que j'ai).

Tu as le choix de le mettre ou non, celui que je t'ai donné en 1er (en deuxième en fait, mais le 1er n'était pas fini) fonctionne aussi. Pour ce qui est des marges, c'est facile d'arranger le tout directement via le CSS en rajoutant des padding (plus facile selon moi) ou de margin.

Pour ce qui est des onglets rester sur la même ligne, je ne comprends pas parce que moi tout s'affiche correctement sur mes 3 ordis (d'un un qui a un écran de 30''). Pourrais tu nous montrer screen?

Bref, voici les nouveaux codes!

Code:: /* Onglets du centre */

.paonglet {
display:inline-block;
padding:10px;
cursor:crosshair;
background-color: #0d3a47;
color: #fff;
text-align: center;
width:198px;
font-family: "Trebuchet MS";
font-weight: bold;
font-size: 14px;
font-variant: small-caps;
margin-left: -2px;
margin-right: -2px;

}

.paonglet:hover {
color: #7fd8f0;
}

.paonglet_1 {
background-color: #03151a;
color: #ffffff;
border-bottom: 1px dotted #FFFFFF;
}

.contenu_paonglet {
margin-top:-1px;
padding: 2px;
display:none;
height: 390px;
font-family: "Trebuchet MS" !important;
font-size: 10px;
font-variant: small-caps;
color: #fff;
}

/*Contenu du premier onglet*/

.onglet_principal {
border: 1px solid #114d5e;
margin-top: 10px;

}

.onglet_principal h1 {
font-size: 18px;
background-color: #03171c;
font-weight: bold;
color: #fff;
height: 21px;
border-bottom: 1px dotted #114d5e;
font-family: "Trebuchet MS";
vertical-align: top;
text-align: left;
padding-left: 5px; /* à modifier au goût! */
margin: 0px !important; /*ne pas enlever */
}

.contenu_principal {
font-family: "Trebuchet MS" !important;
font-size: 10px;
font-variant: small-caps;
color: #fff;
letter-spacing: 0px;
padding: 5px;
vertical-align: top;
}

/* Structure du contenu du 3e onglet*/

.titre_tabl {
font-size: 18px;
background-color: #03171c;
font-weight: bold;
height: 21px;
border-bottom: 1px dotted #114d5e;
border-top: 1px solid #114d5e;
font-family: "Trebuchet MS";
vertical-align: top;
text-align: left;
padding-left: 5px;
}

.contenu_affiliations {
margin-top: 30px;
margin-left: 20px;
margin-right: 20px;
border: 1px solid #114d5e;
}

.texte_aff {
height:65px;
text-align:left;
padding-left: 5px; /* à changer au goût*/
}

/*cadres, alignement et structure des 4 cellules de la PA */

.cadre {
vertical-align: top;
border-left: 1px solid #1b718b;
border-right: 1px solid #1b718b;
border-top: 3px solid #1b718b;
border-bottom: 3px solid #1b718b;
height: 482px;
text-align: left;
}

.cadre_centre {
border-left: 1px solid #1b718b;
border-right: 1px solid #1b718b;
border-top: 3px solid #1b718b;
border-bottom: 3px solid #1b718b;
}

/*Titres des cellules de gauche et de droite */

.titres_cellules {
color: #fff;
font-family: "Trebuchet MS";
font-variant: small-caps;
font-size: 18px;
background-color: #03171c;
font-weight: bold;
height: 21px;
border-bottom: 1px dotted #ffffff;
border-top: 1px solid #114d5e;
text-align: left;
padding-left: 5px;
}

/* liens dans la cellule de gauche de la PA */

.liens a {
color: #fff;
font-family: "Trebuchet MS";
font-size: 14px;
font-variant: small-caps;
text-decoration: none;
font-weight: bold;
letter-spacing: 0px;
margin-left: 5px;
}

.liens a:hover {
color: #7fd8f0;
cursor:crosshair;
text-decoration: none !important ;
}

.credits {
margin-bottom: 2px;
margin-right: 4px;
text-align: right;
margin-top: 185px;
text-align: right;
color: #fff;
font-family: "Trebuchet MS";
font-variant: small-caps;
font-size: 10px;
letter-spacing: 0px;
}

.credits a {
color: #fff;
font-family: "Trebuchet MS";
font-variant: small-caps;
text-decoration: none;
}

.credits a:hover {
color: red;
text-decoration: none !important;
cursor:crosshair;
}

/*Côté droite de la PA */

.staff {
text-align: justify;
font-size: 11px;
font-variant: small-caps;
color: #27a9d1;
}

.staff a {
color: #fff;
font-family: "Trebuchet MS";
font-variant: small-caps;
text-decoration: none;
}

.image {
border: 1px solid #fff;
margin-left: 5px;
}

.staff a:hover {
color: red;
text-decoration: none !important;
cursor:crosshair;
}

.top_aff {
color: #fff;
font-family: "Trebuchet MS";
font-variant: small-caps;
letter-spacing: 0px;
font-size: 11px;
text-align: center;
margin-left: 1px;
margin-right: 1px;
}

Code:: <table cellspacing="5">



<td rowspan="2" width="190" valign="top">
<div class="cadre">
<div class="titres_cellules">liens importants</div><div class="liens">
<br /><a href="http://untold-legends.keuf.net/t1-reglements#1">» règlement</a><br /><br />
<a href="http://untold-legends.keuf.net/t9-le-passe-survol-de-la-serie#12">» le passé - survol de la série</a><br /><br />
<a href="http://untold-legends.keuf.net/t16-contexte#19">» contexte</a><br /><br />
<a href="http://untold-legends.keuf.net/t4-liste-des-personnages#4">» liste des personnages</a><br /><br />
<a href="http://untold-legends.keuf.net/f5-o-faq-place-des-invites">» faq ~ place invités</a><br /><br />
<a href="http://untold-legends.keuf.net/t2-staff-du-forum#2">» staff légendaire</a><br /><br />
<a href="http://untold-legends.keuf.net/t6-devenir-partenaires#6">» devenir frères d'armes</a>
</div><div class="credits">
© Codage par <a href="http://www.never-utopia.com" target="_blank">Never-Utopia</a> & <a href="http://www.css-actif.com/" target="_blank">CSS-Actif</a>
<br/>Copyright © SoulCalibur Untold Legends <br/>2012 - Version 2.0 - Tous droits réservés</div>

</div>
</td>



<td width="650">
<script type="text/javascript">
//
</script><div class="cadre_centre"><div class="paonglets">
<span class="paonglet_0 paonglet" id="paonglet_accueil" onclick="javascript:change_paonglet('accueil');">Accueil</span>

<span class="paonglet_0 paonglet" id="paonglet_effectif" onclick="javascript:change_paonglet('effectif');">Wanted</span>

<span class="paonglet_0 paonglet" id="paonglet_autre" onclick="javascript:change_paonglet('autre');">Affiliations</span>

</div>

<div class="contenu_paonglets">
<div class="contenu_paonglet" id="contenu_paonglet_accueil">

<table valign="top" width="100%" border="0">
<tr>
<td width="50%" valign="top">
<div class="onglet_principal">
<h1>bienvenue sur untold legends</h1>
<div class="contenu_principal" style="height: 170px; text-align:left;">Message de bienvenue ici</div>
</div>

<div class="onglet_principal">
<h1>gagnants des concours</h1>
<div class="contenu_principal" style="height: 120px;text-align:left;">les gagnants et leur photo ici</div>
</div>
</td>

<td width="50%">
<div class="onglet_principal">
<h1>news</h1>
<div class="contenu_principal" style="height:205px;text-align:right;">les news ici</div>
</div>

<div class="onglet_principal">
<h1>animations du moment</h1>
<div class="contenu_principal" style="height: 85px;text-align:right;"">La liste des animations ici</div>
</div>
</td>
</tr>
</table>

</div>

<div class="contenu_paonglet" id="contenu_paonglet_effectif">

Contenue effectif

</div>

<div class="contenu_paonglet" id="contenu_paonglet_autre">
<div class="contenu_affiliations">
<div class="titre_tabl">autres forums du staff</div>
<div class="texte_aff"><a href="http://redemption.probb.fr/" class="postlink" target="_blank" rel="nofollow"><img src="http://img690.imageshack.us/img690/1038/banner2lwz.png" border="0" alt="" /></a></div>

<div class="titre_tabl">coup de coeur <span style="color:red;">♥</span></div>
<div class="texte_aff">Aucun pour le moment!</div>

<div class="titre_tabl">top-affiliates</div>
<div class="texte_aff"><a href="http://aceternal.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://img11.hostingpics.net/pics/197909100ac.jpg" border="0" alt="" /></a>
<a href="http://reinventeladestinee.forumactif.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://i51.tinypic.com/314qira.jpg" border="0" alt="" /></a></div>

</div>
</div>
</div>
</div>
<script type="text/javascript">
//
</script>
</td>



<td rowspan="2" width="190" valign="top">
<div class="cadre">
<div class="titres_cellules">staff</div><div class="staff_top">

<table>
<tr>
<td align="center">
<img src="http://img43.imageshack.us/img43/5362/stafftira.png" class="image"/>
</td>

<td><div class="staff">
<span style="font-weight: bold;">Tira </span><br />
¤ Fonda <br />
<a href="/u1">Profil</a> ¤ <a href="/privmsg?mode=post&u=1">MP</a>
</div>

</td>

</tr>
<tr>

<td align="center">
<img src="http://img252.imageshack.us/img252/5223/staffsiegfried.png" class="image"/>
</td>

<td><div class="staff">
<span style="font-weight: bold;">Siegfried</span><br />
¤ Co-Fonda <br />
<a href="/u2">Profil</a> ¤ <a href="/privmsg?mode=post&u=2">MP</a>
</div>
</td>

</tr>

<tr>
<td align="center">
<img src="http://img33.imageshack.us/img33/4849/staffamy.png" class="image"/>
</td>

<td><div class="staff">
<span style="font-weight: bold;">Amy</span><br />
¤ Admin <br />
<a href="/u6">Profil</a> ¤ <a href="/privmsg?mode=post&u=6" >MP</a>
</div>
</td>
</tr>

<tr>

<td align="center">
<img src="http://img254.imageshack.us/img254/5651/staffdampierre.png" class="image"/>
</td>

<td><div class="staff">
<span style="font-weight: bold;">Dampierre</span> <br />
¤ Admin <br />
<a href="/u5">Profil</a> ¤ <a href="/privmsg?mode=post&u=5">MP</a>
</div>
</td>
</tr>

<tr>
<td align="center">
<img src="http://img100.imageshack.us/img100/8053/staffraphael.png" class="image"/>
</td>

<td><div class="staff">
<span style="font-weight: bold;">Raphael</span><br />
¤ Modo<br />
<a href="/u3">Profil</a> ¤ <a href="/privmsg?mode=post&u=3">MP</a>
</div>
</td>
</tr>
</table>
<br />
</div>

<div class="titres_cellules">top-sites</div>

<a href="http://www.root-top.com/topsite/serpentgy/in.php?ID=8098" class="postlink" target="_blank" rel="nofollow"><img src="http://img84.imageshack.us/img84/365/miniedge.png" border="0" alt="" /></a><a href="http://www.root-top.com/topsite/horsevalleys/in.php?ID=1230" class="postlink" target="_blank" rel="nofollow"><img src="http://img824.imageshack.us/img824/3597/minicalibur.png" border="0" alt="" /></a><a href="http://www.root-top.com/topsite/lulu06/in.php?ID=2412" class="postlink" target="_blank" rel="nofollow"><img src="http://img84.imageshack.us/img84/365/miniedge.png" border="0" alt="" /></a><a href="http://www.root-top.com/topsite/belette/in.php?ID=2660" class="postlink" target="_blank" rel="nofollow"><img src="http://img824.imageshack.us/img824/3597/minicalibur.png" border="0" alt="" /></a><a href="http://www.root-top.com/topsite/spyro/in.php?ID=12" class="postlink" target="_blank" rel="nofollow"><img src="http://img84.imageshack.us/img84/365/miniedge.png" border="0" alt="" /></a>
<a href="http://www.root-top.com/topsite/everutopia/in.php?ID=238" class="postlink" target="_blank" rel="nofollow"><img src="http://img824.imageshack.us/img824/3597/minicalibur.png" border="0" alt="" /></a>
<br /><div class="top_aff">N'hésitez pas à voter pour faire <br />connaître notre forum !<br/>
<br />

<span style="color: cyan;">LES TOP-SITES ONT ÉTÉ REMIS À ZÉRO!</span></div>

</div>
</td>

</tr>



<tr>
<td><div class="cadre_centre" style="height: 40px;">

<marquee class="html-marquee" width="100%" direction="left" behavior="scroll" scrollamount="3.5" onmouseover="this.stop()" onmouseout="this.start()">

<a href="http://redemption.probb.fr/" target="_blank"><img src="http://img442.imageshack.us/img442/5919/banner1kb.png"/></a>

<a href="http://terramystica.forumotion.com/" target="_blank"><img src="http://i22.servimg.com/u/f22/12/92/37/90/terra-10.gif"/></a>

<a href="http://funhouse-rpg.forumactif.com/" target="_blank"><img src="http://img11.hostingpics.net/pics/152335partbouton.jpg"/></a>

<a href="http://creatures.forumgratuit.org/" target="_blank"><img src="http://sd-2.archive-host.com/membres/images/129749460537792328/banniere88-31.gif"/></a>

</marquee>

</div>
</td>
</tr>

</table>

J'ai ajusté les marges dans celui-là et je t'ai indiqué dans le CSS où pour aller les mettre à ton goût.

Pour ce qui est de ton onglet du millieux maintenant, comme 'Christa l'a dit, j'en ai déjà fait beaucoup pour toi (mais j'avais jugé que c'était nécéssaire alors...) et ça je ne peux pas te donner le code comme ça... je suis désolée :/

Ce que je te propose, c'est néanmoins d'essayer quelque chose, et là où ça bug, reviens ici et je vais (ou un codeur) t'aider à voir comment régler le problème!

Merci beaucoup. En effet c'est énorme ton travail et je ne t'en remercierai jamais assez. Je vais me débrouiller pour faire le contenu pour les prédéfinis, et je viendrai demander des conseils si jamais j'ai des problèmes.

J'installerai tout ça demain ou après demain, et je ferai mes test, j'ai une convention en fin de semaine et c'est assez crevant XD

Merci encore!!

Plaisir et prend ton temps!

Édit: J'ai pensé à ça pour ton 2e onglet, au lieu des infobulles le mieux serait tout simplement de mettre un système d'onglet à l'intérieur de celui-ci.

Mon écran est en 1366*768 ( donc une assez bonne résolution d'image, on s'entend )

Et je vois ça
https://2img.net/r/ihimizer/img607/6797/bugpasoul.png

Donc je pense que ce serait une bonne idée de les forcer à rester sur la même ligne.

Sinon, j'avoue que pour les onglets, ça pourrait le faire aussi, je vais tester les deux je crois.
On verra lequel est le plus compliqué et tout.

Sinon, en mode fenêtré, j'ai remarqué que le texte reste pas dans le tableau ( dans la colonne de gauche )
Je vais voir pour que le texte s'aligne plutôt sur le bas du cadre.
https://2img.net/r/ihimizer/img36/4374/bugpasoul2.png

Je viens d'aller voir et le problème ne tient pas de l'écran mais de la largeur du forum !

Ça simplifie grandement les choses! Smile

Tu n'as qu'à aller modifier la largeur des onglets qui est actuellement à 198px et la mettre à 186px, ça devrait arranger le tout.

Tu peux aussi rajouter à la fin de ce code css:

Code:: white-space:nowrap;

mais je ne suis pas convaincue que ça change quoi que ce soit :/

Avec un peu de chance, aligner les onglets ça arrangera le problème pour la déformation du bas mais dans le cas contraire *sort son bat de baseball et frappe sur Chrome*, il va carrément falloir modifier les dimensions de cette partie du code pour le rendre valide. Mais va falloir que tu le vérifie sous IE aussi parce lui aussi il déforme ><'

Pour ton 2e onglet, je te conseil chaudement d'y aller avec des onglets, parce que pour forcer les infobulles à rester dans le même carré je sens qu'on va finir par s'arracher les cheveux Wink

Bon alors j'ai posé la PA presque fini sur le nouveau forum ( le dernier ne fonctionnant pas trop, on reprend de zéro sur un nouveau forum )

J'ai réussi à tout arranger pour la PA! Plus de décalage sur une autre ligne ni quoi que se soit, tout reste de la taille que je veux et voilà! J'ai même pu mettre des fond dans mes cadres.

au fait, le nouveau forum est celui-ci : Surge of Darkness

Je me bat maintenant avec l'onglet des Wanted, qui se fera pas onglet aussi, comme tu me l'as suggéré.
Je n'ai pas trop eu de difficulté à positionner le tout, un petit tableau et voilà c'est fait.

La difficulté se trouve surtout dans le fait que je dois changer tous les "paonglet" en "pawanted", ça occasionne parfois quelques bugs. D'ailleurs, tout allait relativement bien ( si on oublie le contenu des autres onglets qui s'affichaient tous dans le premier >< ) et là en modifiant un truc, plus rien apparaît!

J'y arrive presque alors ça me frustre un peu là XD

J'aimerais juste arriver à faire apparaître mon contenu dans leurs onglets respectifs... Et les voir surtout!!

Je test cette partie seule avant de la poser directement dans la PA, pour éviter que je me perde dans les codes.

CSS

Code:: /* ------------------------------------------ DÉBUT PA ------------------------------------------ */

.pawanted
{
display:inline-block;
margin-left:3px;
margin-right:3px;
padding:1px;
cursor:crosshair;
background-color: #000;
border: 1px solid #05B8AF;
color: #fff;
}
.pawanted_0
{
border-radius: 2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
-webkit-border-radius: 2px 2px 2px 2px;
}
.pawanted_1
{
color: #9F0000;
border-radius: 2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
-webkit-border-radius: 2px 2px 2px 2px;
}

.contenu_pawanted
{
margin-top:-1px;
padding: 2px;
display:none;
height: 320px;
}

.contenu_pawanteds
{border: 1px solid #05B8AF;
width: 245px;
height: 315px;
}

.lien a {
font-family: Georgia;
font-style: normal;
font-variant: small-caps;
letter-spacing: -2px;
margin-left: 65px;
margin-right: 65px;
font-size: 17px;
}

.contenu_pawanted w1 {
font-family: Georgia;
color: #05B8AF;
border-bottom: 1px dotted #05B8AF;
font-size: 11px;
font-style: normal;
font-variant: small-caps;
}

/* ------------------------------------------ FIN PA ------------------------------------------ */

Le HTML

Code:: <table>
<tr>
<td><script type="text/javascript">
//
</script><div class="pawanteds">
<span class="pawanted_0 pawanted" id="pawanted_perso1" onclick="javascript:change_pawanted('perso1');"><img src="http://img205.imageshack.us/img205/9396/wantedxianghua.png"></span>
<span class="pawanted_0 pawanted" id="pawanted_perso2" onclick="javascript:change_pawanted('perso2');"><img src="http://img716.imageshack.us/img716/4374/wantedtalim.png"></span>
<span class="pawanted_0 pawanted" id="pawanted_perso3" onclick="javascript:change_pawanted('perso3');"><img src="http://img600.imageshack.us/img600/4135/wantedyunseong.png"></span>
<span class="pawanted_0 pawanted" id="pawanted_perso4" onclick="javascript:change_pawanted('perso4');"><img src="http://img803.imageshack.us/img803/871/wantedsetsuka.png"></span>
<span class="pawanted_0 pawanted" id="pawanted_perso5" onclick="javascript:change_pawanted('perso5');"><img src="http://img585.imageshack.us/img585/1275/wantededgemaster.png"></span>
<span class="pawanted_0 pawanted" id="pawanted_perso6" onclick="javascript:change_pawanted('perso6');"><img src="http://img839.imageshack.us/img839/9025/wantedkilik.png"></span>

<br /><br /><br /><div class="lien"><a href="http://surge-of-darkness.ace.st/t5-liste-des-personnages#5">» Liste complète des Personnages «</a></div>

</div></td><td><font color="black">_______</font></td><td><div class="contenu_pawanteds">
<div class="contenu_pawanted" id="contenu_pawanted_perso1"><w1>Xianghua</w1>
Vivamus condimentum orci non sapien bibendum rhoncus. Nunc laoreet, magna eget feugiat congue, augue dolor feugiat nulla, at luctus risus orci id velit. Nam eget diam nec erat eleifend laoreet. Proin fringilla rhoncus enim vitae consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<br />
<br />

<img src="http://img16.imageshack.us/img16/4585/iconamy2.png" align="left"/> <img src="http://img16.imageshack.us/img16/4585/iconamy2.png" align="right"/>

</div>

<div class="contenu_pawanted" id="contenu_pawanted_perso2">

Talim

</div>

<div class="contenu_pawanted" id="contenu_pawanted_perso3">

Yun-Seong

</div>
<div class="contenu_pawanted" id="contenu_pawanted_perso4">

Setsuka

</div>

<div class="contenu_pawanted" id="contenu_pawanted_perso5">

Edge Master

</div>
<div class="contenu_pawanted" id="contenu_pawanted_perso6">

Kilik

</div>
</div>
<script type="text/javascript">
//
</script></td>
</tr>
</table>

Salut !

Je n'ai malheureusement pas le temps de tout tester ce soir, mais c'est toujours un peu spécial quand on essaye de faire des onglets dans des onglets (je parle par expérience, ya pas si longtemps j'ai eu le même problème!).

La raison que c'est aussi spécial c'est à cause du javascript, et comme je suis une vraie tarte en javascript, je ne peux même pas te dire pourquoi Coup de main pour une PA 174114

Mais bref, il faut éviter d'y toucher.

Ce que je te conseil, c'est de revenir avec le code de base ''paonglet'' et ne pas changer pour ''pawanted'', car il y a 95% de chances qu'on rencontre plein de bugs.

Ensuite, il faudrait rajouter une autre div dans ton onglet avec une classe que tu appellerais, par exemple, Wanted. Ensuite, tu fais ton CSS de cette façon:

Code:: .wanted .paonglet {
...
}

Donc, la classe paonglet faisant partie de la classe wanted aura ces propriétés.

L'autre chose que je peux te proposer aussi c'est carrément d'aller chercher un autre tutoriel pour avoir des codes différents.

Celui-ci par exemple te permettrait d'aligner tes onglets verticalement assez facilement.

Bref, essaie ça et donne moi des nouvelles Wink

P.-S et c'est vraiment beau, félicitation!! Bravo !

OMG j'ai réussi à réparer mon erreur et à rester avec mon idée des "pawanted" !

J'ai tout simplement repris mon code au complet et, au lieu de tout modifier manuellement, j'ai utilisé l'option "remplacer" du bloc-note XD

Du coup je suis en train de tout finaliser Coup de main pour une PA 3333627970

!!!

Après jvais essayer de poser ça sur la PA, j'espère que ça va pas foirer!!

Merci énormément pour ton aide! Je t'en donne des nouvelles bientôt!

EDIT : OMGOMGOMGOMGOMGOMG!!! J'AI RÉUSSIIIIIIIIIIIIIIIIIIIIIIIIII!!!! C'est tout placé sur ma Pa et ce, SANS BUUUUUUUG! ( < première fois de ma vie que j'ai pas à retoucher un code après sa pose sur le forum officiel ) YAAAAAY!!!

Énorme merci à toi pour ton aide, je pourrai jamais assez te remercier!! <3

Haha c'était pas grand chose, mais ça fait plaisir Coup de main pour une PA 189128

@Modos, je crois que vous pouvez classer!

Hello (:
J'ai vu que le sujet était fini, mais vu l'enthousiasme de Ravener je préférais attendre que tu répondes **
Ça fait toujours plaisir Coup de main pour une PA 926145

Donc sur ce, je déplace =D

Coup de main pour une PA

Un titre

Coup de main pour une PA

Sujets similaires

Sujets similaires

Partenaires Or