[Truc] Faire un message d'en-tête en tableau/html/css

**Miettes**

Bonjour les p’tits loups !

Aujourd’hui, occupons nous de la « beauté » de vos forums Smile

Prêt ? Partez !

Nous allons donc parler ici des messages d’en-tête en tableau et html. Cela se fait de plus en plus sur les forums et beaucoup veulent faire la même chose sur le leur mais ne savent pas comment faire. Voici donc quelques conseils et explications.

1/ Réfléchir à ce que l’on veut

Oui, avant de commencer, il faut réfléchir à ce que l’on va afficher sur son message d’accueil. Pour cela, munissez vous d’un papier et d’un crayon et faites une liste rapide des élements que vous allez placer sur votre message d’en-tête.

* Exemple (il nous servira pour tout le reste du tuto ^^)

Citation:

Message d’accueil
Navigation rapide
Le staff
Les infos du forum
L’offre du moment
Les partenaires privilégiés du forum
Les news

2/ Où va être chaque élement ?

Avant de vous lancer, prenez votre temps. Toujours avec votre papier et stylo, faites un croquis rapide de l’endroit où vous allez placer chaque élément. Cela vous permettra de faire plusieurs essais sans perdre de temps (un tableau ça va vite à faire sur une feuille), et vous pourrez voir si la structure vous convient.

* Exemple :

Spoiler:

3/ Un premier essai (facultatif)

Si vous maitrisez (ou savez utiliser) un logiciel de graphisme, je vous conseille de faire une première mise en page de votre en-tête.
De cette façon vous pourrez avoir un aperçu du rendu final, choisir rapidement les couleurs et taille, les polices, etc… (là aussi faire des essaies) et vous gagnerez du temps pour la suite.

* Exemple :

Spoiler:

4/ Le code

Ahh l’étape finale ! Vous savez ce que vous voulez, il n’y a plus qu’à le faire !

a) La partie html
*** Commencez par réaliser le tableau (nombre de colonne et de ligne). Dans mon exemple, j’ai 2 tableaux différents : un tableau du haut qui contient 3 colonne et 1 seule ligne (colonne de gauche = navigation + infos du forum ; colonne du milieu = message d’accueil ; colonne de droite = les news + les partenaires) et un tableau du bas à 2 colonnes et une ligne.
Remarque : toutes vos colonnes doivent avoir le même nombre de lignes.

* Exemple :

Code:

<div class="en_tete">

<table>
<tr>
<td id="tab1_col1">Nav + infos du forum</td>
<td id="tab1_col2">Message d'accueil</td>
<td id="tab1_col3">News + partenaires</td>
</tr>
</table>

<table>
<tr>
<td id="tab2_col1">Offre du moment</td>
<td id="tab2_col2">Le staff</td>
</tr>
</table>

</div>

*** Ensuite, intégrer chaque élément « brut » (c'est-à-dire le texte tel quel, sans mise en page). Pour vous faciliter le travail de mise en page, ajouter des id ou classe (=nom) aux éléments qui auront les mêmes propriétés.

* Exemple :

Code:

<div class="en_tete">

<table>
<tr>
<td id="tab1_col1">
<h1 id="titre_en_tete">Navigation rapide</h1>
<p id="en_tete_nav">* <a href="#" id="lien_en_tete">Lien 1</a></p>
<p id="en_tete_nav">* <a href="#" id="lien_en_tete">Lien 2</a></p>
<p id="en_tete_nav">* <a href="#" id="lien_en_tete">Lien 3</a></p>
<p id="en_tete_nav">* <a href="#" id="lien_en_tete">Lien 4</a></p>
<p id="en_tete_nav">* <a href="#" id="lien_en_tete">Lien 5</a></p>

<h1 id="titre_en_tete">Les infos du forum</h1>
<p id="en_tete_infos_forum">Le forum a été créé le N Mois 2010.</p>
<p id="en_tete_infos_forum">Les administrateurs sont <a href="#" id="vers_profil">Pseudo</a>, <a href="#" id="vers_profil">Pseudo</a>, <a href="#" id="vers_profil">Pseudo</a> et <a href="#" id="vers_profil">Pseudo</a></p>
<p id="en_tete_infos_forum">Design créé par <a href="#" id="vers_profil">Pseudo</a></p>
</td>
<td id="tab1_col2">
<h1 id="titre_en_tete">Bienvenue sur le forum pseudo !</h1>
<p id="contenu_en_tete">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum hendrerit dolor. Nullam quis turpis. Proin pellentesque pharetra risus. Praesent ornare porta metus. Suspendisse ut nulla. Proin mauris est, auctor nec, bibendum non, vulputate vitae, ligula. Phasellus at mi in nisi consectetur mattis. Praesent justo. Suspendisse potenti. Proin sit amet ligula. Nullam rutrum, metus ut porta tempor, sem mi vulputate velit, et eleifend lorem felis at justo. </p>
</td>
<td id="tab1_col3">
<h1 id="titre_en_tete">Les news</h1>
<p id="en_tete_news">* News 1 : blablablablablablab</p>
<p id="en_tete_news">* News 2 : blablabla blablabla</a></p>

<h1 id="titre_en_tete">Partenaires</h1>
<p id="logo_en_tete"><a href="#"><img src="logo.png" alt="nom du forum" /></a><a href="#"><img src="logo.png" alt="nom du forum" /></a></p>
</td>
</tr>
</table>

<table>
<tr>
<td id="tab2_col1">
<h1 id="titre_en_tete">Offre du moment</h1>
<p id="logo_en_tete"><a href="#"><img src="logo.png" alt="nom du forum" /></a><a href="#"><img src="logo.png" alt="nom du forum" /></a><a href="#"><img src="logo.png" alt="nom du forum" /></a><a href="#"><img src="logo.png" alt="nom du forum" /></a><a href="#"><img src="logo.png" alt="nom du forum" /></a><a href="#"><img src="logo.png" alt="nom du forum" /></a><a href="#"><img src="logo.png" alt="nom du forum" /></a></p>
</td>
<td id="tab2_col2">
<h1 id="titre_en_tete">Le staff</h1>
<p id="staff_en_tete"><a href="#"><img src="staff.png" alt="pseudo" /></a><a href="#"><img src="staff.png" alt="pseudo" /></a><a href="#"><img src="staff.png" alt="pseudo" /></a><a href="#"><img src="staff.png" alt="pseudo" /></a><a href="#"><img src="staff.png" alt="pseudo" /></a><a href="#"><img src="staff.png" alt="pseudo" /></a></p>

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

</div>

Spoiler:

b) La partie CSS
Il ne vous reste plus qu’à y mettre du style. Pour cela, je vous renvoie à ce tuto : [Les propriétés les plus utilisées en CSS].

Et voilà le résultat de mon exemple :
* Le code html est exactement le même que précédemment.

* Le code css

Code:

.en_tete{
width:700px;
min-height:400px;
height:auto;
background-color:#FFFFFF;
background-image:url('http://i226.photobucket.com/albums/dd220/MissMiet/tutos/fd_tab.png');
background-repeat:no-repeat;
margin:auto;
border:solid 1px #CCCCCC;
}

/****** Mise en page des colonnes ******/

table tr{
vertical-align:top;
}

#tab1_col1{
width: 200px;
padding:12px;
}

#tab1_col2{
width: 350px;
padding:12px;
}

#tab1_col3{
width: 150px;
padding:12px;
}

#tab2_col1{
width: 450px;
padding:12px;
}

#tab2_col2{
width: 250px;
padding:12px;
}

/****** Mise en page des titres ******/

#titre_en_tete{
background-color:#68a4a9;
border:1px dashed #ffffff;
height: 24px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 16px;
color:#ffffff;
text-align:center;
padding: 4px;
}

/****** Mise en page du texte ******/

#en_tete_nav{
font-family:Tahoma;
font-size:16px;
color:#0d1128;
margin-left:35px;
margin-bottom:-4px;
}

#contenu_en_tete{
font-family:Tahoma;
font-size:14px;
color:#0d1128;
text-align:justify;
text-indent:12px;
padding-left:8px;
padding-right:8px;
margin-bottom:-4px;
}

#en_tete_infos_forum{
font-family:Tahoma;
font-size:12px;
color:#0d1128;
text-align:justify;
text-indent:12px;
padding-left:8px;
padding-right:8px;
margin-bottom:-4px;
}

#en_tete_news{
font-family:Tahoma;
font-size:16px;
color:#0d1128;
margin-left:12px;
margin-bottom:-4px;
}

#logo_en_tete, #staff_en_tete{
text-align:center;
}

#logo_en_tete a, #staff_en_tete{
text-decoration:none;
}

#logo_en_tete img{
padding-bottom:4px;
}

#staff_en_tete img{
padding-left:6px;
}

/****** Mise en page des liens ******/

#lien_en_tete{
color:#0d1128;
text-decoration:none;
}

#lien_en_tete:hover{
border-bottom:dotted 1px #0d1128;
font-weight:bold;
}

#vers_profil{
color:#0d1128;
text-decoration:none;
font-style:italic;
}

#vers_profil:hover{
border-bottom:dotted 1px #0d1128;
}

* rendu

Spoiler:

Remarques :
* Pour les utilisateurs de FA, il vous suffit de copier coller le code CSS dans la feuille de style CSS (PA >> Affichage >> couleurs >> CSS).
* Pour les utilisateurs de xooit : attention, si vous faites des espaces ou des retours à la ligne (entrée), xooit les prendra en compte. Si vous voulez un message d’en-tête qui respecte vos attentes, le code doit être en un seul bloc.

_________________

Nous recrutons : 4 Surveillants, 2 Inspecteurs, 2 Artistes, 3 Pitres, 2 Professeurs spécialisés en RPG,
des Formateurs, des Recruteurs // [Postuler]

Voir ma sign':
	Merci Sir Bubble pour le kit ^^

**Thedreamspectral** · Date d'inscription: 06/04/2008 Distinctions: * Chef de l'EST-SoP *

Un tuto méga utile. Depuis qu'on l'attendait tiens! Merci :bisou:

_________________

**Miettes**

Oui, j'ai enfin pris le temps de le recopier Smile

J'espère que ça vous servira les p'tits loups ^^ (et n'hésitez pas à nous montrer ce que vous avez fait ^^ )

_________________

Nous recrutons : 4 Surveillants, 2 Inspecteurs, 2 Artistes, 3 Pitres, 2 Professeurs spécialisés en RPG,
des Formateurs, des Recruteurs // [Postuler]

Voir ma sign':
	Merci Sir Bubble pour le kit ^^

**Maina** · Date d'inscription: 01/09/2009

J'y arrive pas :pleure:

Je dois être un boulet mais le code css je le mets où? Pour le html c'est bon j'ai réussi mais le css je trouve pas kleenex

Heeeeeeeeeelp Merci :bisou:

_________________

**Miettes**

une fois que tu as terminé ? ou lorsque que tu codes ta page ?

Si c'est quand tu codes ta page, tu dois le mettre entre les balise "head". Donc un truc du genre :

Code:

<head>
<title>Le titre de ta page</title>

<style>
ton css
</style>
</head>

Si c'est une fois sur le forum, tu fais
Panneau d'admin >> affichage >> couleurs >> CSS

_________________

Nous recrutons : 4 Surveillants, 2 Inspecteurs, 2 Artistes, 3 Pitres, 2 Professeurs spécialisés en RPG,
des Formateurs, des Recruteurs // [Postuler]

Voir ma sign':
	Merci Sir Bubble pour le kit ^^

**Maina** · Date d'inscription: 01/09/2009

je suis sur un xooit

Il y a un endroit marqué welcome_message.tpl. Là j'ai mis le html
donc en fait c'est en codant le html que j'insère le css c'est ca

(Maina) boulet

_________________

**Miettes**

alors attend voir Smile

Tout d'abord, si tu veux que ton message d'accueil n'apparaisse que sur ta première page, il faut le mettre dans ce template : index_body.tpl

Ensuite, il te suffit de copier ton css dans ce template : overall_header.tpl (attention à bien le mettre entre les balises "style"=)

_________________

Nous recrutons : 4 Surveillants, 2 Inspecteurs, 2 Artistes, 3 Pitres, 2 Professeurs spécialisés en RPG,
des Formateurs, des Recruteurs // [Postuler]

Voir ma sign':
	Merci Sir Bubble pour le kit ^^

**Maina** · Date d'inscription: 01/09/2009

J'ai réussi à peu près sauf que on voit plus que le message d'accueil

J'ai effacé tout le reste lol!

Je vais retenter cet après midi

Merci en tout cas pour le tuto et un conseil à tous. Faites le en test avant de vous lancer :ahem:

_________________

**Tcharty** · Date d'inscription: 11/01/2010

Hello,

Super tuto Smile

Merci ^^

_________________

Absences : Très peu présent jusqu'à Pâques...

**Maina** · Date d'inscription: 01/09/2009

Il est 19h... J'ai recommencé à 16h et j'ai enfin réussi :=):

Merci Miettes pour le tuto !

_________________

**Tite-May**

Lol Maina, c'est pas toujours simple...
Tu nous montres le rendu ?

_________________

Le respect inspire le respect

**Shinsai** · Date d'inscription: 19/02/2010 Distinctions: * Journaliste du M-SoP *

Je n'y comprend rien...*se cache*

_________________

**Miettes**

où ne comprends tu pas ?

As-tu déjà quelques connaissances en html/CSS ? on ne peut pas se lancer dans ce type d'en-tête si nous n'avons pas les bases.

_________________

Nous recrutons : 4 Surveillants, 2 Inspecteurs, 2 Artistes, 3 Pitres, 2 Professeurs spécialisés en RPG,
des Formateurs, des Recruteurs // [Postuler]

Voir ma sign':
	Merci Sir Bubble pour le kit ^^

**jfn** · Date d'inscription: 15/03/2010

EDIT Miettes : Attention à te relire ! ton message était incompréhensible !

moi j'ai pas de connaissances et je suis perdue pire que dans une jungle
c'est pourtant ce que je veux depuis le debut dans mon forum, je ne sais si où aller ni comment se procurer les cadres

Spoiler:

**Miettes**

Avant de te lancer dans la création de ce type de message, je te conseille de passer par ces quelques tutos qui te donneront les bases du html et css.

(et c'est en testant qu'on apprend Wink

)

_________________

Nous recrutons : 4 Surveillants, 2 Inspecteurs, 2 Artistes, 3 Pitres, 2 Professeurs spécialisés en RPG,
des Formateurs, des Recruteurs // [Postuler]

Voir ma sign':
	Merci Sir Bubble pour le kit ^^