Mootools. problème liens Fx.Elements et slimbox

Bon, j'ai trouvé la solution, pour les prochain qui pourraient avoir ce problème:
lightwindow ne fonctionne pas avec le script du carrousel, par contre un dérivé
de la lightbox s'y intègre très bien: lytebox.

http://www.dolem.com/lytebox/demo.php?mode=transitional

Désolé tout le monde je me suis tromper, lightwindow fonctionne très bien avec Jcarousel! Ca marche très bien. J'ai retaper mon code entièrement et ça à marché...sinon j'ai un autre problème, c'est qu'aucune galerie popup que je connais n'est compatible avec la librairie Mootools...avec laquelle j'utilise une sorte de menu en accordéon...mais c'est un autre problème. Si vous connaissais des box similaire à la lightbox/ lightwindow/ lytebox, merci de me laisser un petit mot.

Décidément je me parle a moi même pour de bon... J'ai trouver une grande partie de la solution: http://planetozh.com/projects/lightbox-clones/
sur ce lien vous trouverez toutes les box, leurs fonction, compatibilité , poids avec tous les liens. Après une journée passé sur google (mal aux yeux) il était temps de trouver...

Je n'ai pas encore tout à fait fini mes péripéties sur internet, puisque je ne sais pour qu'elle raison, ma box charge derrière mon carrousel...
voila bonne nuit.

"resolut" hum...

Oui, j'étais résolut a aller dormir. J'ai encore passer toute la journée a ramer...
Commençons par le commencement:
J'utilise Mootools( voir http://mootools.net/) dans mon site, c'est une librairie java très légère pourvu d'un contenu vraiment intéressant.
L'une des fonction appeler Fx.Element, ou Kwik ( voir http://demos.mootools.net/Fx.Elements) me sert pour une partie non négligeable de mon site web: j'ai fait mon menu avec et "l'entrée du site":
http://stickart.ifrance.com/new/stickart2008/index.html

Tout marche correctement, excepter quand j'insère un lien:
- IE(7) m'inverse les "li", puisque chaque couleur est en fait une balise "li" dans un "ul" vous vous en doutez, lui même dans un div container.
- Quand à firefox, lui il n'inverse rien mais il me rajoute un bar bleu (background du "ul") qui me décale le contenu...

Ensuite, ma slimbox, qui est en fait une lightbox allégé fonctionnant avec mootools s'affiche derrière mon carrousel... sous firefox et safari, bizarrement IE l'affiche normalement.

J'ai besoin d'un peu d'aide...s'il vous plais.

S'il vous plais... c'est urgent, j'ai besoin d'aide.

Je vais tenter de m'expliquer plus clairement, qui sait...
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.

<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="<a href="http://stickart-blog.blogspot.com" target="_blank">http://stickart-blog.blogspot.com</a>" target="_blank"><li ><span></span></li></a>
			</ul>
</div>

Voici le CSS

#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?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" 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.

Personne ne peut m'aider???