Affichage different sur iphone

Fermé
marcus - 19 févr. 2013 à 14:17
 Profil bloqué - 28 mars 2013 à 09:39
Bonjour,

SUR CE SITE :
http://www.dannaprod.com/index.php?static1/videos

sur PC l'affichage des videos est correct.

Par contre sur IPHONE, les videos sont affichées en liste.

Je ne comprends pas pourquoi cet affichage est différent.

Pourriez vous l'aider s'il vous plais ?

je vous remercie




			
			
.fleft p { font-size: 1.2em; }
	

.fleft ul li { display: inline;
}
			
		
			
			.fleft { float: left; margin: 0 20px 30px 0;
			}
			
			.cboth { clear: both; }
			
			#main {
				margin: 0 auto;
				padding: 30px;
				width: 952px;
				
			}
			
			.fleft ul li img{
				border:7px solid #808AA3;
				
				        -webkit-transition: all 0.4s ease-in-out; 
        -webkit-transition-duration: 0.4s;
	    -moz-transition: all 0.4s ease-in-out; 
        -moz-transition-duration: 0.4s;	
	    -o-transition: all 0.4s ease-in-out; 
        -o-transition-duration: 0.4s;
		-ms-transition: all 0.4s ease-in-out; 
        -ms-transition-duration: 0.4s;
		-khtml-transition: all 0.4s ease-in-out; 
        -khtml-transition-duration: 0.4s;
			}		

	
		
		.fleft ul li img:hover , .fleft .active img {
border:7px solid #333333;}



<div id="main">
		
		
			<div class="fleft">
				<h4>REPORTAGES</h4>
				<ul class="gallery clearfix">
					<li><a href="http://vimeo.com/8851520#at=0" rel="prettyPhoto" title="YouTube demo"><img src="http://dannaprod.com/themes/defaut/diapo/images/thumbnails/001.png" alt="" /></a></li>
					<li><a href="http://youtu.be/HTqYfV9qmXA" rel="prettyPhoto" title="YouTube demo"><img src="http://dannaprod.com/themes/defaut/diapo/images/thumbnails/002.png" alt="" /></a></li>
                    
					<li><a href="http://youtu.be/cH1KNPQE4gU" rel="prettyPhoto" title="YouTube demo"><img src="http://dannaprod.com/themes/defaut/diapo/images/thumbnails/003.png" alt="" /></a></li>                   

				</ul>
			</div>
            
	
			<div class="fleft">
				<h4>COURTS METRAGES</h4>
				<ul class="gallery clearfix">
					<li><a href="http://youtu.be/koXS3nFYLns" rel="prettyPhoto" title="YouTube demo"><img src="http://dannaprod.com/themes/defaut/diapo/images/thumbnails/004.png" alt="" /></a></li>
					<li><a href="http://vimeo.com/10353921#at=0" rel="prettyPhoto" title="YouTube demo"><img src="http://dannaprod.com/themes/defaut/diapo/images/thumbnails/005.png" alt="" /></a></li>

				</ul>
			</div>
            
            
			<div class="fleft">
				<h4>MASHUPS</h4>
				<ul class="gallery clearfix">
					<li><a href="http://youtu.be/Um3lRcZd0iI" rel="prettyPhoto" title="YouTube demo"><img src="http://dannaprod.com/themes/defaut/diapo/images/thumbnails/006.png" alt="" /></a></li>
					<li><a href="http://youtu.be/TqV9APlpn0Q" rel="prettyPhoto" title="YouTube demo"><img src="http://dannaprod.com/themes/defaut/diapo/images/thumbnails/007.png" alt="" /></a></li>
					<li><a href="http://youtu.be/yv1cHRBRoPo" rel="prettyPhoto" title="YouTube demo"><img src="http://dannaprod.com/themes/defaut/diapo/images/thumbnails/008.png" alt="" /></a></li>

				</ul>
			</div>

			<div class="fleft">
				<h4>PARTENAIRES</h4>
				<ul class="gallery clearfix">
					<li><a href="http://youtu.be/SgMQm4X9ZhQ" rel="prettyPhoto" title="YouTube demo"><img src="http://dannaprod.com/themes/defaut/diapo/images/thumbnails/006.png" alt="" /></a></li>
					<li><a href="http://youtu.be/dr_u3OAfyOg" rel="prettyPhoto" title="YouTube demo"><img src="http://dannaprod.com/themes/defaut/diapo/images/thumbnails/007.png" alt="" /></a></li>

				</ul>
			</div>


			<div class="fleft">
				<h4>PUBLICITÉS</h4>
				<ul class="gallery clearfix">
					<li><a href="http://youtu.be/JqLeINjbg0c" rel="prettyPhoto" title="YouTube demo"><img src="http://dannaprod.com/themes/defaut/diapo/images/thumbnails/006.png" alt="" /></a></li>
					<li><a href="http://youtu.be/JqLeINjbg0c" rel="prettyPhoto" title="YouTube demo"><img src="http://dannaprod.com/themes/defaut/diapo/images/thumbnails/007.png" alt="" /></a></li>

				</ul>
			</div>



		
			<br class="cboth" />
	
<script type="text/javascript" charset="utf-8">
			$(document).ready(function(){
				$("area[rel^='prettyPhoto']").prettyPhoto();
				
				$(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal', });
				$(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast', hideflash: true});
		
				$("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({
					custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
					changepicturecallback: function(){ initialize(); }
				});

				$("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({
					custom_markup: '<div id="bsap_1259344" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div><div id="bsap_1237859" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6" style="height:260px"></div><div id="bsap_1251710" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div>',
					changepicturecallback: function(){ _bsap.exec(); }
				});
			});
			</script>
            
            
            
	</div>

A voir également:

1 réponse

Profil bloqué
28 mars 2013 à 09:39
Salut,

Sans trop regarder dans les détails, essaie de mettre un width à tes listes ul & li pour voir ce que ça donne.
0