Largeur de cellule avec pourcentage

**francis.c** · 19/05/2011, 22h29

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 :

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

**Watilin** · 19/05/2011, 22h54

’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

**NoSmoking** · 19/05/2011, 23h08

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...

**francis.c** · 20/05/2011, 15h24

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...

**NoSmoking** · 20/05/2011, 15h53

tu peux toujours essayer ceci

Code CSS :

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

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

**francis.c** · 20/05/2011, 16h28

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

**NoSmoking** · 20/05/2011, 17h26

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 :

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

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);
}

Largeur de cellule avec pourcentage

JavaScript

Discussions similaires

Partager

Partager