J'essaie de créer un système de news mais j'ai un espacement indésirable

**G_angel** · 03/10/2010, 16h58

Bonjour,
voila, je viens voir si quelqu'un aurez une idée pour mon problème.
J'essaie de créer un système de news a l'aide de JQuery. je crée un tableau a trois colonnes, 1ere : fleche gauche, 2eme contenu, 3eme fleche droite.

Bien que le contenu aie un top=0, il y a un espacement entre le haut de ma colonne et mon contenu. Auriez-vous une idée ?

2) J'ai réussi a le bloquer dans le sens gauche mais pas droite, on dirait que JQuery n'accepte pas les conditions avec des négatifs.

Merci d'avance

Demo : http://atelier-robert.be/test/Scroll.htm

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
67
68
69
 
<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<br><br>
<table align="center" cellspacing="0" cellpadding="0" border=1 height="100">
<tr height="100">
	<td>
		<img src="images/fleche_gauche.jpg" id="left" height="100">
	</td>
	<td>
		<div id="support" style="position:relative;background-color:#abc; width:350px; height:100px;top:0px; overflow:hidden; border:0px solid #000;">  
			<div class="block" style="position:relative;background-color:#abc;left:0px;width:350px;height:500px;margin:0px; ">
				<table border="0" width="700" height="90" cellspacing="0" cellpadding="0">
				<tr height="90">
					<td width="175px" align="center"><img src="http://www.winbooks.be/images/default_01.gif" height="95"></td>
					<td width="175px" align="center">Logiciel de comptabilité<br><a href="http://winbooks.be">Winbooks</a></td>
 
					<td align="center"><a href="http://www.virtualinvoice.com/"><img src="http://www.virtualinvoice.com/images/virtualinvoice.gif" width="100"></a></td>
					<td align="center">Logiciel d'encodage automatique<br> de facture<a href="http://www.virtualinvoice.com/">VirtualInvoice</a></td>
				</tr>
				</table>
 
			</div>
		</div>
	</td>
	<td>
		<img src="images/fleche_droite.jpg" id="right" height="100">
	</td>
 
</tr>
</table>
 
<script>
 
$("#left").click(
	function()
	{
 
		var position_Block = $(".block").offset();
		var position_Support = $("#support").offset();
 
		if(position_Support.left - position_Block.left > 0)
		{
			$(".block").animate({"left": "+=350px"}, "slow");
		}
	}
);
 
$("#right").click(
	function()
	{
		var NewsWidthOne = 350
		var NewsWidthTotal = 2 * NewsWidthOne;
		var position_Block = $(".block").offset();
		var position_Support = $("#support").offset();
 
			$(".block").animate({"left": "-=350px"}, "slow");
 
	}
);
 
</script>
 
</body>
</html>

**castelcerf** · 03/10/2010, 23h36

Je sais pas si ca peux t'aider...
Mais pourquoi faire un tableaux ?
un div conteneur en position relative et hoverflow hidden
avec dedans ton contenu comme tu l'entend et en position absolute à droite et à gauche tes deux images.

Car a mon avis c'est plus une histoire css et de margin qu'un rapport direct avec jquery ? ..je me rappel de l'époque ou je codais en tableaux, j'avais souvent des problèmes du genre

...

**marcha** · 04/10/2010, 09h48

Salut,

Le problème de positionnement est du à deux choses

1) Une balise img est en display inline par défaut, cela
implique qu'elle réserve un espace en dessous d'elle pour
être alignée avec du texte (sur la ligne de base de la typo)

Si tu corrige ça en appliquant un display: block à tes flèches
l'espace disparaîtra au dessous, ton tableau sera moins haut
et tu ne devrais plus avoir à lire le point 2).

2) Par défaut un td aligne sont contenu verticalement au millieu.
Comme le tableau est plus haut que la hauteur de ton contenu
central, celui-ci descend de la moitié de l'espace supplémentaire.

Tu peux appliquer un vertical-align: top à ton td, mais corrige plutôt
le point 1.

Comme le souligne castelcerf, le montage en tableau c'est du passé.
on est censé utiliser la balise table pour indiquer qu'il s'agit sémentiquement
de données tabulaires. (genre feuille excell), et non pour disposer les
éléments.

Quant au problème d'arrêt, tu n'as pas mis de condition sur ta flèche droite

**G_angel** · 04/10/2010, 19h45

Bonjour et merci pour vos réponses.
en effet, je dois être encore de la vieille école et je n'ai pas l'habitude d'utiliser des Div.
Le point 1 règle mon problème mais j'aimerais bien essayer la méthode avec Div et j'avoue ne pas avoir tout compris.
Mon but est que cela fasse la même chose que dans mon exemple, c'est a dire un effêt de Slide entre les différentes News.

castelcerf, tu me parles d'un div conteneur , j'ai ai actuellement un qui s'appelle "Conteneur" qui est en position relative mais que veux-tu dire par "hoverflow hidden"

J'avoue que c'est un peu flou tout ça :-) Si quelqu'un pourrais m'éclairer.
Merci !

Mise à jour du code avec vos conseils :

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
67
68
69
70
71
72
73
74
 
<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<br><br>
<table align="center" cellspacing="0" cellpadding="0" border=1 height="100">
<tr height="100">
	<td>
		<img src="images/fleche_gauche.jpg" id="left" height="100" style="display: block">
	</td>
	<td>
		<div id="support" style="position:relative;background-color:#abc; width:350px; height:100px;top:0px; overflow:hidden; border:0px solid #000;">  
			<div class="block" style="position:relative;background-color:#abc;left:0px;width:350px;height:500px;margin:0px; ">
				<table border="0" width="1050" height="90" cellspacing="0" cellpadding="0">
				<tr height="90" >
					<td width="175px" align="center"><img src="http://www.winbooks.be/images/default_01.gif" height="95"></td>
					<td width="175px" align="center">Logiciel de comptabilité<br><a href="http://winbooks.be">Winbooks</a></td>
 
					<td align="center"><a href="http://www.virtualinvoice.com/"><img src="http://www.virtualinvoice.com/images/virtualinvoice.gif" width="100"></a></td>
					<td align="center">Logiciel d'encodage automatique<br> de facture<a href="http://www.virtualinvoice.com/">VirtualInvoice</a></td>
 
					<td width="175px" align="center"><img src="http://www.winbooks.be/images/default_01.gif" height="95"></td>
					<td width="175px" align="center">Logiciel de comptabilité<br><a href="http://winbooks.be">Winbooks</a></td>
				</tr>
				</table>
 
			</div>
		</div>
	</td>
	<td>
		<img src="images/fleche_droite.jpg" id="right" height="100" style="display: block">
	</td>
 
</tr>
</table>
 
<script>
 
$("#left").click(
	function()
	{
 
		var position_Block = $(".block").offset();
		var position_Support = $("#support").offset();
 
		if(position_Support.left - position_Block.left > 0)
		{
			$(".block").animate({"left": "+=350px"}, "slow");
		}
	}
);
 
$("#right").click(
	function()
	{
		var NewsWidthOne = 350
		var NewsWidthTotal = 3 * NewsWidthOne;
		var position_Block = $(".block").offset();
		var position_Support = $("#support").offset();
		var lnDiff = position_Support.left - position_Block.left + NewsWidthOne
		if(lnDiff < NewsWidthTotal)
		{
			$(".block").animate({"left": "-=350px"}, "slow");
		}
	}
);
 
</script>
 
</body>
</html>

[]

J'essaie de créer un système de news mais j'ai un espacement indésirable

jQuery

Vue hybride

Discussions similaires

Partager

Partager