[Résolu] Problème de positionnement de mon ombre sur un div

Bonjour à tous,

Je suis confronté à un problème que seul Firefox n'affiche pas : le positionnement de mon ombre par rapport à un div.

J'ai un bloc div avec un contour, dans lequel je place mon contenu. En dessous je colle un autre dans lequel je place une image qui me fait une ombre portée. Ce dernier est décalé d'1px sur la gauche dans Chrome, Safari et IE.

Je ne comprend pas pourquoi.

Mon bloc conteneur

<div id="content">  
        	 <div id="content_left"></div>  
             <div id="content_right">
             	<h1></h1>
           	    <div id="content_description">
                   
               </div>
             </div> 
        </div>

Le CSS associé

#content{
	margin: 49px auto 0 auto;
	width:883px;
	height:395px;
	border-top:3px solid #FFF;
	border-left:3px solid #FFF;
	border-right:3px solid #FFF;
	background-color:#edeaeb;
	
}
#content_left{
	float:left;
	width:170px;
	height:395px;
	background:url(../images/content_left_bg.png) top left repeat-y;
}

#content_right{
	float:left;
	width:683px;
	padding:18px 0 0 30px;
}

#content_description{
	width:447px;
	float:left;
}

Mon ombre

<div id="shadow_content"></div>

Le CSS associé

#shadow_content{
	margin: 0 auto;
	padding:0px;
	width:936px;
	height:20px;
	background-image:url(../images/shadow_content2.png);
}

Le problème est visible à la page http://powerwebmax.fr/lab/
Modifié par franckycorp (22 Jun 2010 - 15:46)

Et l'eau et bienvenue,

Je fais un passage en courant d'air pour te signaler que tu peux utiliser les nouvelles règles css

selecteur{
	/* règles définissant les autres propriétés width, height, etc. */
	box-shadow : 5px 10px 15px #123; 
}

définition des valeurs :
1. décalage horizontal
2. décalage vertical
3. intensité de ton ombre portée
4. couleur ombre portée

Utilise les abréviations des différents moteurs de rendu afin d'obtenir le résultat escompté. ex : -moz-box-shadow : /*etc. */
Pour finir, sur IE il y a des filtres spécifiques à mettre en place ou sinon la conditionnel qui va bien.

Bonne journée ^^
Modifié par niuxe (22 Jun 2010 - 12:29)

Merci pour cette précision mais la par rapport au type de mon ombre découpée dans Toshop, ce n'est pas du tout le même effet qu'avec ces propriétés.

Coucou

en fait j'ai l'impression que tu n'as pas tant un souci de navigateur mais de div qui se balade, j'ai l'habitude d'avoir mon écran splité en 2, à droite firefox à gauche le code et comme c'est un écran 19" ça me donne ceci :


Redimensionne ta fenêtre de navigateur en plus petit et jette un coup d'oeil à ta page

Dans ton code, la #shadow_content est en dehors de #content, du coup elle se balade et glisse en fonction de la taille de la fenêtre. Pourquoi ne pas essayer un truc du genre mettre #shadow_content dans #content (comme c'est le cas pour les trois autres), mettre un position:relative à #content et essayer de placer ta #shadow_content en position:absolute; à l'intérieur ?

Formidable.

Bien vu. Merci beaucoup. Tout est rentré dans l'ordre en lui appliquant aussi un retrait à la position left. Car m'image de l'ombre étant plus grande.

Merci bien en tout cas