Obtenir un scroll sur une galerie d'images

Version imprimable

Bonjour

je tente de faire exactement la même chose qu'ici : http://www.developpez.net/forums/d69...rizontal-html/mais je n'arrive à rien avec mon div ; Je me retrouve toujours avec un paquet d'image super large qui rend ma page trés large et le scroll se fait sur la page, pas sur les images...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title>##############test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body bgcolor="#000000" onload="Affich()" > <table width="50%" style="border:solid 2px red; " align="center"> <tr height="200" valign="middle" align="center"> <td> <img src='mesimages/1.jpg' alt='"mesimages/1.jpg"' height="300" /> </td> </tr> <tr> <td> <div style="width:100%; overflow:auto ;"> <table border="1" style="border:solid 2px green; style="width:100%;overflow:hidden;"> <tr> <td><img src='mesimages/1.jpg' alt='' height="190" title="1C"/></td> <td><img src='mesimages/2.jpg' alt='' height="190" title="2C"/></td> <td><img src='mesimages/3.jpg' alt='' height="190" title="3C"/></td> <td><img src='mesimages/4.jpg' alt='' height="190" title="4C"/></td> <td><img src='mesimages/5.jpg' alt='' height="190" title="5C"/></td> <td><img src='mesimages/6.jpg' alt='' height="190" title="6C"/></td> </tr> </table> <div> </td> </tr> </table> </body> </html>
Ce code est sensé faire un tableau de 2 lignes qui prend 50% de la largeur de la page.
La première ligne contient une grande photo.
La seconde ligne contient une série de photos cote à cote qui doivent pouvoir etre "scrollées" dans le tableau qui ne fait que 50% de la largeur de l'écran.

bref, ca doit ressembler à ceci
http://lescourroies.free.fr/pages/photos03.html

Merci par avance de me débloquer

15/08/2009, 14h47
12monkeys

Bonjour

Dans ton code tu as une erreur : tu indiques une balise style dans une autre balise style.

Code:

<table border="1" style="border:solid 2px green; style="width:100%;overflow:hidden;">

Bonjour

Merci pour cette erreur mais malheureusement cela ne change rien à l'affichage obtenu

maintenant j'ai ceci pour le dernier <TR> concerné (le reste du code n'a pas changé)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <tr > <td colspan=3> <div width="100%" style="overflow:auto;"> <table border="2" > <tr > <SCRIPT> for(a=1;a<(nom.length+1);a++) { document.write('<td><A HREF="javascript:ChangeImage('+a+')"><img src="'+dossier+nom[a]+'.jpg" alt="" height="190" title="'+desc[a]+'"/></a></td>'); } </SCRIPT> </tr> </table> <div> </td> </tr>
Il y a l'erreur d'écriture que vous décrivez en moins et la création dynamique des images à partir d'un tableau.

Ma page est toujours fonctionnelle mai j'a itoujours la largeu de la page qui prend la largeur de toutes les images réunies...

J'ai essayé de déplacer le div, de recharger les images avec autant de div...je sèche.

Merci

16/08/2009, 00h05
12monkeys

Ce que tu veux c'est le scroll sur la seconde ligne du tableau, et d'après ce que j'ai compris, ce que tu as c'est le scroll sur toute la page ?

Mais quand j'accède à ton site, tout fonctionne...

Tu utilises quelle navigateur pour tester ? Avec Firefox 3 et IE 7 et 8 tout fonctionne a priori ou alors j'ai pas tout compris...
16/08/2009, 11h31
petitours

1 pièce(s) jointe(s)

Bonjour

Citation:

Envoyé par 12monkeys

Mais quand j'accède à ton site, tout fonctionne...

A quel site ? www.68hc08.net ?
Car ce n'est pas à celui la que je fais référence ; C'est une autre page html, (ci dessous un zip avec la démo complète.
Je la teste avec IE8.0 et firefox 3.0.13.

J'ai effectivement la table qui prend la largeur de toutes les images et le scroll qui se fait donc sur la page entière devenue bien plus large que l'écran.
Je souhaite que la table fasse que 500pix avec un scroll sur la ligne ou il y a les images.

Merci

Pour le site je croyais que tu parlais de lescourroies.free.fr/

Dans ton code change juste les deux premières lignes ainsi :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
	<td colspan="3" style="width:500%;">
	<div style="width:500px;overflow:auto;white-space:nowrap;"> 
	<table border="2" > 
	<tr>
	<SCRIPT>
	for(a=1;a<(nom.length+1);a++) {
		document.write('<td><A HREF="javascript:ChangeImage('+a+')"><img src="'+dossier+nom[a]+'.jpg" alt="" height="190" title="'+desc[a]+'"/></a></td>');
	}
	</SCRIPT>
	</tr>
	</table> 
	<div> 
	</td>

16/08/2009, 17h48
petitours

Je me doutais bien que c'était un truc plus gros que moi...

Merci beaucoup !
16/08/2009, 19h41
12monkeys

J'ai juste écrit une grosse bêtise et je l'ai même pas vue :aie:

Enlève le style="width:500%;" sur le td (la bêtise étant le 500%)

Et pense aussi à externaliser ton code CSS...