scrollbar horizontale seulement

Bonjour,
Je réalise une visionneuse photo dont voici une copie d'écran de la version de dev ci-dessous :

http://nixar.free.fr/affichage_galerie.JPG
Mon problème se situe au niveau de l'affichage des miniatures : en effet je voudrais que le panel n'affiche que l'ascenseur horizontal (pour faire défiler comme une pellicule). Malgré ma configuration ci-dessous, je me retrouve systématiquement avec un double ascenseur (comme sur la photo).

Code:

---

1 2 3 4 5 6 7 8

<asp:Panel ID="PanelPellicule" CssClass="PlusADroite AligneMilieu PanelPellicule" runat="server" Height="120px" Width="760px" style="vertical-align: middle; line-height:120px;" ScrollBars="Horizontal" HorizontalAlign="Center"> <asp:UpdateProgress ID="UpdateProgressPellicule" runat="server" DisplayAfter="100" DynamicLayout="true"> <ProgressTemplate> <asp:Image ID="ImageUpdateProgressPellicule" runat="server" ImageAlign="Middle" ImageUrl="~/images/ajax-loader-DDL.gif" /> Mise à jour des miniatures... </ProgressTemplate> </asp:UpdateProgress> </asp:Panel>

---

Comment faire en sorte que le panel ne s'agrandisse qu'horizontalement, et n'affiche qu'un ascenseur horizontal?

Merci de vos réponses.

Nixar

je pense que cela peut se resoudre en css peux tu me montrer le code générer de ton update panel. ainsi que les css

BOnjour et merci de ta réponse,

Voici le code html généré :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

//Conteneur <div style="height: 120px; width: 760px; overflow-x: scroll; text-align: center; vertical-align: middle; line-height: 120px;" class="PlusADroite AligneMilieu PanelPellicule" id="PanelPellicule"> //Update progress lors du chargement <div style="display: none;" id="UpdateProgressPellicule">   <img align="middle" style="border-width: 0px;" src="../../../../../images/ajax-loader-DDL.gif" id="ImageUpdateProgressPellicule"/> Mise à jour des miniatures... </div> //les vignettes <input align="middle" type="image" style="border-width: 0px;" src="Vignettes/Copie%20de%20Arriere_200k.jpg" class="Image" name="ctl08"/> <input align="middle" type="image" style="border-width: 0px;" src="Vignettes/Copie%20(6)%20de%20Arriere_200k.jpg" class="Image" name="ctl09"/> <input align="middle" type="image" style="border-width: 0px;" src="Vignettes/Copie%20(5)%20de%20Arriere_200k.jpg" class="Image" name="ctl10"/> <input align="middle" type="image" style="border-width: 0px;" src="Vignettes/Copie%20(4)%20de%20Arriere_200k.jpg" class="Image" name="ctl11"/> </div>

---

Merci de ta réponse, et merci de passer du temps sur mon problème !!

Nixar
Le CSS :

Code:

---

1 2 3 4 5 6 7 8 9 10

.PanelPellicule {StyleSheet.css (ligne 436) } .PlusADroite {StyleSheet.css (ligne 417) clear:none; float:left; } .AligneMilieu {StyleSheet.css (ligne 232) margin:0 auto; text-align:center;

---

Pas de problème :chin:.

Alors en premier lieux il faut retirer le line-height. Il ne sert pas le height suffit.

sinon ton problème vient du fait que le contenu n'a pas de taille supérieur au contenant.
Les element input sont des element inline qui se mettent les uns à la suite des autres tant qu'ils le peuvent.
lorsque qu'il arrive à la largeur maximal(width) "il passe à la ligne"(enfin pas vraiment c'est tjs une seule ligne mais qui se continue en dessous) peu importe le overflow.(pas la peine de précise de largeur aux elments inline il ne la prenne pas en compte)
ex: pour resoudre se probleme il faudrait qu'il soit dans une div(ou tt autre élement block) avec une largeur précisée superieur au contenant et qui contienne tout tes input.

Je sais pas si j'ai était clair? (pas facile à expliquer à l'écrit, n'hesite pas si tu comprend pas).
Comment génére tu tes input image? pour voir ce qu'on peut faire pour résoudre ton probléme.

Booooon... ON avance :D
Alors voilà : j'ai encapsulé la création de mes images comme suit :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

foreach (DataRow Ligne in DataSetPhotosDeLaGalerie.Tables[0].Rows) { // Création du conteneur Panel Conteneur = new Panel(); // Lui assigne une taille fixe Conteneur.Width = new Unit(100); // Les CSS son en dessous Conteneur.CssClass = "PlusADroite MarginLeftRight20px"; ImageButton Miniature = new ImageButton(); Miniature.ImageUrl = Ligne["PhotoVignettePath"].ToString(); Miniature.ImageAlign = ImageAlign.Middle; Miniature.Command += new CommandEventHandler(Miniature_Command); Miniature.CommandName = Ligne["PhotoVignettePath"].ToString(); Miniature.CommandArgument = Ligne["PhotoId"].ToString(); Miniature.CssClass = "Image"; Conteneur.Controls.Add(Miniature); PanelPellicule.Controls.Add(Conteneur);   }

---

Le CSS (la classe PlusADroite sert à faire s'afficher toutes les vignettes côte à côte):

Code:

---

1 2 3 4 5 6 7 8 9 10 11

.MarginLeftRight20px { margin-left:20px; margin-right:20px; } .PlusADroite { float:left; clear:none;   }

---

Du coup, la on a bien un div qui encapsule chaque input inline...
Ce que ca donne :
http://nixar.free.fr/scroll2.JPG


Sauf que là, il passe quand même à la ligne quand il bute contre le bord de mon panelPelicule...

Du coup je ne comprends pas : où est le souci ?

Merci !!

c'est pas tt a fait comme ca le fait de mettre float a élément block le passe en inline.

La solution c'est de "calculer" la taille de ton conteneur par rapport à ton nombre d'image.

et le conteneur dois contenir toute les images.

Code:

---

1 2 3 4 5 6

<div style="width:400px;"> <input align="middle" type="image" style="border-width: 0px;" src="Vignettes/Copie%20de%20Arriere_200k.jpg" class="Image" name="ctl08"/> <input align="middle" type="image" style="border-width: 0px;" src="Vignettes/Copie%20(6)%20de%20Arriere_200k.jpg" class="Image" name="ctl09"/> <input align="middle" type="image" style="border-width: 0px;" src="Vignettes/Copie%20(5)%20de%20Arriere_200k.jpg" class="Image" name="ctl10"/> <input align="middle" type="image" style="border-width: 0px;" src="Vignettes/Copie%20(4)%20de%20Arriere_200k.jpg" class="Image" name="ctl11"/> <div>

---

Merci beaucoup pour toutes tes indications, c'est résolu... :)