Probleme de scroll horizontal ...

Résolu

jirujiru Messages postés 6 Date d'inscription Statut Membre Dernière intervention -
jirujiru Messages postés 6 Date d'inscription Statut Membre Dernière intervention - 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!

Afficher la suite

A voir également:

Probleme de scroll horizontal ...
Scroll lock - Forum Windows
Touche scroll lock ✓ - Forum Excel
Touche "scroll lock" - Forum Windows
Ecran horizontal - Guide
A quoi sa sert le boutton arrêt defil ✓ - Forum Windows

6 réponses

Réponse 1 / 6

avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

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 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

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 Statut Membre Dernière intervention 1

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 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

"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 Statut Membre Dernière intervention 1

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 Statut Membre Dernière intervention 1

Probleme de scroll horizontal ...

6 réponses

Votre réponse

Discussions similaires