Bonsoir,
Voici mon code, je vous expose mon problème. Au départ je n'avais pas mis de float: right; au div corps mais lorsque j'ai testé avec Firefox pouf le div corps se retrouvait tout à gauche. Donc je me suis dis je vais mettre un float: right; Je test de nouveau et pouf je n'ai plus de fond avec Firefox et l'image de fond ne se répétant qu'une seule fois avec Internet Explorer. J'ai lu qu'à partir du moment où l'on met des float les div on tendance à "sortir" du div les englobant et par conséquent ne répète l'image qu'une fois. Seulement je ne trouve pas la solution dans mon cas précis, si quelqu'un pouvait m'aider je lui en serais infiniment reconnaissant puisque cela fait déjà quelques jours que je me penche sur le problème...
Merci d'avance...
/***************************************************************************************************************************************/
/*************************************************************** BODY ******************************************************************/
/***************************************************************************************************************************************/
body
{
width: 760px; /* Largeur */
margin: auto; /* Pour centrer la page */
margin-top: 20px; /* Marge en haut */
margin-bottom: 20px; /* Marge en bas */
}
/***************************************************************************************************************************************/
/*************************************************************** Ossature **************************************************************/
/***************************************************************************************************************************************/
#ossature
{
background-image: url("../images/fond.png"); /* Image de fond */
background-repeat: repeat-y; /* Pour répéter l'image */
}
/***************************************************************************************************************************************/
/************************************************************** BANNIERE ***************************************************************/
/***************************************************************************************************************************************/
/* L'en-tête */
#header
{
width: 760px; /* Largeur */
height: 100px; /* Hauteur */
background-image: url("../images/banniere.png");/* Image de fond */
background-repeat: no-repeat; /* Pour ne pas répéter l'image */
margin-bottom: 10px; /* Marge en bas */
}
/***************************************************************************************************************************************/
/************************************************************** MENU *******************************************************************/
/***************************************************************************************************************************************/
/* Le menu global */
#menu_global
{
float: left; /* Le menu flottera à gauche */
width: 203px; /* Largeur du menu */
margin-left: 7px;
margin-right: 4px;
background-color: #707070; /* Couleur de fond */
border: 2px solid black; /* Epaisseur et couleur bordure */
padding: 5px;
background-image: url("../images/fond_menu_gen.png"); /* Image de fond */
background-repeat: repeat-y; /* Répéter l'image horizontalement */
}
/* Le menu */
#menu
{
float: left; /* Le menu flottera à gauche */
width: 201px; /* Largeur du menu */
}
/* Sous menu */
.element_menu
{
background-color: #C2CCB6; /* Couleur de fond */
border: 2px solid black; /* Epaisseur et couleur bordure */
margin-bottom: 20px; /* Marge en bas */
}
/* Titres des menus */
.element_menu h3
{
color: #462ACC; /* Couleur d'écriture */
font-family: Comic Sans MS, "Arial Black", "Times New Roman", Times, serif; /* Style de l'écriture */
background-image: url("../images/titre_menu.png"); /* Image de fond */
margin: 0px; /* Marge inexistante sur tous les côtés */
text-align: center; /* On centre le texte */
height: 30px;
}
/* Les listes à puces se trouvant dans un menu */
.element_menu ul
{
background-image: url("../images/fond_menu.png"); /* Image de fond */
list-style-image: url("../images/puce.png"); /* Images des puces */
color: blue;
padding: 0px; /* Marges intérieures sur tous les côtés */
padding-left: 20px; /* Mais marge de gauche intérieure */
margin: 0px; /* Marge extérieure sur tous les côtés */
margin-bottom: 5px; /* Mais marge en bas */
}
/* Les liens se trouvant dans un menu */
.element_menu a
{
color: #462ACC; /* Couleur du texte */
}
/* Quand on pointe sur un lien du menu */
.element_menu a:hover
{
color: white; /* Couleur du texte */
}
/***************************************************************************************************************************************/
/************************************************************ CORPS ********************************************************************/
/***************************************************************************************************************************************/
/* Le corps de la page */
#corps
{
float: right;
width: 500px;
margin-bottom: 20px; /* Marge en bas */
margin-right: 3px;
padding: 5px; /* Marge intérieure sur tous les côtés */
color: #B3B3B3; /* Couleur du texte */
background-color: #707070; /* Couleur de fond */
background-image: url("../images/fond_corps.png"); /* Image de fond */
background-repeat: repeat-y; /* Répéter l'image horizontalement */
border: 2px solid black; /* Epaisseur et couleur bordure */
}
/* Les titres h1 du corps */
#corps h1
{
color: #B3B3B3; /* Couleur du texte */
text-align: center; /* Centrer le texte */
font-family: Arial, "Arial Black", "Times New Roman", Times, serif; /* Style d'écriture */
}
/* Les titres h2 du corps */
#corps h2
{
height: 30px; /* Hauteur */
background-image: url("../images/titre.png"); /* Image de fond */
background-repeat: no-repeat; /* Empêcher la répétition de l'image */
padding-left: 30px; /* Marge intérieure à gauche */
color: #B3B3B3; /* Couleur du texte */
text-align: left; /* Centrer le texte */
}
/* Le corps de la page */
.boite
{
width: 500px;
color: #462ACC; /* Couleur du texte */
background-color: #B3B3B3; /* Couleur de fond */
background-image: url("../images/fond_boite.png"); /* Image de fond */
background-repeat: repeat-y; /* Répéter l'image horizontalement */
border: 2px solid black; /* Epaisseur et couleur bordure */
}
/* Les titres h1 du corps */
.boite h1
{
color: #B3B3B3; /* Couleur du texte */
text-align: center; /* Centrer le texte */
font-family: Arial, "Arial Black", "Times New Roman", Times, serif; /* Style d'écriture */
}
/* Les titres h2 du corps */
.boite h2
{
height: 30px; /* Hauteur */
background-image: url("../images/titre.png"); /* Image de fond */
background-repeat: no-repeat; /* Empêcher la répétition de l'image */
color: #B3B3B3; /* Couleur du texte */
text-align: left; /* Centrer le texte */
}
.titre_boite
{
width: 500px;
height: 30px;
color: #462ACC; /* Couleur d'écriture */
font-family: Comic Sans MS, "Arial Black", "Times New Roman", Times, serif; /* Style de l'écriture */
text-align: center; /* Centrer le texte */
background-image: url("../images/titre_corps.png"); /* Image de fond */
background-repeat: no-repeat; /* Répéter l'image horizontalement */
}
/***************************************************************************************************************************************/
/************************************************************ PIEDS DE PAGE ************************************************************/
/***************************************************************************************************************************************/
/* Le pied de page */
#footer
{
width: 758px;
height: 60px;
border: 2px solid black; /* Epaisseur et couleur bordure */
background-image: url("../images/copy.png"); /* Image de fond */
background-repeat: no-repeat; /* Empêcher la répétition de l'image */
}
/***************************************************************************************************************************************/
/************************************************************ BOUTONS ******************************************************************/
/***************************************************************************************************************************************/
.bouton_prec {
border: 2px solid black; /* Epaisseur et couleur bordure */
color: #1D1DDF; /* Couleur du texte */
background-color: white;
background-image: url("../images/page_prec.png"); /* Image de fond */
width: 100px;
height: 20px;
float: left;
margin: 0px;
margin-top: 10px;
margin-bottom: 10px;
}
.bouton_suiv {
border: 2px solid black; /* Epaisseur et couleur bordure */
color: #1D1DDF; /* Couleur du texte */
background-color: white;
background-image: url("../images/page_suiv.png"); /* Image de fond */
width: 100px;
height: 20px;
float: right;
margin: 0px;
margin-top: 10px;
margin-bottom: 10px;
}
#fin
{
clear: both;
}
Voici mon code, je vous expose mon problème. Au départ je n'avais pas mis de float: right; au div corps mais lorsque j'ai testé avec Firefox pouf le div corps se retrouvait tout à gauche. Donc je me suis dis je vais mettre un float: right; Je test de nouveau et pouf je n'ai plus de fond avec Firefox et l'image de fond ne se répétant qu'une seule fois avec Internet Explorer. J'ai lu qu'à partir du moment où l'on met des float les div on tendance à "sortir" du div les englobant et par conséquent ne répète l'image qu'une fois. Seulement je ne trouve pas la solution dans mon cas précis, si quelqu'un pouvait m'aider je lui en serais infiniment reconnaissant puisque cela fait déjà quelques jours que je me penche sur le problème...
Merci d'avance...
