Comment créer une belle page d'accueil

[Mononoke Ryuu]

Bonjour,

Voilà je suis co-administrateur d'un forum RPG sur Bleach ( http://bleach-nstory.pro-forum.fr/forum.htm), j'utilise Mozilla et j'ai la version phpBB2 (subsilver). Après avoir vu de nombreux forum avec une page d'accueil ( exemple: http://www.stargate-of-aurora.com/forum.htm, http://sgu-rpg.bbactif.com/index.htm, ...) j'ai décidé d'en créer une. Le problème c'est que je ne connait rien en html et les tutos que j'ai vu ici pour faire les bases (3 colonnes, 2 lignes) m'aide pas, j'ai bidouillé à droite, à gauche mais je n'y arrive pas.

Voilà j'aimerai , si c'est possible que l'on me créé le code pour ma page (j'aimerais y mettre une image en fond dans la page, et qu'il n'y ait pas de trait séparateurs entre les différents sujets) et que l'on m'explique comment faire.

Merci d'avance de l'aide que vous pourrez m'apporter.


Plan: STAFF Personnages recherchés

Annonces
Contexte Partenaires


Si le code n'est pas possible à créer que l'on m'explique alors comment cela marche, merci.

Cordialement,

PS:si je respecte pas trop les règles, désolé je viens de les lire et je ne suis pas sur si je fais tout comme il faut (mon premier message)

[Shizuo Heiwajima]

Coucou !
Je peux essayer de vous aider si vous le souhaitez,

Donc en regardant sur votre forum je vois que vous êtes plutôt bien parti !
Vous voudriez donc deux colonnes en premier puis trois colonnes c'est cela ?

Est-ce que cela ressemblerait à cela : Test

Je veux bien soit faire votre code, soit vous aider avec des explications si vous avez des questions bien précise

En espérant ne pas arriver trop tard et vous être utile !

[Mononoke Ryuu]

J'aime beaucoup, merci, dis moi tu pourrais m'expliquer comment sa marche ?

Sinon, comment on fait un menu déroulant, par exemple pour les perso recherché et les partenaires j'aimerai qu'il se déroules comme dans les derniers sujet à gauche de ce forum.

Sinon encore merci.

[Shizuo Heiwajima]

Alors je t'explique pas à pas :

Le premier tableau :

Code:


<TABLE border=0 cellSpacing=3 cellPadding=0 width="100%" align=center>
<TBODY>
<TR>

<TD style="TEXT-ALIGN: center; background-image: url(http://hitskin.com/themes/12/68/38/i_background.png) ; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; 
COLOR: #ffffff; " width="50%">
<STRONG><FONT color=white >Le Staff du forum</FONT></STRONG></TD>


<TD style="TEXT-ALIGN: center; background-image: url(http://hitskin.com/themes/12/68/38/i_background.png) ; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; 
COLOR: #ffffff; " width="50%">
<STRONG><FONT color=white >Personnages recherchés</FONT></STRONG></TD>

</TR></TBODY></TABLE>

Tu vois que pour créer un tableau le code de départ est

Code:

<TABLE ><TBODY>

et le code de fin

Code:

</TBODY></TABLE>

Les code

Code:

<TR></TR>

correspondent à des lignes de tableau
Et les code

Code:

<TD></TD>

à des colonnes.

Tu peux vérifier dans le premier tableau il y a une ligne et deux colonnes.
Ensuite dans ce que tu peux customiser facilement il y a la largeur de tes colonnes ou la hauteur de tes lignes avec width et height, tu peux les exprimer en % ou en pixel ( px).
Il y a aussi l'image ou la couleur de fond :

Code:

background-image: url(http://hitskin.com/themes/12/68/38/i_background.png)

et la police et si tu mets en gras etc etc...
Sinon pour le fait de ne pas avoir d'encadrement, je n'en ai tout simplement pas défini et ait juste demandé d'écarter les différents cellules du tableau grâce au code :

Code:

PADDING-LEFT: 10px; PADDING-RIGHT: 10px; 

Logiquement le code va faire en sorte qu'on ait un espace de 10px à droite et à gauche.

Sinon par rapport au code, as-tu d'autres questions ?
Dis-moi si je ne suis pas claire hein ><

Le code qui est sur la page que je t'ai envoyée pour le moment est

Code:


<TABLE border=0 cellSpacing=3 cellPadding=0 width="100%" align=center>
<TBODY>
<TR>

<TD style="TEXT-ALIGN: center; background-image: url(http://hitskin.com/themes/12/68/38/i_background.png) ; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; 
COLOR: #ffffff; " width="50%">
<STRONG><FONT color=white >Le Staff du forum</FONT></STRONG></TD>


<TD style="TEXT-ALIGN: center; background-image: url(http://hitskin.com/themes/12/68/38/i_background.png) ; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; 
COLOR: #ffffff; " width="50%">
<STRONG><FONT color=white >Personnages recherchés</FONT></STRONG></TD>

</TR></TBODY></TABLE>


<TABLE border=0 cellSpacing=3 cellPadding=0 width="100%" align=center>
<TBODY>
<TR>
<TD style="TEXT-ALIGN: center; BACKGROUND-COLOR: white; PADDING-LEFT: 10px; PADDING-RIGHT: 10px;  COLOR: #ffffff; " width="50%">
<img style="height:100px; width: 60px;" src="http://img297.imageshack.us/img297/4161/chibitsubakiadminstaff.png">
  <img style="height:100px; width: 60px;" src="http://img194.imageshack.us/img194/4503/chibikiamoadminstaff.png">
</FONT></STRONG></TD>


<TD style="TEXT-ALIGN: center; BACKGROUND-COLOR: white; PADDING-LEFT: 10px; PADDING-RIGHT: 10px;  COLOR: #000000; " width="50%">
<img src="http://i65.servimg.com/u/f65/14/95/86/09/byaku_10.jpg">  <img src="http://i65.servimg.com/u/f65/14/95/86/09/ichigo10.jpg"><br>
Mettez ici les images ou ce que vous souhaitez pour les persos recherchés !
  </FONT></STRONG>  </TD>
 

</TR></TBODY></TABLE>


<TABLE border=0 cellSpacing=3 cellPadding=0 width="100%" align=center>
<TBODY>
<TR>

<TD style="TEXT-ALIGN: center; background-image: url(http://hitskin.com/themes/12/68/38/i_background.png) ; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; 
COLOR: #ffffff; " width="33%">

<STRONG><FONT color=white>Annonces</font></FONT></STRONG></TD>

<TD style="TEXT-ALIGN: center; background-image: url(http://hitskin.com/themes/12/68/38/i_background.png) ; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; 
COLOR: #ffffff; " width="33%">
<STRONG><FONT color=white >Contexte</FONT></STRONG></TD>

<TD style="TEXT-ALIGN: center; background-image: url(http://hitskin.com/themes/12/68/38/i_background.png) ; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; 
COLOR: #ffffff; " width="33%">
<STRONG><FONT color=white >Partenaires ?</FONT></STRONG></TD>

</TR>
</TBODY>
</TABLE>

<TABLE border=0 cellSpacing=3 cellPadding=0 width="100%" align=center >

<TBODY>
<TR>

<TD style="TEXT-ALIGN: center; background-COLOR: #ffffff ; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; 
COLOR: #000000; " width="33%">
<br>
Faites vos annonces ici !</TD>

<TD style="TEXT-ALIGN: center; background-COLOR: #ffffff;  PADDING-LEFT: 10px; PADDING-RIGHT: 10px; 
COLOR: #000000; " width="33%"> <br>
Expliquez le contexte à vos membres par là !</TD>

<TD style="TEXT-ALIGN: center; background-COLOR: #ffffff  ; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; 
COLOR: #000000; " width="33%"><br>
Tous vos partenaires peuvent aller là !</TD>

</TR></TBODY></TABLE>
 

Pour des annonces ou des partenaires ou autres déroulants, le code est assez simple à mettre mais comme on peut pas vraiment l'intuiter :
Il s'agit de la balise marquee

Code:

<marquee id="id1" direction="left" align="center" scrolldelay="2" scrollamount="2" >
<span onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();">
ICI CE QUI DÉFILE !
</span></marquee>

Tu as simplement à changer la direction si tu veux que ça aille en haut tu mets "up" à la place de "left"
( et la balise span c'est pour que cela s'arrête de défiler quand on met la souris dessus )

Je te renvoies ici sinon :
http://www.csvt.qc.ca/patriotes/html/code_spec/xmpl_mrq.htm

Si tu as d'autres questions, n'hésite pas !

[Mononoke Ryuu]

Je crois que j'ai compris le principe, après à moi de savoir à quoi correspond les différentes balises. Merci beaucoup de ton aide