Discussion :

[gayahela]

Bonjour

J'ai un souci de contenance dans mes pages et ne trouve pas la solution. Je m'explique :

J'ai, dans certaines pages, soit un accordeon soit une liste. J'ai defini des marges pour mes pages, ainsi qu'une hauteur et une largeur minimum.

# CSS general :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
 
div#global_layout {
	margin: 0px 50px;
	padding: 0 10px;
	position: relative;
	height: auto;
	min-height: 500px;
	min-width: 500px;
	z-index: 5;
}

Prenons l'exemple de la liste :
Tout dans la page est bien positionne a part la liste qui depasse de la div "global_layout" par la droite.

# Code html liste :

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
 
<div id="list_issues">
<table id="lists" >
 
<tr>
 <th>Col1</th>
 <th>Col2</th>
 <th>Col3</th>
 <th>Col4</th>
 <th>Col5</th>
 <th>Col6</th>
 <th>Col7</th>
</tr>
 
<% @issues.each do |i| %>
<tr class="<%= cycle("even", "odd") %>">
    <td><%=h i.field1%></td>
    <td><%=h i.field2%></td>
    <td><%=h i.field3 %></td>
    <td><%=h i.field4 %></td>
    <td><%=h i.field5 %></td>
    <td id="with_icon" class="td_right"><%= link_to image_tag("document-preview.png", :border => 0, :id => "icon"), i %></td>
   <td id="with_icon" class="td_right"><%= link_to_remote image_tag("button_cancel.png", :border => 0, :id => "icon"), :url => {:action => "cancel_issue"}, :with => "'issue_id='+#{i.id}" %></td>
</tr>
<% end %>
</table>
</div>

J'ai donc 5 colonnes de texte et deux colonnes avec des icones.

Voila le css de ma liste :

# CSS listes :

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
 
/*
 * Lists
 * 
 */
 
#list_issues {
	width: 100%;
}
 
#lists {
 
	width: 100%;
	font-family: "Lucida Sans";
	text-align: center;
	border-collapse: collapse;
}
 
#lists tbody {
	width: 100%;
}
 
#lists th
{
	font-size: 13px;
	font-weight: bold;
	padding: 8px;
	background: #3c3f3e;
	border-top: 4px solid #3c3f3e;
	border-bottom: 1px solid #fff;
	color: #fff;
}
 
#lists tr {
	width: 100%;
	background: #a9d06a; 
}
 
#lists th a {
 text-decoration: none;
 color: #fff;
}
 
 
#lists td
{
	width: auto;
	padding: 8px;
	border-bottom: 1px solid #fff;
	color: #3c3f3e;
	border-top: 1px solid transparent;
}
 
#lists .even
{
	background: #d0d9d2; 
}
 
#lists .odd
{
	background: #a9d06a; 	
}
 
#lists td.td_right 
{
	text-align: right;	
}
 
#lists tr:hover td
{
	background: #f17c24;
	color: #fff;
}

Et voici le css pour mes icones :

# Css icones:

Code :

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

1
2
3
4
5
 
img#icon {
	vertical-align: middle;
	height: 100%; 
}

Comme dit precedemment, la partie contenant la liste sort de mon layout global. Cela cree une barre deroulante sur le bas de mon navigateur.
Comment faire pour tout afficher dans le cadre prevu a cet effet, sans "deborder" ?

[gayahela]

Il semble que ce probleme soit lie aux tables. J'ai donc choisi d'y remedier de maniere un peu brutale: fixer la taille dans le code html ...

Je m'explique:

Code :

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

1
2
3
4
5
6
7
 
 
<table id="lists" style="table-layout:fixed; width:100%;" >
 
... table code ...
 
</table>

Grace a ca, mes tables ne sortent plus du layout global.

Sinon il est aussi possible de faire un tableau avec des divs ou une liste :p