Page d’accueil

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Page d’accueil

Message par Lunarisia le Mar 26 Juil 2011 - 14:48

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:

http://i40.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.


Dernière édition par Lunarisia le Jeu 28 Juil 2011 - 21:04, édité 1 fois

Lunarisia
**

Féminin
Messages : 50
Inscrit(e) le : 02/06/2011

http://lunaris-rpg.forumgratuit.org/
Lunarisia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d’accueil

Message par Invité le Mer 27 Juil 2011 - 12:36

Bonjour,

Nous ne vous donnerons pas un code tout fait sur ce forum d'entraide Wink. 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 Wink .

Cordialement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d’accueil

Message par Lunarisia le Mer 27 Juil 2011 - 13:27

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.

Lunarisia
**

Féminin
Messages : 50
Inscrit(e) le : 02/06/2011

http://lunaris-rpg.forumgratuit.org/
Lunarisia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d’accueil

Message par Invité le Mer 27 Juil 2011 - 15:40

Very Happy 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. Wink .

Cordialement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d’accueil

Message par Lunarisia le Jeu 28 Juil 2011 - 15:55

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.

Lunarisia
**

Féminin
Messages : 50
Inscrit(e) le : 02/06/2011

http://lunaris-rpg.forumgratuit.org/
Lunarisia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d’accueil

Message par Invité le Jeu 28 Juil 2011 - 16:38

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.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d’accueil

Message par Lunarisia le Jeu 28 Juil 2011 - 21:04

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

Lunarisia
**

Féminin
Messages : 50
Inscrit(e) le : 02/06/2011

http://lunaris-rpg.forumgratuit.org/
Lunarisia a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum