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
css
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
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éléfilm, série cours et moyen métrage : </p>
<table>
<tr>
<th scope="col" class="tb_aff"> </th>
<th scope="col" class="tb_titre">Titre</th>
<th scope="col" class="tb_an">Année</th>
<th scope="col" class="tb_role">Rôle</th>
<th scope="col" class="tb_rea">Réalisateur</th>
</tr>
<tr>
<td class="tb_aff"><img src="img/filmographie/photo_petit.jpg" /></td>
<td class="tb_titre"><a href="#" title="Détail">L'ange tombé 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é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é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é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é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é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é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">© 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