Discussion :

[dominos]

Bonsoir,


L'illustration ci-dessus représente le comportement d'une barre placée en haut d'une page. Selon la taille de la fenêtre, c'est la div B qui s'étire, les autres sont fixes.

J'ai essayé plusieurs solutions mais sans résultat, le soucis c'est que les 2 div de droite viennent cacher la première div si la taille de l'écran est inférieur à la taille total de la div A + C + D.

Pas facile de fixer 3 div...

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
div.Bar {
  margin-top: 150px;
  height: 80px;
}
 
div.A {
	background-color: gray;
	height: inherit;
	position: absolute;
	width: 340px;
	left: 0px;
 
}
 
div.B {
	background-color: orange;
	height: inherit;
	position: absolute;
	right: 426px;
	left: 340px;
	border-right: 3px dashed yellow;
	border-left: 3px dashed yellow;
}
 
div.C {
	background-color: #aaeaea;
	position: absolute;
	width: 56px;
	right: 370px;
	height: inherit;
} 
 
div.D {
	background-color: aqua;
	position: absolute;
	width: 370px;
	right: 0px;
	height: inherit;
}

Code :

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

<div class="Bar"><div class="A"></div><div class="B"></div><div class="C"></div><div class="D"></div></div>

En vous remerciant d'avance pour vos réponses.

[Patrice.H]

Bonjour,

je ne suis pas sur de comprendre le problème: tu veux éviter l'empilement des divs lorsque la largeur de ta barre < la largeur A+C+D?

Si c'est le cas essaye tout simplement en mettant une largeur minimum à ton div englobant, ainsi il y aura toujours la place pour tes divs A, C et D...


Dans le cas présent:

Code :

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

1
2
3
 
A+C+D
340 + 370 + 56 = 766px

Donc:

Code :

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

1
2
3
4
5
6
 
div.Bar {
  margin-top: 150px;
  height: 80px;
  min-width:770px;
}

Tiens nous au courant.

[Bisûnûrs]

Au passage, tu peux aussi te passer du positionnement absolu à l'aide d'éléments flottants (et aussi la largeur minimum comme le préconise Patrice.H).
Ca implique juste une petite modification au niveau HTML :

Code html :

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

<div class="Bar"><div class="A">A</div><div class="D">D</div><div class="C">C</div><div class="B"></div></div>

Et le 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
33
34
35
div.Bar {
  margin-top: 150px;
  height: 80px;
  min-width:770px;
}
 
div.A {
  background-color: gray;
  height: inherit;
  float:left;
  width: 340px;	
}
 
div.B {
  background-color: orange;
  height: inherit;
  border-right: 3px dashed yellow;
  border-left: 3px dashed yellow;
  margin-left:340px;
  margin-right:426px;
}
 
div.C {
  background-color: #aaeaea;
  width: 56px;
  height: inherit;
  float:right;
} 
 
div.D {
  background-color: aqua;
  float:right;
  width: 370px;
  height: inherit;
}

Attention juste au Three Pixel Jog sur IE6 avec cette méthode ..

[dominos]

Merci, c'est exactement de que je cherche à faire, sauf que ce code ne fonctionne pas sous IE, les div s'empile les unes sur les autres...

[Bisûnûrs]

Heu, tu réponds à qui ?

De quelle version de IE tu parles (il y en a maintenant 4 différentes sur le marché ..) ? Tu as bien un DOCTYPE valide ? Tu as un exemple en ligne de ton résultat ?

[dominos]

Heu, tu réponds à qui ?

De quelle version de IE tu parles (il y en a maintenant 4 différentes sur le marché ..) ? Tu as bien un DOCTYPE valide ? Tu as un exemple en ligne de ton résultat ?

Merci c'est pour vous deux, sinon j'ai testé ton code et il fonctionne très sur Firefox/Safari/Opera.., mais sous ie8/7/6/5 ça donne ça :

[adiGuba]

Salut,


min-width n'est supporté qu'à partir d'IE7...


Sinon pour la première solution (avec les position absolute), il manquerait une position:relative dans le style de div.Bar (pour que les div A,B,C et D soit placé selon div.Bar et non pas selon la page) et éventuellement un overflow:hidden (ou [B]auto) selon ce qu'on veut faire du contenu de B lorsqu'il est trop petit...

a++