Discussion :

[mrmaxwell]

Bonjour,

Je reviens vers vous une nouvelle fois pour faire appel à votre science qui m'a toujours dépannée en cas de coup dur :-)

Aujourd'hui est un grand jour puisque j'ai lancé notre nouvelle version de notre site web www.reusetfils.fr
Beaucoup de choses ont changées dont la plus importante, l'intégration du php au site.

Mais dans la rubrique réalisation vous pourrez voir que j'ai voulu afficher plusieurs galerie d'images horizontales avec une barre de défilement horizontales
Pour ce faire j'ai utilisé ce code

HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div class="gal" >
	<p class="galerie">
		<a class="fancy galerie" rel="gallery" href="pic/galeries/grande/porte1.jpg"><img  class="galerie" src="pic/galeries/petite/porte1.jpg" ></img></a>
		<!--... (repetition de liens divers) -->
		<a class="fancy galerie" rel="gallery" href="pic/galeries/grande/porte9.jpg"><img  class="galerie" src="pic/galeries/petite/porte9.jpg" </img></a>
	</p>
</div>

CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
div.gal{
	overflow-x:auto;
}
 
p.galerie{
	height:230px;
	white-space:nowrap;
}
img.galerie{
	padding:5px 100px 0px 0px;
}
 
a.galerie{display:inline-block;} // tentative de solution inefficace

Tout fonctionne bien sous firefox opera safari et chrome mais internet explorer me fait de la résistance. En effet il semble refuser d'utiliser la valeur nowrap et m'affiche donc un paragraphe avec toutes les images affichées en faisant des retours a la lignes quand "c'est necessaire".

J'ai fouillé un peu partout mais sans succès. Y aurait il une bonne âme pour m'aiguiller ?

D'avance je vous remercie

[NoSmoking]

Bonjour,
il te faut corriger pas mal de maladresse, les balises img sont auto-fermante donc

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<!-- un façon d'écrire -->
<img src="nom_image.jpg" alt="mon image">
<!-- une autre façon -->
<img src="nom_image.jpg" alt="mon image" />
<!-- mais jamais -->
<img src="nom_image.jpg" alt="mon image"></img>

concernant ton problème, essaies

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
p.galerie {
    height: 230px;
    float:left;
}

[mrmaxwell]

Merci d'avoir répondu si vite,

Le coup de la balise auto-fermante, je ne connaissais pas. Je savais que l'on pouvait fermer ces balises images avec un slash, mais il me semblait que lors d'une tentative de validation W3C cette syntaxe était remontée avec un commentaire négatif. Je pensais donc qu'il s'agissait plus d'un problème de "propreté du code".

Par contre je ne comprends pas pourquoi tu me conseilles d'appliquer un float:left pour le paragraphe galerie alors que mon problème se situe à l'intérieur de ce dernier. Peux tu m'expliquer ? Bien évidemment je vais faire l'essai mais si c'était bien là ma réponse je ne comprends pas pourquoi (et moi j'aime bien comprendre )

Merci encore

[Edit]

Après test effectivement ce n'est pas concluant, pour plus de clarté je vous poste 2 images pour vous montrer ce que j'obtiens avec les autres navigateurs (qui me convient parfaitement) et avec internet explorer.

Chez les autres


Chez IE


[RE-Edit]

J'ai corrigé les balises des images cependant ça n'a pas eu d'incidence sur mon problème. Si quelqu'un a une autre piste je suis preneur Merci

[mrmaxwell]

Bonjour je reviens vers vous avec quelques éléments supplémentaires

Sur le conseil d'un utilisateur j'ai utilisé la balise span avec ce code CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
div.gal{
    width:960px;
    height:250px;
    overflow-x:scroll;
}
span.galerie{   height:230px;
    white-space:nowrap;
}

Associé a ce code HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div class="gal" >
    <span class="galerie">
        <a class="fancy galerie" rel="gallery" href="pic/galeries/grande/porte8.jpg"><img  class="galerie" src="pic/galeries/petite/porte8.jpg" /></a>
        <a class="fancy galerie" rel="gallery" href="pic/galeries/grande/porte9.jpg"><img  class="galerie" src="pic/galeries/petite/porte9.jpg" /></a>                                                                                                       
    </span>
</div>

j'ai supprimé quelques liens pour la lisibilité.

Si j'ai réussi à obtenir le même résultat pour firefox et compagnie Internet explorer résiste et m'affiche deux scrollbars (verticale et horizontale), en effectuant des retours à la ligne avec les images :/

Je commence à me demander si il ne s'agit pas du fait que cela soit des liens ( balises <a>) contenant des images au lieu d'images simples ...

[mrmaxwell]

On m'a donné la solution sur le forum http://social.msdn.microsoft.com/ et je vais vous la confier au cas où elle vous aiderait :

le code css doit ressembler à ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
div.gal{
    width:960px;
    height:250px;
    overflow-x:scroll;
}
 
span.galerie {
        display:inline-block;
        height:230px;
        white-space:nowrap !important;
                 }
a.galerie{
        padding:5px 25px 0px 0px;}

C'est le !important qui fait la correction pour internet explorer. Je cherche encore pourquoi mais ça fonctionne enfin.

Merci à tous de votre aide et de votre attention en tout cas