L'annuaire des forums Forumactif
votre référence en terme de référencement et de développement de forums.
 


Aller à la page : 1, 2  Suivant


 ['Christa + Macema] Portail à onglets

JerseyV.I.P.avatar
Messages : 1156
Bonjour ,

Je viens vers vous pour m'aider à optimiser mon en tête d'accueil et la transformer en page HTML à onglets !

Voici le lien du forum concerné : http://www.thevoodoochild.com/


Résultat en : HTML
Type de mise en page : Personnalisé

Quelques explications. En fait j'aimerai 3 onglets.
L'entête actuelle est découpée en deux parties (haut bas) j'aimerai simplement les mettre sur 2 onglets différents ^^

1er onglet comprenant le contexte général et les brèves
2eme onglet, les informations en cours.
3eme onglet nos partenaires

A moins que vous n'ayez des idées supplémentaires ^^

Merci par avance pour les conseils que vous pourrez m'apporter !
PhantasmagoriaV.I.P.avatar
Messages : 1019
Bonjour !

On préfère avoir un aperçu graphique de ce que tu souhaite, merci de le faire Wink

Bonne journée.
'ChristaV.I.P.avatar
Messages : 586
Dans la mesure où tu souhaites juste qu'on t'aide à les mettre en onglets, tu devrais mettre le code de l'en-tête actuel (qui est très bien comme il est je trouve), on te le débroussaillera/améliorera au passage Wink
JerseyV.I.P.avatar
Messages : 1156
Ça c'est une idée ^^

A moins que vous ne trouviez une idée pour la rendre moins lourde visuellement je la trouve énorme !!
Mais comme je suis pas super douée en codage je fais comme je peux. N'hésitez pas à me proposer des choses, je n'ai aucune idée sur la question :
Code:

<br><center><div style="text-align: center;"><font face="Times New Roman" size="6"><i><font color="#7c644e">~†~ Bienvenue {USERNAME} ~†~ </font></i></font></div><div style="background-color: rgb(0, 0, 0); text-align: center;"><font face="Times New Roman" size="2"><font color="#828070">" Va, vis et deviens...Ou meurs ! "</font></font></div>

<table cellpadding="3" cellspacing="5" width="100%"><tbody><tr>

<!--Première colonne Ossements -->
<td align="center" valign="top" width="130">
<p style="text-align: center;"><img src="http://i43.servimg.com/u/f43/09/03/82/79/sque11.png"></p>

</td>

     
<!--—Centre contexte accueil-->

<td align="center" valign="top">


<p style="font-weight: normal; letter-spacing: 1pt; word-spacing: 2pt; font-size: 10px; text-align: justify; font-family: Times New Roman,sans-serif; line-height: 2; margin: 10px; padding: 10px; color: rgb(130, 128, 112);">Depuis que les êtres surnaturels ont fait leur "Coming Out" et qu'ils ont pignon sur rue, la vie s'est réorganisée à la Nouvelle Orléans et dans toute la Louisiane. Mais ici, terre de vieilles superstitions, il règne une atmosphère propice à l'ascension du mal. Alors comme diraient les anciens de la région : "Bienvenue à Voodoo Child".</p><p style="font-weight: normal; letter-spacing: 1pt; word-spacing: 5pt; font-size: 10px; text-align: right; font-family: Times New Roman,times,serif; line-height: 1; color: rgb(130, 128, 112);">Nous traversons l'été 2048...</p><br>

<a href="http://www.thevoodoochild.com/contexte-f29/4-le-gps-les-lieux-particuliers-t547.htm">Vous cherchez un lieu : consultez le GPS de Voodoo</a>
<br>


<p style="border: 1px solid rgb(130, 128, 112); margin-bottom: 10px; -moz-border-radius: 10px 0px 0px 10px;"><img src="http://img198.imageshack.us/img198/9137/brvestest.png" title="Les Nouvelles Pas Fraiches"></p>

<!-- Le cadre de l'Organe --><div style="border: 1px solid rgb(130, 128, 112); padding: 7px; background: url("http://img3.imageshack.us/img3/2437/fondbrve.png") repeat scroll 0% 0% transparent; overflow: auto; color: white; width: 600px; -moz-background-inline-policy: continuous; height: 110px; text-align: justify; line-height: 1; font-family: arial,helvetica,sans-serif; letter-spacing: 1pt; font-size: 11px; font-weight: normal; word-spacing: 2pt; -moz-border-radius: 10px 0px 0px 10px;">



<img src="http://i47.tinypic.com/2usu1jb.png" style="float: left; margin-right: 10px;" alt="TPH">
<strong>▪ Mort Heureuse et scandaleuse du Maire !</strong>
<br>C'est dans son bureau que le Maire de la ville a été retrouvé suffocant les mains prises dans la chevelure flamboyante en désordre d'une prostituée.
Miss Chatoyante comme on l'a surnomme était selon les proches du maire, une habituée du petit salon privé du maire. Hier après midi, ce sont...<br><div style="text-align: right;"><a href="http://www.thevoodoochild.com/t258p15-faits-divers-de-la-semaine#40951">Lire la suite</a></div>


<br>

<img src="http://i50.tinypic.com/2mhzsqg.png" style="float: left; margin-right: 10px;" alt="Genosis Corp">
<strong>▪ Une meute à la Nouvelle Orléans</strong>
<br>La Nouvelle Orléans n'avait jusque là aucune meute, mais en 2048, les Werewolwes font leur apparition et demandèrent au Sachem l'autorisation de s'installer en ville. Voici leur histoire, leurs règles et leur hiérarchie...<br><div style="text-align: right;"><a href="http://www.thevoodoochild.com/t2253-les-werewolves">Découvrir la meute</a></div>


<br>
</div>

<!-- Fin cadre organe -->

</td>


<!--—Colonne 2 ossements-->

<td align="center" valign="top" width="130px">
<p style="text-align: center;"><img src="http://i43.servimg.com/u/f43/09/03/82/79/squedr10.png"></p>
       

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

<table cellpadding="3" cellspacing="5" width="100%"><tbody><tr>

<!--—colonne partenaires -->

<td align="center" valign="top" width="130">

<p style="border: 1px solid rgb(130, 128, 112); margin: 1px; padding: 2px; -moz-border-radius: 5px 0px 0px 5px; font-weight: normal; font-variant: small-caps; color: rgb(130, 128, 112); letter-spacing: 1pt; word-spacing: 2pt; font-size: 12px; text-align: center; font-family: verdana,sans-serif; line-height: 1;">Partenaires</p>

<p style="font-size: xx-small;">

<br><a href="http://www.lestablesdolaria.com/portal.htm" target="_blank"><img class="imguser" src="http://img229.imageshack.us/img229/1363/olaria.png" title="Attention, ils mordent..." alt="Les Tables d'Olaria" style="margin: 4px;" hspace="2" vspace="2"></a>

<br><a href="http://witchslay.forumactif.com/" target="_blank"><img class="imguser" src="http://img9.imageshack.us/img9/2125/tws.png" title="Qui a peur des Sorcières ?!" alt="The Witch Slay" style="margin: 4px;" hspace="2" vspace="2"></a>

<br><a href="http://walhalla.forumsactifs.com" target="_blank"><img class="imguser" src="http://i40.servimg.com/u/f40/11/80/29/92/111.jpg" title="Quand corruption et argent dominent le monde" alt="Walhalla" style="margin: 4px;" hspace="2" vspace="2"></a>

<br><a href="http://www.from-dust-to-hell.com" target="_blank"><img class="imguser" src="http://i40.servimg.com/u/f40/11/80/29/92/hell11.jpg" title="L'enfer ne sera pas complet tant que vous n'y soyez" alt="Hell's Gate" style="margin: 4px;" hspace="2" vspace="2"></a>

<a href="http://http://www.thevoodoochild.com/" target="_blank"><img class="imguser" src="http://i40.servimg.com/u/f40/11/80/29/92/sans_t11.jpg" title="Espace libre" alt="????" style="margin: 4px;" hspace="2" vspace="2"></a>
</p><p></p>

<p style="font-size: 10px;" class="menu"><a href="http://www.thevoodoochild.com/autres-mondes-f2/recapitulatif-de-nos-partenaires-et-amis-t1755.htm">Les autres...</a>
<br><a href="http://www.thevoodoochild.com/autres-mondes-f2/demande-de-partenariat-t16.htm#21">[Vous ?]</a>
</p>

</td>


<!--—Events -->

<td align="center" valign="top" width="150px">

<p style="border: 1px solid rgb(130, 128, 112); margin: 1px; padding: 2px; font-weight: normal; font-variant: small-caps; color: rgb(130, 128, 112); letter-spacing: 1pt; word-spacing: 2pt; font-size: 12px; text-align: center; font-family: verdana,sans-serif; line-height: 1;">Évènements en cours et informations</p>
<br>
<a href="http://www.thevoodoochild.com/t2449-soiree-d-inauguration#43323" title="Inauguration du Wild Bar"><img class="imguser" src="http://i40.servimg.com/u/f40/11/80/29/92/ban12.jpg" alt="Bar méta!"></a>
<br><br>

<p style="font-weight: normal; color: rgb(143, 120, 99); border: 1px dotted rgb(110, 96, 76); letter-spacing: 1pt; word-spacing: 1pt; font-size: 11px; text-align: justify; font-family: verdana,sans-serif; line-height: 2; margin: 8px; padding: 20px;">Ami Visiteur, que dirais tu de venir jouer un peu avec nous ?
Inspiré d'un ancien partenaire (Moonlight) qui avait tenté l'expérience il y a deux ans, Nous avons l'immense plaisir de vous annoncer l'ouverture des comptes touristes aux non inscrits... Pour plus d'explications c'est par <a href="http://www.thevoodoochild.com/t1058-point-sejour">ICI ◘</a> </p>
<p></p><p style="font-weight: normal; color: rgb(161, 124, 79); letter-spacing: 1pt; word-spacing: 2pt; font-size: 12px; text-align: center; font-family: georgia,serif; line-height: 1;">"Nous manquons d'Humains !!."
</p><p style="font-weight: normal; color: rgb(161, 124, 79); letter-spacing: 1pt; word-spacing: 2pt; font-size: 10px; text-align: center; font-family: georgia,serif; line-height: 1;">"Forum ouvert en Septembre 2008."
</p>


</td>

<!--—colonne navigation -->

<td align="center" valign="top" width="130">

<p style="border: 1px solid rgb(130, 128, 112); margin: 1px; padding: 2px; -moz-border-radius: 0px 5px 5px 0px; font-weight: normal; font-variant: small-caps; letter-spacing: 1pt; word-spacing: 2pt; font-size: 12px; text-align: center; font-family: verdana,sans-serif; line-height: 1;">Navigation</p>
<p style="font-size: 10px;" class="menu"><a href="http://voodoo-child.darkbb.com/les-rgles-f22/"><img class="imguser" src="http://img96.imageshack.us/img96/2518/regles.png" alt="Les Règles" style="margin: 15px 4px 4px;" hspace="2" vspace="2"></a>

<br><a href="http://voodoo-child.darkbb.com/contexte-f29/"><img class="imguser" src="http://img412.imageshack.us/img412/3641/contextec.png" alt="Le Contexte" style="margin: 4px;" hspace="2" vspace="2"></a>

<br><a href="http://voodoo-child.darkbb.com/contexte-f29/la-population-recapitulatif-avec-liens-cliquables-t157.htm"><img class="imguser" src="http://img139.imageshack.us/img139/6729/population.png" alt="La Population" style="margin: 4px;" hspace="2" vspace="2"></a>

<br><a href="http://voodoo-child.darkbb.com/le-recensement-f26/"><img class="imguser" src="http://img413.imageshack.us/img413/5395/recensement.png" alt="Le Recensement" style="margin: 4px;" hspace="2" vspace="2"></a>

<br><a href="http://www.thevoodoochild.com/scenarii-f112/"><img class="imguser" g="" src="http://img249.imageshack.us/img249/9654/scenarii.png" alt="Scenarii" style="margin: 4px;" hspace="2" vspace="2"></a>
</p>
<p style="font-size: 10px;" class="menu"><a href="http://voodoo-child.darkbb.com/nos-lois-f22/guide-du-nouvel-arrivant-t394.htm#3513">Guide <br>du Nouvel arrivant</a></p>
     
</td>
 
</tr></tbody></table></center>
'ChristaV.I.P.avatar
Messages : 586
Ergh O.o Dès que j'ai cinq minutes, je vais te me débroussailler ça et t'ajouter les onglets, pas tout de suite vu que je suis un poil à la bourre et qu'il y en a qui sont arrivés avant toi dans les demandes, mais mon instinct de codeuse maniaque me dit qu'il faut que je passe un coup de balai dans ces codes barbares.
JerseyV.I.P.avatar
Messages : 1156
Ca je le pressentais....Suis pas très douée avec les codes donc je bidouille

Prends ton temps !! Je ne suis pas pressée, 3 ans qu'il est comme ça ^^
Macemaavatar
Messages : 137
Si les codeurs me le permettent, puis-je m'occuper du sujet
'ChristaV.I.P.avatar
Messages : 586
Tu peux essayer, mais dans la mesure où je suis affreusement maniaque (et que c'est techniquement mon métier), sois bien consciente que je serai derrière à râler si c'est pas propre @x@
Macemaavatar
Messages : 137
Ca me va, ça me permettra de me familiariser avec vos méthodes ^^

Je vais commencer par proposer un petit nettoyage de la page d'acceuil actuelle, avant de passer aux onglets. ^^
'ChristaV.I.P.avatar
Messages : 586
C'est surtout que je me suis engagée à le faire, donc j'ai le souci du travail bien fait x)
Macemaavatar
Messages : 137
Pas de problèmes ^^. Commençons :

Bonjour Jersey (désolé pour le pré-flood plus haut)

donc on va épurer déjà votre code pour enlever les répétitions, et passer tous les style="" par des class, qui permettront de regrouper les mêmes design dans la css.

Cela va nous permettre d'avoir un tableau plus clair, et si un jour vous désirez changer de design, vous pourrez le faire directement dans la css, sans avoir à bidouiller à nouveau le tableau. Ensuite nous ferons le tableau en onglets.

1. Les répétitions

Déjà dans votre tableau repérez :

Code:
<!--Première colonne Ossements -->
<td align="center" valign="top" width="130">
<p style="text-align: center;"><img src="http://i43.servimg.com/u/f43/09/03/82/79/sque11.png"></p>

</td>

les deux center sont répétitifs, de plus le
Code:
<p> </p>
se met principalement pour du texte, hors vous n'avez dans cette cellule qu'une image.

Changez le donc en :

Code:
<!--Première colonne Ossements -->
<td align="center" valign="top" width="130">
<img src="http://i43.servimg.com/u/f43/09/03/82/79/sque11.png">

</td>

Vous avez la même chose ici :

Code:
<!--Colonne 2 ossements-->

<td align="center" valign="top" width="130px">
<p style="text-align: center;"><img src="http://i43.servimg.com/u/f43/09/03/82/79/squedr10.png"></p>

</td>

à changer par :

Code:
<!--Colonne 2 ossements-->

<td align="center" valign="top" width="130px">
<img src="http://i43.servimg.com/u/f43/09/03/82/79/squedr10.png">

</td>

2. Remplacer les style par des class pour mettre le design dans la css

Repérez ceci :

Code:
<br><center><div style="text-align: center;"><font face="Times New Roman" size="6"><i><font color="#7c644e">~†~ Bienvenue {USERNAME} ~†~ </font></i></font></div><div style="background-color: rgb(0, 0, 0); text-align: center;"><font face="Times New Roman" size="2"><font color="#828070">" Va, vis et deviens...Ou meurs ! "</font></font></div>

vous avez déjà la possibilité d'épurer toutes les visualités de ce code :

Remplacez le par :

Code:
<br><center><div class="pabvnu">~†~ Bienvenue {USERNAME} ~†~ </div>
<div class="paintro">" Va, vis et deviens...Ou meurs ! "</div>

J'ai enlevé ici tous les styles se rapportant aux textes que nous allons reporter dans deux class css :

ajoutez ceci dans votre css :

Citation :
/*Bienvenue*/
.pabvnu {
text-align: center;
color : #7c644e;
font-size : 20px;
font-style : italic;
font-family : Times New Roman;
}

/*Phrase d intro*/
.paintro {
background-color: rgb(0, 0, 0);
text-align: center;
color : #828070;
font-size : 9px;
font-family : Times New Roman;
}

Ces modifications vous conviennent-elles pour le moment ? Avez-vous des questions à poser en sachant que par la suite, nous allons continuer à épurer votre tableau selon cette méthode ?

Cordialement.
'ChristaV.I.P.avatar
Messages : 586
Mazette pour le côté explicatif de la procédure '_' De mon côté, j'aurais donné le code propre et opérationnel sans plus x) Cela étant, j'ai quelques petites rectifications à mentionner de mon côté.

Pour une purification plus simple, et surtout plus en accord avec le principe de langage sémantique qu'est le HTML, il serait bien plus adéquat plutôt que d'utiliser des div de rentabiliser les balises de titre x) (h1 et h2 par exemple)

En associant un identifiant au message d'accueil complet, on peut ensuite spécifier la mise en page des titres h1 et h2 sans que ça ne déteigne sur le reste du forum. Il faudra juste penser à préciser les marges, vu que pour la plupart des navigateurs, par défaut, les titres ont de grandes marges pour les séparer du reste.

Par ailleurs, la balise center est obsolète dans la mesure où comme les tags font elle ne respecte pas l'objectif de séparer le fond de la forme du HTML. Il faut donc s'arranger pour que le centrage soit réalisé via les CSS et non pas via cette balise.

Enfin, dans la mesure où le doctype des forums de ForumActif précise qu'on est en XHTML, il faut utiliser les règles de syntaxe XML, à savoir les balises autofermantes, donc
Code:
<img ... />
et
Code:
<br />
Macemaavatar
Messages : 137
Merci pour le doctype, je ne connaissais pas les différences... x)
Etant autodidacte pour apprendre le html, il doit surement me manquer certaines notions même si j'en connais pas mal.

Pour le reste - h1, h2, center, etc... - , je pensais pas faire trop de modifications pour le moment : j'essaie d'expliquer à quelqu'un qui serait néophyte, ne connaissant pas le niveau des demandeurs. Donc d'abord reprendre avec quelque chose de connu, expliquer en gros au départ pour aller plus vite dans les modifications ensuite.

J'espère juste ne pas être trop brouillon dans les explications

^^ Si cela te va par contre, je continue....
'ChristaV.I.P.avatar
Messages : 586
N'oublie pas qu'un demandeur lambda (du moins c'était le cas sur la plupart des forums où j'ai officié) s'en fiche un poil des explications tant que son message d'accueil fonctionne. En fait, c'est aussi la position de beaucoup de codeurs que j'ai croisé, très friands du "on s'en fiche que ça ne soit pas correct, de toute façon ça fonctionne". En tant qu'autodidacte, il faut que tu prennes vite les bonnes habitudes, ça ne sera que plus facile pour toi ensuite de coder rapidement et efficacement. (Pour info, je suis autodidacte aussi, j'ai décidé d'en faire mon métier parce que j'aime ça davantage que l'ingénierie informatique)

Techniquement, remplacer des
Code:
<div style="trucmuche">Titre</div>
par
Code:
<h1>Titre</h1>
est beaucoup plus simple, et pour le commanditaire, c'est bien plus clair à lire Wink

Après, pour le center, c'est effectivement plus simple pour le commanditaire, mais ça reste incorrect du point de vue codage Wink Dans la mesure ou tu expliques ton procédé au commanditaire, c'est que tu cherches à ce qu'il apprenne quelque chose : autant lui enseigner les bonnes méthodes (tant qu'on ne va pas dans le positionnement relatif et absolu ou l'intérêt de la propriété clear - qui sera vachement utile dans le cas actuel - ça devrait aller)

Mais sinon, continue continue, je suis curieuse de voir le code final ^^

PS : Pas taper Jersey ^^'


Ajout, beaucoup plus tard :

J'ai fini (insomnie x)), mais je laisse Macema poursuivre son travail avant de proposer ma version du code ^^

D'ailleurs, une question me turlupine, Jersey, j'ai pour le moment divisé ton message d'accueil actuel en deux onglets différents, mais du coup les partenaires se retrouvent dans le deuxième onglet (donc non visibles tout de suite), ça ne te pose pas de problèmes ?

Et en ce qui concerne les onglets, doivent-ils réagir au clic ou bien au survol ? @o@
Macemaavatar
Messages : 137
^^ Pour ma part, j'aurais besoin d'avoir votre code css .imguser avant de continuer, de même cette balise est-elle uniquement utilisée pour votre page d'acceuil ou l'utilisez vous pour d'autres images sur votre forum ?

Citation :
Et en ce qui concerne les onglets, doivent-ils réagir au clic ou bien au survol ? @o@

Très bonne question
ThreaxV.I.P.avatar
Messages : 7332
Puisque vous floodez, j'ajoute mon grain de sel. :p
Les balises autofermantes, je suis d'accord. Mais le côté "osef si c'est pas bien tant que ça marche," même les plus grands sites l'adoptent... On ne peut jamais avoir un code niquel à 100%, si on veut qu'il marche sur le maximum de navigateurs. Smile

Voilà, fin du débat.
'ChristaV.I.P.avatar
Messages : 586
Est-ce une raison pour ne pas soigner son travail ? XD Je sais bien qu'on est obligé de faire des sacrifices, mais de nos jours il y a quand même un réel effort pour rendre les sites accessibles.

Macema > Pour le css imguser, c'est pour l'opacité progressive. Personnellement, je n'y ai pas touché @o@
Macemaavatar
Messages : 137
Une fois épuré, voici ce que j'obtiens :

Code du tableau :
Code:

<center><div class="pabvnu">~†~ Bienvenue {USERNAME} ~†~ </div>
<div class="paintro">" Va, vis et deviens...Ou meurs ! "</div>
<table cellpadding="3" cellspacing="5" width="100%"><tbody><tr>

<!--Première colonne Ossements -->
<td align="center" valign="top" width="130">
<img src="http://i43.servimg.com/u/f43/09/03/82/79/sque11.png" />
</td>
   
<!--—Centre contexte accueil-->

<td align="center" valign="top">

<p class="pahist1">Depuis que les êtres surnaturels ont fait leur "Coming Out" et qu'ils ont pignon sur rue, la vie s'est réorganisée à la Nouvelle Orléans et dans toute la Louisiane. Mais ici, terre de vieilles superstitions, il règne une atmosphère propice à l'ascension du mal. Alors comme diraient les anciens de la région : "Bienvenue à Voodoo Child".</p>
<p class="pahist2">Nous traversons l'été 2048...</p>

<a href="http://www.thevoodoochild.com/contexte-f29/4-le-gps-les-lieux-particuliers-t547.htm">Vous cherchez un lieu : consultez le GPS de Voodoo</a>


<p class="paimgbreve"><img src="http://img198.imageshack.us/img198/9137/brvestest.png" title="Les Nouvelles Pas Fraiches" /></p>

<!-- Le cadre de l'Organe -->
<div class="pacadreorgane">

<img src="http://i47.tinypic.com/2usu1jb.png" alt="TPH" />
<strong>▪ Mort Heureuse et scandaleuse du Maire !</strong>

C'est dans son bureau que le Maire de la ville a été retrouvé suffocant les mains prises dans la chevelure flamboyante en désordre d'une prostituée.
Miss Chatoyante comme on l'a surnomme était selon les proches du maire, une habituée du petit salon privé du maire. Hier après midi, ce sont...

<div align="right"><a href="http://www.thevoodoochild.com/t258p15-faits-divers-de-la-semaine#40951">Lire la suite</a></div>




<img src="http://i50.tinypic.com/2mhzsqg.png" alt="Genosis Corp" />
<strong>▪ Une meute à la Nouvelle Orléans</strong>

La Nouvelle Orléans n'avait jusque là aucune meute, mais en 2048, les Werewolwes font leur apparition et demandèrent au Sachem l'autorisation de s'installer en ville. Voici leur histoire, leurs règles et leur hiérarchie...

<div align="right"><a href="http://www.thevoodoochild.com/t2253-les-werewolves">Découvrir la meute</a></div>



</div>

<!-- Fin cadre organe -->

</td>

<!--—Colonne 2 ossements-->

<td align="center" valign="top" width="130px">
<img src="http://i43.servimg.com/u/f43/09/03/82/79/squedr10.png" />
</td>
 
</tr></tbody></table>

<table cellpadding="3" cellspacing="5" width="100%"><tbody><tr>

<!--—colonne partenaires -->

<td align="center" valign="top" width="130">

<p class="paparten">Partenaires</p>


<a href="http://www.lestablesdolaria.com/portal.htm" target="_blank"><img class="imguser" src="http://img229.imageshack.us/img229/1363/olaria.png" title="Attention, ils mordent..." alt="Les Tables d'Olaria" style="margin: 4px;" hspace="2" vspace="2" /></a>

<a href="http://witchslay.forumactif.com/" target="_blank"><img class="imguser" src="http://img9.imageshack.us/img9/2125/tws.png" title="Qui a peur des Sorcières ?!" alt="The Witch Slay" style="margin: 4px;" hspace="2" vspace="2" /></a>

<a href="http://walhalla.forumsactifs.com" target="_blank"><img class="imguser" src="http://i40.servimg.com/u/f40/11/80/29/92/111.jpg" title="Quand corruption et argent dominent le monde" alt="Walhalla" style="margin: 4px;" hspace="2" vspace="2" /></a>

<a href="http://www.from-dust-to-hell.com" target="_blank"><img class="imguser" src="http://i40.servimg.com/u/f40/11/80/29/92/hell11.jpg" title="L'enfer ne sera pas complet tant que vous n'y soyez" alt="Hell's Gate" style="margin: 4px;" hspace="2" vspace="2" /></a>

<a href="http://http://www.thevoodoochild.com/" target="_blank"><img class="imguser" src="http://i40.servimg.com/u/f40/11/80/29/92/sans_t11.jpg" title="Espace libre" alt="????" style="margin: 4px;" hspace="2" vspace="2" /></a>


<p style="font-size: 10px;" class="menu"><a href="http://www.thevoodoochild.com/autres-mondes-f2/recapitulatif-de-nos-partenaires-et-amis-t1755.htm">Les autres...</a>

<a href="http://www.thevoodoochild.com/autres-mondes-f2/demande-de-partenariat-t16.htm#21">[Vous ?]</a></p>

</td>

<!--—Events -->

<td align="center" valign="top" width="150px">

<p class="paeventinfo">Évènements en cours et informations</p>

<a href="http://www.thevoodoochild.com/t2449-soiree-d-inauguration#43323" title="Inauguration du Wild Bar"><img class="imguser" src="http://i40.servimg.com/u/f40/11/80/29/92/ban12.jpg" alt="Bar méta!" /></a>




<p class="pahist3">Ami Visiteur, que dirais tu de venir jouer un peu avec nous ?
Inspiré d'un ancien partenaire (Moonlight) qui avait tenté l'expérience il y a deux ans, Nous avons l'immense plaisir de vous annoncer l'ouverture des comptes touristes aux non inscrits... Pour plus d'explications c'est par <a href="http://www.thevoodoochild.com/t1058-point-sejour">ICI ◘</a> </p>
<p class="painfo1">"Nous manquons d'Humains !!."</p>
<p class="painfo2">"Forum ouvert en Septembre 2008."</p>

</td>

<!--—colonne navigation -->

<td align="center" valign="top" width="130">

<p class="panavig">Navigation</p>
<a href="http://voodoo-child.darkbb.com/les-rgles-f22/"><img class="imguser" src="http://img96.imageshack.us/img96/2518/regles.png" alt="Les Règles" style="margin: 15px 4px 4px;" hspace="2" vspace="2" /></a>

<a href="http://voodoo-child.darkbb.com/contexte-f29/"><img class="imguser" src="http://img412.imageshack.us/img412/3641/contextec.png" alt="Le Contexte" style="margin: 4px;" hspace="2" vspace="2" /></a>

<a href="http://voodoo-child.darkbb.com/contexte-f29/la-population-recapitulatif-avec-liens-cliquables-t157.htm"><img class="imguser" src="http://img139.imageshack.us/img139/6729/population.png" alt="La Population" style="margin: 4px;" hspace="2" vspace="2" /></a>

<a href="http://voodoo-child.darkbb.com/le-recensement-f26/"><img class="imguser" src="http://img413.imageshack.us/img413/5395/recensement.png" alt="Le Recensement" style="margin: 4px;" hspace="2" vspace="2" /></a>

<a href="http://www.thevoodoochild.com/scenarii-f112/"><img class="imguser" src="http://img249.imageshack.us/img249/9654/scenarii.png" alt="Scenarii" style="margin: 4px;" hspace="2" vspace="2" /></a>


<p style="font-size: 10px;" class="menu"><a href="http://voodoo-child.darkbb.com/nos-lois-f22/guide-du-nouvel-arrivant-t394.htm#3513">Guide
du Nouvel arrivant</a></p>
   
</td>
</tr></tbody></table></center>

et codes à insérer dans la feuille de style css

Code:
/*Bienvenue*/
.pabvnu {
text-align: center; color : #7c644e; font : 20px italic Times New Roman;
}

/*Phrase d intro*/
.paintro {
background-color: rgb(0, 0, 0); text-align: center; color : #828070; font : 9px Times New Roman;
}

/*Histoire*/
.pahist1 {
word-spacing: 2pt; text-align: justify; line-height: 2; margin: 10px; padding: 10px;
}

/*Date de l histoire*/
.pahist2 {
word-spacing: 5pt; text-align: right; line-height: 1;
}

.pahist1, .pahist2 {
font : 10px normal Times New Roman,sans-serif; letter-spacing: 1pt; color: rgb(130, 128, 112);
}

/*Image breve*/
.paimgbreve {
border: 1px solid rgb(130, 128, 112); margin-bottom: 10px; -moz-border-radius: 10px 0px 0px 10px;
}

/*Cadre organe*/
.pacadreorgane {
border: 1px solid rgb(130, 128, 112); padding: 7px; background: url("http://img3.imageshack.us/img3/2437/fondbrve.png") repeat scroll 0% 0% transparent; overflow: auto; color: white; width: 600px; -moz-background-inline-policy: continuous; height: 110px; line-height: 1; text-align: justify; font : 11px normal arial,helvetica,sans-serif; letter-spacing: 1pt; word-spacing: 2pt; -moz-border-radius: 10px 0px 0px 10px;
}

/*Images cadres organe*/
.pacadreorgane img {
float: left; margin-right: 10px;
}

/*Phrase partenaire*/
.paparten {
-moz-border-radius: 5px 0px 0px 5px;
}

/*Phrase navigation*/
.panavig {
-moz-border-radius: 0px 5px 5px 0px;
}

/*Phrase evenement et info*/
.paeventinfo, .paparten, .panavig {
border: 1px solid rgb(130, 128, 112); margin: 1px; padding: 2px; font: 12px normal small-caps verdana,sans-serif; color: rgb(130, 128, 112); letter-spacing: 1pt; word-spacing: 2pt; text-align: center; line-height: 1;
}

/*Phrase pour rejoindre le forum*/
.pahist3 {
color: rgb(143, 120, 99); border: 1px dotted rgb(110, 96, 76); letter-spacing: 1pt; word-spacing: 1pt; font: 11px normal verdana,sans-serif; text-align: justify; line-height: 2; margin: 8px; padding: 20px;
}

/*Phrase info*/
.painfo1 {
font-size: 12px;
}

/*Phrase ouverture forum*/
.painfo2 {
font-size: 10px;
}

.painfo1, .painfo2 {
color: rgb(161, 124, 79); letter-spacing: 1pt; word-spacing: 2pt; text-align: center; font : normal georgia,serif; line-height: 1;
}

Effectivement pour les imguser, pas besoin de changer dans ce cas. C'est pas vraiment utile. Par contre 'ai gardé le coté condensé du code, même si j'ai tendance à plus faire de sauts de ligne entre chaque pour une meilleure clarté. J'attends la réponse de Jersey pour la création des onglets.

Question supplémentaire : la demande est de trois onglets, dont seulement un rien que pour les partenaires, ça risque de faire léger. Comme 'Christa, je pencherai plus pour deux onglets. J'aimerai donc avoir une confirmation de ces 3 onglets ^^.
JerseyV.I.P.avatar
Messages : 1156
Et bien merci à vous de vous décarcasser à ce point ...
J'avoue pour ma part être friande des explications, même si parfois j'ai du mal à m'y retrouver cela me permet de comprendre un minimum le code ^^

Vous avez raison pour les partenaires, je préfèrerai les avoir sur le premier onglets surtout qu'ils sont triés sur le volet et on un petit plus sur le forum puisqu'il ont un lieu qui porte leur non avec lien dans la description de celui ci.

Bref, 'Christa je suppose que tu as une belle idée à me proposer ^^
Si tel est le cas je suis preneuse bien sur !
'ChristaV.I.P.avatar
Messages : 586
T'as oublié de préciser si tu veux que tes onglets changent au clic ou au survol XD Dans ma version, ils changent au clic.

Pour les partenaires, en jonglant bien, on doit pouvoir s'arranger pour faire comme sur mon forum, à savoir les partenaires sous le message d'accueil.
JerseyV.I.P.avatar
Messages : 1156
Je préfère au clic, j'ai horreur des trucs qui clignotent partout quand on bouge sa souris ^^ (A part pour les effets sur images qui les rendent plus discrètes sur l'en tête)

Oui on peut les mettre en dessous mais de façon discrète ...D'ailleurs va falloir que je te cause via MP...Il me reste une place et j'aime assez l'idée de mettre un lieu portant le nom D'institut Solius (petite prison ^^)...mais là n'est pas le sujet.
JerseyV.I.P.avatar
Messages : 1156
Double post désolée mais c'est pour être certaine que tu ne loupes pas ce message ^^"

A ton avis sur le premier onglet il est plus important de mettre nos brèves ou les infos du type évents en cours et autres infos ... La navigation dur le deuxième ça craint ou pas...
En fait je suis un peu paumée quant au côté pratique de la chose...Suis je claire ?
Macemaavatar
Messages : 137
Pour un tableau à onglets, vous avez trois codes à insérer :

un code Javascript à mettre dans Panneau d'administration > Modules > Gestion des codes javascripts. Créez un nouveau javascript. Donnez-lui le titre de votre choix, et cochez la case "Sur l'index" :
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';
                }
            }
        }   
    }

Un code HTML à mettre dans PA > Affichage > Généralités, à la place de votre ancien code :
Code:
    <table style="margin: auto;"><tr><td style="padding-bottom: 4px;" align="center" width="900">
   <div id="mes_onglets">
        <span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Evénements</span>
            <span id="o_2" class="mon_onglet" onclick="changeOnglet(this);">A propos...</span></td></tr>
         
   <tr><td align="center" width="900"><div class="pabvnu">~†~ Bienvenue {USERNAME} ~†~ </div>
<div class="paintro">" Va, vis et deviens...Ou meurs ! "</div></td><tr>

    <tr><td width="900">
            <div class="clear"><div id="mes_contenus">
        <div id="co_1" class="mon_contenu"><table cellpadding="3" cellspacing="5" width="100%"><tbody></tr>

<!--—colonne partenaires -->

<td align="center" valign="top" width="130">

<p class="paparten">Partenaires</p>


<a href="http://www.lestablesdolaria.com/portal.htm" target="_blank"><img class="imguser" src="http://img229.imageshack.us/img229/1363/olaria.png" title="Attention, ils mordent..." alt="Les Tables d'Olaria" style="margin: 4px;" hspace="2" vspace="2" /></a>

<a href="http://witchslay.forumactif.com/" target="_blank"><img class="imguser" src="http://img9.imageshack.us/img9/2125/tws.png" title="Qui a peur des Sorcières ?!" alt="The Witch Slay" style="margin: 4px;" hspace="2" vspace="2" /></a>

<a href="http://walhalla.forumsactifs.com" target="_blank"><img class="imguser" src="http://i40.servimg.com/u/f40/11/80/29/92/111.jpg" title="Quand corruption et argent dominent le monde" alt="Walhalla" style="margin: 4px;" hspace="2" vspace="2" /></a>

<a href="http://www.from-dust-to-hell.com" target="_blank"><img class="imguser" src="http://i40.servimg.com/u/f40/11/80/29/92/hell11.jpg" title="L'enfer ne sera pas complet tant que vous n'y soyez" alt="Hell's Gate" style="margin: 4px;" hspace="2" vspace="2" /></a>

<a href="http://http://www.thevoodoochild.com/" target="_blank"><img class="imguser" src="http://i40.servimg.com/u/f40/11/80/29/92/sans_t11.jpg" title="Espace libre" alt="????" style="margin: 4px;" hspace="2" vspace="2" /></a>


<p style="font-size: 10px;" class="menu"><a href="http://www.thevoodoochild.com/autres-mondes-f2/recapitulatif-de-nos-partenaires-et-amis-t1755.htm">Les autres...</a>

<a href="http://www.thevoodoochild.com/autres-mondes-f2/demande-de-partenariat-t16.htm#21">[Vous ?]</a></p>

</td>

<!--—Events -->

<td align="center" valign="top" width="150px">

<p class="paeventinfo">Évènements en cours et informations</p>

<a href="http://www.thevoodoochild.com/t2449-soiree-d-inauguration#43323" title="Inauguration du Wild Bar"><img class="imguser" src="http://i40.servimg.com/u/f40/11/80/29/92/ban12.jpg" alt="Bar méta!" /></a>




<p class="pahist3">Ami Visiteur, que dirais tu de venir jouer un peu avec nous ?
Inspiré d'un ancien partenaire (Moonlight) qui avait tenté l'expérience il y a deux ans, Nous avons l'immense plaisir de vous annoncer l'ouverture des comptes touristes aux non inscrits... Pour plus d'explications c'est par <a href="http://www.thevoodoochild.com/t1058-point-sejour">ICI ◘</a> </p>
<p class="painfo1">"Nous manquons d'Humains !!."</p>
<p class="painfo2">"Forum ouvert en Septembre 2008."</p>

</td>

<!--—colonne navigation -->

<td align="center" valign="top" width="130">

<p class="panavig">Navigation</p>
<a href="http://voodoo-child.darkbb.com/les-rgles-f22/"><img class="imguser" src="http://img96.imageshack.us/img96/2518/regles.png" alt="Les Règles" style="margin: 15px 4px 4px;" hspace="2" vspace="2" /></a>

<a href="http://voodoo-child.darkbb.com/contexte-f29/"><img class="imguser" src="http://img412.imageshack.us/img412/3641/contextec.png" alt="Le Contexte" style="margin: 4px;" hspace="2" vspace="2" /></a>

<a href="http://voodoo-child.darkbb.com/contexte-f29/la-population-recapitulatif-avec-liens-cliquables-t157.htm"><img class="imguser" src="http://img139.imageshack.us/img139/6729/population.png" alt="La Population" style="margin: 4px;" hspace="2" vspace="2" /></a>

<a href="http://voodoo-child.darkbb.com/le-recensement-f26/"><img class="imguser" src="http://img413.imageshack.us/img413/5395/recensement.png" alt="Le Recensement" style="margin: 4px;" hspace="2" vspace="2" /></a>

<a href="http://www.thevoodoochild.com/scenarii-f112/"><img class="imguser" src="http://img249.imageshack.us/img249/9654/scenarii.png" alt="Scenarii" style="margin: 4px;" hspace="2" vspace="2" /></a>


<p style="font-size: 10px;" class="menu"><a href="http://voodoo-child.darkbb.com/nos-lois-f22/guide-du-nouvel-arrivant-t394.htm#3513">Guide
du Nouvel arrivant</a></p>
 
</td>
</tr></tbody></table></div>
        <div id="co_2" class="mon_contenu" style="display: none;"><table cellpadding="3" cellspacing="5" width="100%"><tbody><tr>

<!--Première colonne Ossements -->
<td align="center" valign="top" width="130">
<img src="http://i43.servimg.com/u/f43/09/03/82/79/sque11.png" />
</td>
 
<!--—Centre contexte accueil-->

<td align="center" valign="top">

<p class="pahist1">Depuis que les êtres surnaturels ont fait leur "Coming Out" et qu'ils ont pignon sur rue, la vie s'est réorganisée à la Nouvelle Orléans et dans toute la Louisiane. Mais ici, terre de vieilles superstitions, il règne une atmosphère propice à l'ascension du mal. Alors comme diraient les anciens de la région : "Bienvenue à Voodoo Child".</p>
<p class="pahist2">Nous traversons l'été 2048...</p>

<a href="http://www.thevoodoochild.com/contexte-f29/4-le-gps-les-lieux-particuliers-t547.htm">Vous cherchez un lieu : consultez le GPS de Voodoo</a>


<p class="paimgbreve"><img src="http://img198.imageshack.us/img198/9137/brvestest.png" title="Les Nouvelles Pas Fraiches" /></p>

<!-- Le cadre de l'Organe -->
<div class="pacadreorgane">

<img src="http://i47.tinypic.com/2usu1jb.png" alt="TPH" />
<strong>▪ Mort Heureuse et scandaleuse du Maire !</strong>

C'est dans son bureau que le Maire de la ville a été retrouvé suffocant les mains prises dans la chevelure flamboyante en désordre d'une prostituée.
Miss Chatoyante comme on l'a surnomme était selon les proches du maire, une habituée du petit salon privé du maire. Hier après midi, ce sont...

<div align="right"><a href="http://www.thevoodoochild.com/t258p15-faits-divers-de-la-semaine#40951">Lire la suite</a></div>




<img src="http://i50.tinypic.com/2mhzsqg.png" alt="Genosis Corp" />
<strong>▪ Une meute à la Nouvelle Orléans</strong>

La Nouvelle Orléans n'avait jusque là aucune meute, mais en 2048, les Werewolwes font leur apparition et demandèrent au Sachem l'autorisation de s'installer en ville. Voici leur histoire, leurs règles et leur hiérarchie...

<div align="right"><a href="http://www.thevoodoochild.com/t2253-les-werewolves">Découvrir la meute</a></div>



</div>

<!-- Fin cadre organe -->

</td>

<!--—Colonne 2 ossements-->

<td align="center" valign="top" width="130px">
<img src="http://i43.servimg.com/u/f43/09/03/82/79/squedr10.png" />
</td>
 
</tr></tbody></table></div>
    </div></div></div>
   </td></tr></table>

et enfin la css à ajouter et à personnaliser, en plus de celle que je vous ai donné précédemment :
Code:

/*onglet non sélectionne*/
mon_onglet{
  display: inline;
  padding: 2px;
  margin: 2px;
  color: #000;
  border: 1px solid #00ff00;
  background: #ffffff;}

/*onglet au passage de la souris*/
.mon_onglet:hover{
  background: #b8efa1;
  border: 1px solid #ff0000;}
     
/*onglet selectionne*/
.mon_onglet_selected{
  display: inline;
  padding: 2px;
  margin: 2px;
  color: #000;
  background: #ffff00;
  border: 1px solid #0000ff;}
     
.clear{
  clear: both;}

/*cadre des descriptions*/
.mon_contenu{
  border: 1px solid #ffffff;
  padding: 10px;
  margin: 10 px;
  height: 350px;
width:100%;}

/*cadre des contenus*/
#mes_contenus{
  height: 400px;
width:100%;}

^^ Cela vous plait-il ?
'ChristaV.I.P.avatar
Messages : 586
Oh là attention Macema, je vois des erreurs dans ton code (et je le trouve un poil trop compliqué à la relecture ^^'). En particulier, un tr qui se sent bien seul.

-> Pourquoi un tableau à deux lignes et une colonne quand des div iraient tout aussi bien et allégeraient le code ?
-> Pourquoi des styles="" quand tu as pourtant pris bien soin de séparer CSS du HTML ?
-> Et tu pourrais utiliser la librairie jQuery pour les onglets, c'est plus léger Wink
-> Et encore une fois, des paragraphes (ou des div) là où des titres seraient bien plus simples, c'est un peu dommage @o@

Jersey a écrit:
A ton avis sur le premier onglet il est plus important de mettre nos brèves ou les infos du type évents en cours et autres infos ... La navigation dur le deuxième ça craint ou pas...
En fait je suis un peu paumée quant au côté pratique de la chose...Suis je claire ?
J'avoue que je ne sais pas trop ^^' La navigation et les tops j'aurais tendance à les placer sur l'onglet principal, après c'est à toi de voir.
Macemaavatar
Messages : 137
Le jQuery, je ne le connais pas encore assez pour l'utiliser Embarassed

par contre, dans ce cas, c'est plutôt ceci que tu demandes :

Code:
<div style="padding-bottom: 4px;" align="center" width="900">

  <div id="mes_onglets">
        <span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Evénements</span>
            <span id="o_2" class="mon_onglet" onclick="changeOnglet(this);">A propos...</span>
         
</div>
       
<div class="pabvnu">~†~ Bienvenue {USERNAME} ~†~ </div>
<div class="paintro">" Va, vis et deviens...Ou meurs ! "</div>
   
            <div class="clear"><div id="mes_contenus" width="900">
        <div id="co_1" class="mon_contenu">
<!--—début contenu événements -->
      
<table cellpadding="3" cellspacing="5" width="100%"><tbody><tr>

<!--—colonne partenaires -->

<td align="center" valign="top" width="130">

<p class="paparten">Partenaires</p>


<a href="http://www.lestablesdolaria.com/portal.htm" target="_blank"><img class="imguser" src="http://img229.imageshack.us/img229/1363/olaria.png" title="Attention, ils mordent..." alt="Les Tables d'Olaria" style="margin: 4px;" hspace="2" vspace="2" /></a>

<a href="http://witchslay.forumactif.com/" target="_blank"><img class="imguser" src="http://img9.imageshack.us/img9/2125/tws.png" title="Qui a peur des Sorcières ?!" alt="The Witch Slay" style="margin: 4px;" hspace="2" vspace="2" /></a>

<a href="http://walhalla.forumsactifs.com" target="_blank"><img class="imguser" src="http://i40.servimg.com/u/f40/11/80/29/92/111.jpg" title="Quand corruption et argent dominent le monde" alt="Walhalla" style="margin: 4px;" hspace="2" vspace="2" /></a>

<a href="http://www.from-dust-to-hell.com" target="_blank"><img class="imguser" src="http://i40.servimg.com/u/f40/11/80/29/92/hell11.jpg" title="L'enfer ne sera pas complet tant que vous n'y soyez" alt="Hell's Gate" style="margin: 4px;" hspace="2" vspace="2" /></a>

<a href="http://http://www.thevoodoochild.com/" target="_blank"><img class="imguser" src="http://i40.servimg.com/u/f40/11/80/29/92/sans_t11.jpg" title="Espace libre" alt="????" style="margin: 4px;" hspace="2" vspace="2" /></a>


<p style="font-size: 10px;" class="menu"><a href="http://www.thevoodoochild.com/autres-mondes-f2/recapitulatif-de-nos-partenaires-et-amis-t1755.htm">Les autres...</a>

<a href="http://www.thevoodoochild.com/autres-mondes-f2/demande-de-partenariat-t16.htm#21">[Vous ?]</a></p>

</td>

<!--—Events -->

<td align="center" valign="top" width="150px">

<p class="paeventinfo">Évènements en cours et informations</p>

<a href="http://www.thevoodoochild.com/t2449-soiree-d-inauguration#43323" title="Inauguration du Wild Bar"><img class="imguser" src="http://i40.servimg.com/u/f40/11/80/29/92/ban12.jpg" alt="Bar méta!" /></a>




<p class="pahist3">Ami Visiteur, que dirais tu de venir jouer un peu avec nous ?
Inspiré d'un ancien partenaire (Moonlight) qui avait tenté l'expérience il y a deux ans, Nous avons l'immense plaisir de vous annoncer l'ouverture des comptes touristes aux non inscrits... Pour plus d'explications c'est par <a href="http://www.thevoodoochild.com/t1058-point-sejour">ICI ◘</a> </p>
<p class="painfo1">"Nous manquons d'Humains !!."</p>
<p class="painfo2">"Forum ouvert en Septembre 2008."</p>

</td>

<!--—colonne navigation -->

<td align="center" valign="top" width="130">

<p class="panavig">Navigation</p>
<a href="http://voodoo-child.darkbb.com/les-rgles-f22/"><img class="imguser" src="http://img96.imageshack.us/img96/2518/regles.png" alt="Les Règles" style="margin: 15px 4px 4px;" hspace="2" vspace="2" /></a>

<a href="http://voodoo-child.darkbb.com/contexte-f29/"><img class="imguser" src="http://img412.imageshack.us/img412/3641/contextec.png" alt="Le Contexte" style="margin: 4px;" hspace="2" vspace="2" /></a>

<a href="http://voodoo-child.darkbb.com/contexte-f29/la-population-recapitulatif-avec-liens-cliquables-t157.htm"><img class="imguser" src="http://img139.imageshack.us/img139/6729/population.png" alt="La Population" style="margin: 4px;" hspace="2" vspace="2" /></a>

<a href="http://voodoo-child.darkbb.com/le-recensement-f26/"><img class="imguser" src="http://img413.imageshack.us/img413/5395/recensement.png" alt="Le Recensement" style="margin: 4px;" hspace="2" vspace="2" /></a>

<a href="http://www.thevoodoochild.com/scenarii-f112/"><img class="imguser" src="http://img249.imageshack.us/img249/9654/scenarii.png" alt="Scenarii" style="margin: 4px;" hspace="2" vspace="2" /></a>


<p style="font-size: 10px;" class="menu"><a href="http://voodoo-child.darkbb.com/nos-lois-f22/guide-du-nouvel-arrivant-t394.htm#3513">Guide
du Nouvel arrivant</a></p>
 
</td>
</tr></tbody></table>
<!--—fin contenu événements -->
</div>
        <div id="co_2" class="mon_contenu" style="display: none;">
<!--—début contenu a propos -->
      <table cellpadding="3" cellspacing="5" width="100%"><tbody><tr>

<!--Première colonne Ossements -->
<td align="center" valign="top" width="130">
<img src="http://i43.servimg.com/u/f43/09/03/82/79/sque11.png" />
</td>
 
<!--—Centre contexte accueil-->

<td align="center" valign="top">

<p class="pahist1">Depuis que les êtres surnaturels ont fait leur "Coming Out" et qu'ils ont pignon sur rue, la vie s'est réorganisée à la Nouvelle Orléans et dans toute la Louisiane. Mais ici, terre de vieilles superstitions, il règne une atmosphère propice à l'ascension du mal. Alors comme diraient les anciens de la région : "Bienvenue à Voodoo Child".</p>
<p class="pahist2">Nous traversons l'été 2048...</p>

<a href="http://www.thevoodoochild.com/contexte-f29/4-le-gps-les-lieux-particuliers-t547.htm">Vous cherchez un lieu : consultez le GPS de Voodoo</a>


<p class="paimgbreve"><img src="http://img198.imageshack.us/img198/9137/brvestest.png" title="Les Nouvelles Pas Fraiches" /></p>

<!-- Le cadre de l'Organe -->
<div class="pacadreorgane">

<img src="http://i47.tinypic.com/2usu1jb.png" alt="TPH" />
<strong>▪ Mort Heureuse et scandaleuse du Maire !</strong>

C'est dans son bureau que le Maire de la ville a été retrouvé suffocant les mains prises dans la chevelure flamboyante en désordre d'une prostituée.
Miss Chatoyante comme on l'a surnomme était selon les proches du maire, une habituée du petit salon privé du maire. Hier après midi, ce sont...

<div align="right"><a href="http://www.thevoodoochild.com/t258p15-faits-divers-de-la-semaine#40951">Lire la suite</a></div>




<img src="http://i50.tinypic.com/2mhzsqg.png" alt="Genosis Corp" />
<strong>▪ Une meute à la Nouvelle Orléans</strong>

La Nouvelle Orléans n'avait jusque là aucune meute, mais en 2048, les Werewolwes font leur apparition et demandèrent au Sachem l'autorisation de s'installer en ville. Voici leur histoire, leurs règles et leur hiérarchie...

<div align="right"><a href="http://www.thevoodoochild.com/t2253-les-werewolves">Découvrir la meute</a></div>



</div>

<!-- Fin cadre organe -->

</td>

<!--—Colonne 2 ossements-->

<td align="center" valign="top" width="130px">
<img src="http://i43.servimg.com/u/f43/09/03/82/79/squedr10.png" />
</td>
 
</tr></tbody></table>
<!--—fin contenu a propos -->
</div>
    </div></div></div></div></div>

En fait, j'ai hésité entre les deux, mais a force de mettre trop de div, je me suis dit qu'on pouvais s'y perdre pour les gens ne s'y connaissant pas. Je ne cherche pas qu'à simplifier un code à tout prix, mais aussi à ce que les personnes puissent s'y retrouver ensuite. Et le tableau est déjà plus connu que les div. Pour le style, je n'ai pas trouvé l'intéret de le démarquer en css.

PS : effectivement j'avais oublié un / à un <.tr.> j'ai édité.

Aller à la page : 1, 2  Suivant,
 Sujets similaires
-
» ['Christa + Macema] Portail à onglets
» [Macema] Pour que CS est un belle PA !
» Disparition des onglets dans l'écran du Dispacher
» [Macema] Embellir le profil des membres
» [ABANDON] Une page d'accueil à onglets

Répondre au sujet


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum

Modérer

Trames

  • Nos services
  • Prés. obligatoire
  • Référencé
  • Réf. (comp)
  • Prérelance
  • 1ère relance
  • 2ème relance
  • Recherche (relance)
  • Recherche (corbeille)
  • Formulaire manquant
  • Formulaire incomplet
  • 1
  • 2
  • 3
  • 4
  • 5
  • Evaluation