Largeur de cellule avec pourcentage

Version imprimable

Bonjour, j'ai un petit problème avec les pourcentages des largeurs de mes cellules. J'ai une table qui contient trois cellules, celle de gauche et celle de droite sont mises à 50% chacune de la largeur de la ligne, tandis que celle du centre à une largeur automatique. Le problème survient lorsque j'ajoute une image dans ma cellule de gauche, alors que la cellule s’élargit de 5 px étrangement... alors que sans la cellule de droite, tout fonctionne correctement. Le résultat voulu serait que la cellule conserve sa largeur initiale.

Voici un exemple simplifié de ce à quoi je fais référence :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<html>
<head>
    <style type="text/css">
        html
        {
            overflow: hidden;
        }
        body
        {
            padding: 0;
            margin: 0;
        }
        #taskbar
        {
            width: 100%;
            height: 150px;
            margin: 0;
            padding: 0;
        }
        #taskbar_left
        {
            width: 50%;
            background-color: black;
        }
        #taskbar_right
        {
            width: 50%;
        }
    </style>
    <script type="text/javascript">
        function AjouterImage() {
            alert("Largeur de la div avant l'ajout : " +
            document.getElementById("taskbar_left").offsetWidth);
 
            var img = new Image();
            img.id = "logoGoogle";
            img.src = "http://www.google.ca/intl/en_com/images/srpr/logo1w.png";
            img.alt = "logoGoogle";
 
            document.getElementById("taskbar_left").appendChild(img);
            alert("Largeur de la div après l'ajout : " +
            document.getElementById("taskbar_left").offsetWidth);
        }
    </script>
    </head>
    <body>
        <table id="taskbar" cellspacing="0" cellpadding="0">
            <tr>
                <td id="taskbar_left"></td>
                <td id="mainButton">
                    <img id="mainButtonImg" src="" alt="Main Button" />
                </td>
                <td id="taskbar_right"></td>
            </tr>
        </table>
        <input type="button" value="Ajouter" onclick="AjouterImage();">
    </body>
</html>

Merci d'avance,
Francis

19/05/2011, 22h54
Watilin

’Soir.

Trois colonnes, dont deux qui font 50%… Après un gros effort de calcul mental, j'en arrive à la conclusion que ça fait plus de 100%… Et dans ce genre de cas, surtout avec les tableaux dont le rendu est si capricieux, aucun comportement n'est défini.
Donne à tes cellules des largeurs qui n'ont pas besoin de la quatrième dimension pour être cohérentes, et tu verras, le reste va s'arranger ;)
19/05/2011, 23h08
NoSmoking

Bonsoir,
mes notions de math, qui datent un peu maintenant, m'ont fait retenir que 50% + 50% + x feront quoiqu'il arrive plus de 100%.
Tout ceci pour dire pourquoi mettre en difficulté le moteur de rendu en l'obligeant à tout recalculer à l'insertion.

Saches pour info que seul FireFox modifie la largeur de la cellule, Opera, Chrome, IE et Safari ne change rien...
20/05/2011, 15h24
francis.c

Le but de mettre 50% pour la colonne de gauche et de droite était justement de centrer ma colonne centrale. La colonne centrale contient une image qui fait 110px, et je veux que cette image soit centrée, mais ne pas perdre d'espace pour les deux autres colonnes...

tu peux toujours essayer ceci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#taskbar_left {
  width : 50%;
  min-width : 500px; /* a ajuster suivant besoin */
  background-color : black;
}
#taskbar_right {
  width : 50%;
  min-width : 500px; /* a ajuster suivant besoin */
  background-color: black;
}
#mainButton {
  text-align : center;
  min-width : 110px;
}

a bien y regarder, tu aurais sûrement du poster sur le forum HTML ou encore CSS

20/05/2011, 16h28
francis.c

Merci NoSmoking, ça fonctionne bien apparament ! Et puis c'était dur pour moi de savoir si le problème était dut au Javascript (lors du appendChild), j'ai cru qu'il ajoutait une marge ou un truc du genre, mais tu as bien raison après tout...

Merci encore,
Francis

visiblement il n'y a que FireFox qui fasse des caprices

Concernant la partie script une façon courante de faire avec la méthode createElement

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function AjouterImage() {
  // recup objet de destination, evite les rappels
  var oDest =  document.getElementById("taskbar_left");
  alert("Largeur de la div avant l'ajout : " +oDest.offsetWidth);
  // creation de l'image
  var oImg = document.createElement('IMG');
  // affectation des proprietes
  oImg.id  = "logoGoogle";
  oImg.src = "http://www.google.ca/intl/en_com/images/srpr/logo1w.png";
  oImg.alt = "logoGoogle";
  // ajout element
  oDest.appendChild( oImg);
  alert("Largeur de la div après l'ajout : " + +oDest.offsetWidth);
}