28172 sujets

CSS et mise en forme, CSS3

Bonjour !

Ceci est mon dernier problème pour pouvoir mettre mon site en ligne, je suis bloqué par un bug d'affichage lorsque je redimensionne ma fenêtre. Le bug est identique sous tous les navigateurs (sauf IE que je n'ai pas testé).

Pour faire simple, mon site à une forme assez standard:

Bannière tout en haut et menu horizontal intégré en haut du corps. Les bordures sont des images il y en a une à gauche, une à droite et une en bas (celle du haut étant directement le menu).
Mon problème, lorsque je redimensionne la fenêtre, vient de la border de droite, qui n'est pas solidaire du corp.
J'ai essayé de jouer entre position relative et absolute, mais sans succès.

Voici le code CSS (le problème étant le même sur toutes les pages, je vous met uniquement la page d'index) :


/* /////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////       BACKGROUND        ///////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////// */

html, body
{
	padding : 0px;
}

html
{
	background : url("background.jpg");
	background-color : #000000;
	font-family : "Mapolice";
}

@font-face{
    font-family : "Mapolice";
    src : url('VIDEOPHREAK.TTF');
}

/* /////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////        BANNIERE        ////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////// */

#banniere
{
	height : 504px;
	width : 1400px;
	background : url("banniere.png") no-repeat;
	display: block;
	margin-left: 100px;
}

/* /////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////         BORDURES        ///////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////// */

#BG /* barre gauche */
{
	background : url("BG.png") repeat-y left;
	margin-left : 25px;
	padding-left: 150px;
    position: relative;
    
}

#BD /* barre droite */
{
	background : url("BD.png") repeat-y right;
	margin-right: 15px;
	position: relative;
}

#BB /* barre bas */
{
	background : url("BB.png") no-repeat;
	margin-bottom : 0px;
	padding-bottom : 250px;
	margin-left: 165px;
}

/* /////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////     MENU HORIZONTAL     ///////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////// */

#MH
{
	height : 80px;
	width : 1274px;
	background : url("MH.png");
	margin-left : 157px;
	padding : 0px;
	text-align : center;
	background-repeat: no-repeat;
}

#MH a
{
	display : inline-block;
	margin : 0px;
	font-size : 14px;
	font-weight : bold;
}

.groupe_lien_MH
{
	display : inline-block;
	position: relative;
	margin-right:0px;
	margin-left:-40px;
	z-index : 90;
	margin-top: 46px;
}

.groupe_lien_MH a.menu_MH
{
	height : 26px;
	padding-top : 0px;
	padding-left: 112px;
	padding-right: 35px;
	text-decoration:none;
	text-align : center;
	color : #FFFFFF;
}

.groupe_sublien_MH
{
	display : none;
	position: absolute;
	min-width :100%;
	top:33px;
	left :0px;
	padding-left:60px;
	padding-right:40px;
	margin-top:-5px;
	text-align : left;
}

.sublien_MH a
{
	position : relative;
	height : 28px;
	width : 120px;
	padding-top : 9px;
	background : url("MH_deroulant.png");
	background-repeat: repeat;
	text-align : center;
	color: #FFFFFF;
}

.groupe_sublien_MH a
{
	padding-top : 9px;
	padding-left:20px;
	padding-right:20px;
	white-space: pre;
	color:#FFFFFF;
}

.groupe_lien_MH:hover .groupe_sublien_MH, .groupe_lien_MH_hover .groupe_sublien_MH
{
}

.groupe_lien_MH:hover a.menu_MH, .groupe_lien_MH_hover a.menu_MH
{
	background : url("MH_hover.png");
	color : #F29113;
	
}

.sublien_MH a:hover
{
	background : url("MH_deroulant_hover.png") no-repeat;
	color:#FFFFFF;
}

/* /////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////    STRUCTURE GLOBALE    ///////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////// */

#conteneur
{
	width : 1237px;
	margin-top : 0px;
	padding-bottom : 0px;
	position: relative;
}


/* ///////////////////////////////		ONGLET INDEX (NEWS)   	/////////////////////////////////  */

.entete-haut-index
{
	width : 1233px;
	height: 25px;
	padding-top: 5px;
	background-color: #000000;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;

}

.corps-simple-index
{

width : 1201px;
height: 2540px;
padding-top: 10px;
position: relative;
	background-image: url("fond_corps2.png");
	background-repeat: no-repeat;
  		border-width:16px;
  		border-style:solid;
  		border-color:black;
		border-bottom-right-radius:15px;
		border-bottom-left-radius:15px;
}



Merci d'avance !