28172 sujets

CSS et mise en forme, CSS3

[Résolu] Multiple background avec ccs3 Pie

Bonjour à tous,

Je découvre css3 Pie...
Je souhaiterai intégrer 3 backgrounds différents à des endroits différents d'une div.
J'ai 2 gros soucis :

1.
Dans les navigateurs modernes,
avec mon css ci-dessous, rien ne se passe bien en bas à droite,
mes 3 images sont superposées !

2.
Dans IE7 et IE8,
là je n'ai aucune image... Mon css PIE ne fonctionne donc pas !
Pourquoi ?

Puis-je vous solliciter votre aide,
pour sortir de ce mauvais pas ?
D'avance, je vous en remercie.

J'ai 3 png :
- ombreV = ombre à droite d'une div (qui commencera à y=5px) ;
- ombreH = ombre en bas d'une div (qui commencera à x=5px) ;
- ombreC = ombre au coin en bas à droite d'une div.
J'ai téléchargé PIE.htc

J'aimerai que ces backgrounds soient valables pour n'importe quelle div (#ombre),
hauteur et largeur différentes dans toutes mes pages HTML.
D'où mon idée d'utiliser 3 backgrounds pour arriver à mes fins.


#ombre {
	position: absolute;
	width: 1063px;
	height: 1255px;
	left: 50%;
	margin-left: -525px;   /*   widthSite/2 + 2   */
	margin-top: 10px;
	z-index: 2;
	background: url(../images/general/ombreV.png) right 5px repeat-y,
			url(../images/general/ombreH.png) 5px bottom repeat-x,
			url(../images/general/ombreC.png) right bottom no-repeat;
	-pie-background: url(../images/general/ombreV.png) right 5px repeat-y,
			url(../images/general/ombreH.png) 5px bottom repeat-x,
			url(../images/general/ombreC.png) right bottom no-repeat;
	behavior: url(../scripts/PIE.htc);
}


A l'aide !
Modifié par jytest (04 May 2013 - 09:54)
Merci pour ton passage ici.

- On y voit bien le problème en bas à droite : 3 images superposées (c'est pas beau !)
- Et cela ne fonctionne pas du tout sur IE7 !
Je ne souhaite pas me cantonner à cette unique solution.
J'avais pensé à shadow (... mais là problème avec PIE)

J'ai trouvé ceci...
Mais au point de vue propreté de code ???
Par contre, au point de vue vitesse, cela me semble plus qu'honorable... pas besoin de charger PIE !!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>

<style type="text/css">
* {
	margin: 0px;
	padding: 0px;	
}
#ombre {
	position: absolute;
	left: 50%;
	margin-left: -125px;
	margin-top: 10px;
	z-index: 2;
	top: 25px;
	width: 250px;
	height: 450px;	
}
#site {
	position: absolute;
	background-color: #F00;
	width: 245px;
	height: 445px;
	top: 0px;
	left: 0px;
	z-index: 3;
}

</style>

</head>

<body>

<div id="ombre">
	<table width="250" height="450" cellpadding="0" cellspacing="0" border="0">
        <tr>
        <td height="5" colspan="3"></td>
        </tr>
        <tr>
        <td height="405" colspan="2"></td>
        <td height="405" width="40" background="images/general/ombreV.png"></td>
        </tr>
        <tr>
        <td height="40" width="5"></td>
        <td height="40" width="205" background="images/general/ombreH.png"></td>
        <td height="40" width="40" background="images/general/ombreC.png"></td>
        </tr>
    </table>
    <div id="site">
    </div>
</div>

</body>
</html>

Comment faire ?
Modifié par jytest (03 May 2013 - 11:07)
jytest a écrit :
Merci pour ton passage ici.

De rien, ça m'a fait plaisir. Bonne journée.
Concernant ta première solution :
Je ne vois pas vraiment de solution pour ne pas superposer tes images (ceci dit le résultat me semble convenable)
Peut-être avec du contenu généré (:before/:after) ?
A essayer, mais vu ton besoin apparent de rétro compatibilité, il faudra trouver une autre solution pour les navigateurs ne supportant pas ces pseudos classes (ou dégradation gracieuse)

Concernant les tableaux, pas très fan, tu obtiendras la même chose avec box-shadow (+ filter pour IE<9) mais tu perds le petit effet de ton image en bas à droite.
Puis-je te demander de m'aider plus avec :
a écrit :
tu obtiendras la même chose avec box-shadow (+ filter pour IE<9) mais tu perds le petit effet de ton image en bas à droite


D'avance, merci.
Re,

Ça pourrait donner quelque chose comme ça
A adapter suivant tes besoins.
Plus de détails sur MDSN concernant les filtres (l'exemple fourni dans mon exemple n'est peut-être pas fonctionnel Smiley cligne )
La page d'Alsacreations pour une introduction à box-shadow
La page de Geoffrey Crofte pour des choses un peu plus poussées (contenu généré).

Il existe pas mal de générateurs en ligne également Smiley cligne
Voici donc une autre piste (avec shadow).
Mais ceci ne fonctionne pas sous IE7 ! Pourquoi ?
Avez-vous une idée ?
D'avance merci pour l'aide.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>

<style type="text/css">
* {
	margin: 0px;
	padding: 0px;	
}

#ombre {
	position: absolute;
	left: 50%;
	margin-left: -125px;
	z-index: 2;
	top: 50px;
	width: 250px;
	height: 480px;	
}
#site {
	position: absolute;
	background-color: #F00;
	width: 245px;
	height: 445px;
	top: 0px;
	left: 0px;
	z-index: 3;
}

.shadow {
	-moz-box-shadow: 3px 3px 4px #000;
	-webkit-box-shadow: 3px 3px 4px #000;
	box-shadow: 3px 3px 4px #000;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

</style>

</head>

<body>

<div id="ombre" class="shadow">
        <div id="site">
                This is an example of a box with a blurred box-shadow.  
                It uses a special CSS recipe in order for it to work in 
                Internet Explorer 6-8 involving a container HTML element 
                and the Blur Visual Filter.
        </div>
</div>


</body>
</html>
Hello,

Je n'ai pas IE sous la main pour tester, le filtre me semble correct Smiley ohwell
À tout hasard, tu peux tenter en rajoutant cette déclaration
.shadow{
  ...
  zoom: 1;
}
Merci pour ta persévérance à tenter de ma'ider !
Merci.

"zoom..." ne change malheureusement rien !

Ma source se base sur cet article
Rubrique "Type #3: Blurred box-shadow"

A l'aide !!!
Je désespère
Modifié par jytest (03 May 2013 - 19:02)
IE7 est un souhait du client !
Hélàs !

Je viens de chercher par jquery...
Mais je n'ai rien trouvé de compatible avec cet ie7
jytest a écrit :
Voici donc une autre piste (avec shadow).
Mais ceci ne fonctionne pas sous IE7 ! Pourquoi ?
Avez-vous une idée ?
D'avance merci pour l'aide.


&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
...

J'ai pourtant bien une ombre sur ie7 comme sur Firefox.
Merci pour votre aide !
Grand merci à l'ami "6120" !
Merci à "benj" pour ton test sur IE !

Grâce à vous et à une nuit de réflexion,
j'ai trouvé !!!

C'était le chemiin de PIE qui n'était pas bon...

behavior: url(../scripts/PIE.htc);

aurait dû être :

behavior: url(scripts/PIE.htc);

J'étais tombé dans le piège des css avec link !!!

Avec PIE, tout est OK !!!
Sujet clos
Aller à