[Materialize]Problème d'un slider et du reste de la page qui se superposent

a marqué ce sujet comme résolu.

Bonjour à tous et à toutes, je suis en train de réaliser un site en utilisant le framework Materialize cependant je rencontre un problème la partie de ma page après mon slider qui est en fullscreen se superpose sur mon slider en fullscreen. C’est difficile d’être clair, mais voici un lien : http://pb.makerinbreizh.com/.

Voici le début du code de mon index : 

  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
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
   <ul id="dropdown1" class="dropdown-content">
    <li><a href="#!">Hébergement</a>
    </li>
    <li><a href="#!">Transports</a>
    </li>
</ul>
<nav class="white" role="navigation">
    <div class="nav-wrapper container">
        <a id="logo-container" href="http://makerinbreizh.com/" class="brand-logo left">MIB<span class="number">17</span></a>
        <ul class="right hide-on-med-and-down">
            <li><a href="http://makerinbreizh.com/">Accueil</a>
            </li>
            <li><a href="file:///D:/coder/makerinbreizh/index.html#makers">Makers</a>
            </li>
            <li><a href="file:///D:/coder/makerinbreizh/index.html#afin">Animations</a>
            </li>
            <li><a href="file:///D:/coder/makerinbreizh/index.html#afin">Ateliers</a>
            </li>
            <li><a href="file:///D:/coder/makerinbreizh/index.html#conferences">Conférences</a>
            </li>
            <li><a href="file:///D:/coder/makerinbreizh/index.html#savoir">Partenaires</a>
            </li>
            <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Infos Pratiques</a>
            </li>
            <li><a href="file:///D:/coder/makerinbreizh/index.html#savoir">Contact</a>
            </li>




        </ul>

        <ul id="nav-mobile" class="side-nav">
            <li><a href="http://makerinbreizh.com/">Accueil</a>
            </li>
            <li><a href="file:///D:/coder/makerinbreizh/index.html#makers">Makers</a>
            </li>
            <li><a href="file:///D:/coder/makerinbreizh/index.html#afin">Animations</a>
            </li>
            <li><a href="file:///D:/coder/makerinbreizh/index.html#afin">Ateliers</a>
            </li>
            <li><a href="file:///D:/coder/makerinbreizh/index.html#conferences">Conférences</a>
            </li>
            <li><a href="file:///D:/coder/makerinbreizh/index.html#savoir">Partenaires</a>
            </li>
            <li><a href="file:///D:/coder/makerinbreizh/index.html#savoir">InfosPratiques</a>
            </li>
            <li><a href="file:///D:/coder/makerinbreizh/index.html#savoir">Contact</a>
            </li>
        </ul>
        <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
    </div>
</nav>
<div class <div class="fullscreen slider1 ">
    <ul class="slides">
        <li>
            <img src="bretagneMIB17.png">
            <div class="caption center-align">

            </div>
        </li>
        <li>
            <img src="http://loltracker.com/images/easyblog_images/2638/b2ap3_thumbnail_league_of_legends_fan_art___tahm_kench_retreat___by_benlo-d9ki3br.jpg">
            <div class="caption left-align">
                <h3>MakerInBreizh 2017</h3>
                <h5 class="light grey-text text-lighten-3">Manifestation des Makers Internationaux en Bretagne !</h5>
            </div>
        </li>
        <li>
            <img src="http://www.archibat.com/blog/wp-content/uploads/2015/06/fablab-hec-polytechnique-strate-icimontreuil-eboow.jpg">
            <div class="caption left-align">
                <h3>MakerInBreizh 2017</h3>
                <h5 class="light grey-text text-lighten-3">Faisons le ensemble !</h5>
            </div>
        </li>
    </ul>
</div>
<div class="page_home">
    <div class="col m12 s12">
        <div id="page_size" class="intro2 ">

        </div>
        <div class="row">
            <div class="col m12 s12">
                <div id="makers" class="intro2 deep-orange lighten-2 z-depth-1">
                    <h1 class="grey-text text-lighten-5">Les Makers :</h1>
                </div>
                <!--your code start-->
                <div class="slider1">
                    <ul class="slides">
                        <li>
                            <img src="http://a403.idata.over-blog.com/800x532/1/46/76/24/photos/Printemps/DIY-robot.jpg">
                            <div class="caption center-align">
                                <h3>RobotMéca</h3>
                                <h5 class="light grey-text text-lighten-3">Associations aux robots mécaniques</h5>
                            </div>
                        </li>
                        <li>
                            <img src="http://loltracker.com/images/easyblog_images/2638/b2ap3_thumbnail_league_of_legends_fan_art___tahm_kench_retreat___by_benlo-d9ki3br.jpg">
                            <div class="caption left-align">
                                <h3>iDeesigner</h3>
                                <h5 class="light grey-text text-lighten-3">Des dessins uniques</h5>
                            </div>
                        </li>
                    </ul>
                </div>
                <!--your code end-->
            </div>
        </div>

Sinon en css j’utilise celui fourni par le framework Materialize sauf pour la mise en page des fonds oranges et ces quelques lignes : 

1
2
3
4
nav{
    position: relative;
    z-index: 1000;
}

Merci de votre aide d’avance ^^

+0 -0

@tleb : Tu t’es trompé de lien il me semble.

@Fatavis: Il me semble que tu as un problème de balisage quand on regarde le DOM de ta page, un des sliders est à l’intérieur de l’autre (regarde après le "</nav>", ligne 36 une balise n’est pas fermé).

+1 -0

@tleb : si la solution de ce topic fonctionne, je ne rencontre pas le même problème, la dernière fois c’était mon nav bar qui était caché maintenant elle est visible. Mon problème maintenant est la superposition.

@A-312 d’accord j’ai fait la modification mais cela ne change rien mais merci d’essayer de m’aider.

+0 -0

@A-312 d’accord j’ai fait la modification mais cela ne change rien mais merci d’essayer de m’aider.

Fatavis

Essaye de suivre un peu plus les normes d’indentation, l’erreur te sautera à l’œil comme ça. Tu as plein d’outils pour t’aider (sans parler des plugins pour SublimeText) :

J’ai juste c/c ton code (je n’ai effectué aucune modification) :

 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
81
82
83
84
85
86
87
88
89
90
91
<ul id="dropdown1" class="dropdown-content">
    <li><a href="#!">Hébergement</a></li>
    <li><a href="#!">Transports</a></li>
</ul>
<nav class="white" role="navigation">
    <div class="nav-wrapper container">
        <a id="logo-container" href="http://makerinbreizh.com/" class="brand-logo left">MIB<span class="number">17</span></a>
        <ul class="right hide-on-med-and-down">
            <li><a href="http://makerinbreizh.com/">Accueil</a></li>
            <li><a href="file:///D:/coder/makerinbreizh/index.html#makers">Makers</a></li>
            <li><a href="file:///D:/coder/makerinbreizh/index.html#afin">Animations</a></li>
            <li><a href="file:///D:/coder/makerinbreizh/index.html#afin">Ateliers</a></li>
            <li><a href="file:///D:/coder/makerinbreizh/index.html#conferences">Conférences</a></li>
            <li><a href="file:///D:/coder/makerinbreizh/index.html#savoir">Partenaires</a></li>
            <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Infos Pratiques</a></li>
            <li><a href="file:///D:/coder/makerinbreizh/index.html#savoir">Contact</a></li>




        </ul>

        <ul id="nav-mobile" class="side-nav">
            <li><a href="http://makerinbreizh.com/">Accueil</a></li>
            <li><a href="file:///D:/coder/makerinbreizh/index.html#makers">Makers</a></li>
            <li><a href="file:///D:/coder/makerinbreizh/index.html#afin">Animations</a></li>
            <li><a href="file:///D:/coder/makerinbreizh/index.html#afin">Ateliers</a></li>
            <li><a href="file:///D:/coder/makerinbreizh/index.html#conferences">Conférences</a></li>
            <li><a href="file:///D:/coder/makerinbreizh/index.html#savoir">Partenaires</a></li>
            <li><a href="file:///D:/coder/makerinbreizh/index.html#savoir">InfosPratiques</a></li>
            <li><a href="file:///D:/coder/makerinbreizh/index.html#savoir">Contact</a></li>
        </ul>
        <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
    </div>
</nav>
<div class <div class="fullscreen slider1 ">
    <ul class="slides">
        <li>
            <img src="bretagneMIB17.png">
            <div class="caption center-align">

            </div>
        </li>
        <li>
            <img src="http://loltracker.com/images/easyblog_images/2638/b2ap3_thumbnail_league_of_legends_fan_art___tahm_kench_retreat___by_benlo-d9ki3br.jpg">
            <div class="caption left-align">
                <h3>MakerInBreizh 2017</h3>
                <h5 class="light grey-text text-lighten-3">Manifestation des Makers Internationaux en Bretagne !</h5>
            </div>
        </li>
        <li>
            <img src="http://www.archibat.com/blog/wp-content/uploads/2015/06/fablab-hec-polytechnique-strate-icimontreuil-eboow.jpg">
            <div class="caption left-align">
                <h3>MakerInBreizh 2017</h3>
                <h5 class="light grey-text text-lighten-3">Faisons le ensemble !</h5>
            </div>
        </li>
    </ul>
</div>
<div class="page_home">
    <div class="col m12 s12">
        <div id="page_size" class="intro2 ">

        </div>
        <div class="row">
            <div class="col m12 s12">
                <div id="makers" class="intro2 deep-orange lighten-2 z-depth-1">
                    <h1 class="grey-text text-lighten-5">Les Makers :</h1>
                </div>
                <!--your code start-->
                <div class="slider1">
                    <ul class="slides">
                        <li>
                            <img src="http://a403.idata.over-blog.com/800x532/1/46/76/24/photos/Printemps/DIY-robot.jpg">
                            <div class="caption center-align">
                                <h3>RobotMéca</h3>
                                <h5 class="light grey-text text-lighten-3">Associations aux robots mécaniques</h5>
                            </div>
                        </li>
                        <li>
                            <img src="http://loltracker.com/images/easyblog_images/2638/b2ap3_thumbnail_league_of_legends_fan_art___tahm_kench_retreat___by_benlo-d9ki3br.jpg">
                            <div class="caption left-align">
                                <h3>iDeesigner</h3>
                                <h5 class="light grey-text text-lighten-3">Des dessins uniques</h5>
                            </div>
                        </li>
                    </ul>
                </div>
                <!--your code end-->
            </div>
        </div>
+0 -0

C’est loin d’être la meilleure solution, mais tu as cette possibilité :

1
2
3
4
.page_home {
    margin-top: 45%;
    z-index: 1;
}

Il faudrait que les sliders ait un nom de classe différent "slider" et "slider1". Surtout qu’à la fin de page c’est prévu pour avoir deux noms différents :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!--Materializecss Slider-->
<script>
    $(document).ready(function() {
        $('.slider').slider({
            full_width: true
        });
    });
    $(document).ready(function() {
        $('.slider1').slider({
            full_width: true
        });
    });
</script>
+1 -0

Pourquoi faut-il que les sliders aient un nom différent ?

En fait, il y a deux classes sliders car y a 2 types de sliders sur la page et les deux premiers sont les mêmes.

J’ai fait la modification cependant y a toujours les makers qui passent en dessous du slider 1 en fonction de la taille de l’écran.

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte