Bonjour à toi ! En attendant que d'autre codeurs se présentent, je vais te prendre en charge^^ On va commencer par les bases, sais tu faire un tableau, et une class?

Ah.. non. ._.

Pas de soucis, on va donc commencer par là, c'est la base de la base, avec ça tu peux faire à peu près n'importe quoi ^o^

Un tableau commence et finis par "table", une ligne commence et finis par tr et une case commence et finit par td. Une ligne de tableaux avec trois case se présente donc comme ceci :

Code:

<table><tr>
<td>Case 1</td>
<td> case 2</td>
<td> Case 3</td>
</tr></table>

Les tableaux ce mettent directement dans les messages, soit dans le html (l'endroit du contenu)

Les classes sont un moyen de lié le CSS (pour l'apparence) du forum au html (le contenu) et donc d'alléger les codes

Dans le html elle se présente sous cette forme :

Code:

<div class="nom1">Blablabla</div>

et dans le CSS :

Code:

.nom1 {
Propriétés
}

(les nom mis dans le html et dans le css peut être changé mais il doit être scrupuleusement identique.)

Voici les propriétés les plus courantes : http://www.blood-waya.com/t1602-les-proprietes-css-les-plus-courantes

J'aimerais donc que tu me fasses un tableau avec trois lignes et sur chaque ligne 5 cases^^

Il est impératif que tu comprennes bien ses deux notions déjà!

As-tu un forumtest? (indispensable pour voir les résultats, si non je vais te demander d'en créer un. Comme ça, à chaque fois que je te ferais faire un exercice nécessitant du html, tu le créeras sur ton forum test (pour voir si tu trouves bien où placer, voir le résultat etc...) et tu posteras les codes (html et CSS) dans ce sujet, que je vois s'il n'y a pas d'erreur.

Alors voilà pour l'exercice !

Code:

<table><tr>
<td>Case 1</td>
<td>Case 2</td>
<td>Case 3</td>
<td>Case 4</td>
<td>Case 5</td>
</tr><tr>
<td>Case 1</td>
<td>Case 2</td>
<td>Case 3</td>
<td>Case 4</td>
<td>Case 5</td>
</tr><tr>
<td>Case 1</td>
<td>Case 2</td>
<td>Case 3</td>
<td>Case 4</td>
<td>Case 5</td>
</tr></table>

Et pour mon forum test : http://forumtest-levi.superforum.fr/

Super, tu as parfaitement compris le principe, on se sert des tableaux pour positionner des éléments ^^ Mais on y reviendra plus tard, j'ai un autre exercice pour toi!

je veux que tu me fasses un cadre, avec un texte centrer, en 15px et italique à la t'inquiète, le cadre devra avoir une bordure blanche double et un fond noir (l'écriture devra donc être blanche) je veux qu'ils fasse 200px de hauteur et 200px de largeur, et qu'une barre de défilement apparaisse s'il y a trop de texte...

Tu me montres le résultat via ton forumtest, et tu me donnes le code à la suite de ce sujet (le code html, et celui CSS)


(Le html tu peux le poster dans un sujet (si le html est activé) mais aussi sur ta page d'accueil (généralité dans ton panneau d'admin)

Voilà j'ai fini ! ^^

Code:

<div class="tableau">Blablabla</div>

Code:

.tableau {
  color:#ffffff;
  background-color:#000000;
  width:200px;
  height:200px;
  border: 4px double #ffffff;
  font-style: italic; /*mettre italic (italique) ou underline (souligné) */
  font-size :15px ;
  text-align: center;
  overflow:auto;
}

Aperçu forum test : http://forumtest-levi.superforum.fr/t6-test-n1#6

c'est parfait^^ Un conseil, évite de mettre des noms de classes comme "tableau" (table) ou "img" sinon tu risques d'avoir des effets sur tous tes tableaux, images etc...

Maintenant revenons au tableau justement! Comment faire si nos éléments ne font pas tous la même taille?

Par exemple, je veux un tableaux comme ceci :

Blablabal	ceci est une case plus haute que les deux autres
case 2

ou comme ceci :

Cellule numéro 1	Cellule numéro 2
Cellule numéro trois qui prend toute la largeur

Pour cela il faut utiliser deux propriétés "colspan" (pour la largeur) et "rowspan" (pour la hauteur)

Par exemple dans mon exemple 1 j'ai utilisé la valeur : Rowspan="2" et dans mon second exemple : colspan="2"

Pour faire comme ceci je dois donc mettre : Rowpsan="3"

Blablabal	ceci est une case plus haute que les trois autres
case 2
case 3
case 4	case 5

(Dans cette exemple j'ai choisie de rajouté une ligne classique pour te montrer qu'on peut reprendre le tableau normalement ensuite)

Les rowspan/colspan s'inscrivent dans les td et permettent donc de faire des structures plus élaborer.

Voici le code utilisé pour le dernier exemple :

Code:

<table><tr><td>Blablabal</td><td rowspan="3"> ceci est
une case
plus haute
que les
trois
autres</td> </tr>
<tr><td>case 2</td></tr>
<tr><td>case 3</td></tr>
<tr><td>case 4</td><td>case 5</td></tr></table>

C'est assez complexe à comprendre, c'est pour ça que je préfère m'appuyer sur des exemples, comme ça tu remarqueras que je met la première case, puis celle qui sera très longue, que je ferme la ligne. Puis mes trois autres lignes, je les ouvres et je les ferme sur une seule case (car l'autre à déjà était mis une fois, ça suffit), le mieux pour voir si tu as compris :

Je veux que tu me reproduises ce tableau pour voir si tu as compris :

Cellule numéro 1	Cellule numéro 2	Cellule numéro 3	cellule numéro 4
Cellule numéro cinq qui prend toute la largeur			Cellule numéro 6

Bon j'dois avoué qu'au début j'ai cru que je n'y arriverai pas, mais en fait une fois qu'on comprend le truc ça va. ^^

Code:

<table><tr><td>Cellule numéro 1</td>
<td>Cellule numéro 2</td>
<td>Cellule numéro 3</td>
<td>Cellule numéro 4</td></tr>
<tr><td colspan="3">Cellule numéro cinq qui prend toute la largeur</td>
<td>Cellule numéro 6</td></tr></table>

Message édité

Tu as bien compris le système des rowspan/colspan, mais tu as fait une erreur fatidique en cas de grand codage, toute balise ouverte, doit être fermé^^ Devine ce que tu as oublié !

OH MON DIEU L'ERREUR !!! Ö
Honte à moi. J'ai corrigé. ^^

C'est parfait!

Alors maintenant que tu as assimilé ces éléments je vais te demander de me faire une page d'accueil très simple : https://i.servimg.com/u/f36/16/36/06/79/page_d10.png

Dans les liens utiles je veux qu'il y est ces liens et qu'ils soient centrés : gestion RP : http://www.terramysticarpg.com/f40-gestion-rp
Validation : http://www.terramysticarpg.com/f4-validation

Pour le reste, met juste "texte, texte texte..." je voudrais que ça soit justifié, et que pour le cadre contexte, il y est une barre de défilement

Code couleur du gris : #6b6b6b
Police utilisé : Calibri
les titres doivent faire 30px, les deux cadres noirs 250px de largeur et 100 de hauteur, et le gris, 500px de largeur et 200 de hauteur

Ah et je voudrais qu'il y est un arrondis de 15px uniquement dans le coin droit et gauche (donc pas d'arrondis en bas!) en haut des deux cadres noirs.


Si tu as des questions, n'hésites pas^^

Je ne sais pas comment faire pour les titres... Enfin je te mets quand même ce que j'ai déjà fait.

Code:

.acceuil {
  color:#ffffff;
  background-color:#000000;
  text-align:justify;
  width:250px;
  height:100px;
  overflow:auto;
  family-font:Calibri;
  border-radius: 5px 5px 0px 0px;
}
.patate {
  color:#ffffff;
  background-color:#000000;
  text-align:center;
  width:250px;
  height:100px;
  family-font:Calibri;
  border-radius: 5px 5px 0px 0px;
    }
      .lunettes {
  background-color:#6b6b6b;
  text-align:justify;
  width:500px;
  height:200px;
  family-font:Calibri;
    }

HTML

Code:

<table><tr><td><div class="acceuil">Texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte </div></td><td><div class="patate"><a href="http://www.terramysticarpg.com/f40-gestion-rp">Gestion RP<br/>
<a href="http://www.terramysticarpg.com/f4-validation">Validation</td></tr>
<tr><td colspan="2"><div class="lunettes">Aujourd'hui Patate est morte. Pleurons ensemble...</td></tr></table>

Aperçu PA sur forum test : http://forumtest-levi.superforum.fr/

Message édité

Pour les titres c'est comme pour un bloc exemple :

Code:

<div class="titre"> Titre</div>

Il suffit juste de ne mettre que des propriétés concernant le texte !

Ce que tu as fais respecte bien le schéma mais il faut prendre le réflexe des marges (intérieur et extérieure) là le texte est tout collé au bord du cadre, et les différents cadres sont tout collé aussi, je te conseil donc d'aéré un peu!

Je met par principe toujours un padding d'au moins 5 ^^

Oui, enfin ce que je savais pas c'était comment faire pour qu'il soit collé. Et c'est quoi les codes des marges s'il te plait ? x:
EDIT: Entre les blocs*.
RE-EDIT: J'ai trouvé en fait. ^^
RE-RE-EDIT: (Désolé... --') J'ai toujours pas pour la police collée.

La police collé? (Désolée je comprends pas ta question...), pour faire des marges entre les blocs c'est
"margin" mais tu peux faire des marges que pour un seul côté. Par exemple, je met souvent des margin-bottom négatif à mes titres pour qu'ils soient collés en haut du cadre ^^

J'ai fini ! 8) Voilà tout le truc. 8) Bon j'ai pas compris pourquoi l'un des deux blocs noirs est plus petit que l'autre alors que les deux font "normalement" 250x100pixels, du coup, j'ai bien lutté mais j'ai finalement réussi ! Du moins je pense. ^^'

Code:

.acceuil {
  color:#ffffff;
  background-color:#000000;
  text-align:justify;
  width:250px;
  height:100px;
  overflow:auto;
  family-font:Calibri;
  border-radius: 5px 5px 0px 0px;
  padding:5px;
  margin:5px;
}
.patate {
  color:#ffffff;
  background-color:#000000;
  text-align:center;
  width:250px;
  height:100px;
  family-font:Calibri;
  border-radius: 5px 5px 0px 0px;
    }
      .lunettes {
  background-color:#6b6b6b;
  text-align:justify;
  width:500px;
  height:200px;
  family-font:Calibri;
  padding:5px;
  margin-right:auto;
margin-left:auto;
    }

.strongest {
  color:#6b6b6b;
  font-family:Calibri;
  margin-bottom:-18px;
  font-size:30px;
  text-align:center;
}

.lightest {
  color:#6b6b6b;
  font-family:Calibri;
  margin-bottom:-26px;
  font-size:30px;
  text-align:center;
}

.boudinblanc {
  color:#000000;
  font-family:Calibri;
  margin-bottom:-13px;
  font-size:30px;
  text-align:center;
}

Code:

<table><tr><td><div class="strongest">Contexte</td></div><td><div class="lightest">Liens Utiles</td></div></tr><tr><td><div class="acceuil">Texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte </div></td><td><div class="patate"><a href="http://www.terramysticarpg.com/f40-gestion-rp">Gestion RP<br/>
<a href="http://www.terramysticarpg.com/f4-validation">Validation</td></tr>
<tr><td colspan="1,5"><div class="boudinblanc">News</td></tr>
<tr><td colspan="2"><div class="lunettes">Aujourd'hui Patate est morte. Pleurons ensemble...</td></tr></table>

C'est parce que tu n'as pas mis de padding à la classe "patate", essais de mettre un padding:5 tu verras^^

En fait la tu t'es un peu compliqué la vie tu aurais pu faire un tableau
case 1 case 2
Caseeeee 3

et mettre le titre de la case 1 dans la même case, idem pour la deux et la trois tu vois ce que je veux dire?

Mais le rendu est au rendez vous! Cependant, essaie d'être plus claire quitte à mettre des indications dans ton CSS entre
/* indication*/
Sinon quand tu en auras beaucoup, tu ne seras plus a quoi correspond quoi, par exemple tu aurais pu appeler les titres : titrecontexte et le bloc, "casecontexte"etc... voir plus court du genre "titrec"

sinon

Code:

.patate { /*case lienutile*/

Bon j'ai modifié les noms des class pour plus de compréhension. Ensuite mettre dans la même case, j'y ai pensé, mais ce serait impossible de changer la taille, la couleur etc... Enfin je crois, m'enfin c'est toi la prof donc je te fais confiance. 8) J'essaierai dans l'après-midi.

Ah mais si, une seule case, ne veux pas dire une seule classe^^ une case par exemple :

Code:

<td>
<div class="titre">titre</div>
<div class="case">Case</div></td>

Tu pourrais modifier les tailles à volonté^^

Eh voilà j'ai réussi ! 8D Je remets CSS et HTML pour que tu vois avec les noms modifiés.

CSS:

Code:

.bloccontexte {
  color:#ffffff;
  background-color:#000000;
  text-align:justify;
  width:250px;
  height:100px;
  overflow:auto;
  family-font:Calibri;
  border-radius: 5px 5px 0px 0px;
  padding:5px;
  margin:5px;
}
.blocliens {
  color:#ffffff;
  background-color:#000000;
  text-align:center;
  width:250px;
  height:100px;
  family-font:Calibri;
  border-radius: 5px 5px 0px 0px;
  padding:5px;
    }
      .blocnews {
  background-color:#6b6b6b;
  text-align:justify;
  width:500px;
  height:200px;
  family-font:Calibri;
  padding:5px;
  margin-right:auto;
margin-left:auto;
    }

.titrecontexte {
  color:#6b6b6b;
  font-family:Calibri;
  margin-bottom:-13px;
  font-size:30px;
  text-align:center;
}

.titreliens {
  color:#6b6b6b;
  font-family:Calibri;
  margin-bottom:-8px;
  font-size:30px;
  text-align:center;
}

.titrenews {
  color:#000000;
  font-family:Calibri;
  margin-bottom:-13px;
  font-size:30px;
  text-align:center;
}

HTML:

Code:

<table><tr><td><div class="titrecontexte">Contexte</div><div class="bloccontexte">Texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte </div></td><td><div class="titreliens">Liens Utiles</div><div class="blocliens"><a href="http://www.terramysticarpg.com/f40-gestion-rp">Gestion RP<br/>
<a href="http://www.terramysticarpg.com/f4-validation">Validation</td></tr>
<tr><td colspan="1,5"><div class="titrenews">News</td></tr>
<tr><td colspan="2"><div class="blocnews">Aujourd'hui Patate est morte. Pleurons ensemble...</td></tr></table>

Aperçu forum test (toujours le même. 8D) : http://forumtest-levi.superforum.fr/

Ma fois c'est parfait! Avec ça, croit moi tu peux faire les 3/4 des choses, et comprendre les 3/4 des tutoriels (sauf si ça commence à prendre du javascript)

Je ne peux pas disséquer tous les templates de forum, mais on peut en faire deux si tu le souhaites :
Celui des catégories, celui de l'index.

(Vu que c'est pour apprendre à personnalisé ton forum)

Je te conseil de t'entrainer à faire tes propres codes selon tes envies, et à te tourner vers moi en cas d'incompréhension ou de problème!

Oui je veux bien me lancer dans ces templates là. 8D

Alors par lequel veux tu commencer ?

Hm.. Le plus simple et on terminera par le plus compliqué ! ^^