Page d’accueil

[Lunarisia]

C'est encore moi!

Bonjour;
Je sais que je demande beaucoup de chose, mais c'est le seul forum où je puisse le faire, car les forums d'aide sur lesquels je suis inscrite ne me répondent jamais.

J'aimerais beaucoup qu'on me donne les codes pour créer cette Page D’accueil, que je juge relativement simple mais néanmoins trop compliquée pour moi. J'ai fait un schéma:

https://i.servimg.com/u/f40/15/70/77/45/modale10.jpg

La largeur de mon forum est de 60 %

Si toutefois je ne précise pas assez de choses, posez moi toutes les questions nécessaires.

Merci d'avance.

[Invité]

Bonjour,

Nous ne vous donnerons pas un code tout fait sur ce forum d'entraide . Cependant je peux vous donner les éléments nécessaire à l'élaboration de ce code.

1. L'image de fond du message d'accueil.
On place une div avec une image de fond autour de tout le contenu du message. Donc votre message commencera pas <div style="background-image: url('adresse de l'image');"> et se terminera par </div>

2. Les cases du messages.
Il s'agit d'un tableau avec 2 lignes et 3 colonnes. On ouvre un tableau avec <table>, puis on s'occupe des lignes <tr></tr> . Pour chaque ligne on place les cellules <td></td>.
Dans votre cas, il faudra fusionner certaines cellules pour que 2 d'entre elles n'en forme qu'une. Pour fusionner 2 cellules verticalement on utilise rowSpan="2" , pour fusionne 2 cellules horizontalement on utilise colSpan="2" .

3. Donner du style grâce au CSS.
Pour donner un fond aux cellules 2 solutions.
Si c'est le même pour toutes les cellules, on utilise un class pour toute les cellules. Exemple, on place ceci dans la feuille de style CSS:

Code:

.tableaupa{
background-image: url('adresse de l'image de fond');/*image de fond*/
border: 1px solid #000000; /*contours*/
-moz-border-radius: 8px;
-webkit-border-radius: 8px; /*arrondis*/
border-radius: 8px;}

On met cette class dans les celulles:

Code:

<td class="tableaupa">le contenu</td>

En revanche si les fonds sont différents, il faut mettre le style directement dans le tableau:

Code:

<td style="border: 1px solid #000000; background: url('adresse de l'image');">le contenu</td>

Essayez d'élaborer votre code, si le résultat n'est pas bon, postez votre essai .

Cordialement.

[Lunarisia]

Merci pour les explications! Le problème c'est que je ne sais pas créer un tableau! J'ai pourtant essayé, mais cela ne fonctionne pas ou me donne des trucs bizzares.

[Invité]

J'essaie de vous donner l'explication du tableau autrement. Un tableau est composé de plusieurs parties qui s'imbriquent les unes dans les autres. Une règle à se souvenir, tout ce qu'on ouvre on doit le fermer.
Donc un tableau est contenu entre <table> et </table>.
Une ligne est contenue entre <tr> et </tr>, on répète ce code autant de fois qu'il u a de lignes dans le tableau entre <table et </table>.
Une cellule est contenue entre <td> et </td>, on répète ce code autant de fois qu'il y a de colonnes dans le tableau entre <tr> et </tr>.

On peut ajouter dans les balises, des informations qui permettent d'améliorer le tableau. Pour que le tableau tiennent toute la largeur de la page d'accueil, on lui donne une dimension: width="100%". On le place comme ceci: <table width="100%">. Ca ne modifie pas le </table>. C'est le même principe avec les cellules <td> pour les fusionner ou leur donner un style, on inclue ceci dans la balise d'ouverture.

Faites un essai et copiez/coller le code ici, sans cela je ne peux pas deviner où vous faites une erreur. .

Cordialement.

[Lunarisia]

Voici ce que j'ai mit:

Code:

<table width="100%">
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>D</td><td>E</td><td>F</td></tr>
<tr><td>G</td><td>H</td><td>I</td></tr>
</table>

Edit:
J'ai un trouvé un tutoriel qui m'a permis de créer un tableau simple.

[Invité]

Bonjour,

Votre code a 3 lignes et 3 colonnes. Pour se rapprocher de votre exemple, il faut supprimer une ligne et fusionner les cellules:

Code:

<table width="100%">
<tr><td rowSpan="2">A</td><td colSpan="2">B</td></tr>
<tr><td>E</td><td>F</td></tr>
</table>

Ensuite on ajoute un espacement entre les cellules:

Code:

<table width="100%" cellSpacing="5">
<tr><td rowSpan="2">A</td><td colSpan="2">B</td></tr>
<tr><td>E</td><td>F</td></tr>
</table>

Puis on ajoute le style à la fois dans le tableau et la feuille de style CSS ( voir messages précedents):

Code:

<table width="100%">
<tr><td rowSpan="2" class="tableaupa">A</td><td colSpan="2"  class="tableaupa">B</td></tr>
<tr><td class="tableaupa">E</td><td class="tableaupa">F</td></tr>
</table>

Il ne reste plus qu'à placer la div autour pour mettre l'image de fond.

Cordialement.

[Lunarisia]

Merci! Grâce à votre aide précieuse, je sais désormais réaliser un tableau, chose qui va bien me simplifier la vie!