tableau, dimensions des cellules et padding

[cyrano_de_bergerac]

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 css :

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 css :

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!