Problème d'agencement de div

**Core8** · 30/07/2007, 11h59

Bonjour à tous,

J'ai un problème d'agencement de div. Ca ne marche pas sous Firefox / IE7 mais ça marche avec IE6.

Voici deux exemples :
Mozilla / IE7

IE6

Le code du premier bloque sans le titre :

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
<div class="part">
    <div style="text-align : left; width : 154px; height : 18px; float : left;">Première barre</div>
    <div style="text-align : right; width : 30px; height : 18px; float : left;">7</div>
    <div style="text-align : left; width : 20px; height : 18px; float : left;">K</div>
    <div style="text-align : left; width : 130px; height : 18px; float : left;">Leases</div>
    <div style="text-align : right; margin-right : 20px; width : 40px; height : 18px; float : left;">38%</div>
    <div style="border-left : solid 1px #000000; border-top : solid 1px #000000; border-bottom : solid 1px #000000; width : 143.616px; height : 12px; float : left; overflow : hidden; background-color : #47BE0E;"></div>
    <div style="border-top : solid 1px #000000; border-bottom : solid 1px #000000; border-right : solid 1px #000000; width : 230.384px; height : 12px; float : left; overflow : hidden;"></div>
</div>
<div class="barGraphSpace"></div>
<div class="part">
    <div style="text-align : left; width : 154px; height : 18px; float : left;">Deuxième barre</div>
    <div style="text-align : right; width : 30px; height : 18px; float : left;">18</div>
    <div style="text-align : left; width : 20px; height : 18px; float : left;">K</div>
    <div style="text-align : left; width : 130px; height : 18px; float : left;">Leases</div>
    <div style="text-align : right; margin-right : 20px; width : 40px; height : 18px; float : left;">92%</div>
    <div style="border-left : solid 1px #000000; border-top : solid 1px #000000; border-bottom : solid 1px #000000; width : 347.7452px; height : 12px; float : left; overflow : hidden; background-color : #999999;"></div>
    <div style="border-top : solid 1px #000000; border-bottom : solid 1px #000000; border-right : solid 1px #000000; width : 26.2548px; height : 12px; float : left; overflow : hidden;"></div>
</div>
<div class="barGraphSpace"></div>
<div class="part">
    <div style="text-align : left; width : 154px; height : 18px; float : left;">Troisième barre</div>
    <div style="text-align : right; width : 30px; height : 18px; float : left;">20</div>
    <div style="text-align : left; width : 20px; height : 18px; float : left;">K</div>
    <div style="text-align : left; width : 130px; height : 18px; float : left;">IP</div>
    <div style="text-align : right; margin-right : 20px; width : 40px; height : 18px; float : left;">100%</div>
    <div style="border : solid 1px #000000; width : 374px; height : 12px; float : left; overflow : hidden; background-color : #FF7900;"></div>
</div>
<div class="barGraphSpace"></div>
<div class="part">
    <div style="text-align : left; width : 154px; height : 18px; float : left;">Quatrième barre</div>
    <div style="text-align : right; width : 30px; height : 18px; float : left;">0</div>
    <div style="text-align : left; width : 20px; height : 18px; float : left;"> </div>
    <div style="text-align : left; width : 130px; height : 18px; float : left;">IP</div>
    <div style="text-align : right; margin-right : 20px; width : 40px; height : 18px; float : left;">0%</div>
    <div style="border : solid 1px #000000; width : 374px; height : 12px; float : left; overflow : hidden;"></div>
</div>

Le code du deuxième bloque avec le titre :

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
59
60
61
<div class="spaceTitle"></div>
<table class="partTitle">
    <tr>
        <td class="h2">
            <a name="5"></a>
            Titre
        </td>
        <td class="blockUp">
            <a href="#" title="HAUT">HAUT<img src="http://dev1/img/report/up.gif" border="0px" title="HAUT" style="padding-left : 3px;" /></a>
        </td>
    </tr>
</table>
<div class="part">
    <div style="text-align : left; width : 154px; height : 18px; float : left;">Cinquième barre</div>
    <div style="text-align : right; width : 30px; height : 18px; float : left;">16</div>
    <div style="text-align : left; width : 20px; height : 18px; float : left;">K</div>
    <div style="text-align : left; width : 130px; height : 18px; float : left;">Leases</div>
    <div style="text-align : right; margin-right : 20px; width : 40px; height : 18px; float : left;">84%</div>
    <div style="border-left : solid 1px #000000; border-top : solid 1px #000000; border-bottom : solid 1px #000000; width : 317.0211px; height : 12px; float : left; overflow : hidden; background-color : #FF7900;"></div>
    <div style="border-top : solid 1px #000000; border-bottom : solid 1px #000000; border-right : solid 1px #000000; width : 56.9789px; height : 12px; float : left; overflow : hidden;"></div>
</div>
<div class="barGraphSpace"></div>
<div class="part">
    <div style="text-align : left; width : 154px; height : 18px; float : left;">Sixième barre</div>
    <div style="text-align : right; width : 30px; height : 18px; float : left;">5</div>
    <div style="text-align : left; width : 20px; height : 18px; float : left;">K</div>
    <div style="text-align : left; width : 130px; height : 18px; float : left;">Leases</div>
    <div style="text-align : right; margin-right : 20px; width : 40px; height : 18px; float : left;">25%</div>
    <div style="border-left : solid 1px #000000; border-top : solid 1px #000000; border-bottom : solid 1px #000000; width : 93.5px; height : 12px; float : left; overflow : hidden; background-color : #3399FF;"></div>
    <div style="border-top : solid 1px #000000; border-bottom : solid 1px #000000; border-right : solid 1px #000000; width : 280.5px; height : 12px; float : left; overflow : hidden;"></div>
</div>
<div class="barGraphSpace"></div>
<div class="part">
    <div style="text-align : left; width : 154px; height : 18px; float : left;">Huitième barre</div>
    <div style="text-align : right; width : 30px; height : 18px; float : left;">10</div>
    <div style="text-align : left; width : 20px; height : 18px; float : left;">K</div>
    <div style="text-align : left; width : 130px; height : 18px; float : left;">IP</div>
    <div style="text-align : right; margin-right : 20px; width : 40px; height : 18px; float : left;">50%</div>
    <div style="border-left : solid 1px #000000; border-top : solid 1px #000000; border-bottom : solid 1px #000000; width : 187px; height : 12px; float : left; overflow : hidden; background-color : #3399FF;"></div>
    <div style="border-top : solid 1px #000000; border-bottom : solid 1px #000000; border-right : solid 1px #000000; width : 187px; height : 12px; float : left; overflow : hidden;"></div>
</div>
<div class="barGraphSpace"></div>
<div class="part">
    <div style="text-align : left; width : 154px; height : 18px; float : left;">Neuvième barre</div>
    <div style="text-align : right; width : 30px; height : 18px; float : left;">15</div>
    <div style="text-align : left; width : 20px; height : 18px; float : left;">K</div>
    <div style="text-align : left; width : 130px; height : 18px; float : left;">IP</div>
    <div style="text-align : right; margin-right : 20px; width : 40px; height : 18px; float : left;">75%</div>
    <div style="border-left : solid 1px #000000; border-top : solid 1px #000000; border-bottom : solid 1px #000000; width : 280.5px; height : 12px; float : left; overflow : hidden; background-color : #FF3E3E;"></div>
    <div style="border-top : solid 1px #000000; border-bottom : solid 1px #000000; border-right : solid 1px #000000; width : 93.5px; height : 12px; float : left; overflow : hidden;"></div>
</div>
<div class="barGraphSpace"></div>
<div class="part">
    <div style="text-align : left; width : 154px; height : 18px; float : left;">Dixième barre</div>
    <div style="text-align : right; width : 30px; height : 18px; float : left;">12</div>
    <div style="text-align : left; width : 20px; height : 18px; float : left;">K</div>
    <div style="text-align : left; width : 130px; height : 18px; float : left;">IP</div>
    <div style="text-align : right; margin-right : 20px; width : 40px; height : 18px; float : left;">60%</div>
    <div style="border-left : solid 1px #000000; border-top : solid 1px #000000; border-bottom : solid 1px #000000; width : 224.4px; height : 12px; float : left; overflow : hidden; background-color : #FF3E3E;"></div>
    <div style="border-top : solid 1px #000000; border-bottom : solid 1px #000000; border-right : solid 1px #000000; width : 149.6px; height : 12px; float : left; overflow : hidden;"></div>
</div>

J'ai essayer avec un clear : left; ou de mettre des <br/> mais rien n'y fait.

N'hésitez pas si vous avez des idées.

Merci d'avance

**Momodedf** · 30/07/2007, 14h32

Tu les as mis où exactement les <br/> ??

**Candygirl** · 30/07/2007, 14h54

Pourquoi n'utilises-tu pas un tableau ?

**Momodedf** · 30/07/2007, 15h03

Parcequ'un tableau c'est du HTML, c'est un langage de description, ce n'est pas fait pour la mise en page.

Pour la mise en page on utilise le CSS qui est fait pour ça.

Au feu les hérétiques °o° !

**Core8** · 30/07/2007, 15h05

Merci de vos réponses.

Envoyé par Momodedf

Tu les as mis où exactement les <br/> ??

Je les avais mis à la fin de chaque ligne, c'est-à-dire après la balise </div>.

Envoyé par Candygirl

Pourquoi n'utilises-tu pas un tableau ?

On m'avait conseillé d'utiliser des div. Avec les div il n'y a pas un moyen que ça marche sur IE6, IE7 et Firefox ?

**Momodedf** · 30/07/2007, 15h16

Bon j'ai essayé ton code a ajoutant <br/> aprés chaque "<div class="barGraphSpace"></div>" et ça marche aussi bien sous IE 6 que sous Firefox.

**Core8** · 30/07/2007, 15h32

Chez moi ça ne marche pas sur toutes les lignes avec les <br/>.

Mais de toute façon je ne peux pas utiliser de <br/> parce que avec, les espaces entre les lignes sont beaucoup trop grands.

**Candygirl** · 30/07/2007, 16h25

Envoyé par Momodedf

Parcequ'un tableau c'est du HTML, c'est un langage de description, ce n'est pas fait pour la mise en page.

Pour la mise en page on utilise le CSS qui est fait pour ça.

Au feu les hérétiques °o° !

??

Perso je vois des données tabulaires, il est donc tout à fait sémantiquement correcte d'utiliser une balise table, c'est au contraire de ne pas l'utiliser et balancer des balises div à la pelle qui est une absurdité

Envoyé par Core8

On m'avait conseillé d'utiliser des div. Avec les div il n'y a aucun moyen que ça marche sur IE6, IE7 et Firefox ?

Si, c'est fesable avec des style css et d'autres balises que table, mais ça n'a pas vraiment de sens pour cette partie de ta page.

La balise table n'est pas le mal absolu elle doit juste être gardée pour présenter des données tabulaires, donc pour présenter des données que tu représenterais de toute manière sous forme de tableau, par exemple si tu étais sur un traitement de texte, mais pas dans le but de faire l'agencement général de la page.

Dans le deuxième exemple de code que tu donnes, tu utilises typiquement un tableau à mauvais essient, pour faire la mise en page (en mettant ton titre dans le tableau). Par contre ,utiliser un tableau juste pour présenter tes informations conernant tes barres serait, au contraire, tout à fait pertinent.

**Core8** · 30/07/2007, 16h34

Merci beacoup de ta réponse Candygirl.

Je vais faire un essai en utilisant un tableau pour les barres comme tu me l'as conseillé. Par contre j'ai une question, étant donné que je fixe la hauteur de la barre (respectivement dans mon code actuel deux div) je n'aurais pas un problème pour le faire avec des td ?

Sinon, pour le deuxième exemple de code j'ai utilisé un tableau pour le titre parce qu'avec des div je n'étais pas arrivé à faire ce que je voulais. Cette partie de code date un peu et maintenant que je sais mieux utiliser les div je vais essayer de faire la partie du titre avec des div.

Je vous tiens au courant.

**Core8** · 30/07/2007, 17h31

J'apporte une précision sur mon code, les lignes sont générées une à une et je ne sais pas à l'avance le nombre. C'est-à-dire que dans l'exemple il y a deux blocs où chaque ligne est indépendante, je n'ai pas de conteneur global pour chaque bloc (sur les images les deux gros blocs).

Ce ne sera pas trop lourd de créer un tableau (au lieu d'un div) pour chaque ligne car c'est comme cela que je fais et je ne peux pas changer.

**Candygirl** · 30/07/2007, 18h02

Envoyé par Core8

étant donné que je fixe la hauteur de la barre (respectivement dans mon code actuel deux div) je n'aurais pas un problème pour le faire avec des td ?

Je ne vois pas trop à quel niveau tu vois un problème ?

Envoyé par Core8

C'est-à-dire que dans l'exemple il y a deux blocs où chaque ligne est indépendante, je n'ai pas de conteneur global pour chaque bloc (sur les images les deux gros blocs).

Ce ne sera pas trop lourd de créer un tableau (au lieu d'un div) pour chaque ligne car c'est comme cela que je fais et je ne peux pas changer.

Il ne faut pas crèer un tableau pour chaque ligne. C'est le <tr> qui te sert de "conteneur de ligne". Donc tu génère simplement autant de tr que tu as de lignes.

**Core8** · 30/07/2007, 19h09

Envoyé par Candygirl

Je ne vois pas trop à quel niveau tu vois un problème ?

Est-ce que l'on peut fixer la hauteur d'un td sans que le changement s'applique aux autres td du tr ?

Envoyé par Candygirl

Il ne faut pas crèer un tableau pour chaque ligne. C'est le <tr> qui te sert de "conteneur de ligne". Donc tu génère simplement autant de tr que tu as de lignes.

Je ne peux pas faire autrement parce que mon code HTML (cf. les exemples) est générer par une API en PHP et chaque ligne correspond à un élément distinct. Je n'ai aucun lien avec les autres éléments. C'est-à-dire qu'un élément peut tout aussi bien être un titre, un tableau, une image, une liste, etc... Les éléments sont créés un par un (par exemple $this->addBarGraph(les paramètres) qui va créer une seule barre et ensuite je refait la même chose pour une autre barre ou $this->addImage(les paramètres) pour une image).

Dans mon cas je ne vais pas pouvoir faire avec un tableau et puis surtout je dois finir cette partie demain matin donc je pense que je vais garder les div.

J'ai essayer mon code d'orgine avec les div, en mettant overflow : hidden; sur le div conteneur des éléments de chaque ligne et ça marche donc je dois avoir un problème de margin ou de taille quelque part. La ligne doit être trop longue ou quelque chose comme ça.

Problème d'agencement de div

CSS

Discussions similaires

Partager

Partager