28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai un souci avec les largeurs de colonne sur un tableau.
J'ai voulu avoir une mise en page en 3 zones, une partie gauche et droite qui font 20% de la largeur du site, et la central de 60%. Mais voilà ... Sur 2 de mes 4 pages, ca se passe bien ... Mais pour les 2 autres .... Les colonnes ne se repartissent pas correctement ...

Pour ca, j'ai utilisé des <table> que j'ai défini comme suit :


.contenu_left
{
  width  : 20%;
  border: 1px solid black ;
  text-align: justify ;
  font: 14px arial, sans-serif ;
}

.contenu_center
{
  width  : 60%;
  border: 1px solid black ;
  text-align: left ;
  padding-left: 20px ;
  padding-right:20px ;
  font: 14px arial, sans-serif ;
}

.contenu_right
{
  width  : 20%;
  border: 1px solid black ;
  text-align: justify ;
  font: 14px arial, sans-serif ;
}



Mon code HTML est celui-ci :



    <div class="contenu">
      <table>

        <tr>
          <td class = "contenu_left">
          </td>

          <td class = "contenu_center">

            <p>
            </p>         

          </td>

          <td class = "contenu_right">
          </td>
        </tr>
         
      </table>
    </div>
 


Le site est en ligne ici : http://airedemusique.fr/HTML5/accueil.html

Le menu accueil n'est pas encore fait, mais les 4 autres oui. Les 2 1er fonctionnent bien, mais les 2 derniers .... aie aie aie ...

Où est l'erreur ? D'avance merci !
Modérateur
Bonjour,

width:100%;
sur table devrait arranger le truc. Les deux premiers fonctionnent car le texte "pousse" au max le bloc central (dans les deux derniers tu n'as que des images plus petites).
Modifié par _laurent (23 Mar 2012 - 11:07)
Modérateur
D'ailleur ton <div class="contenu"> ne sert a rien.
Met juste <table class="contenu"> en rajoutant width:100%; au style de .contenu