Problème image défilante

**reg64** · 14/12/2006, 09h12

bonjour,

j'ai repris un morceau de code pour faire défiler des images verticalement, en fouillant un peu sur les autres postes j ai vu que la balise MARQUEE est déconseillée car c'est une balise propre IE.
mes images défile parfaitement dans une cellule, mais le problème c'est que je n arrive pas a adapter automatiquement les images qui défile á la taille de la cellule, vous pouvez voir le resultat dans mon site (on bas a gauche)

En plus, avec FF mes images dépasse la cellule de mon tableau( je n'ai pa ce problème la dans IE).
voici le code qui permet de défiler les images que j'ai inseré dans ma cellule:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
37
38
39
40
41
42
43
44
45
46
47
48
<TD  valign=top width=200 border=0 bgcolor=#aaaaaa>
<style type="text/css">
<!--
.posrelative
{
POSITION: relative;
}
#conteneur
{
OVERFLOW: visible;
WIDTH: 200px;
CLIP: rect(0px 200px 614px 0px);
POSITION: absolute;
 
}
-->
</style>
 
 
		<DIV ID="conteneur" onmouseover="MyBox.stop();" onmouseout="MyBox.start();" width=200 >
<DIV ID="info1" class="posrelative" width=200>
<IMG class="posrelative" SRC="image/foto1.JPG"  WIDTH=190 border=1 >
</DIV>
<DIV ID="info1" class="posrelative" width=200>
<IMG class="posrelative" SRC="image/foto2.JPG" WIDTH=190 border=1 >
</DIV>
 
<DIV ID="info1" class="posrelative" width=200>
<IMG class="posrelative" SRC="image/foto3.JPG"  WIDTH=190 border=1 >
</DIV>
 
<DIV ID="info1" class="posrelative" width=200>
<IMG class="posrelative" SRC="image/foto4.JPG"  WIDTH=190 border=1 >
</DIV>
<DIV ID="info1" class="posrelative" width=200>
<IMG class="posrelative" SRC="image/foto5.JPG"  WIDTH=190 border=1 >
</DIV>
<DIV ID="info1" class="posrelative" width=200>
<IMG class="posrelative" SRC="image/foto6.JPG"  WIDTH=190 border=1 >
</DIV>
<DIV ID="info1" class="posrelative" width=200>
<IMG class="posrelative" SRC="image/foto7.JPG"  WIDTH=190 border=1 >
</DIV>
<DIV ID="info1" class="posrelative" width=200>
<IMG class="posrelative" SRC="image/foto8.JPG"  WIDTH=190 border=1 >
</DIV>
</DIV>
		</TD>

Merci d'avance

**Bisûnûrs** · 14/12/2006, 09h26

Un id est unique !

Qui plus est, une balise <td> ne doit pas contenir de balise <div> et encore moins de balise <style>.

PS : Si tu pouvais indenter ton code correctement ça ne ferait de mal à personne ...

**reg64** · 14/12/2006, 09h39

Merci pour ta réponse et désolé pour mon ignorance. mais je suis nocive...il ya 2 semaine je ne connaissais RIEN en HTML, js, PHP...... c est mon 1er site.
Ok pour la balise <TD>
que dois-je faire pour que mon CONTENEUR prend la hauteur de mon tableau?

**trotters213** · 14/12/2006, 09h47

La mise en page sous forme de tableau est à bannir : ils ne sont pas fait pour ça.

Tu peux également définir un doctype (XHTML de préférence.
Mettre tes balises en minuscules.
Fermer tes balises (tu ne fermes même pas les balises <p></p>

).
Oublier la balise <font> et toute la mise en page dans le code HTML au profit du CSS.

Inspire toi de ceci pour faire ta mise en page.

C'est un conseil car si un jour tu dois modifier le design, tu vas en ch... bien comme il faut

**reg64** · 14/12/2006, 10h14

merci les gars je vais me pencher dessus....

**trotters213** · 14/12/2006, 10h19

Pense à nous donner ton résultat une fois que tu auras modifié ta mise en page.

**trotters213** · 15/12/2006, 08h47

avec ton clip tu essaie de cacher ce que ton div contient ?
Si c'est le cas utilises plutôt display:none(pour ne pas afficher ton div) et display:block pour le faire apparaitre plutôt que clip.

**reg64** · 15/12/2006, 18h17

salut,
pour repondre a ta question, non je ne veux pas cacher ce qu'est dans le div...
j'ai essaié plusieurs truc est j ai reussi finalement a adapter les dimenssions de mon clip a celle du div.
dans IE ca marche niquel.....mais dans FF le Clip ne rentre pas dans mon div.. j'ai simplifier au MAXIMUM mon code en enlevant toutes les fonctions qu ont rien avoir avec le défilement d images.
si vous avez une solution pour remédier a ca je suis prenneur...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<?
$repimg = "image/"; // répertoire des images
?>
 
<HTML><HEAD><TITLE>Cal Senyoret</TITLE>
<link rel="stylesheet" type="text/css" href="styles.css">
<script language="JavaScript" src="scroll.js"></script>
<script language="JavaScript" type="text/javascript">
<!--declaration de la fonction Init qui permet de défiler des images....Ici Images a  droite. voir en haut declaration de la Librerie scroll.js .
 function Init()
   {
   MyBox = new Box('MyBox', 'conteneur', 1, 40, 20, 1);
   MyBox.start();
}
//-->
</script>
<style type="text/css">
                        <!--
                        .posrelative
                        {               
                        POSITION: relative;
                        }                               
                        #conteneur
                        {       
                                POSITION: relative;
                        OVERFLOW: hidden;
                        WIDTH: 200px;
                        height=200px;
                        CLIP: rect( 0px 200px 200px 0px);
                        
                        top:0px;
                        margin: 0px;
                        padding: 5px;
                        
                        }
                        -->
                        </style>	
</HEAD>
<BODY onload="Init() " class=fond><center>
<div id="cadre">
	<div id="bandeau" >
	</div>			
	<div id="menu">		
	</div>	
	<div id="contenu">
	<div id="titre">		
	</div>				
	</div>			
	<div id="image">					
			<DIV ID="conteneur" onmouseover="MyBox.stop();" onmouseout="MyBox.start();" >
 
				<DIV ID="info1" class="posrelative" width=200>
				<IMG class="posrelative" SRC="images/foto1.JPG"  WIDTH=190 border=1 >
				</DIV>
 
				<DIV ID="info2" class="posrelative" width=200>
				<IMG class="posrelative" SRC="images/foto2.JPG" WIDTH=190 border=1 >
				</DIV>
 
				<DIV ID="info3" class="posrelative" width=200>
				<IMG class="posrelative" SRC="images/foto3.JPG"  WIDTH=190 border=1 >
				</DIV>
			</DIV>
</div>
</div>
</BODY></HTML>

puis fichier css

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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
37
38
39
40
41
42
43
44
45
div#cadre {
 
	width:900px;
	height:300px;
	background-color:#aaaaaa;
}
div#bandeau {
 
	width:100%;
	height:150px;
	background-color:#cccccc;
	}
div#menu {
	text-align:center;
	float:left;
	width:150px;
	height:200px;
	background-color:#eeeeee;
	}
div#contenu {
	text-align:center;
	float:left;
	width:550px;
	height:200px;
	background-color:#999999;
	}
div#image {
	float:left;
	width:200px;
	height:200px;
	background-color:#777777;
 
	}
 
div#pied_page {
	clear:both;
	width:850px;
	height:50px;
	background-color:#33FF99;
	}
div#titre {	
	width:100%;
	height:57px;
 
	}

Merci d'avance

**reg64** · 16/12/2006, 20h14

salut,
je commence a désespéré, aprés plusieurs jours de recherche sur le net j ai pas reussi a trouver la solution

, j ai pensé a changer de script mais les scripts que je trouve ne son pas adapter a mon application, si vous avez quelque chose a me proposé je suis prenneur:
je cherche un script qui permet de défiler en boucle des images verticalement et qui marche sur IE et FF.
merci bcp

**trotters213** · 18/12/2006, 08h28

Regarde être-être ceci (paragraphe : Demos - Photo galleries).
Si rien ne te vas, essaie de nous expliquer un peu mieux ton problème

**reg64** · 18/12/2006, 13h59

salut,
merci beaucoup pour le lien (trés interessant, il va me etre utilie pour mes prochaines applications) mais malheuresement j'ai pas touvé ce que je cherche.

je voudrais un script qui permet de défiler des images verticalement et en boucle avec arrêt lors du passage de la souris (compatible IE et FF).

j'ai trouvé un script interessant mais il me convient pas car à la fin de chaque boucle le défilement ne reprend pas instantanement (voir la pièce jointe).

merci bcp

**philippe281281** · 19/12/2006, 16h40

Envoyé par Bisûnûrs

Qui plus est, une balise <td> ne doit pas contenir de balise <div>

Au regard de quelle norme ?

**trotters213** · 20/12/2006, 09h01

Envoyé par philippe281281

Au regard de quelle norme ?

Je pense qu'il parlait au niveau sémantique et non syntaxique.

**philippe281281** · 20/12/2006, 11h32

Peut-être mais même du point de vue sémantique, pourquoi un élément de type bloc ne pourrait-il pas en contenir un autre ?
Plus précisément, pourquoi une cellule de tableau ne pourrait-elle pas contenir un bloc ? Rien ne dit que les tableaux ne servent qu'à contenir des élements 'texte' (ou plus généralement de type en ligne), non ?

Bah, je pense que Bisû a voulu dire qu'un tableau n'est pas destiné au genre de présentation de ce cas précis, ce qui est vrai, c'était juste mal exprimé, car ce n'est pas un problème d'emboîtement de balises selon moi

**trotters213** · 20/12/2006, 13h48

Envoyé par philippe281281

Bah, je pense que Bisû a voulu dire qu'un tableau n'est pas destiné au genre de présentation de ce cas précis, ce qui est vrai, c'était juste mal exprimé, car ce n'est pas un problème d'emboîtement de balises selon moi

C'était en tout cas à ceci que je pensais quand je t'ai dit "sémantiquement".

**reg64** · 20/12/2006, 18h05

salut,
.....personne m'a donné son opinion sur le dernier script que j ai met en pièce jointe( voir ci dessus).
Est que c'est possible de modifier ce script pour ne pas avoir une zone blanche(un vide) aprés chaque défilement?
bien cordialement

Problème image défilante

HTML

Discussions similaires

Partager

Partager