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

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!

A voir également:

Probleme de scroll horizontal ...
Filtre horizontal excel ✓ - Forum Bureautique
Problème écran tv traits horizontaux - Forum Matériel & Système
Scroll lock clavier ✓ - Forum Excel
Scroll lock - Forum Windows
TV QLED lignes blanches horizontale traversent l'écran - Forum Téléviseurs

6 réponses

Réponse 1 / 6

avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 505
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>

Réponse 2 / 6

avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 505
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.

Réponse 3 / 6

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

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!

Réponse 4 / 6

avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 505
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

Réponse 5 / 6

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

J'ai pourtant copier coller le css et html que tu m'as indiqué.

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>&nbsp;</p>
<p>&nbsp; </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!

Réponse 6 / 6

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

Discussions similaires