0
tout d'abord, j'utilise this responsive template pour créer un site web. Lorsque vous faites défiler jusqu'au pied de page, la barre de navigation située en haut est au-dessus du contenu, de sorte que vous pouvez voir la barre de navigation tout le temps. Mais lorsque vous atteignez le pied de page, le pied de page chevauche juste la barre de navigation. Il semble que l'attribut z-index ne prenne pas effet. Ce bug est uniquement dans Safari. Vous pouvez le reproduire, lorsque votre résolution est quelque chose comme une résolution mobile (portrait).z-index ne fonctionne pas en safari
[SEULEMENT à SAFARI], cette erreur ne marche pas apparaissent dans Chrome ou Firefox
Je ne sais vraiment pas quoi faire, je l'ai déjà essayé quelques petites choses, qui na pas résoudre le problème.
S'il vous plaît aider :) Thx
Edit:
Le Navbar est mis en œuvre comme suit dans index.html
<!-- PAGE -->
<div id="page">
<!-- HEADER -->
<header>
<!-- MENU BLOCK -->
<div class="menu_block">
<!-- CONTAINER -->
<div class="container clearfix">
<!-- LOGO -->
<div class="logo pull-left">
<a href="index.html" ><span class="b1">w</span><span class="b2">h</span><span class="b3">i</span><span class="b4">t</span><span class="b5">e</span></a>
</div><!-- //LOGO -->
<!-- SEARCH FORM -->
<div id="search-form" class="pull-right">
<form method="get" action="#">
<input type="text" name="Search" value="Search" onFocus="if (this.value == 'Search') this.value = '';" onBlur="if (this.value == '') this.value = 'Search';" />
</form>
</div><!-- SEARCH FORM -->
<!-- MENU -->
<div class="pull-right">
<nav class="navmenu center">
<ul>
<li class="first active scroll_btn"><a href="#home" >Home</a></li>
<li class="scroll_btn"><a href="#about" >About Us</a></li>
<li class="scroll_btn"><a href="#projects" >Projects</a></li>
<li class="scroll_btn"><a href="#team" >Team</a></li>
<li class="scroll_btn"><a href="#news" >News</a></li>
<li class="scroll_btn last"><a href="#contacts" >Contacts</a></li>
<li class="sub-menu">
<a href="javascript:void(0);" >Pages</a>
<ul>
<li><a href="blog.html" >Blog</a></li>
<li><a href="blog-post.html" >Blog Post</a></li>
<li><a href="portfolio-post.html" >Portfolio Single Work</a></li>
</ul>
</li>
</ul>
</nav>
</div><!-- //MENU -->
</div><!-- //MENU BLOCK -->
</div><!-- //CONTAINER -->
</header><!-- //HEADER -->
Le pied est mis en œuvre dans index.html
<!-- FOOTER -->
<footer>
<!-- CONTAINER -->
<div class="container">
<!-- ROW -->
<div class="row" data-appear-top-offset="-200" data-animated="fadeInUp">
<div class="col-lg-4 col-md-4 col-sm-6 padbot30">
<h4><b>Featured</b> posts</h4>
<div class="recent_posts_small clearfix">
<div class="post_item_img_small">
<img src="images/blog/1.jpg" alt="" />
</div>
<div class="post_item_content_small">
<a class="title" href="blog.html" >As we have developed a unique layout template</a>
<ul class="post_item_inf_small">
<li>10 January 2014</li>
</ul>
</div>
</div>
<div class="recent_posts_small clearfix">
<div class="post_item_img_small">
<img src="images/blog/2.jpg" alt="" />
</div>
<div class="post_item_content_small">
<a class="title" href="blog.html" >How much is to develop a design for the game?</a>
<ul class="post_item_inf_small">
<li>14 January 2014</li>
</ul>
</div>
</div>
<div class="recent_posts_small clearfix">
<div class="post_item_img_small">
<img src="images/blog/3.jpg" alt="" />
</div>
<div class="post_item_content_small">
<a class="title" href="blog.html" >How to pump designer</a>
<ul class="post_item_inf_small">
<li>21 December 2013</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 padbot30 foot_about_block">
<h4><b>About</b> us</h4>
<p>We value people over profits, quality over quantity, and keeping it real. As such, we deliver an unmatched working relationship with our clients.</p>
<p>Our team is intentionally small, eclectic, and skilled; with our in-house expertise, we provide sharp and</p>
<ul class="social">
<li><a href="javascript:void(0);" ><i class="fa fa-twitter"></i></a></li>
<li><a href="javascript:void(0);" ><i class="fa fa-facebook"></i></a></li>
<li><a href="javascript:void(0);" ><i class="fa fa-google-plus"></i></a></li>
<li><a href="javascript:void(0);" ><i class="fa fa-pinterest-square"></i></a></li>
<li><a href="javascript:void(0);" ><i class="map_show fa fa-map-marker"></i></a></li>
</ul>
</div>
<div class="respond_clear"></div>
<div class="col-lg-4 col-md-4 padbot30">
<h4><b>Contacts</b> Us</h4>
<!-- CONTACT FORM -->
<div class="span9 contact_form">
<div id="note"></div>
<div id="fields">
<form id="contact-form-face" class="clearfix" action="#">
<input type="text" name="name" value="Name" onFocus="if (this.value == 'Name') this.value = '';" onBlur="if (this.value == '') this.value = 'Name';" />
<textarea name="message" onFocus="if (this.value == 'Message') this.value = '';" onBlur="if (this.value == '') this.value = 'Message';">Message</textarea>
<input class="contact_btn" type="submit" value="Send message" />
</form>
</div>
</div><!-- //CONTACT FORM -->
</div>
</div><!-- //ROW -->
</div><!-- //CONTAINER -->
</footer><!-- //FOOTER -->
Le style.css implémente les styles suivants aux éléments:
Pied de page:
footer {
overflow:hidden;
position:fixed;
bottom:0;
left:50%;
opacity:0;
width:100%;
padding:60px 0 10px;
color:#999;
background-color: #1c1c1c;
transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
z-index:1;
}
Menu_block:
.menu_block {
position: fixed;
z-index:9999;
left:0;
top:0;
right:0;
height:80px;
width:100%;
background-color:#fff;
box-shadow:0 2px 3px rgba(0,0,0,0.1);
}
[Quelque chose sur mon site ne fonctionne pas, puis-je simplement y coller un lien?] (Https://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or- project-doesnt-work-can-i-just-paste-a-link-to-it) Non, merci de créer un [MCVE] – Pete
ajouté quelques informations. J'espère que cela aide – Jones