28172 sujets

CSS et mise en forme, CSS3

[Résolu] Css3 PIE.htc gradient et arrondis

Bonjour à tous,

Je souhaite des arrondis ainsi qu'un gradient et j'ai fait grâce à ça : http://css3pie.com/

Je copie le code, dl PIE.htc et le mets à la racine mais sous ie8, je n'ai pas les arrondis et pas de gradient
Pour cela, sous ie, je fais f12 puis "mode navigateur : ie8" et "mode de document : normes ie8"

Quelqu'un a t'il déjà eu ce problème (pas de gradient ni d'arrondis avec PIE.htc)?

Par contre, avec roundies.js, j'ai bien mes arrondis.
Mais PIE.htc, n'est pas censé le gérer?

Merci !
Modifié par oceane751 (26 Apr 2013 - 07:58)
Salut

Tu a regardé ici ? http://css3pie.com/documentation/known-issues/

Parce qu'il faut que l'élément parent sur lequel tu applique ton style soit en position relative si je me souviens bien de plus lorsque tu ajoute ton PIE.htc dans ton css le chemin d'accès ne doit pas être en rapport avec ton css mais en rapport avec la page qui l'utilise.

Je sais pas si c'est très clair Smiley biggol
Désolée mais je pige rien à l'anglais Smiley lol

En gros j'ai : 

section id="centre_bas">
    	<section class="les_blocs">lll</section>
</section>


J'ai un position:relative; à l'id centre_bas, mais ça ne change rien

et le css de la classe "les_blocs"


.les_blocs {
	width:222px;
	height:262px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background: #ffb42d;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffb42d), to(#ff5b19));
	background: -webkit-linear-gradient(right,#ffb42d, #ff5b19);
	background: -moz-linear-gradient(right, #ffb42d, #ff5b19);
	background: -ms-linear-gradient(right, #ffb42d, #ff5b19);
	background: -o-linear-gradient(right, #ffb42d, #ff5b19);
	background: linear-gradient(right, #ffb42d, #ff5b19);
	-pie-background: linear-gradient(right, #ffb42d, #ff5b19);
	behavior: url(http://www.vaurel.free.fr/co/PIE.htc);
	margin-right:30px; 
	float:left;
	padding-top:10px;
	padding-left:25px;
	padding-right:20px;

}


Où est ce que j'ai fauté?

Merci Smiley cligne
J'ai pas bien saisi ça "de plus lorsque tu ajoute ton PIE.htc dans ton css le chemin d'accès ne doit pas être en rapport avec ton css mais en rapport avec la page qui l'utilise."

J'ai mon PIE.htc à la racine du site, comme mon fichier css et mon fichier html
PIE est capricieux. Apparemment si tu remplaces la <section> par une div ça fonctionne.
<section id="centre_bas">
<div class="les_blocs">aaaaaaaaa</div>
</section>
Dans le css
behavior: url(PIE.htc);
ça suffit
sous ie9, j'ai les arrondis mais pas le gradient
sous ie8, j'ai rien du tout, malgré ce que tu m'a donné comme soluces :\
si mes souvenirs sont bon il faut aussi que ce soit les derniers appelés dans ton css :


.les_blocs {
	width:222px;
	height:262px;
        margin-right:30px; 
	float:left;
	padding-top:10px;
	padding-left:25px;
	padding-right:20px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background: #ffb42d;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffb42d), to(#ff5b19));
	background: -webkit-linear-gradient(right,#ffb42d, #ff5b19);
	background: -moz-linear-gradient(right, #ffb42d, #ff5b19);
	background: -ms-linear-gradient(right, #ffb42d, #ff5b19);
	background: -o-linear-gradient(right, #ffb42d, #ff5b19);
	background: linear-gradient(right, #ffb42d, #ff5b19);
	-pie-background: linear-gradient(right, #ffb42d, #ff5b19);
	behavior: url(/co/PIE.htc);

}

Modifié par tazzkiller (26 Apr 2013 - 17:48)
essai de faire comme il te dise la :

a écrit :

Serving the correct Content-Type

IE requires that HTC behaviors are served up with a content-type header of "text/x-component", otherwise it will simply ignore the behavior. Many web servers are preconfigured to serve the correct content-type, but others are not.

If you have problems with the PIE behavior not being applied, check your server configuration and if possible update it to use the correct content-type. For Apache, you can do this in a .htaccess file:

AddType text/x-component .htc
oceane751 a écrit :
oui j'avais vu mais j'ai pas pigé comment l'ajouter sur ma page?
en php?

A priori en modifiant le fichier .htaccess (en créer un si besoin) Smiley cligne
J'ai créé un .htaccess avec 
AddType text/x-component .htc

mais ça ne fonctionne pas

j'avais déjà testé en mettant PIE.php
j'ai aussi vidé le cache sous ie...

J'ai aussi mis
<?php header("Content-Type: text/x-component"); ?>


C'est vraiment une méga galère!
et le hic, c'est que quand tu es dans une entreprise, tu es obligé de faire un site compatible ie..
Le htaccess n'aura aucun effet sur un serveur autre qu'Apache (typiquement IIS...)
donc tant que tu ne peux pas avoir d'infos sur les serveur utilisés,
tu peux oublier cette solution et passer par la version PHP.
Le chemin n'est tout simplement pas le bon : co/... alors que ta page est
déjà dans le dossier co.
Modifié par Hermann (28 Apr 2013 - 18:01)
Problème résolu grâce à d'autre personne

il fallait bien utiliser la version php de PIE

voici la soluce


.les_blocs {
	width:222px;
	height:262px;
	float:left;
	padding: 10px;
	color: #fff;
	background: #000;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#000) to(#f00));
	background: -webkit-linear-gradient(#000, #f00);
	background:    -moz-linear-gradient(#000, #f00);
	background:     -ms-linear-gradient(#000, #f00);
	background:      -o-linear-gradient(#000, #f00);
	background:         linear-gradient(#000, #f00);
	-pie-background:    linear-gradient(#000, #f00);
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	behavior: url(PIE.php);
	position:relative;
}


et ajout du position:relative;

fonctionne sous ie7, ie8 et ie9

merci à tout pour votre aide Smiley lol
Sujet clos
Aller à