Besoin de conseil CSS/HTML

[Dylav]

Bonsoir Sew-Oszka et Manly,

 

En fait, je crois que tu peux appliquer avec profit à tes deux blocs #leftmenu et #rightmenu la solution découverte ici par Manly, et dont je précise la mise en œuvre dans son topic

 

Il te restera à résoudre le problème de tes images au format PNG, qui ne semblent pas transparentes sous IE. Je te suggère pour ma part de les passer au format GIF ?

[Sew-Oszka]

Bonsoir Sew-Oszka et Manly,

 

En fait, je crois que tu peux appliquer avec profit à tes deux blocs #leftmenu et #rightmenu la solution découverte ici par Manly, et dont je précise la mise en œuvre dans son topic

 

Il te restera à résoudre le problème de tes images au format PNG, qui ne semblent pas transparentes sous IE. Je te suggère pour ma part de les passer au format GIF ?

 

 

Merci pour tout (désolé pour mon absence ces derniers jours)!

 

Je vais regarder ça de près ce week end!

 

Par contre je suis embêté par la conversion en gif! On m'a toujours dit de mettre des png!

[Dylav]

Voici en tout cas ce que je vois de ton site, respectivement sur FF 2.0 et IE 6.0

Pour la transparence, j'avoue ne pas comprendre où ça pèche. En tout cas, si tu veux passer des images des formats PNG à GIF, tu peux par exemple utiliser PhotoFiltre, téléchargeable ici-même

[manly]

Salut,

Et si tu remplissais tes images de la même couleur que le fond ?

Ce ne serait pas plus simple ?

C'est la méthode que j'emploie souvent.

Bonne journée.

 

Edit: en retournant sur le site où j'avais trouvé l'astuce concernant mon soucis, je suis tombée sur ceci (non rassurez-vous ça ne fait pas mal)

Voici un petit javascript qui vous permettra de fixer la transparence des images au format PNG transparent 24 bits sous Microsoft Internet Explorer 6.

function fixPNG() {
if(navigator.appName == 'Microsoft Internet Explorer') {
	var png = /\.png$/i;
	var imgs = document.getElementsByTagName('img');
	for(var i = 0, l = imgs.length; i < l; i++) {
		if(png.test(imgs.item(i).src)) {
			imgs.item(i).style.width = imgs.item(i).offsetWidth;
			imgs.item(i).style.height = imgs.item(i).offsetHeight;
			imgs.item(i).style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + imgs.item(i).src + '\',sizingMethod=\'image\')';
			imgs.item(i).src = 'empty.gif';
		}
	}
}
}

Fonctionnement de la function :

Le PNG transparent est remplacé par un fichier GIF totalement transparent de 1px², puis le filter contenant le PNG est appliqué sur l'image GIF.

Pour activer cette fonction, il suffit de l'appeler dans un événement window.onload = function(){}.

 

Rappel des différentes écritures du filter en CSS :

 

img.image1 { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image1.png', sizingMethod='image'); }
img.image2 { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image2.png', sizingMethod='scale'); }
img.image3 { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image3.png', sizingMethod='crop'); }

 

Ceci se trouve ici

 

J'espère que cela vous aidera.

 

En tous cas, ce site est mis dans mes favoris

Modifié le 29 novembre 2008 par manly

[Sew-Oszka]

Coucou!

 

Désolé de pas avoir répondu plus tôt, mais les temps sont longs et durs! Merci pour vos astuces, elles me seront très profitables!

 

J'ai essayé de convertir (enfin refaire) mes boutons en .gif, le problème c'est qu'il pixellisent beaucoup, c'est très gênant!

 

Est-ce le format qui fait ça? Je n'arrive pas à définir le taux de compression! Sinon y a t il un autre format qui gère la transparence, accepté par le navigateur des ténèbres?

 

Merci beaucoup!

[Dylav]

Bonjour Sew-Oszka,

 

Concernant les misères que te fait IE en matière de mise en page, tu devrais effectivement essayer d'utiliser l'astuce qu'a trouvée Manly (et que je l'ai aidée à mettre en place). Il faudrait que tu appliques l'astuce à tes deux menus latéraux (qui resteraient bien en position fixe dans la fenêtre, même lors des scrollings). Du coup, la partie centrale s'installerait tout naturellement au bon endroit, et il te resterait à en “régler” les marges latérales pour ne pas déborder dans les menus…

 

Quant à tes images PNG, il semble que ce soit un problème connu. C'est d'autant moins élégant de la part de IE que ce format était au départ destiné à supplanter le format GIF ! L'astuce qu'a découverte Manly (cf. message #14 ci-dessus : décidément, ce n'est pas seulement une chercheuse opiniâtre, mais aussi une trouveuse géniale ) présente l'inconvénient d'imposer du JavaScript, ce qui désavantage les internautes prudents qui décident de refuser l'exécution de scripts lors de leur navigation sur la Toile ! Il serait donc préférable, dans l'état actuel des choses, de convertir tes images au format GIF…

 

Les as-tu créées ou converties en PNG ? Parce que, s'il s'agissait d'une conversion, il te suffirait de repartir des originaux pour une autre conversion en GIF. En tout cas, je ne connais pas de produit qui définisse le niveau de qualité de l'image pour un format GIF (contrairement au format JPEG). Sinon, essaie peut-être la conversion à l'aide de PhotoFiltre (que tu trouveras ici même en téléchargement), à l'aide de la simple fonction “Enregistrer sous”…

[Sew-Oszka]

En fait j'ai abandonné l'idée de faire un fond transparent, j'ai fait des images "png" avec un fond de la couleur du site, et là ça passe (on s'y attendait)!

 

Si je suis obligé de mettre une image transparente, j'utiliserai effectivement la méthode de Manly (que je remercie au passage, ainsi que vous tous)!

 

Pour le positionnement des blocs, j'y travaille! Le temps me manque en ce moment, c'est aussi pour ça que vous sollicite très (trop) souvent! Ca vient petit à petit!