Page d'accueil ; tableau.

[¤Christie¤]

Bonsoir !
Je galère depuis un petit moment pour faire la page d'accueil de mon forum.
Ce que je voudrais est assez complexe à expliquer, alors comme d'habitude, j'ai fait une illustration pour vous montrer exactement ce que j'aimerai. x]



Donc, voilà. J'ai l'image de base, comme vous pouvez le voir. x]
Mais je n'arrive pas à faire le tableau, or, je l'ai vu sur ce magnifique forum : Mokkori Hunter.
Je ne sais vraiment rien faire question tableau :
- les colonnes/lignes
- comment faire pour qu'il y a deux lignes sur une colonne et des fois seulement une ligne.
Bref, débutante.
Merci beaucoup d'avance !

[Makoto Yuki]

Bonsoir,
Pour faire un tableau similaire à celui du forum que vous montrez, vous devez utiliser ces codes: Dans votre HTML

Code:

<table cellspacing="2" cellpadding="2" border="0" style="width: 100%; text-align: left; margin-left: auto; margin-right: auto;">
<tr>
<td style="vertical-align: top; width: 50%;">
      <table cellspacing="2" cellpadding="2" border="0" style="width: 100%; text-align: left; margin-left: auto; margin-right: auto;">
            <tbody>
                  <tr>
                      <td style="width: 50%; text-align: center; vertical-align: top;"><span class="boxtitle">titre 1</span><div class="box">contenu 1</div>
</td>
                        <td style="width: 50%; text-align: center; vertical-align: top;"><span class="boxtitle">titre 2</span><div class="box">contenu 2</div>
</td>
</tr>
</tbody>
</table>
            <table cellspacing="2" cellpadding="2" border="0" style="width: 100%; text-align: left; margin-left: auto; margin-right: auto;">
              <tbody>
                  <tr>
<td style="width: 50%; text-align: center; vertical-align: top;" rowspan="1" colspan="1">
<span class="boxtitle">titre 3</span><div class="box">contenu 3<br />blablablablablabla<br />
Blablablablablabla<br />
Blablablablablabla<br /></div>
</td>
</tr>
</tbody>
</table>
<table cellspacing="2" cellpadding="2" border="0" style="width: 100%; text-align: left; margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td style="width: 50%; text-align: center; vertical-align: top;" rowspan="1" colspan="1">
<span class="boxtitle">Titre 4</span><div class="box">contenu 4<br />blablablablablabla<br />
Blablablablablabla<br />
Blablablablablabla<br /></div>
</td>
</tr>
</tbody>
</table>
</td>
<td style="vertical-align: top; width: 50%;">
<table cellspacing="2" cellpadding="2" border="0" style="width: 100%; text-align: left; margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td style="width: 50%; vertical-align: top;"><span class="boxtitle">Titre 5</span>
<div class="box">-Contenu 5<br /> -faire des tableauX<br />-c'est ma passion dans la vie<br />-surtout à une heure du matin<br /></div>
</td>
<td style="vertical-align: top;"><span class="boxtitle">titre 6</span><div class="box">Contenu 6<br />Blablablablablabla<br />blablablablablabla<br />
Blablablablablabla<br />
Blablablablablabla<br /></div>
</td>
</tr>
<tr>
<td rowspan="1" colspan="2" style="width:100%;"><span class="boxtitle">titre 7</span><div class="box">Contenu 7<br />blablablablablabla<br />
Blablablablablabla<br />
Blablablablablabla<br /></div></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>

&Dans votre CSS (à modifier):

Code:

.box {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background-color:#F0F0F0;
color:#718C91;
font-size:11px;
margin:0;
padding:3px 10px;
}

.boxtitle {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background-color:#BEDCDC;
color:#F0F0F0;
display:block;
font-size:11px;
font-weight:bold;
margin:0 0 5px;
padding:3px 10px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}

[¤Christie¤]

Hello,
WOOW. T'es ma sauveuse. XD Sublime, c'est parfait. Je vais essayer d'arranger histoire de caser mon image, mais le code est exactement ce que j'espérais. Super rapide en prime. O__O Merci encore !
Je laisse juste ouvert le temps que je bidouille, afin d'être sûre. x]

[Makoto Yuki]

Héhé, mais de rien
Si tu as le moindre problème avec les codes, n'hésite pas...

[¤Christie¤]

Merci beaucoup.

[¤Christie¤]

Wow, déjà un petit problème. Désolée, je fais un double-post, de peur de ne pas être remarquée sinon. x]
J'aimerais que les titres ne soient pas en majuscules... C'est possible ?
EDIT : Je parle toujours trop vite. XD J'ai trouvé finalement, merci encore. =D

[¤Christie¤]

Tout fonctionne parfaitement, merci beaucoup.