Div emboitées alignées

Version imprimable

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:

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:

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 ?

11/02/2011, 11h52
ornitho13

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

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:

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:

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.

11/02/2011, 16h15
NoSmoking

- 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.
11/02/2011, 16h23
ornitho13
si tu met une largeur spécifique à #finder-trunk tu verras qu'il y a bien une scrollbar sur la droite.
Code:

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.
11/02/2011, 16h29
NoSmoking

Citation:

Envoyé par ornitho13

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

salut ornitho13, je pense que c'est la scroll horizontale seule qui l'intéresse, et ce au vu du CSS, mais je m'avance peut être...
11/02/2011, 16h42
gayahela

C'est bien cela, seule la barre horizontale m'interesse. Je veux un déroulement de mes données. PLeins de div contenues de mainere lineaire dans une grosse div.
Je vais tenter de changer la taille avec du javascript donc.

Autant pour moi j'avais mal compris.
Comme le dit NoSmoking, tu vas devoir passer par un peu de javascript.

Voici un exemple simple (avec jquery) :

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
.fieldset{
                overflow:hidden;
                overflow-x:scroll;
                width:900px;
}
.fieldset .finderparent{
        float:left;
        width:300px;
}
</style>
<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript">
$(function(){
        $('#wrapper').width($('#wrapper div:first').width() * $('#wrapper div').length);
        
});
</script>
</head>
<body>
	<fieldset class="fieldset">
		<div id="wrapper">
			<div class="finderparent">
				<ul class="finder-header">
					<li>
						<a>1st Colonne</a>
					</li>
				</ul>
				<ul class="finder">
				  <li>
				    <a>1st content</a>
				  </li>
				</ul>
			</div>
			<div class="finderparent">
				<ul class="finder-header">
					<li>
						<a>1st Colonne</a>
					</li>
				</ul>
				<ul class="finder">
				  <li>
				    <a>1st content</a>
				  </li>
				</ul>
			</div>
			<div class="finderparent">
				<ul class="finder-header">
					<li>
						<a>1st Colonne</a>
					</li>
				</ul>
				<ul class="finder">
				  <li>
				    <a>1st content</a>
				  </li>
				</ul>
			</div>
			<div class="finderparent">
				<ul class="finder-header">
					<li>
						<a>1st Colonne</a>
					</li>
				</ul>
				<ul class="finder">
				  <li>
				    <a>1st content</a>
				  </li>
				</ul>
			</div>
			<div class="finderparent">
				<ul class="finder-header">
					<li>
						<a>1st Colonne</a>
					</li>
				</ul>
				<ul class="finder">
				  <li>
				    <a>1st content</a>
				  </li>
				</ul>
			</div>
			<div class="finderparent">
				<ul class="finder-header">
					<li>
						<a>1st Colonne</a>
					</li>
				</ul>
				<ul class="finder">
				  <li>
				    <a>1st content</a>
				  </li>
				</ul>
			</div>
		</div>
	</fieldset>
</body>
</html>

Citation:

Envoyé par ornitho13

Autant pour moi j'avais mal compris.

j'ai eu également quelques difficultés.

J'en profites pour te mettre un exemple simple (sans jquery), tu auras le choix :

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajustement DIV</title>
<style type="text/css">
html, body {
  font-family : Verdana, Arial
}
#global{
  position : relative;
  height: 400px;
  width : 800px;
  border : 1px solid #808080;
  overflow : auto;
  overflow-y : hidden;
}
#conteneur {
  height : 382px;
}
#conteneur div {
  width: 400px;
  height : 100%;
  float: left;
}
</style>
</head>
<body>
<div id="global">
  <div id="conteneur">
    <div>
      <ul>
        <li><a>1st Colonne</a></li>
      </ul>
      <ul>
        <li><a>1st content</a></li>
      </ul>
    </div>
    <div>
      <ul>
        <li><a>branch 1</a></li>
      </ul>
      <ul>
        <li><a>blah 1</a></li>
      </ul>
    </div>
    <div>
      <ul>
        <li><a>branch 2</a></li>
      </ul>
      <ul>
        <li><a>blah 2</a></li>
      </ul>
    </div>
    <div>
      <ul>
        <li><a>branch 3</a></li>
      </ul>
      <ul>
        <li><a>blah 3</a></li>
      </ul>
    </div>
  </div>
</div>
<script type="text/javascript">
var Larg, Haut, Nbr, oParent = document.getElementById('conteneur');
if( oParent){
  var oEnfant = oParent.getElementsByTagName('div');
  if(oEnfant){
    Haut = oParent.clientHeight;
    Larg = oEnfant[0].offsetWidth;
    Nbr = oEnfant.length;
    oParent.style.width = Larg *Nbr +"px";
    for( var i = 0; i < Nbr; i++){
      oEnfant[i].style.height = Haut +"px";
    }
  }
}
</script>
</body>
</html>

15/02/2011, 11h38
Damouille

http://asiamotion.net/index.php?opti...g2_itemId=1731

Comme ca? Mais j'ai malheureusement utilise un tableau.