28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,
j'ai un soucis avec une même image utilisée deux fois pour un cadre. Elles apparaissent bien pour les deux cadres, mais elles se dédoublent et je me retrouve avec 4 mêmes images sur mon site.
Il s'agit d'une image d'un bas de cadre pour un cadre de mon lecteur audio et et bas de cadre pour un logo du site.
http://img11.hostingpics.net/pics/571535Icilevisuelduddoublementdimages1.png
Je vous laisse le code HTML et CSS, en sachant que ce cadre s'appelle : "bordure_noire_centre_partie_rouge1.png"
Merci à vous de m'aider.
<div id="corps">
		 <div class="corps-haut">
		</div>	
		<div class="corps-central"> 
				<div id="boite1">
					
							<div id="center"><!-- #C'est pour le corps -->
								<div id="content"><!-- #C'est pour la partie blanche dans le corps -->
									<p class="titre_rouge1">Problème de dédoublement d'images juste au dessus, à gauche</p>
											
											<p class="paragraphe1">
									Bonjour, j'ai divisé le corps de ma page en deux colones, la partie blanches ou je mettrai du texte et la partie rouge dans laquelle
									je mettrai des cadres, ( mais en réalité pour cette partie là du corps il s'agit d'une même image blanche+rouge qui s'étire et fur et à mesure que je 
									l'agrémente.<br><br>
									
								</div><!-- #content -->
								<div id="sidebar"> <!-- #c'est pour la colonne rouge à droite -->
									
															<div class="bordure_haute_boite_noire_rouge1"> 
																<p class="titre_orange_audio">LECTEUR AUDIO</p>
															</div> 					
															<div class="bordure_centre_boite_noire_rouge1"> 
																<div class="position_lecteur_audio">
																	<object type="application/x-shockwave-flash" data="dewtube/le_lecteur_dewplayer/dewplayer-multi.swf?mp3=dewtube/le_lecteur_dewplayer/mp3/(_Sachin_)Kanmoodi_Thirakkum.mp3|dewtube/le_lecteur_dewplayer/mp3/(_Annyan_)kumari_yen_kadhal_sikki_mukki.mp3|dewtube/le_lecteur_dewplayer/mp3/test3.mp3" 
																		width="240" height="20" id="dewplayer-multi">
																		<param name="wmode" value="transparent" />
																		<param name="movie" value="dewtube/le_lecteur_dewplayer/dewplayer-multi.swf?mp3=dewtube/le_lecteur_dewplayer/mp3/(_Sachin_)Kanmoodi_Thirakkum.mp3|dewtube/le_lecteur_dewplayer/mp3/(_Annyan_)kumari_yen_kadhal_sikki_mukki.mp3|dewtube/le_lecteur_dewplayer/mp3/test3.mp3" />
																	</object>	
																</div> 	
															</div> 
															<div class="bordure_noire_basse_partie_rouge1"> 
															</div> 
															
															
															<div class="bordure_haute_boite_noire_rouge2"> 
																<p class="titre_fanion1">FANION</p>
															</div> 					
															<div class="bordure_centre_boite_noire_rouge2"> 
																<img src="images/corps/partie_rouge/fanion1.png" class="fanion1" alt="fanion1" title="fanion1"/>							 
															</div> 
															<div class="bordure_noire_basse_partie_rouge2"> 
															</div> 
															
															
															<div class="cadre-blanc-partie-haute-rouge2"> 
															</div>			
								</div> <!-- #sidebar -->
							</div><!-- #center -->					
				</div>
		
				</div>
				



  

  div#center {
    /* Pour éviter la superposition du pied de page et du contenu : */
    padding-bottom: 50px; 
}
  div#content {
    float: left;
	margin-left: 20px;
    width: 650px;
	text-align: left; 
}
div#sidebar {
    float: right;
    width: 200px;
	margin-left: 10px;
	text-align: left; 
}
  


 #cadre-rouge
{   float: left;  
}

.titre_orange_audio
   {
   padding-top: 8px;
   margin-left: 60px;
   font-weight:bold;
   font-style:italic;
   font-size: 1,2em ;
   color: #ff7600;
 }
.position_lecteur_audio
{
   width: 240px;
   height: 20px;
   margin-left: 12px; 
   margin-top: 0px;
   background-image: url("Header/header1.png");
   background-repeat: no-repeat;
}
.bordure_haute_boite_noire_rouge1
  {
   width: 266px;
   height: 29px;
   margin-left: 10px; 
   margin-top: 0px;
   background-image: url("images/corps/partie_rouge/les_boites_cadre/bordure_haute_boite_noire_rouge1.png");
   background-repeat: no-repeat;
 }  
.bordure_centre_boite_noire_rouge1
  {
   width: 266px;
   height: 35px;
   margin-left: 11px;
   margin-top: 0px;
   padding-top: 12px;
   background-image: url("images/corps/partie_rouge/les_boites_cadre/bordure_noire_centre_partie_rouge1.png");
   background-repeat: repeat-y;
 }  
.bordure_noire_basse_partie_rouge1
    {
   width: 266px;
   height: 29px;
   margin-left: 10px;
   margin-top: 0px;
   background-image: url("images/corps/partie_rouge/les_boites_cadre/bordure_noire_basse_partie_rouge1.png");
   background-repeat: no-repeat;
   padding-right: 15px;
   margin-bottom: 0px;
 }  
 
 
 /* Le cadre noir dans la partie rouge pour la photo de Gandhi */
  .bordure_haute_boite_noire_rouge2
  {
   width: 266px;
   height: 29px;
   margin-left: 10px;
   margin-top: 20px;
   background-image: url("images/corps/partie_rouge/les_boites_cadre/bordure_haute_boite_noire_rouge1.png");
   background-repeat: no-repeat;
 }  
.bordure_centre_boite_noire_rouge2
  {
   width: 266px;
   margin-left: 11px; 
   margin-top: 0px;
   padding-top: 12px;
   padding-bottom: 15px;
   background-image: url("images/corps/partie_rouge/les_boites_cadre/bordure_noire_centre_partie_rouge1.png");
   background-repeat: repeat-y;
 }  
.bordure_noire_basse_partie_rouge2
    {
   width: 266px;
   height: 29px;
   margin-left: 10px;
   margin-top: 0px;
   background-image: url("images/corps/partie_rouge/les_boites_cadre/bordure_noire_basse_partie_rouge1.png");
   background-repeat: no-repeat;
   padding-right: 15px;
   margin-bottom: 0px;
 } 
.titre_fanion1
   {
   padding-top: 8px;
   margin-left: 60px;
   font-weight:bold;
   font-style:italic;
   font-size: 1,2em ;
   color: #ff7600;
 }
.fanion1
{
   width: 192px;
   height: 233px;  
   border: none;
}