[Résolu->Alsacreations Rules] Problème transparence PNG géré par CS

(reprise du message précédent)

une question cette fois vrai, est ce que tu pense que ta page aurat une dimension de plus de 1000px de haut?
Modifié par matmat (26 Jan 2007 - 00:45)

OUi mat j'ai des pages qui feront plus de 1000 px et c'est pour ca que j'avais écarté ta solution en tout cas merci pour ta dévotion, en gros faudrait trouver une astuce pour repeter l'image du filter si j'ai bien tout suivi....

dans IE le filtre ne te laisse que 3 options

1 , l'image garde sa taille initiale est est coupé si elle depasse

2 , par defaut , elle s'etire sur la surface du conteneur ou s'applique le filtre

3 elle impose au conteneur sa propre taille.

mais pas l'option de "repetition".

Le gif ou une decoupe avec raccord sur le fond est a envisagé.

Le resultat le plus agreable serait celui du raccord , le gif n'ayant qu'un seul niveau de transparence.

Le probleme serait plutot de convaincre que l'option "png" est a proscrire.

GC

Merci GC pour ces précisions, ou alors convaincre tout les nav d'etre compatible avec les PNG.

Je pense que je vais appliquer la tactique de Florent, les users de IE6 seront punis par le gif

Au passage, l'image suivante fait environ 180 Ko de trop :
http://qa.nikolours.com/design/background.jpeg (217 Ko)
À optimiser.

Tu as raison, merci

En revanche d'ou te viennent les 180 ko de trop? Y a un calcul, un principe qui t'ammene à ce chiffre ou c'est come ca à l'oeil?

Nikolours a écrit :
En revanche d'ou te viennent les 180 ko de trop? Y a un calcul, un principe qui t'ammene à ce chiffre ou c'est come ca à l'oeil?

En testant avec The Gimp, j'ai réduit à 35 Ko. À 30 Ko, la qualité me semble un peu trop dégradée.

217-35 = plus ou moins 180 Ko de trop.

Mouarf tu m'impressionne là lol Je vais me pencher dessus

Des conseils, des docs pour l'optimisation? (je chercherais mais c'est au cas où vous en ayez une trés bonne qui traine sous le coude )

Bon allez hop je me lance

J'ai vu dans cette faq http://css.alsacreations.com/xmedia/exemples/design_css2/ que sur le conteneur global était utilisé un png avec transparence.

J'ai bien tout lu le tuto et les liens à l'intérieur, et ca ne marche toujours pas sous ie6, la transparence passe meme pas et les liens ne sont pas cliquables...
http://qa.nikolours.com/qafinal.html

J'aimerais bien comprendre, que ca marche m'en fout ie6 me casse les couilles les users auront un gif. Mais je suis tétu et j'aime pas quand j'arrive po a faire marche un truc

Merci d'avance

Bonjour,

Il faut faire attention à la spécificité des sélecteurs.
Si dans la CSS générale tu as :

[b]div#center[/b] {
	padding-bottom: 50px; 
	overflow: auto;
}

et dans celle pour IE :

[b]#center[/b] {
	overflow: visible;
	height: 1%;
}

la première règle surclassera la seconde quelque soit l'ordre car plus le premier sélecteur a une plus grande spécificité : il compte un identifiant (#center) et un élément (div), alors que le second ne compte qu'un identifiant.

Dans ce cas, IE appliquera au final les instructions suivantes :

padding-bottom: 50px; 
overflow: auto;
height: 1%;

ce qui est un mauvais mélange

Si l'ordre est bon, il faut donc au moins égalité

[b]div#center[/b] {
	overflow: visible;
	height: 1%;
}

Pour plus de précisions :
http://openweb.eu.org/articles/cascade_css/
http://www.yoyodesign.org/doc/w3c/css2/cascade.html#cascading-order
Modifié par Alan (27 Jan 2007 - 13:40)

Effectivement Alan, j'ai isolé le problème en faisant un css juste pour IE 6 et c'est niquel ca passe si je met ce qui doit etre appliqué, j'ai plus qu'à bien lire tes docs sur les selecteurs et je devrais m'en sortir

Tu cartonne, je vous tiens au courant et vous balance le code une fois propre (enfin propre pour moi lol)

AHhhhhhhhh les mecs je suis pas loin, j'ai juste un petit bug et je pense que c'est tout con, mais je suis pas assez intelligent

DOnc comme je vous disais j'ai isolé le pb et ca marche niquel ici sous ie6
http://qa.nikolours.com/final/testie.html
et le css http://qa.nikolours.com/final/testie.css
Ceci marche niquel j'ai bien mon png transparent et mes liens sont cliquables

J'ai donc fait mon css au propre pour IE7 et Firefox
http://qa.nikolours.com/final/home.html
et le css
http://qa.nikolours.com/final/main.css

J'ai enfin lu les docs de Flo sur les styles conditionnels et celle d'Alan sur les selecteurs, j'ai donc un autre css pour IE6 qui est là
http://qa.nikolours.com/final/mainie.css

Et donc à l'adresse http://qa.nikolours.com/final/home.html avec le main.css pour IE7 et Firefox j'ai no soucy c'est exactement ce que je veux mais avec le mainie.css j'ai juste un petit problème, mon bordure.png ne se repete pas verticalement sous IE6 alors que sur mon css isolé http://qa.nikolours.com/final/testie.html il se repete sans soucy.

Qu'est que j'ai fait comme betise ?

Nikolours a écrit :
Qu'est que j'ai fait comme betise ?

Dans http://qa.nikolours.com/final/mainie.css tu utilises la propriété filter pour la transparence PNG. Je pensais que finalement tu avais opté pour un GIF ou un PNG-8, donc sans transparence graduelle (mais avec transparence binaire) ?

La propriété filter ne permet pas de répéter l'image de fond (ni en vertical, ni en horizontal, ni les deux).

Tu brise mon reve lol Tain je suis énervé maintenant (tu me diras j'ai appris plein de truc...)


A part ca , ca va c'est pas trop moche ce que j'ai fait?
Modifié par Nikolours (28 Jan 2007 - 15:05)

Nikolours a écrit :
A part ca , ca va c'est pas trop moche ce que j'ai fait?

C'est toujours trop lourd pour les images.

Si je désactive les images, je me retrouve avec du texte gris clair sur fond blanc, illisible.

L'en-tête est un bloc vide, alors que si je regarde l'image je vois bien marqué « Queen Adreena ». Où donc est passée cette information ? (Solution : l'image d'en-tête devrait être placée dans le contenu HTML, pas comme image de fond).

Sinon, c'est plutôt pas mal.

En passant : on ne dira pas « Think to subscribe on our forum here. », mais plutôt « Please consider subscribing to our forum » (avec lien sur « our forum »), par exemple.

Oui je m'attelle à la lourdeur des images en ce moment meme

OK pour le gris clair sur fond blanc... Hum chai pas comment je vais faire lol

Dans l'en-tete, il va y avoir un menu c'est pour ca que j'ai zappé.

Merci pour la formulation, c'est vrai que ca fait plus classe.


J'ai essayé de feinté le truc du png en mettant une bordure.png de 3000px de haut mais il s'arrete au meme endroit, ce qui est logique mais bon

RAHHHHHHH je suis passé au gif pour ie 6 mais mon gif ne se repete pas non plus verticalement ... yé comprend pas pkoi

http://qa.nikolours.com/home.html
http://qa.nikolours.com/main.css
http://qa.nikolours.com/mainie.css

Nikolours a écrit :
J'ai essayé de feinté le truc du png en mettant une bordure.png de 3000px de haut

Salut,

As-tu essayé cette solution en mettant sizingMethod="crop" à la place de sizingMethod="scale"
?
Modifié par Alan (28 Jan 2007 - 16:36)

Le crop ne marche pas non plus Alan. Merci Je remet le gif, je comprend pas pqoi y se repete pas cet enc... lol

Avec la valeur crop il n'y aura pas de répétition, mais tant que la hauteur ne sera pas de plus de 3000px ça ne posera pas de problème.
Modifié par Alan (28 Jan 2007 - 16:53)

JE ne te suis pas du tout alan, j'ai bien compris que quand je met le png je ne peut pas le repeter. Je me suis dit quand mettant un truc de 3000 px ca serait bon, et d'ou l'usage du crop mais apparamment j'ai un soucy ca marche pas

http://qa.nikolours.com/final/homec.html

Et ce qu'il me semble etrange c que ca s'arrete au meme endroit que sur la page ou j'ai mon pb de repetition de gif.

Je vous joint des capture dans le cas ou vous avez pas des ecrans assez grand pour vous en rendre compte.

Donc le pb de repetion avec le gif
http://qa.nikolours.com/final/probleme_avec_gif.jpg
Ca ce passe la http://qa.nikolours.com/final/home.html

et le pb avec le png de 3000 px que j'arrive pas a afficher en entier
http://qa.nikolours.com/final/probleme_avec_png.jpg
http://qa.nikolours.com/final/homec.html