Aide page d'accueil

[Katchou]

Bonjour à tous! x)

Voilà, j'aurais besoin d'aide concernant un modèle de page d'accueil très sympa que j'ai vu, et désolé de vous déranger pour cela :/
Il s'agit de ce modèle que j'ai vu sur quelques forums et notamment celui-ci:
http://liar-liar.forumactif.org/forum.htm
En fait j'aimerais savoir comment faire les trois colonnes aux bords ronds avec un fond différent du fond du forum, le reste je modifierais moi-même pour ne pas copier.
Mais c'est surtout le moyen de faire les trois colonnes aux bords arrondis en pouvant modifier la couleur du fond qui m'intéresse.

J'espère que quelqu'un pourra m'aider.
Cordialement, Katchou.

[Usopp]

Je pense que pour cette page
le créateur a du utiliser le HTML ou CSS
et la ensuite intégré dans la page d'accueil

[Katchou]

Merci de votre réponse^^
Je pense aussi, mais je n'ai pas de grosses connaissances justement dans le HTML et le CSS c'est pourquoi j'espère que quelqu'un pourra m'aider x)

[Asorane]

En fait, c'est un bête tableau, et c'est le texte qui est sur un fond de couleur différente aux bords arrondis.

D'abord, il faut que tu fasse ton tableau.
Le code à placer dans ta page d'accueil, c'est du html et c'est celui-là :

Code:

 <table><tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
<td>Cellule 3</td>
</tr>
<tr>
<td>Cellule 4</td>
<td>Cellule 5</td>
<td>Cellule 6</td>
</tr></table>

La balise table ouvre le tableau, la balise tr ouvre une ligne, et la balise td ouvre une colonne. Il ne faut pas oublier de refermer toutes les balises. Tu remplace les "Cellule 1" par le texte que tu veux mettre dans ta case.

Ensuite, pour le fond de couleur différente et les bords arrondis, c'est au niveau du CSS que ça se passe (affichage > couleurs > feuille de CSS).

Tu rentre ce code-là dans ta feuille de CSS :

Code:

.cadres {
   -moz-border-radius: 20px 20px 20px 20px;
   -webkit-border-radius: 20px 20px 20px 20px;
   background-color: #ta couleur de fond;
   border: none;
   padding-left: 5px;
   padding-right: 5px;
   padding-top: 5px;
   padding-bottom: 5px;
}


Les -moz-border-radius et -webkit-border-radius servent à signifier l'arrondi, mais ils ne marchent que sous Firefox et Google Chrome. Le nombre de pixel indiqué sert à régler l'arrondi. 0px, c'est que tes coins ne seront pas arrondis du tout, et plus tu accentue, plus ils le seront.
Les padding servent à indiquer l'espace que tu veux laisser entre le bord de ton fond coloré et le texte, pour que ce soit plus agréable visuellement. Remplace le #ta couleur de fond par le code de la couleur que tu veux mettre en fond.

N'oublie pas d'enregistrer ta feuille de CSS.

Maintenant, retourne à ta page d'accueil et ton tableau. Là, après chaque balise < td >, tu vas rajouter ceci :

Code:

<div class="cadres">

et avant chaque balise </ td >, tu vas rajouter ça :

Code:

</div>

Au final, ça te donne ça :

Code:

<table><tr>
<td><div class="cadres">TON TEXTE</div></td>
<td><div class="cadres">TON TEXTE</div></td>
<td><div class="cadres">TON TEXTE</div></td>
</tr>
<tr>
<td><div class="cadres">TON TEXTE</div></td>
<td><div class="cadres">TON TEXTE</div></td>
<td><div class="cadres">TON TEXTE</div></td>
</tr></table>

Et voilà ! J'espère que c'est ce qu'il te fallait.

Désolée pour l'usage du gras mais je trouvais qu'il était nécessaire à une meilleure compréhension.

[vuhj]

J'ai essayé de mettre le tableau mais il se met au milieu et je voudrais qu'il se mette à gauche. comment faire ?

Merci

[Asorane]

Bonjour =)

Tu peux régler la largeur des colonnes de ton tableau pour qu'il prenne toute la page de cette façon, par exemple :

Code:

<table width="800">

au lieu d'un simple < table >. Le 800 correspond à la largeur de ton tableau. De même pour les colonnes, en insérant un

Code:

width="un chiffre ou un %"

dans tes balises td.

Pour aligner ton tableau à gauche - j'imagine que c'est sur une page d'accueil - je suis désolée mais je n'ai qu'une solution de rechange à te proposer, qui consiste à mettre une image transparent sur la droite de ton tableau afin que le reste soit plus à gauche. Mais c'est une solution "de triche", aussi je pense que tu devrais demander de l'aide à quelqu'un de plus qualifié que moi en html

[vuhj]

Ok merci

[vuhj]

Désolée du double post mais comment modifier la hauteur d'une colone ?

[Asorane]

Pour modifier la hauteur, il faut que tu rajoute "height: un chiffre" dans ton code, dans la balise < td >

[Jiben]

pas mal

[vuhj]

Merci =)

[Katchou]

Contente d'aider d'autres personnes x)
Merci beaucoup ça marche super bien!

[Asorane]

De rien !