Jump to content
Sign in to follow this  
baulet

background texturé et boutons ronds

Rate this topic

Recommended Posts

bonjour,

je réfléchis (oui ça m'arrive :P) à un nouveau design pour un de mes sites...

il s'agit de positionner des boutons d'aspect rond sur un background texturé.

le background occupera l'ensemble de la page, et le conteneur ou se trouveront les boutons (ainsi que le contenu du site) sera transparent de largeur fixe, centré sur la page.

problèmes:

- on a encore 10% de visiteurs qui utilisent IE 6, donc je vois mal utiliser du png pour les boutons.

- admettons qu'on utilise du jpg, c'est à dire boutons découpés sur le background. mais celui ci étant en "repeat", impossible de déterminer la texture qu'il y aura effectivement sous les boutons, puisque le redimensionnement de la fenêtre va modifier ce qui se trouve dessous ceux ci.

que faire?

hacker IE6 et partir sur du png?

oublier le background texturé?

:wacko: je sèche...

merci d'avance!

;)

Share this post


Link to post
Share on other sites

Tes 10%, c'est une impression générale, ou c'est les stats spécifiques de ton site? C'est beaucoup, moi j'observe plutôt 2 à 3%...

La solution qui me paraît standard c'est un feuille de style spécifique IE6:

<!--[if lte IE 6]><link rel="stylesheet" href="http://style-lte-ie-6.css" type="text/css"><![endif]-->

Et dans cette feuille de style, tu vires le background et tu utilises un filter à la place:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fichier.png',sizingMethod='scale');
background: none;

Jacques.

Share this post


Link to post
Share on other sites

Si on en croit les stats d'IE6 countdown, il y a un pourcentage d'utilisation mondiale de 12%, avec une très forte proportion en Chine.

Sur les sites du boulot, destinés à une population française, on tourne autour de 5-6%.

Share this post


Link to post
Share on other sites

Tes 10%, c'est une impression générale, ou c'est les stats spécifiques de ton site? C'est beaucoup, moi j'observe plutôt 2 à 3%...

La solution qui me paraît standard c'est un feuille de style spécifique IE6:

<!--[if lte IE 6]><link rel="stylesheet" href="http://style-lte-ie-6.css" type="text/css"><![endif]-->

Et dans cette feuille de style, tu vires le background et tu utilises un filter à la place:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fichier.png',sizingMethod='scale');
background: none;

Jacques.

les 10% sont sur les 12 derniers mois de stats, sachant que c'est un site francophone.

[if lte IE 6]: le "lte" veut dire quoi? :blush:

merci pour le tuyau Jacques, j'essayerai ;)

Share this post


Link to post
Share on other sites

lte = less than or equal


/>http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx

Jacques.

Share this post


Link to post
Share on other sites

Si on en croit les stats d'IE6 countdown, il y a un pourcentage d'utilisation mondiale de 12%, avec une très forte proportion en Chine.

Sur les sites du boulot, destinés à une population française, on tourne autour de 5-6%.

d'autant plus que ces quelques % représentent apparemment (?) une population peu aisée, et d'un point de vue éthique, ça me chagrine que le site leur soit rendu dégradé...

je ne peux pas extraire les données "explorateur IE6" par continent, malheureusement.

il semble que ce soit l'afrique et les pays de l'est qui soient encore en IE6...

;)

lte = less than or equal


/>http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx

Jacques.

merci Jacques Light Speed :smartass:

Share this post


Link to post
Share on other sites

bon, voila ce que ça donne en première ébauche:

hxxp://test.poupees-art-lena.com/test.html

je sais pas si ça va être possible de mettre un fond texturé avec ce genre de boutons. (qui ne sont finalement pas ronds)

on laisse mûrir, ma cheffe réfléchit ^^

et toutes observations bienvenues!

;)

Share this post


Link to post
Share on other sites

Si tu utilises des .gif au lieu de .png, à moins d'avoir une transparence sans dégradé, tu vas galérer.

Share this post


Link to post
Share on other sites

oui, j'ai mis des gif pour tester le rendu en faible nombre de couleurs...

une idée qui m'as pris!?!

bien sûr en définitif ce sera du png.

;)

Share this post


Link to post
Share on other sites

avec png sur le premier bouton:

hxxp://test.poupees-art-lena.com/test2.html

je trouve personnellement que c'est un peu plat, mais ça plait à ma cheffe :)

peut être mettre un dégradé alpha sur le contour?

:unsure:

Share this post


Link to post
Share on other sites

Si c'est pour garder un liseré blanc autour, inutile de se prendre la tête : le gif conviendra parfaitement à tous les navigateurs.

Share this post


Link to post
Share on other sites

ok, merci de la remarque... le gif transparent est donc compatible ie6?

on va voir ce que ça donne avec un ombrage, et sinon on part avec du gif :)

;)

Share this post


Link to post
Share on other sites

Oui, IE6 gère parfaitement la transparence des gif, et la transparence des PNG-8 (Qui ne codent la transparence que sur 1 bit : un pixel est transparent ou opaque).

C'est avec les PNG-24 (qui codent la transparence sur plusieurs bits, et gèrent donc différents degrés de transparence) qu'IE6 a des problèmes.

Share this post


Link to post
Share on other sites

Salut

d'autant plus que ces quelques % représentent apparemment (?) une population peu aisée, et d'un point de vue éthique, ça me chagrine que le site leur soit rendu dégradé...
Je rebondis sur cette phrase qui m'a fait tiquer.

Sur le point de vue éthique de ne pas discriminer des gens en fonction de leur faible niveau social, je suis bien d'accord, mais est-ce vraiment le sujet ?

Télécharger un autre navigateur, issu du monde libre ou bien d'une société commerciale, est gratuit.

Qui plus est, l'hypothèse que tu avances n'est pas prouvée.

Sur le fond du sujet, je serai d'avis de tirer vers le haut plutôt que de niveler par le bas : se servir des technologies les plus avancées, les plus modernes, et laisser tomber ceux qui ne suivent pas.

Et quand bien même il serait avéré que les utilisateurs d'Explorer 6 soient des gens peu aisés, un petit message sympathique expliquant le pourquoi du comment, montrant une solution, et proposant des liens de téléchargement, ça ne fait pas de mal.

Share this post


Link to post
Share on other sites

oui, ce que tu dis est vrai... mais quand on ne paye pas son internet au Mo consommé...

je prends comme exemple Lena, qui vit en russie, elle paye son accès internet à la consommation effective.

et pour peu qu'elle m'envoie quelques photos, ça monte vite!

alors télécharger un logiciel, certes gratuit, ça peut rebuter un faible pourcentage d'internautes dans cette situation.

donc, pour en revenir à la transparence du png, oui cela fait partie du sujet.

et pour le reste, ce sont des suppositions bien évidemment, comme je l'ai souligné avant.

;)

Share this post


Link to post
Share on other sites

Re

Ce que tu dis me ramène quelques années en arrière.

Et à cette époque, pour gagner du temps en plus d'économiser mon forfait, je désactivais les images (donc côté compatibilité des formats, problème réglé). Après c'est sûr : c'est compliqué de présenter des œuvres d'art sans images, il y a des cas particuliers.

Je comprends mieux ce que tu disais en tous cas. La phrase sans l'explication me paraissait étrange.

Share this post


Link to post
Share on other sites

Moi, j'ai toujours IE6 sur mon petit eeePC...

C'est très bien IE6... :P

Il ne faut pas oublier que lorsque l'on passe de IE6 à 7, il n'y a pas que le navigateur web qui est "upgradé", il y a toute la couche supérieure du système et on se retrouve avec un gros veau. Et faut changer de PC...

Share this post


Link to post
Share on other sites

Chrome est super véloce sur eeepc

Share this post


Link to post
Share on other sites

Moi, j'ai toujours IE6 sur mon petit eeePC...

C'est très bien IE6... :P

Il ne faut pas oublier que lorsque l'on passe de IE6 à 7, il n'y a pas que le navigateur web qui est "upgradé", il y a toute la couche supérieure du système et on se retrouve avec un gros veau. Et faut changer de PC...

je crois que c'est un peu aussi pour cela que IE6 reste encore utilisé... (toujours le cas de Lena, qui a un ordi... hors d'age!)

merci à tous pour vos réactions,

;)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...