Div emboitées alignées

**gayahela** · 11/02/2011, 10h39

Bonjour,

J'ai une gestion de documents qui les hierarchise. J'essaye de les afficher en colonne de maniere dynamique.
Mais avant d'effectuer cela, il faut que le css corresponde.

Je m'explique:
J'ai une div principale composée de la div parent remplie et d'une div enfant remplie. La div enfant est elle meme composée d'une div parent et d'une autre div enfant, ect ....

J'essaye d'aligner toutes les div parent sur la meme ligne, tout en acceptant l' overflow (pour avoir qque chose de dynamique par la suite et avoir une scrollbar s'il y a trop de colonnes)

# display.html.erb

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 
<div id="finder-trunk">
<div id="finderparent">
  <ul id="finder-header">
    <li><a>parents 1</a></li>
  </ul>
  <ul id="finder">
  <% @process_numbers.each do |pn| %>
    <li>
      <a><%= pn.id %>-<%=  pn.number%></a>
    </li>
  <% end %>
  </ul>
 
</div>
 
<div id="children-<%= @node %>" class="close">
 
<div id="finder-children">
<ul id="finder-header">
  <li>
    <a>branch 1</a>
  </li>
</ul>
 
<ul id="finder" class="documents">
  <% @children.each do |c| %>
    <li>
      <a><%=  c.document_name %></a>
    </li>
  <% end %>
 </ul>
</div>
<div id="children-<%= @node %>" class="open">
<div id="finder-children">
<ul id="finder-header">
  <li>
    <a>branch 2</a>
  </li>
</ul>
 
<ul id="finder" class="documents">
  <% @children.each do |c| %>
    <li>
      <a><%=  c.document_name %></a>
    </li>
  <% end %>
 </ul>
</div>
 
<div id="children-<%= @node %>" class="open">
<div id="finder-children">
<ul id="finder-header">
  <li>
    <a>branch 3</a>
  </li>
</ul>
 
<ul id="finder" class="documents">
  <% @children.each do |c| %>
    <li>
      <a><%=  c.document_name %></a>
    </li>
  <% end %>
 </ul>
</div>
<div id="children-<%= @node %>" class="close"><br/></div>
 
</div>
 
</div>
 
</div>
 
 
</div>

Voici le code css qui marche pour la premiere branche, mais pas pour le reste:

# CSS

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
 
 div#finder-trunk {
    overflow: auto;
    height: 450px;
}
 
 
 
 div#finder-trunk div#finderparent {
    width: 400px;
    height: 450px;
    display: inline;
    float: left;
}
 
 div#finder-trunk div.open {
    width: auto;
    height: 451px;
    display: inline;
    float: left;
}
 
div#finder-trunk div#finder-children {
    width: 400px;
    height: 450px;
    display: inline;
    float: left;
 
}

Comme dit precedemment, les autres div ne s'alignent pas et vont a la ligne.
Elles sont sencées toutes avoir la meme hauteur, et la meme largeur(sauf les div.open car leur largeur est dynamique). C'est un peu plus compliqué qu'avec de simples div. Auriez vous une idée ?

**ornitho13** · 11/02/2011, 11h52

Pourrais tu mettre le code HTML généré, ce serait plus simple pour voir les différentes class.

**gayahela** · 11/02/2011, 14h13

J'ai transformé le code HTML en fonction de nouvelles fonctions javascript. Mais j'ai toujours le meme probleme en un peu moins compliqué.
(les div ne sont plus imbriquées)
En gros je veux afficher dans une div ayant un overflow d'autres div de maniere inline pour n'avoir de scrollbar que sur le coté et non en bas.

Voila le nouveau css:

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
 
 div#finder-trunk {
    max-height: 450px;
    overflow: auto;
    white-space: nowrap;
}
 
 div#finder-trunk div {
     display: inline;
     height: 449px;
     width: 400px;
     float: left;
     overflow: auto;
 }
 
 div#finder-trunk div#with_icon {
     height: 32px;
     overflow: hidden;
}
 
 div#finder-trunk div ul {
 
}
 
 
 
div#finder-trunk ul {
    margin: 10px 0px;
    list-style: none;
    min-width: 200px;
    display: table;
}

Et voila le code HTML simplifié:

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
62
63
 
<fieldset>
<div id="finder-trunk">
<div id="finderparent">
  <ul id="finder-header">
    <li>
      <a>1st Colonne</a>
    </li>
 
  </ul>
  <ul id="finder">
    <li>
      <a>1st content</a>
    </li>
  </ul>
 
</div>
 
<div id="children-1" class="finderparent">
<ul id="finder-header">
  <li>
    <a>branch 1</a>
  </li>
</ul>
 
<ul id="finder" class="documents">
    <li>
      <a>blah 1</a>
    </li>
 </ul>
</div>
 
<div id="children-2" class="children-1">
<ul id="finder-header">
  <li>
    <a>branch 2</a>
  </li>
</ul>
 
<ul id="finder" class="documents">
  <% @children.each do |c| %>
    <li>
      <a>blah 2</a>
    </li>
 </ul>
</div>
 
<div id="children-3" class="children-2">
<ul id="finder-header">
  <li>
    <a>branch 3</a>
  </li>
</ul>
 
<ul id="finder" class="documents">
    <li>
      <a> blah 3</a>
    </li>
 </ul>
</div>
</div>
 
</fieldset>

Comme avant, la div finderparent est bien positionnée, ainsi que la premiere div children, mais pas les autres qui vont vers le bas.

**NoSmoking** · 11/02/2011, 16h15

- une DIV prend par défaut 100% de la largeur de son conteneur
- pour qu'une DIV s'étire il ne faut pas lui spécifier de largeur
attendu de cela ton problème ne semble irrésolvable en pur CSS.

Il va te falloir un petite pincée de javascript pour réajuster tout cela en dynamique.

**ornitho13** · 11/02/2011, 16h23

si tu met une largeur spécifique à #finder-trunk tu verras qu'il y a bien une scrollbar sur la droite.

Code css :

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

1
2
3
4
5
6
7
 
div#finder-trunk {
    max-height: 450px;
    overflow: auto;
    white-space: nowrap;
    width:900px;
}

Autre chose, dans une page HTML les ID sont uniques, tu ne dois pas les utiliser plusieurs fois dans une même page, il faut qu'ils aient un nom unique (tu utilises plusieurs fois id="finder-header" ou id="finder", c'est interdit).
Les class sont là pour ça.