Возникла проблема, на сайте когда нажимаю на менюшку ( она выпадает) , но выпадает под футер а нужно чтоб была сверху!Скрыни!
Менюшка сделана на сss , фолдер сделан на js!
Менюшка сделана на сss , фолдер сделан на js!
Help,проблема с футером!
- Автор темы AdmiralSirokosan
- Дата начала
Согласин но футер и меню в разных блоках и z-index не работает!
Так а при чем тут разные блоки? z-index вроде как для всех работает, нужен только правильный position.
А вообще лучше css видеть, чтобы больше подсказать.
HTML - Css -
HTML:
<html>
<head>
<title>Se7vent</title>
<link rel="stylesheet" href="style.css">
<script src="js/jquery-1.12.2.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider(
{ pager:false,
auto:true,
autoHover:true
}
);
});
</script>
</head>
<body>
<div id="wrraper">
<div id="header">
<div id="logo-social">
<div id="logo"></div>
<div id="social">
<a href="#"><div id="col"></div></a>
<a href="#"><div id="vimo"></div></a>
<a href="#"><div id="flik"></div></a>
<a href="#"><div id="twit"></div></a>
<a href="#"><div id="face"></div></a>
</div>
</div>
<div id="menu">
<div id="help"></div>
<p class="menu-spac5"><a href="#">Contact</a></p>
<p class="menu-spac4"><a href="#">Blog</a></p>
<p class="menu-spac3"><a href="#">Shortcodes</a></p>
<p class="menu-spac2"><a href="#">Portfolio</a></p>
<ul class="nav">
<li class="spac">
<a id="Features">Features</a>
<a class="backcl" href="#">Full Width</a>
<a class="backcl" href="#">Typography</a>
<a class="backcl" href="#">Shortcoodes</a>
<a class="backcl" href="#">Blog</a>
<a class="backcl" href="#">Siders</a>
</li>
</ul>
<p class="menu-spac1"><a href="index.html">Home</a></p><div>
</div>
</div>
<div id="content">
<div id="slider">
<ul class="bxslider">
<li><img src="image/Slider/s1.jpg" alt="" class="cnt"/></li>
<li><img src="image/Slider/s2.jpg" alt="" class="cnt" /></li>
<li><img src="image/Slider/s3.jpg" alt="" class="cnt" /></li>
<li><img src="image/Slider/s4.jpg" alt="" class="cnt" /></li>
</ul>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html> Код:
@import url(reset.css);
@font-face {
font-family: HelveticaNeueCyr;
src: url(font/HelveticaBold.ttf);
}
body{
background-color:grey;
}
#header{
width:1020px;
margin:0 auto;
}
#logo-social{
padding:15px 30px 0px;
}
#logo{
background:url(image/logo.png) no-repeat;
width:110px;
height:59px;
float:left;
}
#face{
background:url(image/social/face.png) no-repeat;
height:16px;
width:16px;
float:right;
padding-right:25px;
}
#twit{
background:url(image/social/tw.png) no-repeat;
height:14px;
width:16px;
float:right;
padding-right:25px;
}
#flik{
background:url(image/social/flik.png) no-repeat;
height:16px;
width:16px;
float:right;
padding-right:25px;
}
#vimo{
background:url(image/social/vimo.png) no-repeat;
height:14px;
width:16px;
float:right;
padding-right:25px;
}
#col{
background:url(image/social/col.png) no-repeat;
height:16px;
width:16px;
float:right;
}
#social{
padding-top:15px;
padding-right:35px;
}
#menu{
background:url(image/Menu/menu.png) no-repeat;
width:1020px;
height:72px;
float:left;
margin-top:10px;
padding-top:6px;
}
.nav{
list-style:none;
float:right;
}
.nav li a{
display:block;
width:100px;
height:49px;
line-height:40px;
margin:1px;
padding-left:15px;
color:black;
cursor:pointer;
transition:all .2s ease-in-out;
}
.nav li{
height:49px;
width:100px;
overflow:hidden;
transition:all .2s ease-in-out;
}
.nav li:hover {
height:255px;
width:100px;
background-color:white;
box-shadow: 5px 5px 4px rgba(0,0,0,0.5);
}
.nav li a:hover{
background:#00f0ff;
color:white;
}
.backcl{
font:13px HelveticaNeueCyr;
border-bottom:1px solid #dfdfdf;
}
#Features{
background:url(image/Menu/Features.png) no-repeat;
height:49px;
width:60px;
font:13px HelveticaNeueCyr;
padding-top:15px;
z-index:2;
}
#Features:hover{
color:black;
box-shadow:none;
z-index:2;
}
.menu-spac1,.menu-spac2,.menu-spac3,.menu-spac4,.menu-spac5{
display:inline-block;
float:right;
font:13px HelveticaNeueCyr;
padding-top:15px;
}
.menu-spac5{
background:url(image/Menu/Contact.png) no-repeat;
height:49px;
width:100px;
margin-right:15px;
padding-left:10px;
}
.menu-spac4{
background:url(image/Menu/Blog.png) no-repeat;
height:49px;
width:80px;
padding-left:15px;
}
.menu-spac3{
background:url(image/Menu/Shortcodes.png) no-repeat;
height:49px;
width:120px;
padding-left:15px;
}
.menu-spac2{
background:url(image/Menu/Portfolio.png) no-repeat;
height:49px;
width:100px;
padding-left:15px;
}
.menu-spac1{
background:url(image/Menu/Blog.png) no-repeat;
height:49px;
width:80px;
}
a{
text-decoration:none;
color:black;
}
#help{
background:url(image/help.png) no-repeat;
height:16px;
width:16px;
float:left;
margin-left:32px;
margin-top:20px;
}
#content{
background:url(image/content.png) no-repeat;
width:1020px;
height:1172px;
margin-top:140px;
padding:30px;
}
#slider{
position:relative;
width:950px;
padding:2px;
float:left;
border:1px solid #cecece;
border-radius:5px;
box-shadow: 2px 2px 3px black;
z-index:1;
}
.bx-prev{
display:block;
width:20px;
height:23px;
background:white url(image/bx-prev.png) no-repeat;
position:absolute;
left:1px;
top:50%;
margin-top:-10px;
text-indent:-999999px;
border-radius:2px;
}
.bx-next{
display:block;
width:20px;
height:23px;
background:white url(image/bx-next.png) no-repeat;
position:absolute;
right:0;
top:50%;
margin-top:-17px;
text-indent:-999999px;
border-radius:2px;
}
.bxslider li img{
max-width:100%px;
}
.cnt{
margin-left:1px;
margin-top:3px;
margin-bottom:-3px;
}
.bx-wrapper{
z-index:1;
}
.bxslider img{
z-index:1;
}Также розобрал код jq у фолдера абсолютное поз., у елементов релатив!Если делать меню через jq то все норм, но надо именно через сss and jq!
Похожие темы
