none
Rendu visuel white-space: nowrap RRS feed

  • Question

  • Bonjour,

    Je viens vers vous après plusieurs jours de recherches infructueuses. Dans le cadre de l'élaboration de notre site web www.reusetfils.fr je  fais face a un affichage différent de la rubrique réalisation ( www.reusetfils.fr/index.php?p=realisation ) lorsque le navigateur est internet explorer.

    Le principe : Je souhaite faire afficher des galeries d'images horizontales que l'on puisse faire défiler à l'aide de l’ascenseur horizontale au dessous. Ces images sont en fait des liens (balises <a> ) que j'associe avec la librairie fancybox ( http://fancybox.net/ ) pour offrir aux utilisateurs la possibilité de "zoomer" (en fait cela affiche un autre fichier image).

    Le code utilisé : Pour le HTML voici une partie du code utilisé pour une galerie:

    <div class="gal" >
    	<span class="galerie">
    		<a class="fancy galerie" rel="gallery" href="pic/galeries/grande/porte1.jpg"><img  class="galerie" src="pic/galeries/petite/porte1.jpg" /></a>
    
    <!-- je vous épargne les multiples déclarations -->
    		<a class="fancy galerie" rel="gallery" href="pic/galeries/grande/porte9.jpg"><img  class="galerie" src="pic/galeries/petite/porte9.jpg" /></a>																										
    	</span>
    </div>

    et le code de la feuille de style associé :

    span.galerie{	height:230px;
    		white-space:nowrap;
    		}
    
    div.gal{
    	width:960px;
    	height:250px;
    	overflow-x:scroll;
    	}
    
    span.galerie{	height:230px;
    		white-space:nowrap;
    				}
    img.galerie
    {
    	padding:5px 100px 0px 0px;
    }

    Le résultat : Avec tous les navigateurs que j'ai pu tester ( firefox, opera, safari, chrome) le résultat est conforme a mon souhait. Cependant Internet explorer persiste a afficher les images en effectuant des retours à la ligne une fois que la largeur de la div est dépassé, en créant une barre d'ascenseur verticale.

    J'espère que vous pourrez me donner des pistes pour que nous puissions harmoniser le rendu de notre site web.

    D'avance je vous remercie de votre attention et de votre aide

    mardi 4 mars 2014 08:49

Réponses

Toutes les réponses