Probleme de scroll horizontal ...
Résolu/Fermé
jirujiru
Messages postés
6
Date d'inscription
mardi 26 janvier 2010
Statut
Membre
Dernière intervention
27 janvier 2010
-
26 janv. 2010 à 16:27
jirujiru Messages postés 6 Date d'inscription mardi 26 janvier 2010 Statut Membre Dernière intervention 27 janvier 2010 - 27 janv. 2010 à 17:42
jirujiru Messages postés 6 Date d'inscription mardi 26 janvier 2010 Statut Membre Dernière intervention 27 janvier 2010 - 27 janv. 2010 à 17:42
Bonjour à tous,
Voila, j'ai un gros problème sur dreamweaver, en html. Mes connaissances sont très limitées (voir nules!) en web.
Je suis en train de faire un site internet, fait dans photoshop puis découpé et importé dans dreamweaver.
Jusque la tout va bien ...
Cependant, j'aimerais insérer dans le bloc principal (de taille fixe) une galerie photo avec scroll horizontal, mais je bloque depuis deux jours! j'ai épluché un tas de site francophone, anglophone ... sans résultats.
Merci d'avance!
Voila, j'ai un gros problème sur dreamweaver, en html. Mes connaissances sont très limitées (voir nules!) en web.
Je suis en train de faire un site internet, fait dans photoshop puis découpé et importé dans dreamweaver.
Jusque la tout va bien ...
Cependant, j'aimerais insérer dans le bloc principal (de taille fixe) une galerie photo avec scroll horizontal, mais je bloque depuis deux jours! j'ai épluché un tas de site francophone, anglophone ... sans résultats.
Merci d'avance!
A voir également:
- Probleme de scroll horizontal ...
- Scroll lock clavier ✓ - Forum Excel
- Scroll lock - Forum Windows
- Filtre horizontal excel ✓ - Forum Bureautique
- Où se trouve la touche arrêt Défil sur mon clavier Logitech - Forum Clavier
- Problème écran tv traits horizontaux - Forum TV & Vidéo
6 réponses
avion-f16
Messages postés
19252
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
10 février 2025
4 505
26 janv. 2010 à 18:56
26 janv. 2010 à 18:56
Dans ton CSS :
#gallery { overflow:hidden; overflow-x:scroll; height:500px; // hauteur de la plus grande image + 20 white-space:nowrap; }Et le HTML :
<div id="gallery"> <img src="image1" alt="Image" /> <img src="image2" alt="Image" /> <img src="image3" alt="Image" /> <img src="image4" alt="Image" /> </div>
avion-f16
Messages postés
19252
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
10 février 2025
4 505
27 janv. 2010 à 17:33
27 janv. 2010 à 17:33
Les commentaires en CSS ne se font pas à l'aide de "//", donc le navigateur bloque en lisant "463+20" puisque ce n'est pas un commentaire et c'est invalide en CSS.
jirujiru
Messages postés
6
Date d'inscription
mardi 26 janvier 2010
Statut
Membre
Dernière intervention
27 janvier 2010
1
27 janv. 2010 à 10:34
27 janv. 2010 à 10:34
Bonjour avion-f16,
merci beaucoup pour tes conseils, ça a résolu une partie de mes problèmes!
Mais, ce que je n'arrive pas à faire, c'est de placer toutes mes images à l'horizontale.
Les deux premières le sont, mais celles qui suivent se placent en dessous (donc invisibles).
Comme si quelques chose les forçaient à aller se placer dessous car elles n'ont pas la place dans le <div>; hors elles le devraient grace au scroll horizontal ...
je peux écrire mon code si besoin est.
D'avance merci pour votre aide!
merci beaucoup pour tes conseils, ça a résolu une partie de mes problèmes!
Mais, ce que je n'arrive pas à faire, c'est de placer toutes mes images à l'horizontale.
Les deux premières le sont, mais celles qui suivent se placent en dessous (donc invisibles).
Comme si quelques chose les forçaient à aller se placer dessous car elles n'ont pas la place dans le <div>; hors elles le devraient grace au scroll horizontal ...
je peux écrire mon code si besoin est.
D'avance merci pour votre aide!
avion-f16
Messages postés
19252
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
10 février 2025
4 505
27 janv. 2010 à 13:55
27 janv. 2010 à 13:55
"white-space:nowrap;" sert justement à ne pas faire de retour à la ligne et ça fonctionne parfaitement sur Firefox.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
jirujiru
Messages postés
6
Date d'inscription
mardi 26 janvier 2010
Statut
Membre
Dernière intervention
27 janvier 2010
1
27 janv. 2010 à 15:34
27 janv. 2010 à 15:34
J'ai pourtant copier coller le css et html que tu m'as indiqué.
voici mon code :
Si tu veux bien prendre le temps de jeter un oeuil, je t'en serais très reconnaissant!
voici mon code :
<html> <head> <title>M - Galerie P</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <script type="text/javascript"> <!-- function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> <style type="text/css"> <!-- #apDiv1 { position:absolute; left:148px; top:387px; width:893px; height:288px; z-index:1; } #gallery { overflow:hidden; overflow-x:scroll; height:483px; // 463+20 white-space:nowrap; } --> </style> </head> <body bgcolor="#717467" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/Galerie/images/images/Q-M2.jpg','images/Galerie/images/images/Site_04_2.jpg','images/Galerie/images/images/Site_05_2.jpg','images/Galerie/images/images/Site_06_2.jpg','images/Galerie/images/images/Site_09_2.jpg','images/Galerie/images/images/Site_10_2.jpg','images/Galerie/images/images/Site_11_2.jpg','images/Galerie/images/images/Site_12_2.jpg','images/Galerie/images/images/Site_14_2.jpg')"> <div align="center"> <p> <!-- Save for Web Slices (Site Galerie Modele.psd) --> <p> <p> </p> <p> </p> <table width="950" height="601" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01"> <tr> <td colspan="6"> <img src="images/Galerie/images/Site-Galerie-Modele_01.jpg" width="593" height="39" alt=""></td> <td colspan="2" rowspan="2"> <img src="images/Galerie/images/Site-Galerie-Modele_02.jpg" width="357" height="80" alt=""></td> </tr> <tr> <td colspan="2"><a href="Patines.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image21','','images/Galerie/images/Q-M2.jpg',1)"><img src="images/Galerie/images/Q-M.jpg" name="Image21" width="120" height="41" border="0"></a></td> <td><a href="Couleurs.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image22','','images/Galerie/images/Site_04_2.jpg',1)"><img src="images/Galerie/images/Site-Galerie-Modele_04.jpg" name="Image22" width="104" height="41" border="0"></a></td> <td><a href="Décoration.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image23','','images/Galerie/images/Site_05_2.jpg',1)"><img src="images/Galerie/images/Site-Galerie-Modele_05.jpg" name="Image23" width="134" height="41" border="0"></a></td> <td><a href="Nouveautés.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image24','','images/Galerie/images/Site_06_2.jpg',1)"><img src="images/Galerie/images/Site-Galerie-Modele_06.jpg" name="Image24" width="149" height="41" border="0"></a></td> <td> <img src="images/Galerie/images/Site-Galerie-Modele_07.jpg" width="86" height="41" alt=""></td> </tr> <tr> <td colspan="8"> <img src="images/Galerie/images/Site-Galerie-Modele_08.jpg" width="950" height="13" alt=""></td> </tr> <tr> <td rowspan="2"> <img src="images/Galerie/images/Site-Galerie-Modele_09.jpg" width="13" height="507" alt=""></td> <td colspan="6"> <div><div id="gallery"> <img src="images/_DSC8007S.jpg" alt="Image" /> <img src="images/_DSC8007S.jpg" alt="Image" /> <img src="images/_DSC8007S.jpg" alt="Image" /> </div> </td> <td rowspan="2"> <img src="images/Galerie/images/Site-Galerie-Modele_11.jpg" width="14" height="507" alt=""></td> </tr> <tr> <td colspan="6"> <img src="images/Galerie/images/Site-Galerie-Modele_12.jpg" width="923" height="24" alt=""></td> </tr> <tr> <td> <img src="images/Galerie/images/images/spacer.gif" width="13" height="1" alt=""></td> <td> <img src="images/Galerie/images/images/spacer.gif" width="107" height="1" alt=""></td> <td> <img src="images/Galerie/images/images/spacer.gif" width="104" height="1" alt=""></td> <td> <img src="images/Galerie/images/images/spacer.gif" width="134" height="1" alt=""></td> <td> <img src="images/Galerie/images/images/spacer.gif" width="149" height="1" alt=""></td> <td> <img src="images/Galerie/images/images/spacer.gif" width="86" height="1" alt=""></td> <td> <img src="images/Galerie/images/images/spacer.gif" width="343" height="1" alt=""></td> <td> <img src="images/Galerie/images/images/spacer.gif" width="14" height="1" alt=""></td> </tr> </table> <!-- End Save for Web Slices --> </body> </html>
Si tu veux bien prendre le temps de jeter un oeuil, je t'en serais très reconnaissant!
jirujiru
Messages postés
6
Date d'inscription
mardi 26 janvier 2010
Statut
Membre
Dernière intervention
27 janvier 2010
1
27 janv. 2010 à 17:42
27 janv. 2010 à 17:42
Exact! Grand merci à toi avion-f16!