Help,проблема с футером!

Тема в разделе "Создание Сайтов", создана пользователем AdmiralSirokosan, 5 апр 2016.

Статус темы:
Закрыта.
  1. AdmiralSirokosan

    Регистрация:
    5 апр 2014
    Сообщения:
    329
    Симпатии:
    255
    Розыгрышей:
    0
    Репутация:
    110
    Возникла проблема, на сайте когда нажимаю на менюшку ( она выпадает) , но выпадает под футер а нужно чтоб была сверху!Скрыни!
    1.png 2.png
    Менюшка сделана на сss , фолдер сделан на js!
     
    recardio и san4es нравится это.
  2. N@stюша

    N@stюша Король флуда

    Регистрация:
    15 янв 2016
    Сообщения:
    618
    Симпатии:
    730
    Розыгрышей:
    0
    Репутация:
    158
    Может дело в z-index? обычно им регулируют наложение.
     
  3. AdmiralSirokosan

    Регистрация:
    5 апр 2014
    Сообщения:
    329
    Симпатии:
    255
    Розыгрышей:
    0
    Репутация:
    110
    Согласин но футер и меню в разных блоках и z-index не работает!
     
    recardio и san4es нравится это.
  4. budunexe

    budunexe NeTwink

    Регистрация:
    18 мар 2016
    Сообщения:
    1.386
    Симпатии:
    728
    Розыгрышей:
    0
    Репутация:
    71
    Посмотри или у тебя в самом коде выпадающая менюшка находится выше фото (хз, но попробуй)
     
  5. N@stюша

    N@stюша Король флуда

    Регистрация:
    15 янв 2016
    Сообщения:
    618
    Симпатии:
    730
    Розыгрышей:
    0
    Репутация:
    158
    Так а при чем тут разные блоки? z-index вроде как для всех работает, нужен только правильный position.
    А вообще лучше css видеть, чтобы больше подсказать.
     
  6. budunexe

    budunexe NeTwink

    Регистрация:
    18 мар 2016
    Сообщения:
    1.386
    Симпатии:
    728
    Розыгрышей:
    0
    Репутация:
    71
    какой у тебя position стоит?
     
    recardio нравится это.
  7. AdmiralSirokosan

    Регистрация:
    5 апр 2014
    Сообщения:
    329
    Симпатии:
    255
    Розыгрышей:
    0
    Репутация:
    110
    HTML -
    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>
    
    Css -
    Код:
    @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;
    }
     
    recardio и san4es нравится это.
  8. AdmiralSirokosan

    Регистрация:
    5 апр 2014
    Сообщения:
    329
    Симпатии:
    255
    Розыгрышей:
    0
    Репутация:
    110
    Кнопка в меню -
    Код:
    #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;
    }
     
    san4es нравится это.
  9. N@stюша

    N@stюша Король флуда

    Регистрация:
    15 янв 2016
    Сообщения:
    618
    Симпатии:
    730
    Розыгрышей:
    0
    Репутация:
    158
    z-index работает только с определенными position, а у #Features не задан position.
    Как минимум, можно его задать и посмотреть, что получится.
     
    recardio нравится это.
  10. AdmiralSirokosan

    Регистрация:
    5 апр 2014
    Сообщения:
    329
    Симпатии:
    255
    Розыгрышей:
    0
    Репутация:
    110
    Нече не поменялось!
     
    recardio и san4es нравится это.
  11. AdmiralSirokosan

    Регистрация:
    5 апр 2014
    Сообщения:
    329
    Симпатии:
    255
    Розыгрышей:
    0
    Репутация:
    110
    Также розобрал код jq у фолдера абсолютное поз., у елементов релатив!Если делать меню через jq то все норм, но надо именно через сss and jq!
     
    recardio и san4es нравится это.
  12. AdmiralSirokosan

    Регистрация:
    5 апр 2014
    Сообщения:
    329
    Симпатии:
    255
    Розыгрышей:
    0
    Репутация:
    110
    Поможет кто?
     
    recardio и san4es нравится это.
  13. AdmiralSirokosan

    Регистрация:
    5 апр 2014
    Сообщения:
    329
    Симпатии:
    255
    Розыгрышей:
    0
    Репутация:
    110
    Решил проблема , кому интересно в лс!
     
    recardio нравится это.
Статус темы:
Закрыта.

Поделиться этой страницей

  • Яндекс.Метрика
  • Рейтинг@Mail.ru