Problème de liste et de positionnement du contenu

Silverskins · 01/01/2011, 23h29

Bonjour, voilà j'ai un soucis pour ma galerie dynamique

:
j'ai une liste qui déroule les images de ma galerie contenues dans des div.
Toutes mes créations sont logées dans des balises <ul></ul>
donc il y a au final des listes à l'intérieur des listes
http://silverskins.fr/porfolio.html
Ca me donne quelque chose de horrible et je n'arrive pas à régler ce problème
Pourtant sous Safari , ça fonctionne, mais j'ai testé mon site sous IE (la grosse daube mais bon , la plupart des novices qui utilisent ie sont des ignorants ) et firefox , cela ne marche pas.
J'utilise le plugin fancybox pour les images.
Mon HTML :

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
<div class="content grid_10">
        <h1>Mes travaux</h1>
        <ul id="galerie">
        	<li>
        		<h2>Créations graphiques</h2>
                <span>+</span>
                <div class="portfolio">
                    <ul class="portfolio">
                        <li>
                            <a class="group"  rel="group" title="Création sur le thème de la liberté" href="images-contenu/galerie/creation/liberte.jpg">
                                <img src="images-contenu/galerie/creation-thumnails/liberte-thumbnail.jpg" width="120" height="120" />
                            </a>
                        </li>
                        <li>
                            <a class="group" rel="group" title="Deuxième tutoriel pour Création Photo (n°5)" href="images-contenu/galerie/creation/glamour-explosif.jpg">
                                <img src="images-contenu/galerie/creation-thumnails/glamour-explosif-thumbnail.jpg" width="120" height="120" />
                            </a>
                        </li>
                        <li>
                            <a class="group" rel="group" title="Dance" href="images-contenu/galerie/creation/dance.jpg">
                                <img src="images-contenu/galerie/creation-thumnails/dance-thumbnail.jpg" width="120" height="120" />
                            </a>
                        </li>
                        <li>
                            <a class="group" rel="group" title="An electric beauty" href="images-contenu/galerie/creation/electric-woman.jpg">
                                <img src="images-contenu/galerie/creation-thumnails/electric-woman-thumbnail.jpg" width="120" height="120" />
                            </a>
                        </li>
                    </ul>
                </div>
 
      		</li>
      		<li>
        		<h2>Illustrations</h2>
                <span>+</span>
                <div class="portfolio">
                <p>
                Prochainement.
                </p>
               </div>
      		</li>
          	<li>
                <h2>Photographie</h2>
                <span>+</span>
                <div class="portfolio">
                	<h3>Photographies à venir</h3>
               </div>
          	</li>
      		<li>
        		<h2>Retouche photo</h2>
                <span>+</span>
                <div class="portfolio">
                <p>
                En réalisation
                </p>
               </div>
      		</li>
      		<li>
        		<h2>Webdesign</h2>
                <span>+</span>
                <div class="portfolio">
                <h3>Projet Indivuel 2010 - Dans le cadre de la formation SRC[*]Média</h3>
                <p>En réalisation
                </p>
               </div>
      		</li>
	</ul> 
    </div>

Mon 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
ul#galerie
{
	margin-top:50px;
}
ul#galerie div
{
	display:none;
}
.current_page_item a, .current_page_item_two a { color:#666 !important; }
ul#galerie li
{
 
	border-bottom:1px dotted #C0E1EC;
	position:relative;
	z-index:0;
	cursor:crosshair;
 
}
ul#galerie h2
{
	font-size:115%;
	padding-left:25px;
	color:#333;
}
ul#galerie span
{
	position: absolute;
	right:5px;
	top:0;
	color:#CF6EA2;
}
div.portfolio
{
	padding:10px 0 !important;
	margin-left:40px;
}
ul.portfolio li
{
	display:block;
	float:left;
	border-bottom:inherit !important;
}
ul.portfolio li a img
{
	margin:0 10px;
 
}
ul.portfolio li a:hover, a:visited, a:focus
{
	border:0 !important;
}

Quel casse-tête chinois, j'ai repris mes cours, revu et revu pourtant je sens que quelque chose m'échappe

Aidez-moi à corriger ce problème, j'ai essayé les différents types de combines, rien n'y fait

Silverskins · 02/01/2011, 11h35

J'ai supprimé les liste, même avec une div je rencontre le même problème sur tous les navigateurs cette fois. Donc le problème ne vient pas du navigateur mais de mon code.
Mon xhtml modifié

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
 
<div id="main_content">
      <div class="content grid_10">
        <h1>Mes travaux</h1>
        <ul id="galerie">
        	<li>
        		<h2>Créations graphiques</h2>
                <span>+</span>
                <div class="portfolio">
 
 
                            <a class="group"  rel="group1" title="Création sur le thème de la liberté" href="images-contenu/galerie/creation/liberte.jpg">
                                <img alt="miniature 1" src="images-contenu/galerie/creation-thumnails/liberte-thumbnail.jpg"/>
                            </a>
                            <a class="group" rel="group1" title="Deuxième tutoriel pour Création Photo (n°5)" href="images-contenu/galerie/creation/glamour-explosif.jpg">
                                <img alt ="miniature 2"src="images-contenu/galerie/creation-thumnails/glamour-explosif-thumbnail.jpg"/>
                            </a>
                            <a class="group" rel="group1" title="Dance" href="images-contenu/galerie/creation/dance.jpg">
                                <img alt="miniature 3" src="images-contenu/galerie/creation-thumnails/dance-thumbnail.jpg"/>
                            </a>
                            <a class="group" rel="group1" title="An electric beauty" href="images-contenu/galerie/creation/electric-woman.jpg">
                                <img alt="miniature 4" src="images-contenu/galerie/creation-thumnails/electric-woman-thumbnail.jpg"/>
                            </a>         
 
                </div>
 
      		</li> <!--fin des créations -->
      		<li>
        		<h2>Illustrations</h2>
                <span>+</span>
                <div class="portfolio">
                <p>
                Prochainement.
                </p>
               </div>
      		</li><!--fin des illustrations -->
          	<li>
                <h2>Photographie</h2>
                <span>+</span>
                <div class="portfolio">
                	<h3>Photographies à venir</h3>
               </div>
          	</li><!--fin des photographies -->
      		<li>
        		<h2>Retouche photo</h2>
                <span>+</span>
                <div class="portfolio">
                <p>
                En réalisation
                </p>
               </div>
      		</li><!--fin des retouches photos-->
      		<li>
        		<h2>Webdesign</h2>
                <span>+</span>
                <div class="portfolio">
                <h3>Projet Indivuel 2010 - Dans le cadre de la formation SRC[*]Média</h3>
 
                        <a class="group" rel="group8" title="la page d'accueil" href="images-contenu/galerie/webdesign/projet-individuel-1.png">
                       	 <img alt="miniature 1" src="images-contenu/galerie/webdesign-thumbnails/projet-individuel1-thumbnail1.jpg"/>
                        </a>
 
                        <a class="group" rel="group8" title="la page type" href="images-contenu/galerie/webdesign/projet-individuel-2.png">
                        	<img alt="miniature 2" src="images-contenu/galerie/webdesign-thumbnails/projet-individuel2-thumbnail2.jpg"/>
                        </a>
 
                        <a class="group" rel="group8" title="la page de glossaire" href="images-contenu/galerie/webdesign/projet-individuel-3.png">
                        	<img alt="miniature 3" src="images-contenu/galerie/webdesign-thumbnails/projet-individuel3-thumbnail3.jpg"/>
                        </a>
                </div>
      		</li><!--fin du webdesign -->
		</ul> <!--fin de la liste class="galerie" -->
      </div><!--fin du content -->
    </div><!--fin du main_content -->

Mon CSS modifié

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
 
ul#galerie
{
	margin-top:50px;
}
ul#galerie div
{
	display:none;
}
.current_page_item a, .current_page_item_two a { color:#666 !important; }
ul#galerie li
{
 
	border-bottom:1px dotted #C0E1EC;
	position:relative;
	cursor:crosshair;
 
}
ul#galerie h2
{
	font-size:115%;
	padding-left:25px;
	color:#333;
}
ul#galerie span
{
	position:absolute;
	right:5px;
	top:0;
	color:#CF6EA2;
}
div.portfolio
{
	padding:10px 0 !important;
	margin-left:40px;
}
div.portfolio a 
{
	display:block;
	float:left;
	margin:0 10px;
	box-shadow: 0px 0px 4px #666;
	-moz-box-shadow: 0px 0px 4px #666;
	-webkit-box-shadow: 0px 0px 4px #666;
	-o-box-shadow: 0px 0px 4px #666;
}

Mon javascript si cela peut vous aider, c'est du JQuery :

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
 
// JQuery
$(document).ready(function() {
	$('#galerie li').click(function(){
		var content=$(this).children('div');
 
		if (content.is(':hidden')){
			content.slideDown('500');
			$(this).children('span').html('-');
		}
		else {
			content.slideUp('300');
			$(this).children('span').html('+');
		}
	});
});

Oh s'il vous plaît, si quelqu'un a une idée brillantissime qu'il me fasse signe. Je pète un câble, je suis perplexe je ne comprends pas pourquoi ça ne fonctionne pas comme je veux. Ce sont les aléas du code je sais mais franchement quand on refait tout et que cela ne marche pas autant. Ca commence à devenir embêtant.

Merci d'avance

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