Page d'accueil [à verouiller :)]

[eavane]

Bonjour,

Je suis fondatrice d'un forum et je me cherchais une idée de modèle pour ma page d'accueil. Et je suis tomber sur ce modèle.

--- > http://www.labulleworld.com/forum.htm

J'aimerais bien si possible, savoir comment en faire un semblable ? Bien entendu, il ne sera pas totalement identique. Mais je veux juste le modèle du tableau pour y insérer mes propres textes et liens.

mon forum --- > http://chevaliersdenkidiev.forumactif.us/forum.htm

Je sais que je dois avoir affaire avec les templates ici.. mais je ne m'y connais pas du tout.
J'ai essayée de faire un tableau moi même, avec le lien que j'ai trouvée sur ce forum. Le site ou ils expliquent comment faire un tableau de base... , mais c'est plutôt affreux comme résultat... voyez par vous même :
http://everentiis.forum-canada.net/index.htm
et ca ma pris 2 heures le faire -_- et vous pouvez rire lol c'est plutôt catastrophique lol

Pourriez vous m'aider s'il vous plait,.. ca serait vraiment apprécier, car j'ai vraiment besoin d'aide ici

Cordialement
Eavane

[eavane]

UP svp

[Lixyr]

Bonsoir.

Si vous me faite un schéma du tableau que vous souhaitez, je peux le faire. ^^
Un truc tout simple, avec des rectangle, mais au moins un support.
Et j'expliquerai le tableau une fois posté.

[eavane]

hum j'aimerais vraiment, mais.. comment puis-je faire un schéma ? Vous me demandez dans le fond de décrire ce que je veux exactement.. genre : combien de tableau que je veux... ou je les veux.. et ce que je veux écrire dedans ?

[Lixyr]

Vous pouvez faire ça sous paint. Tracer des rectangle qui représenteraient les cellules, comme vous le verriez vous sur votre forum.

Ou bien, oui, vous pouvez me dire directement ce que vous voulez.

Par exemple :

première ligne : trois cellules dont celle de droite serait plus grande que les autres
deuxième ligne, une seule cellule et le texte centré

ou je ne sais quoi.

[eavane]

D'accord, je vais vous montrer mes talents d'artiste avec paint mdr, ca ne devrait pas être long ^^ ahahah ca va être intéressant lol

[Lixyr]

^^ Très bien alors, j'attend ça et je vous donne le code demain.
*va se pieuter*

[eavane]

Argh voila... c'est mon chef d'œuvre lol

mais bon.. ca tellement pas l'air comme je l'imaginais dans ma tête, moi qui voulais que ca donne comme ce forum ci :
http://www.labulleworld.com/forum.htm

mais bon voici mon schéma mdr

Spoiler:

Je ne sais pas si je vais devoir le faire moi même, mais j'aimerais bien avoir les coins arrondis.. ci cela ce fait bien entendu. Le fond doit être noir c'est sure. La couleur de l'écriture et ce qui a d'écrit a l'intérieur, je sais que c'est à moi de le faire alors il n'y a pas de problème pour ca, sinon euh... je sais plus... ca ressemble pas mal a cela. Ah oui .. les grandeurs sont a peu près ca. J'ai pris le temps de bien calculer mes mesures ^^

Merci pour votre aide et si jamais vous avez des questions, je suis la 24h sur 24 ^^

Merci infiniment
Cordialement
Eavane

[Lixyr]

Allez, on y va doucement.

Pour commencer, le tableau et ses titres.

Hop :


1) Allez dans votre Page d'Accueil :
Panneau d'Administration >> Affichage >> Page d'Accueil >> Généralité

Dans la zone de texte copiez ce code :

Code:

<table style="text-align: center; vertical-align:top; width: 933px; height: 450px;">
  <tbody>
    <tr>
      <td colspan="2" style="vertical-align: top; width:80%;" class="borsdarrondis"><span style="font-size:22px;">Bienvenue</span></td>
      <td style="vertical-align: top; width:20%;" class="borsdarrondis"><span style="font-size:22px;">Top Sites</span></td>
    </tr>
    <tr>
    </tr>
    <tr>
      <td rowspan="2" style="vertical-align: top; width:40%;" class="borsdarrondis"><span style="font-size:22px;">Membres de l'Administration</span></td>
      <td colspan="2" style="vertical-align: top;width:60%;" class="borsdarrondis"><span style="font-size:22px;">Nouvelles</span></td>
    </tr>
    <tr>
      <td style="vertical-align: top; width:23%;" class="borsdarrondis"><span style="font-size:22px;">Temps du RP</span></td>
      <td style="vertical-align: top; width:77%;" class="borsdarrondis"><span style="font-size:22px;">Partenariat</span></td>
    </tr>
  </tbody>
</table>


Vous enregistrez :

Ensuite,

2) Vous allez dans votre feuille CSS :
Affichage >> Couleur >> Feuilles de style CSS

Et vous mettez ce code :

Code:


.borsdarrondis
{
 border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px;
 background-color: black;
border: 1px solid darkred; }

Et vous Validez.


3) Ce qu'il faut savoir

3.1) Dans le code du tableau :

<table style="text-align: center; vertical-align:top; width: 933px; height: 450px;">

ceci correspond à la balise du tableau. Le cadre si vous préférez. Là il n'y en a pas, seules les cellules ont un cadre. Si vous voulez en mettre un, vous rajoutez

Code:

border="1"

avant la fermeture de la balise :

>

Alors, ce que j'ai mis en couleurs correspondent respectivement :

- l'alignement horizontal du texte. Ici le texte est centré.
- L'alignement verticale du texte : Ici le texte commence en haut de chaque cellule. Par défaut le contenu de place au plein milieu. Il peut aussi se placer en bas.

- width : c'est la largeur du tableau. Vous pouvez changer le chiffre.
- Height : c'est la hauteur du tableau. Pareil, vous pouvez changer le chiffre.

<td colspan="2" style="vertical-align: top; width:80%;" class="borsdarrondis">

Un cas particulier cette cellule.

- Colspan, c'est la fusion horizontale entre deux cellules. Comme vous le voyez sur votre schéma, certaines cellules on la taille pour elles-seules de deux cellules qui se trouvent en dessous.
Exemple :
La Cellule Nouvelles prend la même place que les deux situées en dessous : temps du rp et partenariat.

- 80% signifie que cette cellule prend 80% de la place dans la ligne et laisse 20% restant à la cellule à côté (qu'il faut aussi préciser dans le code, ce qui est fait si vous regardez).

- la classe, appelée ici borsarrondis est un code qui permet de lié la cellule avec le code mis dans la feuille de style CSS. C'est ce qui permet donc de mettre les bordures arrondies, par exemple. J'approfondirai après.

<span style="font-size:22px;">Top Sites</span>

Le span permet d'introduire une précision graphique/visible, à quelque chose, sans utiliser la feuille css (ou si, mais c'est plus compliqué ensuite). Il précise généralement des détails souvent spécifiés (comme la taille, la couleur, l'alignement etc). C'est une balise qui permet d'introduire un code à un mot ou une phrase particulière sans que ça ne passe à la ligne (contrairement à la div, qui elle, fait un retour à la ligne automatique). C'est pratique quand dans une phrase, par exemple, on veut un style particulier pour chaque mot et qu'on n'a pas les balises normales type italic, bold, strike, underline, etc etc... mais quelque chose de plus spécifique. Ca permet aussi de mettre plusieurs codes dans une seule balise. C'est moins le bordel et ça prend moins de place.

Bref, ici, on donne la précision sur la taille : size. Le titre sera d'une taille de 22. Le chiffre peut être modifié à votre convenance.

<td rowspan="2" style="vertical-align: top; width:40%;" class="borsdarrondis">

Ici, on a rowspan : c'est la fusion verticale de cellules.
Les explications sont les mêmes que pour colspan, sauf que c'est valables pour des cellules qui se trouvent l'une à côté de l'autre => Membres de l'Administration avec Nouvelles & temps du RP.


3.2 Explication du CSS :

.borsdarrondis

On a d'abord un point puis un mot.
Le point permet de différencier les id des classes. Nous on utilise des classes parce que comme ça, on peut utiliser ce code pour n'importe quelle chose, il suffit de rajouter la classe dans le code par la suite. Une id elle n'est utilisée qu'une seule fois.

La classe, vue précédemment, s'insère comme ceci :

<td colspan="2" style="vertical-align: top; width:80%;" class="borsdarrondis">

(Pour Info : Quand la classe n'est pas fusionné ou insérée dans une balise (ici la balise <td>), on met une <div>, ça donne <div class="borsdarrondis"> blabla</div>)

border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;

Tout ça correspond à l'arrondis. En fait ce sont trois variantes de codes qui correspondent toutes les trois au codage de l'arrondis. On en met trois pour que ce soit visibles sur plusieurs navigateur, parce que tout le monde n'a pas Firefoxe. ^^

Ce sont les valeurs en orange qu'il faut changer, à savoir que plus le chiffre est élevé et plus l'arrondis est marqué. Une valeur de 0 donne un rectangle simple sans arrondis.

background-color: black;

C'est la couleur de fond. Vous avez demandé noir mais vous pouvez mettre autre chose. Même transparent.

border: 1px solid darkred;

C'est l'apparence du cadre des cellules.
Ici il a une épaisseur de 1, une forme solide (rectangulaire normale) et une couleur rouge foncée. Vous pouvez changez ces valeurs comme vous le souhaitez aussi.



C'est fini pour les explications. Voilà déjà ça. Voyez si ça vous va. Ensuite on peaufinera en remplissant.

[eavane]

wow vous êtes vraiment géniale ^^

Oki alors.. vos explications sont très claire, alors je n'ai pas vraiment de question pour le moment, cependant, avant d'aller trop loin, j'aurais juste quelques modifications, genre juste switcher les tableaux de place. Voici le nouveau modèle et l'officiel. Je vais vous le montrer et j'ai également pris les mesures en pixel pour mieux vous aider et pour mieux vous guider.

Spoiler:

donc voici les mesures

1ère ligne :
Bienvenue ; 800*270
Partenariat ; 370*270

2ème ligne :
Membres de l'administration ; 630*400


2ème ligne en haut
Temps du Rp ; 200*170
Top site ; 330*170

2ème ligne en bas
Nouvelles ; 550*220

Donc dans le fond, l'ensemble donne une mesure de plus ou moins 1180 pixels de large et 670 pixels de hauteur.

enfin, c'est ca pour le moment. J'espère que je ne vous en demande pas trop :S
Enfin, je vous remercie vraiment indéfiniment pour votre aide

Cordialement
Eavane

EDIT : OMG aurais-je réussi ce que je voulais faire ???

------ > http://everentiis.forum-canada.net/forum.htm

[Lixyr]

x ) Je pense bien. C'est facile une fois qu'on prend le truc. ^^

[eavane]

oki la c'est quoi qui reste d'autre à faire pour améliorer l'esthétique du tableau? par peaufinera en le remplissant .... vous parlez de.. mettre les textes que je veux à l'intérieur ?

[Lixyr]

Oui. Mettre les textes, les caractères, les images.
Ensuite les couleurs, les polices, les tailles etc etc.

Remplir. Fignoler. Finir

[eavane]

D'accord mdr ^^

alors voila, je me lance. Mais premièrement, j'aimerais savoir si c'est possible de mettre des cadres plus esthétique du genre.. d'autre modèle.... exemple.. je sais pas... un cadre non droit. Vagué et ou.. avec un motif autour ?

Bon dans les cadres maintenant... avant les textes j'aimerais inclure une ligne quelque peu large (peut importe la couleur, je vais la changer par la suite pour qu'elle matche avec mon forum) en dessous des noms des cadres.

Texte centré dans Bienvenue dans le monde des chevaliers d'Émeraude :

Spoiler:

Partenariats :

Spoiler:

Temps du Rp :

Spoiler:

Top sites :

Spoiler:

Message de l'administration :

Spoiler:

Les membres de l'administration :

Spoiler:

Pour le moment c'est ca. Je vous remercie vraiment beaucoup pour votre aide. Et sachez que rien ne presse. Alors vous pouvez prendre votre temps. Vous êtes déjà bien aimable de m'aider ainsi.

EDIT :
Alors voila, j'ai travaillée sur les images

liens des images pour top site :

Spoiler:

liens des images pour bienvenue dans le monde des chevaliers d'Émeraude :

Spoiler:

Pour les images des membres de l'administration... je les fais très bientôt

oh et ps... ne vous en faites pas pour les couleurs.. et les grosseurs je peux toujours m'en occuper moi même en temps voulue.. ce n'est guère compliquer ^^

encore édit -_-' : bon j'ai essayer de faire ces choses moi même... mais il y a un petit hic qui me dérange... et qui déforme mon tableau quand j'ajoute un texte à l'intérieur. Je m'explique.

Code du Tableau d'origine :

Spoiler:

Et je ne sais pas pourquoi.. aussitôt que je mets le texte dans top site... mon tableau déforme. Vous pouvez voir sur le même forum, juste en dessous du tableau d'origine ----> http://everentiis.forum-canada.net/index.htm

et voici le code de ce tableau plutôt catastrophique :

Spoiler:

Enfin, dsl pour le long poste. Seulement, j'essaie de vous en faire faire le moins possible. Seulement... j'ai l'impression que je massacre mon tableau plus que d'autre chose. Et je ne suis pas capable de le mettre comme le tableau d'origine, avec le texte à l'intérieur *soupire*

Cordialement
Eavane

[eavane]

up ^^

[Enigmatic]

Un autre ; UP !
- La personne qui est Eavane est malheureusement à l'hôpital jusqu'à se Vendredi, minimum. Elle demande à ce qu'on ne supprime pas son message, tout est toujours d'actualité ^_^

[Lixyr]

Je suis là, je m'en occupe. ^^ J'éditerai quand j'aurai fini.


*edit*

Alors, premièrement, c'est pas grave pour le long post, justement, c'est mieux, comme ça c'est détaillé, on comprend bien ce que tu veux. ^^
Ensuite, alors, déjà, si jamais tu veux un cadre ondulé ou autre, c'est une image de fond qu'il faut mettre, et supprimer le cadre lui même, et ensuite se débrouiller pour que le contenu tienne bien dans la cellule, mais ça ne posera pas de problème si l'image est fond de table, il suffit juste de trouver l'image, c'est le plus difficile, et de la dimensionner correctement.

Alors pour les contenus :

Sache avant tout que les contenus se mettent dans les cellules, donc entre chaque

Code:

<td> ICI </td>

.
Pour ton tableau, il faut simplement faire attention a ce que le contenu ne soit pas trop chargé, comme tu as mis des valeurs de hauteur et de largeur à tes cellules, ça risque de déformer, effectivement, si le contenu est plus grand que la hauteur définie.
Okay, donc j'y vais, mais avec le code de départ, c'est à dire celui-donné-ci :

Code:

<table style="text-align: center; vertical-align:top; width: 1180px; height: 670px;">
<tbody>
<tr>
<td colspan="2" style="vertical-align: top; width: 50%; height: 35%;" class="borsdarrondis"><span style="font-size:22px;">Bienvenue</span></td>
<td style="vertical-align: top; width: 50%; height: 35%;" class="borsdarrondis"><span style="font-size:22px;">Partenariats</span></td>
</tr>
<tr>
<td rowspan="2" style="vertical-align: top; width: 50%;" class="borsdarrondis"><span style="font-size:22px;">Membres de l'Administration</span></td>
<td style="vertical-align: top;width: 23%;" class="borsdarrondis"><span style="font-size:22px;">Temps RP</span></td>
<td style="vertical-align: top; width: 77%;" class="borsdarrondis"><span style="font-size:22px;">Top sites</span></td>
</tr>
<tr>
<td colspan="2" style="vertical-align: top; width: 50%;" class="borsdarrondis"><span style="font-size:22px;">Nouvelles</span></td>
</tr>
</tbody>
</table>

Pour centrer un contenu vous pouvez directement infiltrer le code dans la cellule :

<td style="vertical-align: top; text-align: center; width: 77%;" class="borsdarrondis">

dans une div ou span type style.

1) Bienvenue dans le monde des chevaliers d'Émeraude :

Code:


<center>Bonjour à vous tous. Je vous souhaite la bienvenue et vous invite à participer à l'aventure en vous inscrivant sur le forum. Celui ci est basé sur les chevaliers d'Émeraude, mais avec des nouveautés. Des nouvelles races et classes voient le jour. Le monde fantastique s'expand pour laisser place à un forum unique. Personnalisé, stylé, original et organisé. Voila en quatre mots la description de ce forum. Rejoignez-vous à nous et faites vibrer le forum encore plus par votre présence en suivant les étapes suivantes dans l'ordre pour vous inscrire. Faites vite, choisissez un camps Enkidiev ou Irianeth, car ce n'est qu'une question de temps avant que la plus grande guerre jamais vue n'éclate.
<br><br>
<a href="http://chevaliersdenkidiev.forumactif.us/reglements-f3/" class="postlink" target="_blank"><img src="http://img708.imageshack.us/img708/293/tape1.gif " border="0" alt="" /></a>   
<a href="http://chevaliersdenkidiev.forumactif.us/l-encyclopedie-f7/" class="postlink" target="_blank"><img src="http://img831.imageshack.us/img831/4233/tape2.gif" border="0" alt="" /></a>   
<a href="http://chevaliersdenkidiev.forumactif.us/presentations-f13/" class="postlink" target="_blank"><img src="http://img269.imageshack.us/img269/7577/tape3.gif " border="0" alt="" /></a>
</center>

Explication :

<center></center>

permet de centrer le contenu.

& nbsp;

c'est un espace en html. Pour en avoir plusieurs, il faut en mettre plusieurs les uns à la suite des autres. (là j'ai mis un espace entre le & et le nbsp; parce que sinon ça me fait l'espace, ça ne marque pas le code => donc il faudra enlever l'espace que j'ai mis dedans, tout est collé normalement.


2) Partenariats :

Le code pour une image cliquable est toujours le même :

Code:

<a href="URL DE REDIRECTION" class="postlink" target="_blank"><img src="LIEN DE L'IMAGE" alt="" border="0"></a>

Ce qui donne pour toi :

Code:

<a href="http://chevaliersdenkidiev.forumactif.us/portal.htm" class="postlink" target="_blank"><img src="http://img521.imageshack.us/img521/2517/logowsu.png" alt="" border="0"></a>

3) Temps du RP :

Code:


<span style="font-size:22px;">Temps RP</span><br><br>
S.v.p, veuillez vous assurez de suivre le temps du rp qui est affiché ci dessous :<br>
Après midi<br>
Ensoleillé<br>
Quelque peu frais, très peu de nuage.

les

Code:

<br>

ce sont les retours à la ligne.


4) Top Sites :

Code:

<span style="font-size:22px;">Top sites</span><br><br>
Voici trois top sites que je vous invites à aller voter le plus de fois possible pour permettre à ce forum de se faire connaître. Vous pouvez voter chaque top sites à un intervalle de deux heures entre chaque.<br><br>
<a href="http://www.root-top.com/topsite/korben/in.php?ID=10783" class="postlink" target="_blank"><img src="http://img529.imageshack.us/img529/4157/topsite1.gif" border="0" alt="" /></a>  
<a href="http://www.root-top.com/topsite/serpentgy/in.php?ID=6870" class="postlink" target="_blank"><img src="http://img152.imageshack.us/img152/1154/topsite2.gif" border="0" alt="" /></a>  
<a href="http://www.root-top.com/topsite/melu/in.php?ID=3191" class="postlink" target="_blank"><img src="http://img132.imageshack.us/img132/3495/topsite3.gif" border="0" alt="" /></a>


encore une fois les espaces se font avec

  

, le contenu est centré dans la cellule.

5)Message de l'administration :

Code:

<span style="font-size:22px;">Message de l'administration</span><br><br>
£ S'il vous plait, chers membres, faites attention au temps du rp. Suivez-le. Si c'est écrit Après midi, Ensoleillé, n'allez pas écrire dans votre poste qu'il fait nuit qu'il pleut.
£ Les membres de l'administration travaillent présentent sur le système du lancé de dés. Il ne sera pas accessible maintenant, mais sera probablement fonctionnelle d'ici le temps des fêtes.<br>
£ Pour ceux qui ont un scénario en cours, n'oubliez pas que si vous ne postez pas, le scénario n'avancera pas plus vite. Si vous croyez ne pas être capable de faire un scénario, alors faites nous en part, et nous arrangerons le scénario en conséquence.

J'ai juste rajouté des retour à la ligne.

6) Et pour les Membres de l'Administration, j'attends ça. ^^


Alors le code final donne :

Code:


<table style="position: fixed; bottom: 50px; left: 0px; z-index: 10000;"><tbody><tr><td><iframe src="/chatbox/chatbox.forum?page=front&" id="chatboxpop" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0"></iframe></td><td style="vertical-align: bottom;"><img src="http://img687.imageshack.us/img687/9308/essaisn.jpg" onclick="document.getElementById('chatboxpop').style.display=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'block':'none';this.src=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png':'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png';"></td></tr></tbody></table>

<table style="text-align: center; vertical-align:top; width: 1180px; height: 670px;" border="1">
<tbody>
<tr>
<td colspan="2" style="vertical-align: top; width: 50%; height: 35%;" class="borsdarrondis"><span style="font-size:22px;">Bienvenue dans le monde des chevaliers d'Émeraude</span><span style="font-size: 12px;"><p style="color: Silver;">Bien le bonjour cher membre. Je vous invite à participer a l'aventure en vous inscrivant sur le forum. Celui ci est basé sur les chevaliers d'Émeraude, mais avec des nouveautés. De nouvelles races et classes voient le jour. Le monde fantastique s'expend pour laisser place à un forum unique. Personnalisé, stylé, original et organisé. Voilà en quatre mots la description de ce forum.</p>
<p style="color: Silver;">L'histoire se passe 30 ans après la deuxième incarnation de l'ordre d'Émeraude avec Wellan. Certains ont survécu, d'autre non. Le nouvelle Empereur,... Onyx lui même en personne. L'enjeu est encore plus grand, et les chevaliers auront encore plus de difficultés. Enkidiev ne sera pas de tout repos. Survivre n'aura jamais été aussi difficile. La bataille s'annonce longue et douloureuse. Mais, toutefois, de nouvelles alliances se forment. Un mythe vois le jour, le continent d'Enkidiev et du Territoire Inconnue habiteraient des dragons. Quel camps choisirez vous ? Le bien ou le mal ?</p>
<p style="color: Silver;">Vous êtes intéressé? Alors inscrivez vous sur ce forum en suivant les étapes affichées en ordre ci dessous</p><font new="" roman="" face="Times">
</font><div style="text-align: center;"><font new="" roman="" face="Times"><a href="http://chevaliersdenkidiev.forumactif.us/reglements-f3/" class="postlink" target="_blank"><img src="http://img708.imageshack.us/img708/293/tape1.gif" alt="" border="0"></a>      
<a href="http://chevaliersdenkidiev.forumactif.us/l-encyclopedie-f7/" class="postlink" target="_blank"><img src="http://img831.imageshack.us/img831/4233/tape2.gif" alt="" border="0"></a>      
<a href="http://chevaliersdenkidiev.forumactif.us/presentations-f13/" class="postlink" target="_blank"><img src="http://img269.imageshack.us/img269/7577/tape3.gif" alt="" border="0"></a><br></font></div></span></td>

<td style="vertical-align: top; width: 50%; height: 35%;" class="borsdarrondis"><span style="font-size:22px;">Partenariats</span>
<br><br>
<a href="http://chevaliersdenkidiev.forumactif.us/portal.htm" class="postlink" target="_blank"><img src="http://img521.imageshack.us/img521/2517/logowsu.png" alt="" border="0"></a></td>
</tr>
<tr>
<td rowspan="2" style="vertical-align: top; width: 50%;" class="borsdarrondis"><span style="font-size:22px;">Membres de l'Administration</span></td>

<td style="vertical-align: top;width: 23%; text-align: center;" class="borsdarrondis"><span style="font-size:22px;">Temps RP</span><br><br>
S.v.p, veuillez vous assurez de suivre le temps du rp qui est affiché ci dessous :<br>
Après midi<br>
Ensoleillé<br>
Quelque peu frais, très peu de nuage.
</td>

<td style="vertical-align: top; text-align: center; width: 77%;" class="borsdarrondis"><span style="font-size:22px;">Top sites</span><br><br>
Voici trois top sites que je vous invites à aller voter le plus de fois possible pour permettre à ce forum de se faire connaître. Vous pouvez voter chaque top sites à un intervalle de deux heures entre chaque.<br><br>
<a href="http://www.root-top.com/topsite/korben/in.php?ID=10783" class="postlink" target="_blank"><img src="http://img529.imageshack.us/img529/4157/topsite1.gif" border="0" alt="" /></a>  
<a href="http://www.root-top.com/topsite/serpentgy/in.php?ID=6870" class="postlink" target="_blank"><img src="http://img152.imageshack.us/img152/1154/topsite2.gif" border="0" alt="" /></a>  
<a href="http://www.root-top.com/topsite/melu/in.php?ID=3191" class="postlink" target="_blank"><img src="http://img132.imageshack.us/img132/3495/topsite3.gif" border="0" alt="" /></a>
</td>
</tr>
<tr>
<td colspan="2" style="vertical-align: top; width: 50%; height: 30%;" class="borsdarrondis"><span style="font-size:22px;">Message de l'administration</span><br><br>
£ S'il vous plait, chers membres, faites attention au temps du rp. Suivez-le. Si c'est écrit Après midi, Ensoleillé, n'allez pas écrire dans votre poste qu'il fait nuit qu'il pleut.
£ Les membres de l'administration travaillent présentent sur le système du lancé de dés. Il ne sera pas accessible maintenant, mais sera probablement fonctionnelle d'ici le temps des fêtes.<br>
£ Pour ceux qui ont un scénario en cours, n'oubliez pas que si vous ne postez pas, le scénario n'avancera pas plus vite. Si vous croyez ne pas être capable de faire un scénario, alors faites nous en part, et nous arrangerons le scénario en conséquence.
</td>
</tr>
</tbody>
</table>

(il y a le code de la chat boxe dedans).

Alors ce que j'ai du faire pour que la cellule Message de l'administration ne soit pas compressé et aplatit, j'ai rajouté un height dans sa cellule pour l'obliger à avoir une certaine hauteur. Tu peux la modifier pour qu'elle ait la hauteur que tu souhaites :

<td colspan="2" style="vertical-align: top; width: 50%; height: 30%;" class="borsdarrondis"><span style="font-size:22px;">Message de l'administration</span>

Voilà tout, en attendant. Désolée du retard.

[Enigmatic]

Elle fait dire : Merci beaucoup !
Elle viendra d'elle-même voir ton message, ainsi que le mettre en pratique, dès qu'elle sera sorti ^_^
Encore une fois, elle demande simplement de laisser le sujet ouvert jusqu'à son retour, avec un gros -> Merci <3

[Lixyr]

D'accord. Comme elle rentre demain (c'est bien ça ?) techniquement le sujet restera là, c'est au bout de sept jour que ça finit dans la corbeille. Puis au pire je up. ^^

[Lixyr]

Je up pour Eavane. (pas besoin d'aide, mais elle n'est pas là, elle ne peut pas le faire ^^)

[Lixyr]

Up pour Eavane.

[eavane]

awww oki je suis de retour de l'hôpital, je suis désolée du temps que cela a pris. Mais je suis là maintenant

Je vais bientôt faire les images pour les membres de l'administration
C'est tellement gentil de m'aider comme ça. Je te remercie du fond du cœur ^^ .

Je cherche également des cadres pour le tableau, mais bon ma recherche a été infructueuse lol je vais revenir la dessus aussitôt que j'aurais terminée

ÉDIT : voila.. j'ai une question... vous m'avez dit que je pouvais mettre des cadres, en faites si c'est vraiment possible... j'ai fait mes propres cadres a partir de mon fond de forum, (en espérant que ca fasse beau) et je me demande comment m'y prendre. Ce sont juste des contours, j'ai enlever le fond, mais je ne sais pas trop comment faire pour mettre le cadre autour de bah de mes catégories de tableaux.

voici mes cadres :

Spoiler:

bien entendu, je les ai fait de la bonne grosseur chaque, et ils sont dans l'ordre ^^

[Lixyr]

Tu as la solution de mettre les images en fond de cellule. Seulement si tu regardes bien, tes mesures ne correspondent pas :

<table style="text-align: center; vertical-align:top; width: 1180px; height: 670px;" border="0" cellspacing="0" cellpading="0">

<= C'est la mesure du tableau.

Si on regarde avec tes images, pour la première ligne on a du :

width: 800px; + width: 370px; = width: 1170px:

Pour la deuxième ligne on a :

width: 630px; + width: 200px; + width: 330px; = width: 1160px;

et la dernière ligne :

width: 630px; + width:550px; = width:1180px;

On a pas la même longueur pour le tableau ce qui du coup déforme le forum, puisque je prend les mesures des images pour mes cellules.
Ensuite, il faut faire attention à ce que la cellule Partenariat et Tops Sites aient la même largeur sinon le tableau prendra la mesure qu'il souhaite, mais mettra les deux cellules à la même largeur.

[eavane]

hum oups ok je vais les arranger pour les mettre de la bonne grosseur

désoler :S

EDITE : argh.... je suis confuse lol.. dans mon panneau dadmin... c'est écrit les mesures 1170*780 Bon j'ai mis la bonne grosseur pour le format de mon tableau

bon voici mon code pour le tableau :

Spoiler:

et voici les bonnes grandeur (enfin je crois) pour la grosseur de mon tableau. Les images additionnées ensemble donne exactement 1170*780

Spoiler:

en espérant que ce soit la bonne cette fois ci ^^

[Lixyr]

Alors ça donne quelque chose d'assez original.
Je conseillerais de couper certains côtés de certaines images si tu n'aimes pas les doubles bordures.

Sinon, donc :

1) Mettre des images en fond de cellule :

Tout d'abord, retirer la bordure et les espacements dans le tableau :

<table style="text-align: center; vertical-align:top; width: 1170px; height: 780px;" border="0" cellspacing="0" cellpading="0">

Il faut également penser à mettre la taille du tableau :

<table style="text-align: center; vertical-align:top; width: 1170px; height: 780px;" border="0" cellspacing="0" cellpading="0">

Ensuite, insérer les codes pour mettre des images de fond dans chaque cellule, dans une classe style.

<td colspan="2" style="vertical-align: top; width: 850px; height: 275px; background-image:url(URL DE L'IMAGE);" class="borsdarrondis">

Et ne pas oublier de mettre les tailles de chaque cellule.

<td colspan="2" style="vertical-align: top; width: 850px; height: 275px; background-image:url(URL DE L'IMAGE);" class="borsdarrondis">

(c'est un exemple de valeur) : taille qui correspond à la taille des images respectives à leur cellule.
- Il ne manque plus qu'à mettre le lien de chaque image dans chaque code.


ps : Moi je conseille ensuite de personnaliser les paragraphes, parce que votre contenu passera par dessus la cellule quelque fois, puisque la bordure de vos cadre est plus épaisse que celle qui n'existe plus. Le texte va jusqu'au bord, donc il passe par dessus.

J'ai fait comme ceci :

<p style="width:820px; padding-left:10px;">

Explications :

-> Le width du paragraphe doit être légèrement inférieur au width de la cellule qui contient le paragraphe (compte environ 20 px en dessous pour les grands texte, et 10 px pour les petits textes.
-> Le texte sera donc placé un peu plus à gauche, le padding-left permet de déplacer le texte un peu vers la droite pour le centrer, et ainsi qu'aucun mot n'apparaisse par dessus les cadres.

A toi de changer les valeurs comme elles te conviennent par la suite.

[eavane]

humph bon j'ai retravaillée sur les cadres parce que,... bah tout simplement parce que je ne comprends pas vos codes de

Code:

<p style="width:820px; padding-left:10px;">

Alors j'ai tout simplement modifiée mes cadres XD

Le résultat donne sur mon forum test :

http://everentiis.forum-canada.net/index.htm

bon... ce n'est pas super comme résultat, mais c'est toujours mieux que rien ou un simple cadre laid >.>

bon je vais revenir très bientôt pour finaliser les membres de l'administration... je sais toujours pas comment les présenter mais bon.. ca viendra

EDIT : Euh... pourquoi ca ne donne pas la même chose sur mon forum et sur mon forum test ?

Forum test : http://everentiis.forum-canada.net/index.htm
mon forum : http://chevaliersdenkidiev.forumactif.us/forum.htm

c'est comme pas du tout la même chose et pourtant... ce sont les mêmes codes, et la même grosseur de forum 80 %
je suis quelque peu beaucoup confuse :S

[Lixyr]

Effectivement, votre tableau sur le Forum est plus étroit que le forum test. Vous avez fait un copier coller du code du forum test ?
Techniquement, si c'est un simple copier collé ça devrait revenir au même.
Sauf si vous avez laisser les

<td colspan="2" style="vertical-align: top; width: 50%; height: 35%;" class="borsdarrondis">

dans votre code, et que le css y correspondant y était dans le forum et non dans le forum test.

Essayez voir en les enlevant ?

De toute façon il y a quelque chose dans votre forum qui n'est pas dans le forum test et qui empêche l'affiche.
Le css je pense, puisqu'ils ont l'air complètement différents.

[eavane]

hum... et bien.. j'ai enlevée les '' class="borsdarrondis '' et puis... ça n'a pas changé grand chose :S et je veux vraiment que ça fasse comme sur le forum teste... car... enfin.. c'est vraiment affreux sur mon forum lol

HELP ! lol

[Lixyr]

Alors faut regarder si le css est le même dans le forum test et dans le forum d'origine.
Si tu veux, tu peux me le donner, pour les deux forums, que je regarde ce que ça fait. Avec le contenu de la PA que tu as dans ton forum test.

[eavane]

d'accord

Code de mon forum :

Spoiler:

code css de mon forum :

Spoiler:

Code du forum teste :

Spoiler:

code css du forum teste :

Spoiler:

la seule différence.. c'est que dans les codes de mon forum... j'ai enlevée les bord arrondis.. that's it