[Mootools] Mootools. de liens avec Fx.Elements et Slimbox

Stickmaniak · 09/05/2008, 09h04

Bonjours à tous, je suis nouveau sur ce forum et je viens vous demander
un petit peu d'aide. Tout d'abord, merci d'avance a tous ceux qui prendrons le temps de s'attarder un peu sur mes problèmes.

Je rencontre quelques problèmes dans la conception de ma page web.

Je présente tout mon contenu sur une seul et même page (dans l'air du temps?)
et j'utilise le framework ajax mootools.
Sur mes pages (page de "bienvenue" et l'index), j'utilise Fx.Elements pour créer
des menus qui ressemblent à des accordéons.

L'idéal serait que mes pages sous firefox et ie et safari confondu ressemblent
à ça (pris sous safari):

Pour un coup d'œil en direct c'est par la. cliquez ici

La ou les problèmes commencent...
Voici la structure de la seconde page.
- html et javascript.

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
 
 
	   <link rel="stylesheet" href="slimbox/css/slimbox.css" type="text/css" media="screen" />
	   <script type="text/javascript" src="java/mootools.svn.js"></script>
	   <script type="text/javascript" src="java/demos.js"></script>
	   <script type="text/javascript" src="slimbox/js/slimbox.js"></script>
	   <script type="text/javascript">
		window.addEvent('domready', function(){
			var szNormal = 50, szSmall  = 60, szFull   = 250;
 
			var kwicks = $$("#kwicks .kwick");
			var fx = new Fx.Elements(kwicks, {wait: false, duration: 500, transition: Fx.Transitions.Back.easeOut});
			kwicks.each(function(kwick, i) {
				kwick.addEvent("mouseenter", function(event) {
					var o = {};
					o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
					kwicks.each(function(other, j) {
						if(i != j) {
							var w = other.getStyle("width").toInt();
							if(w != szSmall) o[j] = {width: [w, szSmall]};
						}
					});
					fx.start(o);
				});
			});
 
			$("kwicks").addEvent("mouseleave", function(event) {
				var o = {};
				kwicks.each(function(kwick, i) {
					o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
				});
				fx.start(o);
			})
 
		}); 
		</script>
   </head>  
<body>
 
<div id="kwicks_container">
			<ul id="kwicks">
				<a id="kwick_1" class="kwick" href="index2.html"><li ><span></span></li></a>
				<li id="kwick_2" class="kwick"><span></span></li>
				<li id="kwick_3" class="kwick"><span></span></li>
				<li id="kwick_4" class="kwick"><span></span></li>
				<li id="kwick_5" class="kwick"><span></span></li>
				<li id="kwick_6" class="kwick"><span></span></li>
				<li id="kwick_7" class="kwick"><span></span></li>
				<li id="kwick_8" class="kwick"><span></span></li>
				<a id="kwick_9" class="kwick" href="http://stickart-blog.blogspot.com" target="_blank"><li ><span></span></li></a>
			</ul>
</div>

Voici le CSS

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
 
#kwicks_container    /**DIV**/
{
overflow:hidden;
width:100%;
min-width:800px;
height:130px;
position:absolute;
top:0px;
left:0px;
padding-left:42px;
background-image:url("ressources/menuBK.gif");
background-position:top left;
background-repeat:no-repeat;
background-color:#619faf;
}
 
#kwicks {  /**UL**/
width:800px;
height: 130px;
display:inline;
background-color:none;
position:relative;
top:0px;
}
 
#kwicks .kwick { /**LIi**/
	float: left;
	display: block;
	width: 50px;
	height: 130px;
}
 
#kwick_1 {background-image:url("ressources/menu1b.jpg"); background-color: #2c2e2e;}
#kwick_2 {background-image:url("ressources/menu2b.jpg"); background-color: #2e3b3f;}
#kwick_3 {background-image:url("ressources/menu3b.jpg"); background-color: #376471;}
#kwick_4 {background-image:url("ressources/menu4b.jpg"); background-color: #3c7d8e;}
#kwick_5 {background-image:url("ressources/menu5b.jpg"); background-color: #4194ab;}
#kwick_6 {background-image:url("ressources/menu6b.jpg"); background-color: #45aac6;}
#kwick_7 {background-image:url("ressources/menu7b.jpg"); background-color: #49bcdb;}
#kwick_8 {background-image:url("ressources/menu8b.jpg"); background-color: #4bc8ea;}
#kwick_9 {background-image:url("ressources/menu9b.jpg"); background-color: #4cccee;} 
 
#kwick .kwick span {
	display:none;
}

Dans le code html, mon menu kwick (avec Fx.Elements) comporte 2 liens.
1 sur la première balise li, avec pour cible la même page (pour une actualisation).
Le second sur la dernière balise li.

Firefox affiche alors le menu en décalent le contenu vers le bas, laissant apparaître en haut le background de la balise ul...

Quand je rajoute un lien sur la balise li suivante, le contenu de la balise li concerné ce décale encore un peu plus (ce qui à la fin fait une sorte d'escalier), alors que pour la dernière balise li le lien n'a aucun effet sur la position de balises li. C'est le premier problème.

Ensuite, IE (7) quand à lui ne créer pas de problème de décalage, mais m'inverse la balise li entouré d'un balise <a> avec la balise li antécédente...
On peut l'observer sur la première page, ou la bulle n'apparait pas corectement
et dans le menu de la seconde page.

Peut être que je place mal mes balise <a>? Comment devrais-je les placer?
Dans le code source de l'index de mootools.net, sur lequel est utiliser un menu
kwick, les balises <a> se trouvent à l'intérieur des balises <li>, mais quand je les positionnes de cette manière, plus rien n'est cliquable...

Enfin, le dernier problème sur lequel je me demande ce qui se passe:
puisque j'utilise mootools, j'ai chercher une galerie comme celle de la lightbox
compatible. J'ai trouver Slimbox qui est similaire à lightbox, et qui en plus fonctionne avec les mêmes balises.
Le problème est que sous firefox et safari (pas sous IE bizarrement...), la slimbox s'affiche derrière mon carrousel.

Je vous colle le head de la seconde page, le problème vient peut être de la?

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
   <head>
       <title>Sticky's website</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="sti" href="sti.css"/>
	   <link rel="shortcut icon" type="image/x-icon" href="" />
 
	   <script type="text/javascript" src="jcarousel/lib/jquery-1.2.1.pack.js"></script>
	   <script type="text/javascript" src="jcarousel/lib/jquery.jcarousel.pack.js"></script>
	   <link rel="stylesheet" type="text/css" href="jcarousel/lib/jquery.jcarousel.css" />
	   <link rel="stylesheet" type="text/css" href="jcarousel/skins/jcarousel/jcarousel.css" />
	   <script type="text/javascript">
	   jQuery(document).ready(function() {
			jQuery('#mycarousel').jcarousel({
				horizontal: true,
				scroll: 1
			});
		});
	   </script>
 
	   <link rel="stylesheet" href="slimbox/css/slimbox.css" type="text/css" media="screen" />
	   <script type="text/javascript" src="java/mootools.svn.js"></script>
	   <script type="text/javascript" src="java/demos.js"></script>
	   <script type="text/javascript" src="slimbox/js/slimbox.js"></script>
	   <script type="text/javascript">
		window.addEvent('domready', function(){
			var szNormal = 50, szSmall  = 60, szFull   = 250;
 
			var kwicks = $$("#kwicks .kwick");
			var fx = new Fx.Elements(kwicks, {wait: false, duration: 500, transition: Fx.Transitions.Back.easeOut});
			kwicks.each(function(kwick, i) {
				kwick.addEvent("mouseenter", function(event) {
					var o = {};
					o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
					kwicks.each(function(other, j) {
						if(i != j) {
							var w = other.getStyle("width").toInt();
							if(w != szSmall) o[j] = {width: [w, szSmall]};
						}
					});
					fx.start(o);
				});
			});
 
			$("kwicks").addEvent("mouseleave", function(event) {
				var o = {};
				kwicks.each(function(kwick, i) {
					o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
				});
				fx.start(o);
			})
 
		}); 
		</script>
   </head>  
<body>

Est ce que ça peut venir du positionnement des différents codes dans <head>?

Désolé pour la longueur de ce post, mais je voulais d'expliquer clairement les problèmes que je rencontre.
Merci d'avance.

Stickmaniak · 09/05/2008, 12h12

Bonjours à tous (désolé je reposte se topic dans la section html, peut être que vous pourriez aussi m'aider?), je suis nouveau sur ce forum et je viens vous demander
un petit peu d'aide. Tout d'abord, merci d'avance a tous ceux qui prendrons le temps de s'attarder un peu sur mes problèmes.

Je rencontre quelques problèmes dans la conception de ma page web.

Je présente tout mon contenu sur une seul et même page (dans l'air du temps?)
et j'utilise le framework ajax mootools.
Sur mes pages (page de "bienvenue" et l'index), j'utilise Fx.Elements pour créer
des menus qui ressemblent à des accordéons.

L'idéal serait que mes pages sous firefox et ie et safari confondu ressemblent
à ça (pris sous safari):

Pour un coup d'œil en direct c'est par la. cliquez ici

La ou les problèmes commencent...
Voici la structure de la seconde page.
- html et javascript.

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
 
 
	   <link rel="stylesheet" href="slimbox/css/slimbox.css" type="text/css" media="screen" />
	   <script type="text/javascript" src="java/mootools.svn.js"></script>
	   <script type="text/javascript" src="java/demos.js"></script>
	   <script type="text/javascript" src="slimbox/js/slimbox.js"></script>
	   <script type="text/javascript">
		window.addEvent('domready', function(){
			var szNormal = 50, szSmall  = 60, szFull   = 250;
 
			var kwicks = $$("#kwicks .kwick");
			var fx = new Fx.Elements(kwicks, {wait: false, duration: 500, transition: Fx.Transitions.Back.easeOut});
			kwicks.each(function(kwick, i) {
				kwick.addEvent("mouseenter", function(event) {
					var o = {};
					o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
					kwicks.each(function(other, j) {
						if(i != j) {
							var w = other.getStyle("width").toInt();
							if(w != szSmall) o[j] = {width: [w, szSmall]};
						}
					});
					fx.start(o);
				});
			});
 
			$("kwicks").addEvent("mouseleave", function(event) {
				var o = {};
				kwicks.each(function(kwick, i) {
					o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
				});
				fx.start(o);
			})
 
		}); 
		</script>
   </head>  
<body>
 
<div id="kwicks_container">
			<ul id="kwicks">
				<a id="kwick_1" class="kwick" href="index2.html"><li ><span></span></li></a>
				<li id="kwick_2" class="kwick"><span></span></li>
				<li id="kwick_3" class="kwick"><span></span></li>
				<li id="kwick_4" class="kwick"><span></span></li>
				<li id="kwick_5" class="kwick"><span></span></li>
				<li id="kwick_6" class="kwick"><span></span></li>
				<li id="kwick_7" class="kwick"><span></span></li>
				<li id="kwick_8" class="kwick"><span></span></li>
				<a id="kwick_9" class="kwick" href="http://stickart-blog.blogspot.com" target="_blank"><li ><span></span></li></a>
			</ul>
</div>

Voici le CSS

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
 
#kwicks_container    /**DIV**/
{
overflow:hidden;
width:100%;
min-width:800px;
height:130px;
position:absolute;
top:0px;
left:0px;
padding-left:42px;
background-image:url("ressources/menuBK.gif");
background-position:top left;
background-repeat:no-repeat;
background-color:#619faf;
}
 
#kwicks {  /**UL**/
width:800px;
height: 130px;
display:inline;
background-color:none;
position:relative;
top:0px;
}
 
#kwicks .kwick { /**LIi**/
	float: left;
	display: block;
	width: 50px;
	height: 130px;
}
 
#kwick_1 {background-image:url("ressources/menu1b.jpg"); background-color: #2c2e2e;}
#kwick_2 {background-image:url("ressources/menu2b.jpg"); background-color: #2e3b3f;}
#kwick_3 {background-image:url("ressources/menu3b.jpg"); background-color: #376471;}
#kwick_4 {background-image:url("ressources/menu4b.jpg"); background-color: #3c7d8e;}
#kwick_5 {background-image:url("ressources/menu5b.jpg"); background-color: #4194ab;}
#kwick_6 {background-image:url("ressources/menu6b.jpg"); background-color: #45aac6;}
#kwick_7 {background-image:url("ressources/menu7b.jpg"); background-color: #49bcdb;}
#kwick_8 {background-image:url("ressources/menu8b.jpg"); background-color: #4bc8ea;}
#kwick_9 {background-image:url("ressources/menu9b.jpg"); background-color: #4cccee;} 
 
#kwick .kwick span {
	display:none;
}

Dans le code html, mon menu kwick (avec Fx.Elements) comporte 2 liens.
1 sur la première balise li, avec pour cible la même page (pour une actualisation).
Le second sur la dernière balise li.

Firefox affiche alors le menu en décalent le contenu vers le bas, laissant apparaître en haut le background de la balise ul...

Quand je rajoute un lien sur la balise li suivante, le contenu de la balise li concerné ce décale encore un peu plus (ce qui à la fin fait une sorte d'escalier), alors que pour la dernière balise li le lien n'a aucun effet sur la position de balises li. C'est le premier problème.

Ensuite, IE (7) quand à lui ne créer pas de problème de décalage, mais m'inverse la balise li entouré d'un balise <a> avec la balise li antécédente...
On peut l'observer sur la première page, ou la bulle n'apparait pas corectement
et dans le menu de la seconde page.

Peut être que je place mal mes balise <a>? Comment devrais-je les placer?
Dans le code source de l'index de mootools.net, sur lequel est utiliser un menu
kwick, les balises <a> se trouvent à l'intérieur des balises <li>, mais quand je les positionnes de cette manière, plus rien n'est cliquable...

Enfin, le dernier problème sur lequel je me demande ce qui se passe:
puisque j'utilise mootools, j'ai chercher une galerie comme celle de la lightbox
compatible. J'ai trouver Slimbox qui est similaire à lightbox, et qui en plus fonctionne avec les mêmes balises.
Le problème est que sous firefox et safari (pas sous IE bizarrement...), la slimbox s'affiche derrière mon carrousel.

Je vous colle le head de la seconde page, le problème vient peut être de la?

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
   <head>
       <title>Sticky's website</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="sti" href="sti.css"/>
	   <link rel="shortcut icon" type="image/x-icon" href="" />
 
	   <script type="text/javascript" src="jcarousel/lib/jquery-1.2.1.pack.js"></script>
	   <script type="text/javascript" src="jcarousel/lib/jquery.jcarousel.pack.js"></script>
	   <link rel="stylesheet" type="text/css" href="jcarousel/lib/jquery.jcarousel.css" />
	   <link rel="stylesheet" type="text/css" href="jcarousel/skins/jcarousel/jcarousel.css" />
	   <script type="text/javascript">
	   jQuery(document).ready(function() {
			jQuery('#mycarousel').jcarousel({
				horizontal: true,
				scroll: 1
			});
		});
	   </script>
 
	   <link rel="stylesheet" href="slimbox/css/slimbox.css" type="text/css" media="screen" />
	   <script type="text/javascript" src="java/mootools.svn.js"></script>
	   <script type="text/javascript" src="java/demos.js"></script>
	   <script type="text/javascript" src="slimbox/js/slimbox.js"></script>
	   <script type="text/javascript">
		window.addEvent('domready', function(){
			var szNormal = 50, szSmall  = 60, szFull   = 250;
 
			var kwicks = $$("#kwicks .kwick");
			var fx = new Fx.Elements(kwicks, {wait: false, duration: 500, transition: Fx.Transitions.Back.easeOut});
			kwicks.each(function(kwick, i) {
				kwick.addEvent("mouseenter", function(event) {
					var o = {};
					o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
					kwicks.each(function(other, j) {
						if(i != j) {
							var w = other.getStyle("width").toInt();
							if(w != szSmall) o[j] = {width: [w, szSmall]};
						}
					});
					fx.start(o);
				});
			});
 
			$("kwicks").addEvent("mouseleave", function(event) {
				var o = {};
				kwicks.each(function(kwick, i) {
					o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
				});
				fx.start(o);
			})
 
		}); 
		</script>
   </head>  
<body>

Est ce que ça peut venir du positionnement des différents codes dans <head>?

Désolé pour la longueur de ce post, mais je voulais d'expliquer clairement les problèmes que je rencontre.
Merci d'avance.

Stickmaniak · 10/05/2008, 13h09

Personne n'à d'idée? Une remarque qui pourrait faire avancer le chmilblic?

Sacha999 · 10/05/2008, 15h59

Concernant Firefox

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="kwicks_container">
			<ul id="kwicks">
				<a id="kwick_1" class="kwick" href="index2.html"><li ><span></span></li></a>
				<li id="kwick_2" class="kwick"><span></span></li>
				<li id="kwick_3" class="kwick"><span></span></li>
				<li id="kwick_4" class="kwick"><span></span></li>
				<li id="kwick_5" class="kwick"><span></span></li>
				<li id="kwick_6" class="kwick"><span></span></li>
				<li id="kwick_7" class="kwick"><span></span></li>
				<li id="kwick_8" class="kwick"><span></span></li>
				<a id="kwick_9" class="kwick" href="http://stickart-blog.blogspot.com" target="_blank"><li ><span></span></li></a>
			</ul>
</div>

Pourquoi ne mets tu pas les balise <a> dans les balise <span> (pas <li>)? Ca devrait corriger le dacalage vers le bas

Kerod · 10/05/2008, 16h07

Déjà ce n'est pas très HTML de mettre une balise a comme enfant direct d'un ul. Ce doit être ul li et dans le li tu mets ce que tu veux. Mais pas l'inverse

Stickmaniak · 10/05/2008, 18h10

Tout d'abord, merci à vous d'avoir pris le temps de tout lire et de répondre sur ce topic.
J'ai déplacer les balises <a> dans <ul> <li>, comme me l'a conseiller Kerod, et miracle... IE n'inverse plus les balises <li> suivie d'un lien.
Voir ici.
Sacha999, le fait que les balise <a> soit à l'intérieur ou autour des balises <span> ne règle pas le problème de décalage, au contraire maintenant, IE lui aussi affiche ce décalage.
Firefox:

On remarque aussi que cette barre qui décale le contenu va maintenant jusqu'au
bout a gauche du menu, contrairement à avant ou elle s'arrétait avant le dernier <li>.

IE:

Cette première évolution réduit elle champ de recherche?

Kerod · 10/05/2008, 18h34

Pour ton carroussel c'est une histoire de z-index supérieur à celui du lightbox. Je sais pas où tu le définis mais il faudrait que tu modifies le CSS du carroussel pour lui mettre un z-index inférieur ou faire le contraire (modifier le css du lightbox pour lui attribuer un z-index maximum.

Stickmaniak · 10/05/2008, 19h55

Merci Kerob, je ne connaissais pas cette propriété CSS. La slimebox marche superbement bien. (Test ici)
Par contre je viens de remarquer quelque chose de bizarre avec safari. Depuis que j'ai modifier le code de mon index, les <li> de ma page d'acceuil ne s'affiche que j'usqu'à la hauteur minimum (min-height:500px; )...
Je n'ai pourtant rien toucher au CSS de ma page d'acceuil, ni au code HTML dailleur. Je vais essayer de revenir a la version précedente de mon code pour voir ce qui aurais peu changer sans que je m'en rende compte...

Et reste le problème de ce décalage infernal! On approche du but.
Merci encore.

Sacha999 · 10/05/2008, 20h17

et en mettant

Code :

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

 id="kwick_1" class="kwick"

plutot dans le <li> que dans le <a>

Stickmaniak · 10/05/2008, 20h28

Si safari n'affiche pas le code correctement c'est à cause du lien dans la dernière balise <li>, quand les balise <a> se trouvent autour, les colonnes <li> s'affichent à 100% de l'écran. Je colle quand même mon code, si jamais j'ai des contradiction à l'intérieur.

Le CSS de ma page d'accueil.

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
75
76
77
78
79
80
 
#kwicks_containerintro
{
overflow:hidden;
width:799px;
min-height:600px;
height:100%;
position:absolute;
top:0px;
right:0px;
background-color:#2b2b2b;
}
 
#kwicks_containerintro #kwiks {
overflow:hidden;
width:799px;
min-height:600px;
height:100%;
margin:auto;
display:inline;
position:relative;
top:0px;
background-color:none;
}
 
#kwicks_containerintro #kwicks .kwick {
	float:left;
	display:block;
	width:47px;
	min-height:500px;
	height:100%;
}
 
#kwicks_containerintro #kwicks #kwick_1i {background-color: #2b2b2b;}
#kwicks_containerintro #kwicks #kwick_2i {background-color: #2e3131;}
#kwicks_containerintro #kwicks #kwick_3i {background-color: #31393b;}
#kwicks_containerintro #kwicks #kwick_4i {background-color: #364346;}
#kwicks_containerintro #kwicks #kwick_5i 
{
background-image:url("ressources/intro5.jpg");
background-position:bottom;
background-repeat:no-repeat;
background-color: #3b4e53;
}
#kwicks_containerintro #kwicks #kwick_6i {background-color: #415a61;}
#kwicks_containerintro #kwicks #kwick_7i {background-color: #476770;}
#kwicks_containerintro #kwicks #kwick_8i {background-color: #4d757f;}
#kwicks_containerintro #kwicks #kwick_9i {background-color: #54838f;}
#kwicks_containerintro #kwicks #kwick_10i {background-color: #5a919f;} 
#kwicks_containerintro #kwicks #kwick_11i {background-color: #619faf;} 
#kwicks_containerintro #kwicks #kwick_12i {background-color: #67adbf;} 
#kwicks_containerintro #kwicks #kwick_13i 
{
background-image:url("ressources/intro13.jpg");
background-position:top right;
background-repeat:no-repeat;
background-color: #6dbace;
} 
#kwicks_containerintro #kwicks #kwick_14i 
{
background-image:url("ressources/intro14.jpg");
background-position:top right;
background-repeat:no-repeat;
background-color: #72c6db;
} 
#kwicks_containerintro #kwicks #kwick_15i 
{
background-image:url("ressources/intro15.jpg");
background-position:top right;
background-repeat:no-repeat;
background-color: #77d0e8;
} 
#kwicks_containerintro #kwicks #kwick_16i 
{
background-image:url("ressources/intro16.jpg");
background-position:top right;
background-repeat:no-repeat;
background-color: #7cdaf2;
} 
#kwicks_containerintro #kwicks #kwick_17i {background-color: #7fe1fb;}

HTML de ma page d'acceuil

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
   <head>
       <title>Sticky's website</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="sti" href="sti.css"/>
	   <link rel="shortcut icon" type="image/x-icon" href="" />
 
	   <link rel="stylesheet" href="slimbox/css/slimbox.css" type="text/css" media="screen" />
	   <script type="text/javascript" src="java/mootools-release-1.11.js"></script>
	   <script type="text/javascript" src="slimbox/js/slimbox.js"></script>
	   <script type="text/javascript">
		window.addEvent('domready', function(){
			var szNormal = 47, szSmall  = 43, szFull   = 100;
 
			var kwicks = $$("#kwicks .kwick");
			var fx = new Fx.Elements(kwicks, {wait: false, duration: 500, transition: Fx.Transitions.Back.easeOut});
			kwicks.each(function(kwick, i) {
				kwick.addEvent("mouseenter", function(event) {
					var o = {};
					o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
					kwicks.each(function(other, j) {
						if(i != j) {
							var w = other.getStyle("width").toInt();
							if(w != szSmall) o[j] = {width: [w, szSmall]};
						}
					});
					fx.start(o);
				});
			});
 
			$("kwicks").addEvent("mouseleave", function(event) {
				var o = {};
				kwicks.each(function(kwick, i) {
					o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
				});
				fx.start(o);
			})
 
		}); 
		</script>
   </head>  
<body>
 
<div id="kwicks_containerintro">
			<ul id="kwicks">
				<li id="kwick_1i" class="kwick"><span></span></li>
				<li id="kwick_2i" class="kwick"><span></span></li>
				<li id="kwick_3i" class="kwick"><span></span></li>
				<li id="kwick_4i" class="kwick"><span></span></li>
				<li id="kwick_5i" class="kwick"><span></span></li>
				<li id="kwick_6i" class="kwick"><span></span></li>
				<li id="kwick_7i" class="kwick"><span></span></li>
				<li id="kwick_8i" class="kwick"><span></span></li>				
				<li id="kwick_9i" class="kwick"><span></span></li>
				<li id="kwick_10i" class="kwick"><span></span></li>
				<li id="kwick_11i" class="kwick"><span></span></li>
				<li id="kwick_12i" class="kwick"><span></span></li>
				<li id="kwick_13i" class="kwick"><span></span></li>
				<li id="kwick_14i" class="kwick"><span></span></li>
				<li id="kwick_15i" class="kwick"><span></span></li>
				<li id="kwick_16i" class="kwick"><span></span></li>
				<li><a id="kwick_17i" class="kwick" class="span" href="index2.html"><span></span></a></li>
			</ul>
</div>
</body>

Je ne comprends toujours pas pourquoi les blocks et inlines réagissent comme ça aux balises <a>...
J'ai essayer de comparer avec le menu kwick de la page d'accueil de mootools.net, mais en vain.
HTML mootools.net:

Code :

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

1
2
3
4
5
6
7
8
 
<ul class="kwicks">
 
		<li><a class="kwick download" href="/download"><span>Download now</span></a></li>
		<li><a class="kwick documentation" href="http://docs.mootools.net"><span>Documentation</span></a></li>
		<li><a class="kwick blog" href="http://blog.mootools.net"><span>The Blog</span></a></li>
		<li><a class="kwick trac" href="http://dev.mootools.net"><span>Keep Trac</span></a></li>
	</ul>

CSS

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
 
#kwick {
	position: relative;
	border-top: 1px solid #27272a;
	border-bottom: 3px double #27272a;
	margin-bottom: 10px;
	padding: 10px 0;
}
 
#kwick .kwicks {
	display: block;
	background: #1d1d20 url(../images/trac.gif) top right no-repeat;
	height: 100px;
}
 
#kwick li {
	float: left;
}
 
#kwick .kwick {
	display: block;
	cursor: pointer;
	overflow: hidden;
	height: 80px;
	width: 125px;
	padding: 10px;
	background: #fff;
	border-right: 5px solid #1d1d20;
}
 
#kwick .kwick span {
	display: none;
}
 
#kwick .download {
	background: #78ba91 url(../images/download.gif);
}
 
#kwick .documentation {
	background: #7389ae url(../images/docs.gif);
}
 
#kwick .blog {
	background: #c17878 url(../images/blog.gif);
}
 
#kwick .trac {
	background: #a87aad url(../images/trac.gif);
	border-right: 0;
}

Stickmaniak · 10/05/2008, 20h34

Sacha999, ta proposition marche bien, la barre qui décale le contenu des <li>
disparait, mais en contre partie, les <li> ne sont plus cliquables...:s

Kerod · 10/05/2008, 21h42

Les li ou juste une partie des li ?

Stickmaniak · 10/05/2008, 22h35

le menu kwick fonctionne correctement, mais les liens dans les <li> ne sont plus actifs, ou inaccessibles. Lorsqu'on survol le menu, le pointeur de la souris ne change pas au dessus des <li> comportant un lien.

Kerod · 10/05/2008, 23h00

Les autres ne contiennent pas de a donc normal.

Stickmaniak · 10/05/2008, 23h34

... les 2 balises <li> qui contiennent des <a> ne sont pas cliquables. Comme si il n'y avait aucun lien.

Sacha999 · 11/05/2008, 00h19

rajoute dans le 1er <li>

Code :

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

 class="kwick"

Déplace du 1er <a> vers le 1er<li>

Code :

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

id="kwick_1"

Et vire la ligne dans "sti.css"

Code :

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

1
2
3
4
5
6
7
 
#kwicks .kwick { /**LI**/
	float: left;
	display: block;
	/*width:50px;*/    <-----cette ligne a enlever
	height: 130px;
}

Suit le meme principe pour l'autre <li><a>

Stickmaniak · 11/05/2008, 01h23

Bonsoir Sacha999, j'ai fais la manipulation, cette fois en enlevant dans les css comme tu l'indiques la largeur originel des balises <li>. Même résultat que tout à l'heure. Les <li> contenant les liens ne sont pas cliquables.

Le fait d'enlever la largeur de départ pause un autre problème, la menu ne se divise pas en <li> égales dès le chargement de la page; si c'est comme je le crois, les <li> n'ayant pas de valeur de départ prennent 100% du champs accorder et se chevauches.
Il faut passer la souris à un endroit précis (coin supérieur gauche du menu avec IE et Firefox, Safari ne veut rien faire)pour que le script java prenne le relais.
Je met une page de test là, sa parleras plus qu'une image.
Merci encore. Bonne nuit.

Sacha999 · 11/05/2008, 01h41

faut que tu laisse "class="kwick"" dans le <a>
mais bon c'est pas parfait

Stickmaniak · 11/05/2008, 11h11

Enfin!!

cette barre de décalage ne s'affiche plus (mais il y a un mais)!

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
 
<div id="kwicks_container">
                       <ul id="kwicks">
				<li id="kwick_1" class="kwick"><a class="kwick" 
                                href="index2.html"><span></span></a></li>
				<li id="kwick_2" class="kwick"><span></span></li>
				<li id="kwick_3" class="kwick"><span></span></li>
				<li id="kwick_4" class="kwick"><span></span></li>
				<li id="kwick_5" class="kwick"><span></span></li>
				<li id="kwick_6" class="kwick"><span></span></li>
				<li id="kwick_7" class="kwick"><span></span></li>
				<li id="kwick_8" class="kwick"><span></span></li>
				<li id="kwick_9" class="kwick"><a class="kwick" 
                                href="http://stickart-blog.blogspot.com" 
                                target="_blank"><span></span></a></li>
			</ul>
</div>

Le problème maintenant, c'est que les balises <li> quand elles s'agrandissent, ne sont pas cliquable sur toute leur surface (250px déplié), seul une partie est cliquable (50px): les parties entourées de bleu:

Page de test ici.

Kerod · 11/05/2008, 12h11

Au lieu de donner une largeur fixe à ton a mets le à 100%. Il s'adaptera de lui même

10/05/2008, 20h17	#9
Sacha999 Membre éclairé Paul Gwen Inscription : mars 2007 Messages : 289 Détails du profil Informations personnelles : Nom : Paul Gwen Âge : 32 Informations forums : Inscription : mars 2007 Messages : 289 Points : 302 Points : 302	et en mettant Code : Sélectionner tout - Visualiser dans une fenêtre à part id="kwick_1" class="kwick" plutot dans le <li> que dans le <a> __________________ Le forum c'est trop génial
	00

11/05/2008, 01h41	#18
Sacha999 Membre éclairé Paul Gwen Inscription : mars 2007 Messages : 289 Détails du profil Informations personnelles : Nom : Paul Gwen Âge : 32 Informations forums : Inscription : mars 2007 Messages : 289 Points : 302 Points : 302	faut que tu laisse "class="kwick"" dans le <a> mais bon c'est pas parfait __________________ Le forum c'est trop génial
	00

10/05/2008, 13h09	#3
Stickmaniak Invité de passage Inscription : mai 2008 Messages : 18 Détails du profil Informations forums : Inscription : mai 2008 Messages : 18 Points : 3 Points : 3	Personne n'à d'idée? Une remarque qui pourrait faire avancer le chmilblic?
	00

10/05/2008, 16h07	#5
Kerod Inactif Inscription : septembre 2004 Messages : 11 753 Détails du profil Informations forums : Inscription : septembre 2004 Messages : 11 753 Points : 14 585 Points : 14 585	Déjà ce n'est pas très HTML de mettre une balise a comme enfant direct d'un ul. Ce doit être ul li et dans le li tu mets ce que tu veux. Mais pas l'inverse
	00

10/05/2008, 18h10	#6
Stickmaniak Invité de passage Inscription : mai 2008 Messages : 18 Détails du profil Informations forums : Inscription : mai 2008 Messages : 18 Points : 3 Points : 3	Tout d'abord, merci à vous d'avoir pris le temps de tout lire et de répondre sur ce topic. J'ai déplacer les balises <a> dans <ul> <li>, comme me l'a conseiller Kerod, et miracle... IE n'inverse plus les balises <li> suivie d'un lien. Voir ici. Sacha999, le fait que les balise <a> soit à l'intérieur ou autour des balises <span> ne règle pas le problème de décalage, au contraire maintenant, IE lui aussi affiche ce décalage. Firefox: On remarque aussi que cette barre qui décale le contenu va maintenant jusqu'au bout a gauche du menu, contrairement à avant ou elle s'arrétait avant le dernier <li>. IE: Cette première évolution réduit elle champ de recherche?
	00

10/05/2008, 18h34	#7
Kerod Inactif Inscription : septembre 2004 Messages : 11 753 Détails du profil Informations forums : Inscription : septembre 2004 Messages : 11 753 Points : 14 585 Points : 14 585	Pour ton carroussel c'est une histoire de z-index supérieur à celui du lightbox. Je sais pas où tu le définis mais il faudrait que tu modifies le CSS du carroussel pour lui mettre un z-index inférieur ou faire le contraire (modifier le css du lightbox pour lui attribuer un z-index maximum.
	00

10/05/2008, 19h55	#8
Stickmaniak Invité de passage Inscription : mai 2008 Messages : 18 Détails du profil Informations forums : Inscription : mai 2008 Messages : 18 Points : 3 Points : 3	Merci Kerob, je ne connaissais pas cette propriété CSS. La slimebox marche superbement bien. (Test ici) Par contre je viens de remarquer quelque chose de bizarre avec safari. Depuis que j'ai modifier le code de mon index, les <li> de ma page d'acceuil ne s'affiche que j'usqu'à la hauteur minimum (min-height:500px; )... Je n'ai pourtant rien toucher au CSS de ma page d'acceuil, ni au code HTML dailleur. Je vais essayer de revenir a la version précedente de mon code pour voir ce qui aurais peu changer sans que je m'en rende compte... Et reste le problème de ce décalage infernal! On approche du but. Merci encore.
	00

10/05/2008, 20h34	#11
Stickmaniak Invité de passage Inscription : mai 2008 Messages : 18 Détails du profil Informations forums : Inscription : mai 2008 Messages : 18 Points : 3 Points : 3	Sacha999, ta proposition marche bien, la barre qui décale le contenu des <li> disparait, mais en contre partie, les <li> ne sont plus cliquables...:s
	00

10/05/2008, 21h42	#12
Kerod Inactif Inscription : septembre 2004 Messages : 11 753 Détails du profil Informations forums : Inscription : septembre 2004 Messages : 11 753 Points : 14 585 Points : 14 585	Les li ou juste une partie des li ?
	00

10/05/2008, 22h35	#13
Stickmaniak Invité de passage Inscription : mai 2008 Messages : 18 Détails du profil Informations forums : Inscription : mai 2008 Messages : 18 Points : 3 Points : 3	le menu kwick fonctionne correctement, mais les liens dans les <li> ne sont plus actifs, ou inaccessibles. Lorsqu'on survol le menu, le pointeur de la souris ne change pas au dessus des <li> comportant un lien.
	00

10/05/2008, 23h00	#14
Kerod Inactif Inscription : septembre 2004 Messages : 11 753 Détails du profil Informations forums : Inscription : septembre 2004 Messages : 11 753 Points : 14 585 Points : 14 585	Les autres ne contiennent pas de a donc normal.
	00

10/05/2008, 23h34	#15
Stickmaniak Invité de passage Inscription : mai 2008 Messages : 18 Détails du profil Informations forums : Inscription : mai 2008 Messages : 18 Points : 3 Points : 3	... les 2 balises <li> qui contiennent des <a> ne sont pas cliquables. Comme si il n'y avait aucun lien.
	00

11/05/2008, 01h23	#17
Stickmaniak Invité de passage Inscription : mai 2008 Messages : 18 Détails du profil Informations forums : Inscription : mai 2008 Messages : 18 Points : 3 Points : 3	Bonsoir Sacha999, j'ai fais la manipulation, cette fois en enlevant dans les css comme tu l'indiques la largeur originel des balises <li>. Même résultat que tout à l'heure. Les <li> contenant les liens ne sont pas cliquables. Le fait d'enlever la largeur de départ pause un autre problème, la menu ne se divise pas en <li> égales dès le chargement de la page; si c'est comme je le crois, les <li> n'ayant pas de valeur de départ prennent 100% du champs accorder et se chevauches. Il faut passer la souris à un endroit précis (coin supérieur gauche du menu avec IE et Firefox, Safari ne veut rien faire)pour que le script java prenne le relais. Je met une page de test là, sa parleras plus qu'une image. Merci encore. Bonne nuit.
	00

11/05/2008, 12h11	#20
Kerod Inactif Inscription : septembre 2004 Messages : 11 753 Détails du profil Informations forums : Inscription : septembre 2004 Messages : 11 753 Points : 14 585 Points : 14 585	Au lieu de donner une largeur fixe à ton a mets le à 100%. Il s'adaptera de lui même
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email