Je supperpose deux images l'une par dessus l'autre en voulant faire descendre celle du dessous de 10px. Cette image se trouve à faire l'ombre de droite de la deuxième image.

Sous IE7 ça marche mais pas sous FF. J'ai essayé de tout bord et de tout côté rien à faire elle ne veut pas baisser.

Voici mon code pour l'image avec l'ombre

.messanombre{background-image:url(../annuaire/imagetest/ombre_message_490b.gif);
background-repeat:repeat-y;
background-position:right;
z-index:-9999px;
width:522px;
height:auto;
display:block;
margin-top:10px;

}

Et voici le code pour ce qui va par dessus

.cadremessage{background-image:url(../annuaire/imagetest/fondcadre.gif);
background-repeat:repeat-x;
background-position:top;
background-color:#fef4d0;
width:490px;
padding:10px;
margin-top:-10px;
margin-right:15px;

}

Avez-vous une solution pour moi?

Un gros merci

bonjour fleuretta

Position: relative me semble parfait pour ton cas, (si du moins j'ai bien compris car sans voir les images ça reste de la devinette)

Je vais supposer que dans ton html tes div sont l'une dans l'autre :

<div class="messanombre">

<div class="cadremessage">Le contenu</div>

</div>

.messanombre{

width: 522px;
background: url(image1.gif) right repeat-y;
}

.cadremessage{

width: 490px;
background: fef4d0 url(image2.gif) repeat-x;
padding: 10px;
position: relative;
top: -10px;
}

Tu peux aussi décaler vers la gauche au lieu de jouer sur les largeurs avec right: 10px

Est-ce que ça corresond à ce que tu voulais ?

Selen

Merci mais cela n'a rien changé.

Ce que je ne comprends pas c'est que le code suivant fonctionne pour un message qui juste en dessous

.messan3ombre{background-image:url(../annuaire/imagetest/fondmessage_ombrept.gif);
background-repeat:no-repeat;
background-position:right;
z-index:-9999px;
width:198px;
height:295px;
display:block;
margin-right:306px;
margin-left:0px;
margin-top:20px;



}

.messann3
{


border-left:#fef4d0 1px solid;
border-right:#fef4d0 1px solid;
background-color:#fdfeff;
width:167px;
height:260px;
_height:269px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
padding-top:5px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 15px;
font-weight:bold;
color:#03406b;
text-align:left;




}

Pourquoi ça fonctionne pour un et pas pour l'autre?

En passant, je recherche webdesigner pour me refiler des idées...

Merci

Si tu montrais une image de ce que tu veux faire ?

La différence entre les deux codes que tu montres c'est que le height est spécifié dans le 2ème cas.

Le code que je t'ai mis marche bien pour décaler la div du dessous par rapport à celle du dessus. Je teste toujours ce que je propose. Maintenant il est possible que j'ai mal visualisé ta demande ou qu'en fonction du contenu de ces div l'effet soit différent ?

Peux-tu mettre aussi le code html ?

Selen

Voici ce que je veux faire et qui marche sous IE7 mais pas sous FF pour le premier code que j'ai mis. Regarde la 2ième image et tu vas voir l'ombre qui est décalée vers le bas.

Sous FF

Sous IE7

Mon autre image dont le code (2ième code) fonctionne sous les deux FF et IE7. On voit l'ombre décalé vers le bas.

J'espère que c'est plus clair sur ce que j'aimerais faire.

Merci beaucoup

C'est impossible d'obtenir ce que tu montres avec seulement le code que tu as mis : tu ne dis donc pas tout. Il y a certainement encore d'autres div impliquées.

J'ai déjà demandé deux fois le code html. Sans tous les détails nécessaires ça ne va pas être possible, désolée.

Selen

Pour la première image et la deuxième (c'est la même au fond mais l'une sur IE7 et l'autre sur FF) voici le code html

<div class="messanombre">
<div class="cadremessage">
<div class="messann2">

<h1>&nbsp;</h1>
<div id="date">
Québec, le
<script type="text/javascript">
var dDate = new Date() ;
var Jours = new Array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi") ;
var Mois = new Array("Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre");
if (dDate.getDate() == 1) {var truc = "er"} else {var truc = ""};
document.write(Jours[dDate.getDay()] + " " + dDate.getDate() + truc + " " + Mois[dDate.getMonth()] + " " + dDate.getFullYear()) ;

</script>
</div>
<div style="text-align:center;">
<br><br>
<b>Bienvenue dans Mon Annuaire de recettes <br>et <a href="../suggestionchef/"><u>Les suggestions des chefs</u></a></b><br><br><br>
</div>
<div style="padding-left:7px;">
Lors de mes navigations sur le web j'ai eu le bonheur de découvrir des sites de recettes de cuisine des 4 coins du monde. Ils étaient si savoureux que j'ai décidé de les faire découvrir alors "Mon annuaire de recettes" est né! Je cherche, je trouve et j'ajoute toujours moi-même les sites.<br>
Pour <a href="../suggestionchef"><u>Les suggestions des chefs</u></a> je me posais tout simplement la question "Quoi faire comme menu?".<br> Voilà la courte histoire de leur naissance respective.<br><br>
Le nombre de sites augmentant continuellement j'ai dû penser à restructurer le tout et en même temps j'en ai profité pour ajouter différentes informations culinaires dont un <a href="#lexiqueculinaire"><u>lexique culinaire</u></a>, des <a href="#conversion"><u>tableaux de conversion</u></a>,
des <a href="truc-astuces-page1.php"><u>trucs et astuces</u></a> et bien plus! Consultez le menu de gauche pour tout voir.<br><br>


Découvrez les 1522 sites répertoriés à ce jour mais aussi <a href="#fourchettedor"><u>les cuisiniers Fourchette d'Or<img src="image/fourchette5.gif" style="vertical-align:bottom;"></u></a>, les cuisiniers Toque d'Or <img src="image/toqueor2.gif" style="vertical-align:middle;">,
<a href="cuisinierdujour.php#visites"><u>les cuisiniers visités</u></a>, <a href="cuisinierdujour.php"><u>les 30 cuisiniers de la journée</u></a>, un nouveau <a href="#menusemaine"><u>menu de la semaine</u></a> publié le dimanche soir
et toujours de <a href="nouveautes-sites.php"><u>nouvelles découvertes culinaires</u></a>.<br>
<br>


Afin de vous permettre de connaitre tous les ajouts de façon quotidienne consultez <a href="#miseajour"><u>les mises à jour de la cuisinière</u></a>.
<br><br>
L'annuaire a vu le jour le 24 novembre 2005 et <a href="../suggestionchef/"><u>Les suggestions des chefs</u></a> le 6 avril 2006</a>. La nouvelle version des deux sites ainsi que la nouvelle adresse de l'annuaire le 8 octobre 2006. En date du 3 septembre 2007, une nouvelle version de Les suggestions des chefs a été mise en ligne.<br>
<br>
Vous avez un site de recettes et vous aimeriez le voir dans Mon annuaire de recettes?
N'hésitez pas à me <a href="contact.php"><u>contacter</u></a>.<br>
<br><br>
Je vous souhaite une bonne visite et bonne cuisine!
<br><br><br>
<img src="../image/signature.gif" style=" position:absolute; margin-left:330px;">
</div>

<br><br><br>

</div>

</div>
</div>

La css pour messan2

.messann2 {
display:block;
background-image:url(../annuaire/imagetest/hautmessage1.gif); /* 400 px; */
background-position:top;
background-repeat:repeat-x;
background-color:#fdfeff;
border:1px solid #fefefe;
width:467px;
height:auto;
padding-right:10px;
padding-left:10px;
padding-bottom:10px;
padding-top:10px;

font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 15px;
font-weight:bold;
color:#011d31;
text-align:left;



}

Pour la troisième image qui fonctionne sur FF et IE7

<div class="messan3ombre">
<div class="chamfer2">

<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><b class="b5"></b></b>

<div class="messann3">

<a href="../suggestionchef/"><h1>Les suggestions des chefs</h1></a>
<div style="padding-left:5px; padding-top:25px;">
Vous ne savez pas quoi cuisiner?<br><br>
Les webmasters inscrit dans l'annuaire vous offrent des suggestions de menus pour différentes occasions.<br><br>
Allez le consulter!<br> C'est <a href="../suggestionchef/"><u>ici!</u></a><br>

<br>
Vous y trouverez<br> de bonnes idées!
<br>
<img src="/annuaire/image/smilies/fsourire.gif"" style="position:absolute;left:325px; margin-top:-45px;">
</div>
</div>
<b class="bottom"><b class="b10"></b><b class="b9"></b><b class="b8"></b><b class="b7"></b><b class="b6"></b></b>

</div></div>

La css pour le chamfer2

.chamfer2 { width:190px; height:auto; margin-right:311px;}


.chamfer2 .top, .chamfer2 .bottom {display:block; background:transparent; font-size:1px;}
.chamfer2 .b1, .chamfer2 .b2, .chamfer2 .b3, .chamfer2 .b4, .chamfer2 .b5 {
display:block;
overflow:hidden;
height:1px;
/*background-image:url(../image/fondmessage13.gif);*/ /* 400 px; */
/*background-position:top;
background-repeat:repeat-x;*/
border-left:1px solid #fef4d0;
border-right:1px solid #fef4d0;
background-color:#fddea0;
}

.chamfer2 .b6, .chamfer2 .b7, .chamfer2 .b8, .chamfer2 .b9, .chamfer2 .b10{
display:block;
overflow:hidden;
height:1px;
background-color:#fdfeff;
border-left:1px solid #fef4d0;
border-right:1px solid #fef4d0;


}

.chamfer2 .b1 {margin:0 5px; background:#fef4d0;}
.chamfer2 .b2 {margin:0 4px;}
.chamfer2 .b3 {margin:0 3px;}
.chamfer2 .b4 {margin:0 2px;}
.chamfer2 .b5 {margin:0 1px;}
.chamfer2 .b6 {margin:0 5px; background:#fef4d0;}
.chamfer2 .b7 {margin:0 4px;}
.chamfer2 .b8 {margin:0 3px;}
.chamfer2 .b9 {margin:0 2px;}
.chamfer2 .b10 {margin:0 1px;}

J'espère n'avoir rien oublié...chu crevée...

Merci beaucoup

Alors voilà, j'ai éliminé ce qui n'était pas nécessaire :

.messanombre{
background-image:url(img/ombre_message_490b.gif);
background-repeat:repeat-y;
background-position:right;
width:522px;
margin-top:10px;
}
.cadremessage{
background-image:url(img/fondcadre.gif);
background-repeat:repeat-x;
background-position:top;
background-color:#fef4d0;
width:490px;
padding:10px;
position: relative;
top: -5px;
margin-right:15px;
}
.messann2 {
background-image:url(img/hautmessage1.gif); /* 400 px; */
background-position:top;
background-repeat:repeat-x;
background-color:#fdfeff;
border:1px solid #fefefe;
width:467px;
padding:10px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 15px;
font-weight:bold;
color:#011d31;
text-align: left;
}

Mais j'en reviens à ma position:relative, le point essentiel est que j'ai remplacé margin-top: -10px (de .cadremessage) par

position: relative;
top: -5px;

c'est plus joli avec 5 qu'avec 10, je trouve.

Le résultat est le même sous IE7 et FF:

ci-dessus sous FF.

Naturellement l'ombre est décalée aussi en bas, j'espère que cela ne te gêne pas...

Selen

Ça marche! Un super de gros merci!

J'aimerais savoir la différence entre le top qui fait la job sous FF et IE7 et le margin-top qui ne le fait pas.

Le top prend quoi en considération?

Un gros gros MERCI!

Un margin-top négatif repousse le bord supérieur du bloc vers le haut : peut-être que dans le cas de FF il entraîne du même coup le bord du bloc conteneur alors que IE pas ? (ce n'est qu'une supposition...)

Un position: relative; top: -10px décale le bloc entier de 10px vers le haut par rapport à la position qu'il occuperait normalement.

Bonne continuation

Merci beaucoup Selen pour ta réponse.

Je vais tester ça en travaillant sur ma nouvelle version.

C'est une nouvelle nouvelle version ou une ancienne nouvelle version?

Elle

J'ai beau essayé de virer ça de tous les bords et de tous les côtés mais rien à faire...ça ressemble toujours trop à la version actuelle donc je pense que je vais arrêter de mettre des heures et des heures là dessus pour avoir en final un résultat similaire à avant. Je viens de perdre 3 semaines de mon temps et beaucoup d'heure de travail...

Fleuretta, elle est très, très bien, ta version actuelle!

Et puis si tu la modifies trop, tes visiteurs risquent de se sentir un peu perdus.

Je voulais changer les couleurs mais juste de faire ça c'est des heures de travail. Mais tant qu'à changer les couleurs j'aurais bien aimé changé le look aussi mais là ça va ressembler à avant... Donc le même look mais d'autres couleurs! Tant qu'à travailler là dessus j'aurais aimé au moins que le look soit différent. Ça me déçoit beaucoup.

Je reviens avec mon histoire d'ombre que j'aimerais mettre.

J'ai réussi mais pas entièrement à un vrai beau résultat qui donne un look pro.

J'ai mis une image pour le côté droit et mis une image pour le bas.

Pourtant à ce que je peux voir sur certains tutos il n'y a qu'une seule image qui est utilisée. Aucun fichu tuto ne parle de la grandeur de cette image ni la montre.

Ce tuto m'a foutu le bordel total

http://www.journaldunet.com/developpeur/tutoriel/css/050324-css-ombre-portee.shtml

Sur celui-là je ne vois aucune ombre aux images et ne montre pas l'image de l'ombre n'ont plus

http://web-graphics.com/mtarchive/001589.php

Celui là utilise des couleurs mais on ne voit pas de résultat à nul part. En plus avec des couleurs cela ne donne pas une vraie ombre.

http://www.webtoolkit.info/css-drop-shadow.html

Celui là est un fouilli total pour moi

http://gcyrillus.free.fr/trucs_css/ombre-en-css-sans-images.html

Bref, si vous connaissez un tuto clair pour mettre l'ombre à droite et en bas sans utiliser 2 images je suis preneuse.

Merci

Il y en a ici, mais je ne sais pas s'ils diffèrent de ceux que tu as déjà consultés...

http://www.cssplay.co.uk/menu/shadow_boxing

http://www.cssplay.co.uk/menu/shadow2

http://www.cssplay.co.uk/menu/shadow.html

Merci Elle

De ce que j'ai vu ces images ne font pas une vraie ombre.

Regarde sur le site de Recettes du Québec et observe attentivement l'ombre. L'ombre a même la tapisserie de fond.

http://www.recettes.qc.ca/index.php

Ça c'est pour moi une vraie ombre.

Ben oui je sais que je suis une maudite tête de cochon qui veut réussir quelque chose de pro sans l'être.

Il faut juste que je trouve comment faire comme les pros.

fleuretta a écrit :

Regarde sur le site de Recettes du Québec et observe attentivement l'ombre. L'ombre a même la tapisserie de fond.

http://www.recettes.qc.ca/index.php

Ça c'est pour moi une vraie ombre.

Ce sont des images!

http://www.recettes.qc.ca/media/images/illustrations/illu_drop-shadow-02.gif

http://www.recettes.qc.ca/media/images/illustrations/illu_drop-shadow-01.gif

http://www.recettes.qc.ca/media/images/illustrations/illu_pattern-02.gif

Ce ne sont pas les bonnes images.

Regarde dans le centre et la partie de droite intérieur (sauf la pub) il y a de l'ombre sur les messages et on voit même la tapisserie

C'est de ça que je parle et que j'aimerais avoir.

Merci

Elle a raison (heu elle, pas toi fleuretta ), c'est bien une image qui produit l'ombre :

.content_item_wrapper (ligne 642)

{

background-color: transparent;

background-image: url(../images/illustrations/illu_drop-shadow-01.gif);

background-repeat: repeat-x;

background-attachment: scroll;

background-position: 100% 100%;

margin-top: 7px;

margin-right: 0pt;

margin-bottom: 10px;

margin-left: 0pt;

padding-top: 0pt;

padding-right: 7px;

padding-bottom: 8px;

padding-left: 0pt;

float: left;

width: 98.2%;

clear: both;

}

Merci pour le code croa-croa

Bon ok Elle avait raison

J'aimerais comprendre quelque chose maintenant.

Si je regarde la propriété de l'image elle a une taille de 800 x 1600 et redimensionnée en 394 x 789.

Dans le code css il n'y a rien sur la hauteur et cela m'intrigue. Les messages qui contiennent cet ombre dans Recettes du Québec n'ont pas tous cette hauteur là donc comment l'ombre de la css

se modifie en hauteur?

Dois-je faire l'image de mon ombre 800 x 1600?

Merci

fleuretta a écrit :

Si je regarde la propriété de l'image elle a une taille de 800 x 1600 et redimensionnée en 394 x 789.

Ça, je crois que c'est Firefox qui la redimensionne. Clique sur l'image et elle va apparaître en taille réelle...

J'ai fait une image de 800 x 1600 px.

J'ai mis ce code dans la css

.ombre{

background-color: transparent;

background-image:url(../annuaire/imagetest/ombre800x1600.gif);

background-repeat: repeat-x;

background-attachment: scroll;

background-position: 100% 100%;

margin-top: 5px;

margin-right: 0pt;

margin-bottom: 10px;

margin-left: 0pt;

padding-top: 0pt;

padding-right: 10px;

padding-bottom: 4px;

padding-left: 0pt;

float: left;

width: 98.2%;

clear: both;
}



.messageombre
{

background-color:#ffffff;
border:1px solid #3300cc;
width:465px;
padding:10px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 17px;
font-weight:bold;
color:#011d31;
text-align: left;
margin-top:-5px;





}

Le problème que j'ai c'est que l'ombre du bas n'est pas décalée vers la droite.

L'autre problème que j'ai est pour le message en dessous. En principe il devrait apparaître un margin-top de 10px et rien ne se fait. Les deux messages sont collés l'un sur l'autre.

La css pour le message qui suit est

.message3menusemaine
{

background-color:#f3f4f7;
border:#3300cc 1px solid;
width:465px;


height:auto;

font-family:Arial, Times, serif;
font-size: 11px;
line-height: 16px;
font-weight:normal;
color:#663612;
text-align:left;
padding:10px;

}

Le code html est

<div id="coted">

<div class="ombre">
<div class="messageombre">

<div id="date">
Québec, le
<script type="text/javascript">
var dDate = new Date() ;
var Jours = new Array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi") ;
var Mois = new Array("Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre");
if (dDate.getDate() == 1) {var truc = "er"} else {var truc = ""};
document.write(Jours[dDate.getDay()] + " " + dDate.getDate() + truc + " " + Mois[dDate.getMonth()] + " " + dDate.getFullYear()) ;

</script>
</div>
<div style="text-align:center;">
<br><br>
<b>Bienvenue dans Mon Annuaire de recettes <br>et <a href="../suggestionchef/"><u>Les suggestions des chefs</u></a></b><br><br><br>
</div>
<div style="padding-left:7px;">
Lors de mes navigations sur le web j'ai eu le bonheur de découvrir des sites de recettes de cuisine des 4 coins du monde. Ils étaient si savoureux que j'ai décidé de les faire découvrir alors "Mon annuaire de recettes" est né! Je cherche, je trouve et j'ajoute toujours moi-même les sites.<br><br>
Pour <a href="../suggestionchef"><u>Les suggestions des chefs</u></a> je me posais tout simplement la question "Quoi faire comme menu?".<br><br> Voilà la courte histoire de leur naissance respective.<br><br>

Lire la suite...


<br><br><br>
</div>

</div></div>





<a name="menusemaine"></a>
<br>


<div class="message3menusemaine" style="background-color:#ffffff; margin-top:10px;">

<h1>Le menu de la semaine</h1><br><br>

<div style="margin-left:45px;">
<br>
Entrée:<br><a href="http://markeelee.blogspot.com/2008/08/salade-de-betteraves-et-oranges.html" target="_blank"><u>Salade de betteraves et orange</u></a>
<br>
<img src="../annuaire/image/banque/salade_betterave_orange.jpg" alt="Salade de betteraves et orange" width="93" height="70" style="margin-top:-40px;">
<br>
<br>
<br>
<br>
Plat principal:<br><a href="http://markeelee.blogspot.com/2008/08/tajine-de-poulet-aux-olives.html" target="_blank"><u>Tajine de poulet aux olives du Maroc</u></a>
<br>
<img src="../annuaire/image/banque/tajine_poulet_olives.jpg" alt="Tajine de poulet aux olives du Maroc" width="93" height="70" style="margin-top:-40px;">

<br><br><br><br>
Dessert:<br><a href="http://markeelee.blogspot.com/2008/08/gteau-de-semoule.html" target="_blank"><u>Gâteau de semoule maghrébin</u></a><br>
<img src="../annuaire/image/banque/couvre-plat1b70.jpg" alt="Pas de photo de disponible" width="93" height="70" style="margin-top:-40px;">
<br>


<br><br><br><br>


</div></div>
<div class="messanpied_coin"><p style="text-align:left; font-weight:bold; padding-left:15px;">Offert par: &nbsp;<a href="redir.php?site=1358" target="_blank"><u>Les récits et les recettes de Markee</u></a><img src="image/drapeauquebecsitep.gif" width="15" height="11" border="0"></p>
</div>

Qu'est ce qui ne va pas dans mon code?

Merci

À force de faire des essais j'ai presque réussit sauf toujours pour le point de la largeur.

J'ai modifié le code ainsi

.ombre{

background-color: transparent;

background-image:url(../annuaire/imagetest/ombre485x1600.gif);

background-repeat:repeat-x;

background-attachment: scroll;

background-position:100% 100%;

margin-top:5px;

padding-bottom:0px;


width:490px;

.messageombre
{

background-color:#ffffff;
border:1px solid #3300cc;
width:465px;
padding:10px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 17px;
font-weight:bold;
color:#011d31;
text-align: left;
top:-5px;
position:relative;

}

Le width de .ombre devrait être 485px sauf que lorsque je le mets à 485px il se réduit vers la droite donc je perd mon ombre de droite et je n'ai pas plus le décalage de 5px en dessous de l'image.

J'ai essayé les padding et les margin mais rien de rien à faire. Si je mets padding ou margin c'est messageombre qui se déplace et non l'ombre.

Quoi faire pour régler mon problème? J'ai le même résultat sous FF, IE7 et IE6.

Merci