imbrication de tableaux

**cyrano_de_bergerac** · 15/03/2011, 14h55

Bonjour,

J'ai ce tableau:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
    <form id="form1" runat="server">
    <table border="0" cellspacing="0" cellpadding="0" width="100%;" style="background-image: url(../Images/background.png); background-repeat:no-repeat;">
        <tr>
            <td align="center" valign="top">
                <table border="0" cellspacing="0" cellpadding="0" width="992px">
                    <tr>
                        <td valign="top">
                            <uc1:Header ID="Header1" runat="server" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    </form>
</body>

<uc1:Header ID="Header1" runat="server" /> se remplace par:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td id="header_title_workflow">
            </td>
            <td id="header_shadow">
            </td>
            <td id="header_esp" style="text-align: right; vertical-align: bottom;">
            </td>
        </tr>
    </table>

Les propriétées CSS sont les suivantes:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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); /*10*125*/
	background-repeat:repeat-x;
}
 
#header_esp 
{
	width:135px;
	height:125px;
	background-image:url(../Images/header_esp.png); /*135*125*/
	background-repeat:no-repeat;
}

Je ne comprends pas l'imbrication, surtout au niveau des largeurs:
1 - Première table 100% de la largeur de ma page.
2 - Deuxième table 992px centrée dans ma première table.
3 - Troisième table 100% de la largeur de ma 2ème table, donc à priori 992px.
4 - Trois cellules dans ma 3ème table où la première et la 3ème cellule doivent faire impérativement 423px et 135px à cause des background-image mises en CSS.
Pour la 2ème cellule, j'ai mis au départ 434px (992-423-135), mais à l'affichage je n'ai que 430px qui est pris, sans doute à cause de mon image en repeat-x qui fait 10px de large... Si je mets une valeur comprise entre 438 et 440px, l'affichage est correct (pour les résolutions d'écran en 1024 et 1280 en largeur).
J'aurai préféré ne pas mettre de largeur pour la 2ème cellule, et que celle-ci prenne automatiquement la largeur restante sur les 992px (en enlevant les 423px de la cellule de gauche, et les 135px de la cellule de droite)... Si quelqu'un a une idée..?

Si je soulève le problème bien que ça fonctionne, c'est que je peux être amené à changer le 992px en une valeur plus grande avec l'augmentation des résolutions d'écran. Et si je change le 992px, il faudra que je change aussi dans ma CSS la largeur de la deuxième cellule.

Merci d'avance!

**bob633** · 15/03/2011, 15h52

et un simple width:100%; ?

Du moment que ta 1ere et 3eme cellule sont définis, celle du milieu prendra 100% de la largeur restante ..

**cyrano_de_bergerac** · 15/03/2011, 17h54

Envoyé par bob633

et un simple width:100%; ?

Du moment que ta 1ere et 3eme cellule sont définis, celle du milieu prendra 100% de la largeur restante ..

Non c'est pire car ça met la largeur du tableau pour la taille de la cellule, en plus de celles des 2 autres cellules, et donc mon tableau se retrouve plus grand que ce que je lui ai assigné...

Je vais faire un test en ne mettant rien en largeur et en enlevant l'image de background répétée, et en jouant sur les largeurs des cellules voisines.

imbrication de tableaux

HTML

Vue hybride

Discussions similaires

Partager

Partager