Largeur de cellule avec pourcentage [Résolu]

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

19/05/2011, 22h54	#2
Watilin Membre Expert Matilin Torre Étudiant Inscription : juin 2010 Messages : 679 Détails du profil Informations personnelles : Nom : Matilin Torre Âge : 23 Localisation : France, Ille et Vilaine (Bretagne) Informations professionnelles : Activité : Étudiant Informations forums : Inscription : juin 2010 Messages : 679 Points : 1 202 Points : 1 202	’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 __________________ Disposition de clavier ergonomique française : Bépo
	00

19/05/2011, 23h08	#3
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 939 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 939 Points : 4 767 Points : 4 767	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...
	00

20/05/2011, 15h24	#4
francis.c Invité régulier Inscription : mai 2011 Messages : 18 Détails du profil Informations forums : Inscription : mai 2011 Messages : 18 Points : 5 Points : 5	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...
	00

20/05/2011, 16h28	#6
francis.c Invité régulier Inscription : mai 2011 Messages : 18 Détails du profil Informations forums : Inscription : mai 2011 Messages : 18 Points : 5 Points : 5	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
	00

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