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

Citation:

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.

15/03/2011, 15h52	#2
bob633 Membre éclairé Développeur Sharepoint/Biztalk Inscription : octobre 2008 Messages : 500 Détails du profil Informations personnelles : Sexe : Localisation : France, Pyrénées Atlantiques (Aquitaine) Informations professionnelles : Activité : Développeur Sharepoint/Biztalk Informations forums : Inscription : octobre 2008 Messages : 500 Points : 398 Points : 398	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 ..
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email