[Materialize]Problème superposition d'éléments
Fatavis Le 15 janvier 2017 à 21:05 (Édité le 25 janvier 2019 à 17:53)
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 :
<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 :
nav{
position: relative;
z-index: 1000;
}
Merci de votre aide d'avance ^^
TheOldNoob Le 16 janvier 2017 à 07:39
le problème ne viens pas di css, je pense que ça viens de ton carrousel en lui même. Si tu ouvre ta console développeur, tu va voir qu'il y a un attribut style qui viens s'ajouter après la class slider. Dedans il y a un height de 400px qui te limite la taille max en hauteur et donc ton image, si plus large que les 440px est rogné.
Fatavis Le 16 janvier 2017 à 14:00
Merci pour ton aide en tout cas
TheOldNoob Le 16 janvier 2017 à 20:22 (Édité le 16 janvier 2017 à 20:23)
http://image.noelshack.com/minis/2017/03/1484594427-440px.png
