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.
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
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>
Dans le code html, mon menu kwick (avec Fx.Elements) comporte 2 liens.
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; }
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?
Est ce que ça peut venir du positionnement des différents codes dans <head>?
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>
Désolé pour la longueur de ce post, mais je voulais d'expliquer clairement les problèmes que je rencontre.
Merci d'avance.
Partager