Texte et image se chevauchent si on zoom sur smartphone

Bonjour

J'ai fait un site perso (voir >> ici << ) (minable je sais mais c'est le contenu qui est important ) et je viens de m'apercevoir que sur mon téléphone (Android) les images de la bannières et le texte de la sidebar vient se superposer si on fait un zoom !!
Pas très pratique

J'ai essayé pas mal de solutions données sur ce site et aucunes ne fonctionnent
(position:absolute ou relative , ou #wrap {overflow:hidden;} par exemple)

Ps: Je suis nul en html (mon site a été fait en suivant les tuto du Site du Zéro , c'est dire)


Merci pour votre aide

J2m06

ah j'oubliais voici le code du css de ma page d’accueil

#conteneur { width:1000px; margin:0 auto; }

#header
{  	width:921px; 
	height: 99px; 
}


#sidebar    
{  /*float:left; */
	overflow:hidden; /* essai 1.09.13 */	
	display:block;
	margin: 0 auto;
	padding:0;		
	width: 150px; 
	color: #696969;  
	font-family: Times, "Liberation Sans", FreeSerif, "Trebuchet MS" ; 
	position:fixed; 
 } 

#sidebar  ul
{     
   padding: 0px;       
   padding-left: 20px;  
   margin: 0px;           
}

#contenu {
	overflow:hidden; /* essai 1.09.13 */
	/*left: 130px; */
	margin-top: 0px;  
	margin-left: 145px;    	
	padding: 5px;          
	width: 766px; 	
	color: #696969; 
	background-color: #F2F2F2;
	font-size: 100%;  
	font-family: "Trebuchet MS", FreeSerif, Rimes, "Times New Roman", "Comic sans MS", Serif ;
}

#footer
{  	margin-left: 144px;    
 	padding: 1px;
	width: 769px;  
	clear: both;
	height: 25px; 
	text-align: center;
	color: #696969 ; 
	background-color: #E6E6FA; 
        border: 4px ridge;
}

et celui du Html

<div id="conteneur">	

    <div class="header">		
	<img alt="images/bandeau_theoule.jpg" src="images/header_theoule.jpg"/>
    </div>

   <div id="sidebar">			
	<ul><br /> 
	<li><a href="http://www.alsacreations.com">AlsaCreations</a></li>			
	</ul>	
  </div>	

  <div id="contenu" style="color: #191970; font-weight: bold;">
        <h1>Bonjour et bienvenue sur mon site &nbsp; &nbsp; </h1>		
     <div style="margin-left: 20px;">
        Utilisateurs des produits Mozilla (Firefox, SeaMonkey,Thunderbird/Lightning) ce site    	   <br>				
     </div>
     <div style="text-align: center">	
         <img alt="" src="images/gif/firefox.gif" />			
     </div>
   </div>

   <div id="footer">
	<div class="element_pdp">
	   <div class="texte_pied_page">
		<img style="width: 18px; height: 18px;" alt="" src="images/icon/icon_wink.gif" />
	   </div>
	</div>	
   </div>	
</div> 

Modifié par J2m06 (01 Sep 2013 - 18:39)