tableau, dimensions des cellules et padding
Bonjour, :)
J'ai fait un tableau HTML assez simple
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="header_title_workflow">
<asp:ImageButton ID="homeButton" ImageUrl="../../Images/home_fil_ariane.png" OnClick="goHome"
runat="server" />
</td>
<td id="header_shadow">
</td>
<td id="header_esp" style="text-align: right; vertical-align: bottom;">
<asp:Label ID="welcomeLbl" CssClass="welcome" runat="server"></asp:Label>
</td>
</tr>
</table> |
Dans ma CSS, j'ai ceci:
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| #header_title_workflow
{
width:423px;
height:125px;
background-image:url(../Images/header_title_workflow.png); /*423*125px*/
background-repeat:no-repeat;
}
#header_shadow
{
width:440px;
height:125px;
background-image:url(../Images/header_shadow.png);
background-repeat:repeat-x;
}
#header_esp
{
width:135px;
height:125px;
background-image:url(../Images/header_esp.png);
background-repeat:no-repeat;
} |
Seulement, voilà mon image homeButton est trop à gauche et je voudrais la décaler de 100px horizontalement et de 30 px verticalement dans la cellule header_title_workflow, sans que celle-ci ne change de dimensions.
Dans la CSS de la cellule header_title_workflow, j'ai essayé ceci et ça fonctionne:
Code:
1 2 3 4 5 6 7 8 9 10 11
| #header_title_workflow
{
width:323px;
text-align:left;
padding-left:100px;
height:110px;
vertical-align:bottom;
padding-bottom:15px;
background-image:url(../Images/header_title_workflow.png); /*423*125px*/
background-repeat:no-repeat;
} |
Mais je reste sceptique quant à la propreté du code, car pour avoir la vraie taille de la cellule avec cette nouvelle CSS, il me faut additionner le width et le padding-left pour la largeur, et le height et le padding-bottom pour la hauteur.
A noter que la taille de ma cellule doit faire impérativement 423*125px, car j'ai une image en background qui fait cette taille là comme vous pouvez le constater.
J'ai pensé créer une table à une ligne et une colonne qui prendrait toute ma cellule header_title_workflow, et l'unique cellule de cette nouvelle table contiendrait les padding:
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="bottom" id="header_title_workflow">
<table border="0" width="100%">
<tr>
<td style="width:100%; text-align:left; padding-left:100px; vertical-align:bottom; padding-bottom:15px;">
<asp:ImageButton ID="homeButton" ImageUrl="../../Images/home_fil_ariane.png" OnClick="goHome"
runat="server" />
</td>
</tr>
</table>
</td>
<td id="header_shadow">
</td>
<td id="header_esp" style="text-align: right; vertical-align: bottom;">
<!--<asp:Label ID="welcomeLbl" CssClass="welcome" runat="server"></asp:Label>-->
</td>
</tr>
</table> |
Avec la première CSS.
Avez-vous un avis?
Je vous remercie! :)