Problème page d'accueil

[Cramby']

Bonjour tout le monde, j'ai une fois de plus, besoin de votre aide ! ^^

Voila la page d'accueil que je voudrais :


J'ai réussi à faire les cadres et tout, il me faudrait juste un peu d'aide pour ceux du milieu, que les cadres de la ligne deux ce séparent pour laisser passer les cadres n°2 des lignes 1 et 3 :


Le codage:

Code:

<table><tr><td align="left"> <div class="petitcadre"> <div class="crédits"> Bla bla</div> </div> </td>

<td align="left"><div class="petitcadre2"><center> Bla bla </center></div> </td>

<td align="left"> <div class="petitcadre"> Bla bla</div>  </td></tr></table>

<table><tr><td align="left"> <div class="petitcadre"> <div class="crédits"> Bla bla </div>



<td align="left"> <div class="petitcadre"> Bla bla</div>  </td></tr></table>

<table><tr><td align="left"> <div class="petitcadre"> <div class="crédits"> Bla bla </div>


</div> </td><td align="left"><div class="petitcadre2"><center> Bla bla bla</center></div> </td>

<td align="left"> <div class="petitcadre"> Bla bla</div>  </td></tr></table>

Css:

Code:

.petitcadre2 {
  background-color: #FDFEF5;
  border: 1px solid #E1C392;
  height:250px;
  width: 300px;
  overflow: auto;
}
.petitcadre {
  background-color: #FDFEF5;
  border: 1px solid #E1C392;
  height:100px;
  width: 220px;
  overflow: auto;
}

Je ne sais pas si tout ça était clair, en tout cas merci de votre aide ! :3

[Scipion]

Bonjour

Faites un test sur les modifications suivantes effectuées sur la base de votre schéma :

CSS :

Code:

.petitcadre2 {
  background-color: #FDFEF5;
  border: 1px solid #E1C392;
  height:120px;
  width: 300px;
  overflow: auto;
}
.petitcadre {
  background-color: #FDFEF5;
  border: 1px solid #E1C392;
  height:100px;
  width: 220px;
  overflow: auto;
}

Codage :

Code:

<table><tr><td align="left"> <div class="petitcadre"> <div class="crédits">bla bla</div></td>
 
<td align="left"><div class="petitcadre2"><center>bla bla</center></div> </td>
 
<td align="left"> <div class="petitcadre">bla bla</div></div>  </td></tr></table>
 
<table><tr><td align="left"> <div class="petitcadre"> <div class="crédits">bla bla</div></td>
 
<td align="left"><div class="petitcadre2"><center>bla bla</center></div> </td>
 
<td align="left"> <div class="petitcadre">bla bla</div></div>  </td></tr></table>

<table><tr><td align="left"> <div class="petitcadre"> <div class="crédits">bla bla</div></td>
 
<td align="left"><div class="petitcadre2"><center>bla bla</center></div> </td>
 
<td align="left"> <div class="petitcadre">bla bla</div></div>  </td></tr></table>

Cordialement

[Scoubifitz]

bonjour,

sur trois colonnes , si j'ai bien compris :

Code:

<table style="margin:auto;">
  <tr>
    <td align="left">
      <div class="petitcadre">
        <div class="crédits"> Bla bla</div>
      </div>
      <div class="petitcadre">
        <div class="crédits"> Bla bla</div>
      </div>
      <div class="petitcadre">
        <div class="crédits"> Bla bla</div>
      </div>
    </td>
    <td align="left">
      <div class="petitcadre2"><center> Bla bla </center></div>
      <div class="petitcadre2"><center> Bla bla </center></div>
    </td>
    <td align="left">
      <div class="petitcadre"> Bla bla</div>
      <div class="petitcadre"> Bla bla</div>
      <div class="petitcadre"> Bla bla</div> 
    </td>
  </tr>
</table>

et le CSS légèrement modifié pour espacer les cadres :

Code:

.petitcadre2 {
  background-color: #FDFEF5;
  border: 1px solid #E1C392;
  height:250px;
  width: 300px;
  margin:3px 0;
  padding:0 3px;
  overflow: auto;
}
.petitcadre {
  background-color: #FDFEF5;
  border: 1px solid #E1C392;
  height:100px;
  width: 220px;
  margin:3px 0;
  padding:0 3px;
  overflow: auto;
}

[Cramby']

Merci pour vos réponses !

Scipion: Le code que vous m'avez donner ne correspond pas, merci quand même ! ^^

Scoubifitz: C'est exactement ce que je cherchais ! Un énoooorme merci ! 8D

Je laisse le sujet ouvert au cas où je rencontrerais à nouveau un problème ! :3

[Cramby']

Tout est bon, merci encore ! :3