Placement,décalage

bonjour,
tout d'abord je tiens à remercier Alsacréation l'ensemble du site et de ces ressources, je ne suis pas un professionnel du métier mais tout ce que j'y pu y lire m'a permis d'éviter les grosses erreurs et de mettre en forme mes pages correctement pour des sites associatifs ou de très petite structure commerciale à titre bénévole.

Ce qui m'amène à poster sur le forum c'est que je suis sur un écueil que je n'arrive pas à résoudre.

la structure de mon site est simple, des pages html toutes reliées à une feuille CSS.

le header et un petit header2 de séparation ont des ombrages ce qui fait un petit "décalé" sur la droite (ombre portée de base)

le

#contenu

n'en a pas, donc il semble "dépasser" et c'est pas très joli ...
Et je n'arrive pas à modifier ou insérer la bonne valeur pour réduire la taille d'affichage uniquement sur la droite pour que n'apparaisse plus ce décalage (tout en gardant le centrage quel que soit la taille de la fenêtre ouverte du navigateur) (pour que la partie gauche reste alignée correctement).

Merci pour votre aide !!!

les pages sont sur

http://www.sedaries.fr

(on voit bien le "décalage" en bas à droite)

mon CSS:

html, body {
 margin:0;
 padding:0;
 }
body {
	margin: 0;
	padding: 0;
	font: bold 12px/1.5em Verdana;
	background-image: url(../pictures/background.png);
	background-repeat: repeat;
}  
#header {
	background-image: url(../pictures/header.png);
	background-repeat: no-repeat;
	width: 1010px;
	height: 230px;
	margin: auto;
}
#header2 {
	background-image: url(../pictures/header2.png);
	background-repeat: no-repeat;
	width: 990px;
	height: 40px;
	margin: auto;
}
/*- Menu Tabs 1--------------------------- */
    #tabs1 {
      float:none;
      width:990px;
		text-align: center;
      font-size:92%;
		position: relative;
		margin: auto;
		line-height:normal;
      border-bottom:1px solid #BCD2E6;
      }
    #tabs1 ul {
      width:990px;
		position: relative;
		margin: auto;
      padding:10px 10px 24px 50px;
      list-style:none;
      }
    #tabs1 li {
      display:inline;
		width: 1000px;
		position: relative;		
      margin:0;
      padding:0;
      }
    #tabs1 a {
      float:left;
      background:url("../pictures/tableft1.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabs1 a span {
      float:left;
      display:block;
      background:url("../pictures/tabright1.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#464E42;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs1 a span {float:none;}
    /* End IE5-Mac hack */
    #tabs a:hover span {
      color:#FFF;
      }
    #tabs1 a:hover {
      background-position:0% -42px;
      }
    #tabs1 a:hover span {
      background-position:100% -42px;
      }

      #tabs1 #current a {
              background-position:0% -42px;
      }
      #tabs1 #current a span {
              background-position:100% -42px;
      }
#contenu {
	background: url(../pictures/background_contenu.jpg);
	background-repeat: repeat;
	width: 980px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px height 100%;
	text-align: left;
	margin: auto;
	}
#bottom {
	background-image: url(../pictures/header2.png);
	background-repeat: no-repeat;
	width: 966px;
	height: 40px;
	margin: auto;
	padding: 12px;
	text-align: center;
	font-size: x-small;
}
h1 {
 font-size: 200%; 
 color: #000000; 
 text-align: left;
 }
 h2 {
        font: bold 14px Verdana, Arial, Helvetica, sans-serif;
        color: #000;
        margin: 0px;
        padding: 0px 0px 0px 15px;
}

img {
border: none;
}
a:link {
 color: #A3CA87;
 text-decoration: none;
 }
a:visited {
 color: #8BC966;
 }
a:active {
 color:#55FF55;
}
a:hover {
	color: #55FF55;
	text-decoration: none;
}
a img {border: none;}

Pourquoi n'utilise tu pas les ombre porté directement en css 3 : box-shadow. (à préfixer)

Cela te permettra de mieux définir la taille de tes éléments.
Perso voila la structure que j'aurai réaliser (tu peut remarquer une palette de couleur réfléchi et magnifique ).

Enfin tout ca pour te montrer que si tu utilise les règle css3 tu va pouvoir ne plus te soucier du décalage de l'ombre et directement régler la taille de tout tes composant en modifiant le warp

Merci, ainsi je connais à présent la box-shadow pour mes CSS.

J'ai fait quelques tests à partir de ta suggestion
Le soucis c'est que box-shadow n'est pas compatible avec tous les navigateurs (avant IE8 par ex) et si je me cantonne à une conception "rustique" du site c'est pour assurer un max de compatibilité et une maintenance aisée pour moi.

C'est pourquoi l'ombrage est dans l'image au format .png, affichable par (presque) tous les navigateurs et pas rajoutée

Encore merci pour tes suggestions

Oui mais au pire, ie8 ne va pas comprendre ton ombre, et il ne va pas l'afficher, il n'y aura pas plus de répercussion que ca. Le cross-browser c'est bien, mais parfois il faut savoir faire des concession surtout si c'est n'est qu'esthétique, le but de la rétrocompatibilité c'est que le site soit intelligible par les version inférieur, tu ne pourra jamais avoir le même rendu sur tout les navigateurs, il va falloir faire avec.

Donc pour moi ce n'est pas un mal.

merci pour votre participation