position:absolute height:100% et transparence de PNG

**Maxoo** · 11/08/2008, 17h27

Bonjour,

Bon, je suis en train de me galérer depuis quelques jours sur un problème qui me parait épineux. Ce que je veux faire :

En gros, j'ai un div, qui a du texte, qui pousse la hauteur du div principale (donc je ne fixe pas de height) Et j'ai deux images de bordures qui doivent être en mode repeat-y pour faire un effet de cadre.

Mais je n'arrive à rien, j'ai essayé ça : qui marche bien sur sous firefox, mais pas sous IE :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#div1 { position:relative; border:1px solid black; width:400px;}
#div1 .colg { position:absolute; top:0; left:0; width:10px; height:100%; background:red; }
#div1 .cold { position:absolute; top:0; right:0; width:10px; height:100%; background:green; }
#div1 .texte { margin:0 12px; background:#ccc; }
</style>
</head>
<body>
<div id="div1">
	<div class="colg"></div>
	<div class="cold"></div>
	<div class="texte">
	Texte qui fixe la hauteur <br />
	bla bla <br />
	bla bla <br />
	bla bla <br />
	bla bla <br />	
	</div>
</div>
</body>
</html>

Mais le résultat sous IE6 est celui-ci :

Il faut savoir qu'à la finale, les backgrounds des deux colonnes seront des images PNG transparente, donc je vais devoir utiliser les filtre IE6 (filter: progid: DXImageTransform.Microsoft.AlphaImageLoader) Ce qui des fois m'a bien emmerder.

Car on peut pas faire n'importe quoi avec les filters IE, car sinon j'aurai fait des backgrounds sur deux div (genre portes coullissantes), mais on peut pas reproduire des backgrounds compliqué en filter IE.

Voila, est-ce que j'ai oublié quelque chose ? avez vous une idée ?

**c_s_s** · 11/08/2008, 17h45

Bonjour,

D'après ce que je vois, ton div1 et tes colonnes droite et gauche ont des tailles fixes (400px, 20px, 20px).

Dans ce cas, pourquoi ne pas utiliser une image de 400px de large que tu mettrais en background de ton div1, en repeat-y ?

Je te dis ça sans savoir à quoi ressembleront les images qui remplaceront tes fonds vert et rouge. Peut-être que la solution que je te propose n'est pas adaptée.

Bon, en admettant que tes futurs backgrounds ne permettent pas d'utiliser cette solution, je te propose une alternative.
L'astuce consiste à imbriquer les colonnes les unes dans les autres et à jouer avec les marges internes...

Un exemple sera plus parlant :

Code css :

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

1
2
3
4
#div1 { border:1px solid black; width:400px;}
#div1 .colg { background:red; padding-left:10px;}
#div1 .cold { background:green; padding-right:10px;}
#div1 .texte { background:#ccc; border-style:solid; border-width:0 1px; border-color:#FFF; padding:0 2px; }

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="div1">
	<div class="colg">
		<div class="cold">
			<div class="texte">
			bolo bolo bolo<br>
			bla bla bla bla bla bla bla<br>
			bla bla bla bla bla bla bla<br>
			bla bla bla bla bla bla bla<br>
			bla bla bla bla bla bla bla<br>
			</div>
		</div>
	</div>
</div>

Il te suffira de remplacer les backgrounds de couleur dans tes colonnes.

**Maxoo** · 11/08/2008, 17h55

Pour l'image avec une taille fixe, c'est une solution mais je préférerai avoir la possibilité de changer la taille de mon div sans avoir à refaire les images. Et je pense que je préférerai utiliser un tableau (porchi) plutôt que de faire ça

Bon pour ton autre solution, c'est ce que j'appelais les portes coulissantes, ce qui marche très bien avec des backgrounds d'image etc.

Sauf si on veut mettre ne background des images png transparentes en 24 bits qui ne passe pas sous IE6. Là le background deviennent beaucoup plus compliqué et par exemple je peux pas faire l'équivalent de url() top right repeat-y; le right, c'est impossible.

Donc c'est vrai que pour l'instant, je suis un peu arrivé à la conclusion que seul les bon vieux tableaux tout porchi peuvent me sauver ...

**Maxoo** · 12/08/2008, 11h37

Bon, comme il n'y a que IE6 qui est un crado et que ça ne marche pas chez lui, et comme de toute façon faut que je fasse des trucs spéciaux pour lui histoire qu'il découvre ce qu'est la transparence PNG, je me suis dit que je pouvais bien lui faire plaisir :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#div1 { position:relative; border-left:1px solid black; border-right:1px solid black; width:400px;}
#div1 .colg { position:absolute; top:0; left:0; width:10px; height:100%; background:green;}
#div1 .cold { position:absolute; top:0; right:0; width:10px; height:100%; background:red;}
#div1 .texte { margin:0 12px 0 12px; background:#ccc; }
</style>
<!--[if lt IE 7]>
<style type="text/css">
* html #div1 .colg { height:expression(this.parentNode.offsetHeight+"px"); background:yellow;}
* html #div1 .cold {height:expression(this.parentNode.offsetHeight+"px");background:yellow;}
</style>
<![endif]-->
</head>
<body>
<div id="div1">
	<div class="colg"></div>
	<div class="cold"></div>
	<div class="texte">
		Texte qui fixe la hauteur <br />
		bla bla <br />
		bla bla <br />
		bla bla
	</div>
</div>
</body>
</html>

J'ai mis un background de couleur différente pour voir qu'il n'y a bien que IE6 qui est affecté :

Avec height:expression, j'obtiens enfin le résultat que je veux sous IE6
Et ça marche toujours en normal avec Firefox, IE7, Opéra ...

Pouvez-vous tester chez vous si ça marche pareil ? Et que pensez-vous de cette méthode ? C'est crado, porchi ou pas ?

pour vos impressions.

**Maxoo** · 01/09/2008, 09h59

aucune idée ?

Moi j'ai testé sur pas mal de machine, ça à l'air de marcher assez bien. Donc je ne me fais pas de soucis, mais c'était plus pour le coté porchi que j'aurai connaître votre point de vue ...

**Damouille** · 01/09/2008, 12h16

J'ai testé le comportement et chez moi tout va bien.

Coté esthétisme du code, je n'aime pas trop le coup de passer en commentaires conditionnels des choses qui ne sont pas valides w3c. Mais as tu le chois étant donné que tu veux le meme résultat sous IE6.

La vrai question c'est: est-ce qu'il faut encore se préocuper de ce navigateur complètement obsolète qui ne respecte pas les standards et pour lequel il y a des mises à jour (IE7 et maintenant IE8).

Ps: Il n'y a que les png 24 dont la transparence ne fonctionne pas sous ie6. Quand la couleur de fond est le blanc, les png 128 ou gif s'en sortent plutot bien.

**Maxoo** · 01/09/2008, 16h17

Envoyé par Damouille

La vrai question c'est: est-ce qu'il faut encore se préocuper de ce navigateur complètement obsolète qui ne respecte pas les standards et pour lequel il y a des mises à jour (IE7 et maintenant IE8).

Hélas, travaillant pour un client qui bla bla bla ... tout le monde connait la suite.

Envoyé par Damouille

Ps: Il n'y a que les png 24 dont la transparence ne fonctionne pas sous ie6. Quand la couleur de fond est le blanc, les png 128 ou gif s'en sortent plutot bien.

Ouaip. mais bon les PNG 24, c'est cool

**Maxoo** · 22/10/2008, 14h58

Bon, pas d'autre avis, je clos.

position:absolute height:100% et transparence de PNG

CSS

Discussions similaires

Partager

Partager