Float avec marge negative : l'overflow ne marche pas

**valefor** · 30/12/2011, 13h19

Bonjour.

Je souhaite faire un défilement de cartes avec une pile à gauche, une carte centrale et une pile à droite.

J'arrive à mettre en page les piles avec des float ou en utilisant des positions absolues.

Le problème des positions absolues est que le flot doit être décalé verticalement. Donc je dois connaître la hauteur des "cartes" (plus leur décalage vertical éventuel).

Donc je me rabat sur la solution à base de float pour bien intégrer les piles de cartes au flot.

Le problème est que l'attribut overflow hidden me cache les piles. Donc pour l'instant je suis obligé de spécifier une hauteur pour décaler le flot.

Ma question est donc : est-ce possible de décaler le flot verticalement sans spécifier de hauteur explicite.

Voici un code minimaliste qui reproduit ma situation :

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
77
78
79
80
81
82
83
84
<html>
 
<style>
 
p
{
  border   : 1px solid #000000;
}
 
ul
{
  display  : block;
  border   : 1px solid #FF0000;
/*overflow : hidden;*/
}
 
li
{
  display  : block;
 
  width    : 16%;
 
  float    : left; 
  position : relative;
 
  text-align : center;
}
 
li.slider_left
{
    border   : 1px solid #00FF00;
    /* use float */
    left             : 5%;
    top              : 0px;
    /* comment if use absolute */
    margin-right     : -100%;
    margin-bottom    : -100%;
}
 
li.slider_center 
{
    border   : 1px solid #F0F0F0;
    /* use float */
    left             : 10%;
    top              : 10px;
    /* comment if use absolute */
    margin-right     : -100%;
    margin-bottom    : -100%;
}
 
li.slider_right
{
    border   : 1px solid #0000FF;
    /* use float */
    left             : 15%;
    top              : 5px;
    /* comment if use absolute */
    margin-right     : -100%;
    margin-bottom    : -100%;
}
 
</style>
 
<body>
 
<p>Before.</p>
 
<ul >
 
<li class="slider_left">One</li>
<li class="slider_left">Two</li>
 
<li class="slider_center">Three</li>
 
<li class="slider_right">Four</li>
<li class="slider_right">Five</li>
 
</ul>
 
<p>After.</p>
 
</body>
 
</html>

Merci pour votre aide.

**NoSmoking** · 30/12/2011, 15h43

Bonjour,
pas bien compris ce que tu cherches à faire mais est ce que les balises LI sont les plus adaptées à ton besoin.
Peut être qu'en jouant sur la margin-left

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
<html>
<style type="text/css">
ul {
  display:block;
  border:1px solid red;
  list-style:none;
}
li {
  display:block;
  width:16%;
  text-align:center;
}
li.slider_left {
  border:1px solid #0F0;
  margin-left:0;
}
li.slider_center {
  border:1px solid #F0F0F0;
  margin-left:150px;
}
li.slider_right {
  border:1px solid #00F;
  margin-left: 300px;
}
</style>
<body>
<p>Before.</p>
<ul>
  <li class="slider_left">One</li>
  <li class="slider_left">Two</li>
  <li class="slider_center">Three</li>
  <li class="slider_right">Four</li>
  <li class="slider_right">Five</li>
</ul>
<p>After.</p>
</body>
</html>

**valefor** · 30/12/2011, 18h23

Merci pour votre réponse.

En fait je cherche à empiler les cadres de droite et ceux de gauche. D'où les marges négatives.

Je pourrais faire cela avec des div plutot que des li, mais j'ai rencontré le même problème.

**NoSmoking** · 31/12/2011, 14h25

il existe aussi le positionnement via des float.

exemple :

Code html :

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
<!DOCTYPE html>
<html>
<style type="text/css">
#div_conteneur{
  position:relative;
  border:1px solid lightgrey;
  width:600px;
  height:300px;
  margin:auto;
}
.div_left{
  float:left;
  clear:left;
  width:100px;
  height:100px;
  border:1px solid red;
}
.div_right{
  float:right;
  clear:right;
  width:100px;
  height:100px;
  border:1px solid blue;
}
.div_center{
  width:100px;
  height:100px;
  margin:auto;
  border:1px solid green;
}
</style>
<body>
<p>Before.</p>
<div id="div_conteneur">
  <div class="div_left">One</div>
  <div class="div_right">Four</div>
  <div class="div_left">Two</div>
  <div class="div_right">Five</div>
  <div class="div_center">Three</div>
</div>
<p>After.</p>
</body>
</html>

tu noteras l'alternance des DIVs

Float avec marge negative : l'overflow ne marche pas

CSS

Discussions similaires

Partager

Partager