Fixer 3 div séparées par une qui stretch en fonction de l'écran [Résolu]

[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 :

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 :

<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 :

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

Donc:

Code :

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 :

<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 :

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]

Envoyé par 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 ?

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++

[Bisûnûrs]

Il faut savoir que min-width n'est disponible qu'à partir de IE7, d'une part.
D'autre part, la valeur inherit pour la propriété height n'est pas fonctionnelle pour les versions antérieures à la 8.

Quoi qu'il en soit, je n'ai pas ton problème avec IE7 (sauf la hauteur des divs) ni avec IE8.

Pourrais-tu mettre tes codes HTML et CSS complets ?

[dominos]

Voila le code mais c'est plus le même que au début, celui-ci fonctionne plutôt bien mais ça bug sous ie6/5. De plus il y a un second pb avec ce code c'est que si je place une image avec un width=350 dans la div D ça block bien la div D à 370, sauf que c'est pas une image qu'il faut ici mais du texte d'ou la présence de la classe "Present".

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
/* ==== TEST =========== */
div.Bar {
 
  height: 80px;
  padding-top: 150px;
  position: relative;
}
 
div.A {
	/*background: url("../img/topBar.png");
	background-repeat: repeat-x;*/	
	background-color: gray;
	height: inherit;
	position: absolute;
	width: 370px;
	left: 0px;
}
 
div.B {
	/*background: url("../img/topBar.png");
	background-repeat: repeat-x;*/	
	background-color: orange;
	height: inherit;
	position: absolute;
	right: 426px;
	left: 370px;
	border-right: 3px dashed yellow;
	border-left: 3px dashed yellow;
}
 
div.C {
	background-color: #aaeaea;
	position: absolute;
	left: 375px;
    text-align: right;
	right: 370px;
	height: inherit;
} 
 
div.D {
	/* Compatibilté <IE7 => Format (.gif) car contient une zone de transparence */
	/*background: url("../img/topBarPresent.gif");
	background-repeat: repeat-x;*/	
	background-color: aqua;
	position: absolute;
	right: 0px;
	left: 370px;
	height: inherit;
text-align: right;
}
 
div.Present {
	right:0px; 
	width: 350px;
	height: 80px;
}
 
/* ==== FIN TEST =========== */

Code :

1
2
3
4
5
6
7
8
9
10
11
12
 
<div class="Bar">
 <div class="A"><a href="..."><img src="public/images/logo.png"></a></div>
 <div class="D">
  <div class="Present">
   <span class="title">Titre</span>
   <br />Ici texte sur plusieurs lignes qui doit rester fixe.. 
  </div>
 </div>
 <div class="C"><img src="public/styles/img/topBarSeparator.gif"></div>
 <div class="B"></div>
</div>

Envoyé par adiGuba

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)

Merci pour cette précision.

[dominos]

Bonjour, voila une solution qui semble fonctionner sous IE8/7, Firefox, Safari, Chrome, Opéra, Netscape mais curieusement pas sur IE6, si vous avez une idée ça serait super simpa !

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

Code :

1
2
3
4
5
6
7
8
<div class="Bar">
 <div class="A"></div>
 <div class="D">
 <img src="public/styles/img/test.png" width="370" height="80"></img>
 </div>
 <div class="C"><img src="public/styles/img/topBarSeparator.gif" width="56" height="80"></div>
 <div class="B"></div>
</div>

Merci encore.

[Patrice.H]

Ça va peut être passer pour du troll mais la solution la plus appropriée pour moi c'est:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  <!--[if lt IE 7]>
  <div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'>
    <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div>
    <div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>
      <div style='width: 75px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div>
      <div style='width: 275px; float: left; font-family: Arial, sans-serif;'>
        <div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>Vous utilisez un navigateur dépassé depuis près de 8 ans!</div>
        <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>Pour une meilleure expérience web, prenez le temps de mettre votre navigateur à jour.</div>
      </div>
      <div style='width: 75px; float: left;'><a href='http://fr.www.mozilla.com/fr/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div>
      <div style='width: 75px; float: left;'><a href='http://www.microsoft.com/downloads/details.aspx?FamilyID=341c2ad5-8c3d-4347-8c03-08cdecd8852b&DisplayLang=fr' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div>
      <div style='width: 73px; float: left;'><a href='http://www.apple.com/fr/safari/download/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div>
      <div style='float: left;'><a href='http://www.google.com/chrome?hl=fr' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div>
    </div>
  </div>
  <![endif]-->

Au bout d'un moment faut plus s'embêter hein

[dominos]

Bonjour, c'est marrant j'ai été il y a pas longtemps dans un organisme, il tournait encore sous IE6 parce le service informatique n'effectuait pas les mises à jour et les téléchargements étaient bloqués sisi ça existe... bref c'est plutôt la solution que je cherche.

En fait j'ai remarqué que la combinaison position:absolute;left:..;right; ne semble pas être reconnu par ie6, la div disparait, autre pb apparent la barre ne prend pas en charge width:100%.

[Patrice.H]

Pour le width:100%; je ne sais pas mais pour l'alignement tu peux peut être essayer float:left; et float:right; ?

[dominos]

Merci mais si tu reprends la première explication, ça provoque un retour chariot des éléments.

[Candygirl]

Hello,

tu peux utiliser un display:table-cell pour obtenir l'effet souhaité:

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
.Bar {
  margin-top: 150px;
  height: 80px;
  display:table;
  width:100%;
}
 
.A {
	background-color: gray;
	display:table-cell;
	width:340px; /* utile que pour IE 6 et 7 */
	min-width: 340px;
}
 
.B {
	background-color: orange;
	display:table-cell;
	width:100%;
	border-right: 3px dashed yellow;
	border-left: 3px dashed yellow;	
}
 
.C {
	background-color: #aaeaea;
	display:table-cell;
	width:56px;
	min-width: 56px;	
} 
 
.D {
	background-color: aqua;
	display:table-cell;
	width:370px;
	min-width: 370px;	
}

Avec un css palliatif avec expression pour les vieux navigateurs IE6/7

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--[if lt IE 8]>
		<style type="text/css">
 
		.A,.B,.C,.D {
			float:left;
			height:100%;
		}
 
		.B {
			width:300px;
			width:expression(this.parentNode.offsetWidth-772+"px");
		}
 
		.Bar {
			min-width:850px;
		}
		</style>
<![endif]-->

Évidement, sur IE6 et 7 tu vas te retrouver avec les blocs qui passent les uns au-dessous quand tu rétrécis la fenêtre...

Autrement pour éviter la problématique que tu évoques avec la solution de Bisûnûrs, tu peux fixer un min-width à .Bar, de 772+un minimum pour ton div.B. Par exemple, 850px.

[dominos]

Salut,

Merci pour ta recherche, ton exemple m'aide à voir aussi comment d'autres développeurs traitent ce problème, mais tu utilises javascript ...

Autrement pour éviter la problématique que tu évoques avec la solution de Bisûnûrs, tu peux fixer un min-width à .Bar, de 772+un minimum pour ton div.B. Par exemple, 850px.

Peux-tu être plus précise stp, parce que j'ai placé min-width:772 dans la classe .Bar et 850px dans B de cet exemple, se qui fait planter IE6, B est décalé sous IE7 mais fonctionne sous IE8

[Candygirl]

Oui, j'utilise j'avacript mais que pour 2 vieux navigateurs obsolète destinés à disparaître (et le plus vite sera le mieux ;p).

De toute façon, ça va être dur de faire sans pour IE6 vu qu'il ne connaît pas le min-width. Je pensais à qqch du genre (sur IE6, le min-width n'est pas pris en compte):

Code html :

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
<style type="text/css">
.Bar {
  margin-top: 150px;
  min-height: 80px;
  min-width:850px;
}
 
.A,.B,.C,.D {min-height:80px;}
 
.A {
	background-color: gray;
	float:left;
	width:340px;
}
 
.B {
	background-color: orange;
	overflow:auto;
	border-right: 3px dashed yellow;
	border-left: 3px dashed yellow;
}
 
.C {
	background-color: #aaeaea;
	float:right;
	width:56px;
} 
 
.D {
	background-color: aqua;
	float:right;
	width:370px;
}
 
 
 
</style>
 
<!--[if lt IE 7]>
		<style type="text/css">
 
		.Bar.A,.B,.C,.D {
			height:80px;
		}
 
		.B{  /* 3px jog fix */
		  position:relative;
		  left:-3px;
		}
 
		.C {
			margin-left:-6px;
		}
 
		</style>
<![endif]-->
 
</head>
<body>
<div class="Bar">
	<div class="A">A</div>
	<div class="D">D</div>
	<div class="C">C</div>
	<div class="B">B</div>	
</div>

[dominos]

Merci encore à vous tous, après tout ça on comprend qu'il n'est pas possible descendre en dessous de IE7, j'ai donc opté pour une solution un peu bricolage, mais quand il n'y a pas d'autre solution, faut faire avec...

La solution ci-dessous fonctionne donc avec tous les navigateurs et IE, à partir de IE5.0

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
table.topBar {
	border: 0px;
	margin-top: 30px;
	width: 100%;
	height: 80px;
}
 
td.A {
	background-color: gray;
	width: 370px;
}
 
td.B {
	background-color: orange;
	border-left: 1px dashed yellow;
	border-right: 1px dashed yellow;
	width: 100%;
}
 
td.C {
	background-color: #aaeaea;
	width: 56px;
}
 
td.D {
	background-color: aqua;
	width: 370px;
}

Code :

1
2
3
4
5
6
7
8
<table class="topBar" cellpadding="0" cellspacing="0" >
 <tr>
  <td class="A"><img src="370.gif"></td>
  <td class="B"></td>
  <td class="C"><img src="56.gif"></td>
  <td class="D"><img src="370.gif"></td>
 </tr>
</table>

Encore merci.