Onglets centrés

[La-Pouic-Team]

Bonjour,
Voilà j'ai une question toute simple, quel est le code css pour centrer des onglets ? Donc ici, c'est ces onglets là que je veux centrer : http://forumtest.forumgratuit.org/
Je pense que c'est juste un code tout bête mais ... J'ai un peu cherché sur internet et j'ai aucune idée du type de code que je dois mettre pour centrer ce genre de chose ... x)
Merci d'avance

[Invité]

Bonjour,

Le code que vous avez choisi ne permet pas de centrer exactement les onglets, il faut "bidouiller". Le mieux est d'opter pour un code légèrement différent:
Message d'accueil:

Code:

<table style="margin: auto;"><tr><td style="padding-bottom: 4px;" align="center"><div id="mes_onglets">
 
    <span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">
<i><span style="font-size: 17px; line-height: normal"><font color="#AB7E30"><font face="Times New Roman">Présentation </font></font></span></i></span>
 
        <span id="o_2" class="mon_onglet" onclick="changeOnglet(this);">
<i><span style="font-size: 17px; line-height: normal"><font color="#AB7E30"><font face="Times New Roman">Staff & Liens</font></font></span></i></span>
 
        <span id="o_3" class="mon_onglet" onclick="changeOnglet(this);">
<i><span style="font-size: 17px; line-height: normal"><font color="#AB7E30"><font face="Times New Roman">Contexte & Video</font></font></span></i></span>
       
        <span id="o_4" class="mon_onglet" onclick="changeOnglet(this);"><i><span style="font-size: 17px; line-height: normal"><font color="#AB7E30"><font face="Times New Roman">Annonces & Nouveautés</font></font></span></i></span>  </td></tr>
<tr><td>
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu"><div style="width:100%;height:100%;background-image:url('http://img4.hostingpics.net/pics/893082Sanstitre2j5.png');background-repeat:no-repeat;background-position:top center;">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<blockquote><FIELDSET style="border: 3px solid;-moz-border-radius: 8px; border-radius: 8px; -webkit-border-radius: 8px; -webkit-box-shadow: 3px 6px 9px #704A09; background-color: #F5D68E; background-image: url('http://img4.hostingpics.net/pics/77419813re.jpg'); color: ;#704A09 ">
<LEGEND><i><span style="font-size: 24px; line-height: normal"><font color="#AB7E30"><font face="Times New Roman"> Hey, Bienvenue !</font></span></i></font></LEGEND>
<ul><div align="left"><font color="#8C6520">Hey ! Bienvenue à toi, <a href="http://forumtest.forumgratuit.org/profile.forum?mode=viewprofile&amp;u=-1">Anonymous</a> ! <br>
United by the Fate a désormais 187 jours.<br>
Avant de commencer, nous devons vous prévenir que vous être ici ... Dans un asile ! L'asile d'U.B.T.F n'est pas très réputé, mais compte un grand nombre de fou plus cinglé les uns que les autres et le Staff n'échappe pas non plus à la règle !
Quoi ? Vous avez toujours pas pris peur ? * Rôôh encore un suicidaire ... *
Bon, maintenant que vous êtes prévenu, passons au choses sérieuses ... * Haaa j'adore cette phrase ... ! Vous y avez cru franchement ? * * Bon bon okay okay je me calme ... * U.B.T.F attend avec impatience de nouveaux membres actifs et efficace niveau RP, mais aussi qui veulent bien déconné un peu avec les autres fous du forum dans les parties flood !<br>
Sinon les admines mordent un peu ... Mais pas trop fort ne vous inquiétez pas !<br>
Niveau partenariat, on accepte toute les demandes ( enfin, sauf exception mais il n'y en a jamais eu pour le moment), alors profiter-en, le formulaire est court et ne prend pas beaucoup de temps à compléter ... Et, évidement, cette rubrique est ouverte aux invités ;)<br>
Sur ce, on espère bientôt vous voir également contaminé par notre folie ... ?</font></div><br>
</ul></FIELDSET></blockquote>
 
</div></div>
    <div id="co_2" class="mon_contenu" style="display: none;">
 
<table><tr><td><FIELDSET style="border: 3px solid;-moz-border-radius: 8px; border-radius: 8px; -webkit-border-radius: 8px; width: 200px; -webkit-box-shadow: 3px 6px 9px #704A09; background-color:#DEBC6D; background-image: url('http://img4.hostingpics.net/pics/77419813re.jpg');">
<LEGEND><i><span style="font-size: 24px; line-height: normal"><font color="#AB7E30"><font face="Times New Roman">Liens utiles</font></span></i></font></LEGEND>
<font color="#8C6520"><ul><div align="left"><br>• <a href="http://unites-by-the-fate.forumactif.com/t90-reglement" class="postlink" target="_blank" rel="nofollow">Règlement</a><br>
• <a href="http://unites-by-the-fate.forumactif.com/t8-histoire" class="postlink" target="_blank" rel="nofollow">Contexte</a><br>
• <a href="http://unites-by-the-fate.forumactif.com/t126-concept" class="postlink" target="_blank" rel="nofollow">Concept approfondit</a> <br>
• <a href="http://unites-by-the-fate.forumactif.com/t17-les-roles#83" class="postlink" target="_blank" rel="nofollow">Les rôles</a><br>
• <a href="http://unites-by-the-fate.forumactif.com/t153-nouveau-les-avatars" class="postlink" target="_blank" rel="nofollow">Avatar disponible ?</a><br>
• <a href="http://unites-by-the-fate.forumactif.com/f2-presentation" class="postlink" target="_blank" rel="nofollow">Présentation</a><br>
• <a href="http://unites-by-the-fate.forumactif.com/t425-recapitulation-des-doubles-comptes" class="postlink" target="_blank" rel="nofollow">Les doubles-comptes</a><br>
• <a href="http://unites-by-the-fate.forumactif.com/f30-demandes-de-partenariats" class="postlink" target="_blank" rel="nofollow">Devenir partenaire</a><br>
• <a href="http://unites-by-the-fate.forumactif.com/f35-nos-partenaires" class="postlink" target="_blank" rel="nofollow">Nos partenaires</a><br><br></div>
</ul></font></FIELDSET></td>
<td>
<table><tr>
<td><div class="thumbnail">
<img src="http://img11.hostingpics.net/pics/88704465A.png" />
<span><div class="tstaff" align="center">
AMBRE<br>
Fondatrice - Admine<br>
Représentante de la force<br>
<img src="http://img10.hostingpics.net/pics/418420inf.jpg" /><br>
<a href="http://unites-by-the-fate.forumactif.com/u1contact" class="postlink" target="_blank" rel="nofollow">? La contacter ?</a>
</div></span>
</div></td>
 
<br><td><div class="thumbnail">
<img src="http://img11.hostingpics.net/pics/12609869Al.png" />
<span><div class="tstaff" align="center">
ALIZÉE<br>
Fondatrice - Admine<br>
Représentante de la Sagesse<br>
& Designeuse<br>
<img src="http://img10.hostingpics.net/pics/707602inf2.jpg" /><br>
<a href="http://unites-by-the-fate.forumactif.com/u2contact" class="postlink" target="_blank" rel="nofollow">? La contacter ?</a>
</div></span>
</div></td>
 
<td><div class="thumbnail">
<img src="http://img11.hostingpics.net/pics/26226374l.png" />
<span><div class="tstaff" align="center">
LEHANA<br>
Fondatrice<br>
Représentante de la Volonté<br>
<img src="http://img10.hostingpics.net/pics/173208inf3.jpg"><br>
<a href="http://unites-by-the-fate.forumactif.com/u3contact" class="postlink" target="_blank" rel="nofollow">? La contacter ?</a>
</div></span>
</div></td>
 
<tr><td><div class="thumbnail">
<img src="http://img11.hostingpics.net/pics/17950457e.png" />
<span><div class="tstaff" align="center">
ELISABETH<br>
Modératrice<br>
Lieutenant de la Force<br>
<img src="http://img4.hostingpics.net/pics/403174inf4.jpg" /><br>
<a href="http://unites-by-the-fate.forumactif.com/u88contact" class="postlink" target="_blank" rel="nofollow">? La contacter ?</a>
</td></div></span>
</div>
 
<td><div class="thumbnail">
<img src="http://img11.hostingpics.net/pics/32174540li.png" />
<span><div class="tstaff" align="center">
LIANE<br>
Lieutenant de la Sagesse<br>
<img src="http://img4.hostingpics.net/pics/369079inf5.jpg" /><br>
<a href="http://unites-by-the-fate.forumactif.com/u53contact" class="postlink" target="_blank" rel="nofollow">? La contacter ?</a>
</td></div></span>
 
<td><div class="thumbnail">
<img src="http://img11.hostingpics.net/pics/94645369j.png" />
<span><div class="tstaff" align="center">
JAKE<br>
Lieutenant de la Volonté<br>
<img src="http://img11.hostingpics.net/pics/161769inf6.jpg" /><br>
<a href="http://unites-by-the-fate.forumactif.com/u28" class="postlink" target="_blank" rel="nofollow">? Le contacter ?</a>
</td></tr></div></span>
</div></td>
 
</tr></table></tr></td></table>
 
</div>
    <div id="co_3" class="mon_contenu" style="display: none;"><table><tr><td><object width="450" height="364"><param name="movie" value="http://www.youtube.com/v/vGQRYXIxQ-E?fs=1&hl=fr_FR"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always">
<embed src="http://www.youtube.com/v/vGQRYXIxQ-E?fs=1&hl=fr_FR" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="450" height="364"></object>
 
<td><table style=" background-image: url('http://img4.hostingpics.net/pics/77419813re.jpg'); border: 3px solid; -moz-border-radius: 8px; border-radius: 8px; -webkit-border-radius: 8px ; background-color:#EBDAB3; width: 400px; "> <tr> <td><div style="height: 360px; overflow:auto;"><center><span style="font-size: 15px; line-height: normal ; "><font color="#8C6520"><br>
 
<table style="background-image: url('http://img11.hostingpics.net/pics/202028barre.png');border: 3px solid #E8A93C; -moz-border-radius: 20px; border-radius: 20px; -webkit-border-radius: 20px; background-color: ; width : 300px ;"> <tr> <td>
 
<center>CONTEXTE :</center>
 
</td></tr></table>
 
<br></span></center>
Un jour sur la Terre, eut lieu une expérience sur des humains et des animaux. Les scientifiques réussirent à créer des "couples" qui communiquaient par la pensée. Malheureusement, cette réussite n'était pas du goût de tout le monde. Les premiers "spécimens" furent envoyés sur une nouvelle planète. Les Terriens décrétèrent ensuite que la planète était inhabitable et elle fut peu à peu oubliée. Mais les victimes, elles, n'oublièrent jamais, transmettant leur histoire de génération en génération. La civilisation s'installa, dirigée par un représentant. Cette personne devait posséder trois vertues, à savoir la force, la volonté et la sagesse. Au fil des siècles, la vie s'écoula paisiblement. Les humains et les créatures cohabitaient et tout allait pour le mieux. Mais un jour, le représentant actuel eut trois enfants. Trois filles. Chacune possédait une des trois vertues. Lors de leurs 18 ans, elles arrivèrent au pouvoir et la situation se dégrada. Le peuple n'acceptait pas que ce soit des filles et qu'en plus, elles soient plusieurs. Mais leurs compétences étaient certaines et elles finirent par être acceptées et un nouvel âge d'or débuta.<br><br>
Amour, amitié, guerre, quoi qu'il en soit, un jour l'heure de la revanche sonnera et le sang coulera ...<br><br>
En attendant ce sombre jour, amusez-vous bien ! </div>
</font></td></tr></table></td></tr></table>
 
</div>
 
</div><div id="co_4" class="mon_contenu" style="display: none;">
 
 
<table><tr><td><blockquote><FIELDSET style="background-image: url('http://img4.hostingpics.net/pics/77419813re.jpg'); border: 3px solid; width: 400px; -moz-border-radius: 8px; border-radius: 8px; -webkit-border-radius: 8px; background-color:#DEBC6D;">
<LEGEND><font color="#8C6520"><i><span style="font-size: 24px; line-height: normal"><font color="#8C6520"><font face="Times New Roman">Event</font></front></span></i></font></LEGEND>
<span style="font-size: 19px; line-height: normal"><center>Vague criminelle.</center></span><br><ul>Cela faisait bien longtemps que la paix réglait à Ewalhin mais depuis peu des tendances criminelles se font sérieusement sentir : Une organisation à élut domicile dans la ville, à la tête de celle-ci l'impitoyable Heather Wells et son bras droit Vladimir L. Adamovitch, connu sous le pseudonyme du Grim Reaper. <br>
Alors, qui serez vous ? Serez-vous au service du mal ou du bien ? Serez-vous la pire de ordure ou bien le nouveau Superman ? * Bah ouais faut bien des justicier dans la vie ... * Ou bien serez-vous l'innocence victime qui à le malheur de croisé l'assassin ?<br>
La tension est à son comble, les représentantes cherchent à agirent mais Heather n'est nullement décider à se rendre, bien au contraire, elle riposte en force.<br>
Vladimir baisse de plus en plus dans son estime, et pour cause, il n'est plus le docile petit chien qu'il était avant, mais Heather à une autre idée en tête, une idée qui peut faire basculer le monde à tout moment ...
</ul>
</LEGEND>
</FIELDSET></blockquote></td>
 
<td><blockquote><FIELDSET style="background-image: url('http://img4.hostingpics.net/pics/77419813re.jpg'); border: 3px solid ; width: 400px; -moz-border-radius: 8px; border-radius: 8px; -webkit-border-radius: 8px; background-color:#DEBC6D;">
<LEGEND><font color="#8C6520"><i><span style="font-size: 24px; line-height: normal ; "><font color="#8C6520"><font face="Times New Roman">Annonce</font></front></span></i></font></LEGEND>
<ul>
<b>/!\ EHH Pénurie de mec sur U.B.T.F /!\</b> Bah quoi les filles ? Vous voulez pas de beau mec pour joujouté avec eux un peu ... ? Comment ça NON ?  <br>
 
<br><b>Rôles prioritaire : </b><br>
• Infirmer / Médium.<br><br>
<b>Rôles à éviter :</b><br>
• <b>Esprit Lié</b> : Pas mal de membres on pris ce rôle dernièrement, étant donné que c'est sensé être une espèce rare, ce serait sympa de ne pas en reprendre d'ici quelques temps ... <br><br>
? Avant toute chose, nous vous invitons à lire les explications au sujet des différents rôles, <a href="http://unites-by-the-fate.forumactif.com/t17-les-roles" class="postlink" target="_blank" rel="nofollow">cliquez ici.</a><br>
? Si vous souhaitez obtenir l’un des rôle important présenté dans ce topic, vous devrez rédiger un RP de minimum 10 lignes sur un thème que vous devrez choisir parmi une liste (cf. Rôles)<br>
Vous devrez vous faire recenser dans la catégorie <a href="http://unites-by-the-fate.forumactif.com/f24-recrutement" class="postlink" target="_blank" rel="nofollow">Recrutement</a>
</ul>
</LEGEND>
</FIELDSET></blockquote></td></tr></table>
 
</div></div></div>
 
 
 
</div></td></tr></table>

Code javascript à placer dans panneau d'admin > modules > gestion des codes Javascript:

Code:

function changeOnglet(_this){
    var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('span');
    for(var i = 0; i < getOnglets.length; i++){
        if(getOnglets[i].id){
            if(getOnglets[i].id == _this.id){
                getOnglets[i].className = 'mon_onglet_selected';
                document.getElementById('c' + _this.id).style.display            = 'block';
            }
            else{
                getOnglets[i].className = 'mon_onglet';
                document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
            }
        }
    }     
}

Il va surement falloir faire quelques ajustements CSS, .

Cordialement

[La-Pouic-Team]

Humm ... En faite je sais pas trop comment décrire la situation mais les onglets s'affiche bien quand je clique sur "Staff et lien", par contre le reste c'est un peu parti en Freestyle ... et je suis pas sur que le CSS ait grand chose à voir là dedans ... (En clair, je suis un peu paumé ...)

[Invité]

Dans votre CSS vous devez avoir des "float: left;" , il faut les remplacer pas "display: inline;" .

Cordialement.

[La-Pouic-Team]

Ah okay xD Voilà c'est parfait, merci beaucoup ! Je met en résolu