include + scrollbar

09 sept. 2010, 02:22

Bonjour à tous,

J'essaye de me faire une petite page avec mes quelques connaissances ...
J'utilise frequement la balise include qui ne me pose pas de soucis mais aujourd'hui ... les choses sont différentes.

Je fais donc appel a votre savoir pour solliciter un petit coup de main :

Donc dans l'idée j'ai une page dans laquelle j'ai mis un tableau avec une largeur de 100%
dans ce tableau une balise include qui appel la deuxième page.

dans la deuxième page j'ai un tableau avec une ligne et 50 colonnes, chaque colonne contient une photo de 500px de hauteur.

L'idée est d'avoir une scrollbar sous les images mais pas sur la page ( de maniere a ce que le reste du contenu reste fixe )

le rendu final devrai ressembler a ça : http://mondino-update.net/index.php?page=1
mais pour le moment j'ai ça : http://vosimagesautrement.com/yoanncombronde/

la scrollbar n'est donc pas ou je le souhaite ....

je met le code ci dessous :

page 1 :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #666666;
}
.Style2 {color: #CCCCCC; font-family: Arial, Helvetica, sans-serif; }
.Style3 {
	font-size: 16px;
	font-weight: bold;
}
.Style4 {font-size: 14px}
.Style5 {color: #CCCCCC; font-family: Arial, Helvetica, sans-serif; font-weight: bold; }
-->
</style></head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="331" align="center">  <div>
    <div style="width:;height:520px;overflow:auto;"><?php include "include_page01.php";?>
  </div></td>
  </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><div align="center"><img src="graph/ombrebas.gif" width="100%" height="48" /></div></td>
  </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><div align="center" class="Style2">
      <p class="Style3">YOANN</p>
    </div></td>
  </tr>
  <tr>
    <td><div align="center" class="Style5">
      <p class="Style4">PHOTOGRAPHE </p>
    </div></td>
  </tr>
  <tr>
    <td><div align="center" class="Style5">
      <p class="Style4">LYON</p>
    </div></td>
  </tr>
  <tr>
    <td><div align="center" class="Style5">
      <p class="Style4">06 88 45 57 88 </p>
    </div></td>
  </tr>
</table>
<p>&nbsp;</p>
</body>
</html>

page 2 :

Code : Tout sélectionner

<code type="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 30px;
	margin-right: 0px;
	margin-bottom: 0px;
}
-->
</style></head>

<body>
<table width="700" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="0%"><div align="left"><img src="img/0001.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0002.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0003.jpg" width="750" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0004.jpg" width="750" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0005.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0006.jpg" width="750" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0007.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0008.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0009.jpg" width="750" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0010.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0011.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0012.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0013.jpg" width="750" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0014.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0015.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0016.jpg" width="750" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0017.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0018.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0019.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0020.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0021.jpg" width="750" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0022.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0023.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0024.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0025.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0026.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0027.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0028.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0029.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0030.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0031.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0032.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0033.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0034.jpg" width="750" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0035.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0036.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0037.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0038.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0039.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0040.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0041.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0042.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0043.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0044.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0045.jpg" width="750" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0046.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0047.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0048.jpg" width="333" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0049.jpg" width="750" height="500" /></div></td>
    <td width="0%"><div align="left"><img src="img/0050.jpg" width="333" height="500" /></div></td>
  </tr>
</table>
</body>
</html>

donc si quelqu'un a une idée pour résoudre ce soucis !!!!! ben c'est bien volontier ...

merci d'avance

09 sept. 2010, 02:27

faut mettre le overflow sur le style de ta table
overflow-x : scroll;

09 sept. 2010, 02:36

donc au final je suis censé avoir ça sur la page 1 ?

Code : Tout sélectionner

<table width="100%" border="0" cellspacing="0" cellpadding="0" >
  <tr>
    <td height="331" align="center" ><td style="overflow-x : scroll">  <div>
    <div style="width:;height:520px;overflow:auto;"><?php include "include_page01.php";?>
  </div></td>
  </tr>

09 sept. 2010, 02:54

09 sept. 2010, 02:56

j'ai rajouté le td style !!!!

je suis à l'ouest c'est ça ? tu m'explique ?

09 sept. 2010, 02:59

j'ai rajouté le td style !!!!

je suis à l'ouest c'est ça ? tu m'explique ?

faut mettre le overflow sur le style de ta table

pourquoi avoir mis td ?

en plus tu vois bien que code est complétement faux
y'a 2 td a suivre 2 div d'ouverte 1 de fermé, l'autre td pas fermé

EDIT : revoi ta page aussi, t'as 2 fichiers html dans ta source

09 sept. 2010, 03:11

Bon je regarde ça de nouveau de main j'ai plus les yeux en face des trous :

J'ai quand même modifier le code, il doit être propre :

Code : Tout sélectionner

<table width="100%" border="0" cellspacing="0" cellpadding="0" ><
  <tr>
    <td height="331" align="center">
    <div style="width:100%;height:520px;overflow-x:scroll;"><?php include "include_page01.php";?>
  </div></td>
  </tr>
</table>

j'ai ajouter le -x sur le overflow, j'ai maintenant une scrollbar "grisée" au bon endroit mais je conserve toujours la scrollbar sur toute la page !!!

Mais je ne sais par contre pas appliqué un overflow ailleurs que sur une div !!!!! le soucis est surement là

09 sept. 2010, 03:18

c'est pareil pour toutes les balises,
par contre ta pas inclue ne devrais contenir que le tableau, et pas toute la page html

include + scrollbar

Qui est en ligne