28173 sujets

CSS et mise en forme, CSS3

Bonjour,

j'ai un problème de mise en page que je n'arrive pas à resoudre.
J'ai un site avec un overflow au milieu pour donner l'apparence de frame.
Dans ce contenu je veux mettre un tableau et mettre du padding et une bordure dans les cellules du tableau.
Seulement, dès que je met le padding, le tableau "déborde" en largeur et du coup, je me retrouve avec un assenseur horizontal, ce que je ne veux pas.

Voici les codes :
HTML

<div id="pagecontenu">
<h2>Filmographie</h2>
<p>t&eacute;l&eacute;film, s&eacute;rie cours et moyen m&eacute;trage : </p>

<table>
      <tr>
        <th scope="col" class="tb_aff">&nbsp;</th>
        <th scope="col" class="tb_titre">Titre</th>
        <th scope="col" class="tb_an">Ann&eacute;e</th>
        <th scope="col" class="tb_role">R&ocirc;le</th>
        <th scope="col" class="tb_rea">R&eacute;alisateur</th>

      </tr>
      <tr>
        <td class="tb_aff"><img src="img/filmographie/photo_petit.jpg" /></td>
        <td class="tb_titre"><a href="#" title="D&eacute;tail">L'ange tomb&eacute; du ciel</a></td>
        <td class="tb_an">1999</td>
        <td class="tb_role">Louis</td>

        <td class="tb_rea">Bernard Uzan</td>
      </tr>
      <tr>
        <td class="tb_aff"><img src="img/filmographie/photo_petit.jpg" /></td>
        <td class="tb_titre"><a href="#" title="D&eacute;tail">PJ : Affaire de famille</a></td>
        <td class="tb_an">2000</td>
        <td class="tb_role">Un enfant </td>

        <td class="tb_rea">G&eacute;rard Vergez </td>
      </tr>
      <tr>
        <td class="tb_aff"><img src="img/filmographie/photo_petit.jpg" /></td>
        <td class="tb_titre"><a href="#" title="D&eacute;tail">Docteur Sylvestre : Maladie D'amour</a></td>
        <td class="tb_an">2000</td>
        <td class="tb_role">Charles</td>

        <td class="tb_rea">Philippe Roussel</td>
      </tr>
      <tr>
        <td class="tb_aff"><img src="img/filmographie/photo_petit.jpg" /></td>
        <td class="tb_titre"><a href="#" title="D&eacute;tail">Sauveur Giordano</a></td>
        <td class="tb_an">2001</td>
        <td class="tb_role">Robin</td>

        <td class="tb_rea">Pierre Joassin</td>
      </tr>
      <tr>
        <td class="tb_aff"><img src="img/filmographie/photo_petit.jpg" /></td>
        <td class="tb_titre"><a href="#" title="D&eacute;tail">Le pain</a></td>
        <td class="tb_an">2001</td>
        <td class="tb_role">Le fils</td>

        <td class="tb_rea">Hiam Abbasen</td>
      </tr>
      <tr>
        <td class="tb_aff"><img src="img/filmographie/photo_petit.jpg" /></td>
        <td class="tb_titre"><a href="#" title="D&eacute;tail">Haute Pierre</a></td>
        <td class="tb_an">2002</td>
        <td class="tb_role">Leonard</td>

        <td class="tb_rea">Jean-Yves Pitoun</td>
      </tr>
</table>
     <p class="eneptit">&copy; 2003 - 2006 </p>
  </div>

css

body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: small;
height: 100%;
margin: 0;
padding: 0;
color: #000033;
background-color: #F0F0FF;
}
a:link, a:visited { color:#336699; text-decoration: underline; }
a:hover { color:#336699; text-decoration: none; }
img { border-width: 0; margin: 0; }
h2 { 
color: #336699;
text-align: center;
font-size: medium;
font-weight: bold;
margin: 0.2em 0 1em 0;
}
p { text-align: justify; text-indent: 1em; }
table { width: 495px; border-collapse: collapse; }
th {
color: #FFFFFF;
background-color: #336699;
text-align: center;
font-weight: bold;
}
table, tr { margin: 0; padding: 0; }
td, th { padding : 2px 5px 2px 5px; border: 1px solid #336699;  margin: 0; }
.tb_aff {
width: 68px;
voice-family: "\"}\"";
voice-family:inherit;
width: 58px;
}
html>body .tb_aff {
width: 58px;
}
.tb_titre {
width: 162px;
voice-family: "\"}\"";
voice-family:inherit;
width: 152px;
}
html>body .tb_titre {
width: 152px;
}
.tb_an {
width: 60px;
voice-family: "\"}\"";
voice-family:inherit;
width: 50px;
}
html>body .tb_an {
width: 50px;
}
.tb_role {
width: 100px;
voice-family: "\"}\"";
voice-family:inherit;
width: 90px;
}
html>body .tb_role {
width: 90px;
}
.tb_rea {
width: 105px;
voice-family: "\"}\"";
voice-family:inherit;
width: 95px;
}
html>body .tb_rea {
width: 95px;
}

j'ai essayé en mettant en commentaire toutes les tailles de colonne et ça fait pareil (padding, en commentaire ça marche, padding activé, c'est trop grand.) - la largeur de bordure est normalement de 2px, mais si je met 2px, ça déborde aussi.

Est-ce que quelqu'un peut m'aider ou aurait un truc?

merci d'avance