Помогите с СSS

Тема в разделе "Верстка", создана пользователем Дерзкий, 10 июл 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. Дерзкий

    Дерзкий Постоялец

    Регистр.:
    27 июн 2009
    Сообщения:
    100
    Симпатии:
    399
    HTML
    Код:
    <div id="wrap">
                <div id="headerSingle">
                    <div id="menu-top">
                        <ul class="menu">
        <li class="s1"><a href="http://www.rai-spa.ru/page4.html">Главная</a></li>
        <li class="s2"><a href="http://www.rai-spa.ru/our-baths/">ggggg</a>
       
        <ul class="subnav">
            
                        <li><a href="http://www.rai-spa.ru/menyu-kuhnya.html">Меню Кухня</a></li>
                        <li><a href="http://www.rai-spa.ru/menyu-bar.html">Меню Бар</a></li>
                        <li><a href="http://www.rai-spa.ru/page1.html">Русская парная</a></li>
                        <li><a href="http://www.rai-spa.ru/tayskiy-massazh.html">Тайский массаж</a></li>
                    </ul>
        </li>
    
        <li class="s3"><a href="http://www.rai-spa.ru/gallery/">Галерея</a></li>
        <li class="s4"><a href="http://www.rai-spa.ru/tour/tour.html">Виртуальный тур</a></li>
        <li class="s5"><a href="http://www.rai-spa.ru/page5.html">Контакты</a></li>
    </ul>                   
                    </div>
                </div>        
    CSS
    Код:
    #page #wrap #header #menu-top li.s2 {
        position: absolute;
        left: 308px;
        top: 500px;
    }
    #page #wrap #header #menu-top li.s2 a {
        background-image: url(../images/menu/2.png);
        background-repeat: no-repeat;
        background-position: 0px 0px;
        height: 63px;
        width: 145px;
    }
    
    #page #wrap #header #menu-top li.s2 a:hover {background-position: 0px -63px;}
    
    
    ul.menu {
        list-style:none;
        padding:0;
        margin: 0;
        font:12px Arial;
    }
    
    ul.menu li {
        float: left;
        margin: 0;   
        padding: 0;
        position: relative;
    }
    
    ul.menu li a{
       
        color: #fff;
        display: block;
        text-decoration: none;
        float: left;
        font-weight:bold;
       
       
       
    }
    
    
    
    ul.menu li ul.subnav {
    margin-top: 10px;
        list-style: none;
        position: absolute;
        left: 0; top: 60px;
        background-image: url(../images/page.png);
        margin: 0; padding: 0;
        display: none;
        float: left;
        width: 400px;
       
        z-index:1;
    }
    ul.menu li ul.subnav a {
    
    }
    
    ul.menu li ul.subnav li a {
        float: left;
        width: 400px;
        border:0;
       
       
        padding-left: 25px;
    }
    javascript

    Код:
    <script type="text/javascript">
    $(document).ready(function(){
       
         $("ul.menu li a").mouseover(function() {
                
            $(this).parent().find("ul.subnav").slideDown('fast').show();
            $(this).parent().hover(function() {
            }, function(){   
                $(this).parent().find("ul.subnav").slideUp('slow');
            });
            });
                  $("ul.menu li ul li a").mouseover(function() {
                
            $(this).parent().find("ul.subnav2").slideDown('fast').show();
            $(this).parent().hover(function() {
            }, function(){   
                $(this).parent().find("ul.subnav2").slideUp('slow');
               
            });
            });
    });
    </script>
    Есть сайт, на который давно заказали вёрстку у фрилансера, который пропал.
    Сейчас появилась необходимость сделать выпадающие меню.

    Не могу понять как убрать что бы название основной категории (картинка) не дублировалась в каждом подпункте выпадающего меню?
    [​IMG]

    Пробовал кучу разных вариантов но так и не смог понять откуда они появляются пытался прописать background-image:none; не помогло.

    Зарание спасибо.
     
  2. mozal

    mozal Постоялец

    Регистр.:
    24 окт 2011
    Сообщения:
    59
    Симпатии:
    8
    Вопрос чуть не понятен, потому что не видно результата вывода. Скорее всего поможе ввод дополнительного класса.
     
  3. Exails

    Exails Создатель

    Регистр.:
    30 июн 2014
    Сообщения:
    29
    Симпатии:
    3
    У тебя в css, один класс задан меню и подкатегориям, естественно одна картанка/фон. Попробую раздели классы .menu и .subnav
     
  4. ITeshnik

    ITeshnik Постоялец

    Регистр.:
    21 май 2007
    Сообщения:
    105
    Симпатии:
    5
    Код:
    #page #wrap #header #menu-top li.s2 a {
        background-image: url(../images/menu/2.png);
        background-repeat: no-repeat;
        background-position: 0px 0px;
        height: 63px;
        width: 145px;
    }
    Этот класс наследуют все теги "а" в этом подменю, т.е. если опуститься ниже по DOMу #page #wrap #header #menu-top li.s2 ul.subnav li a они тоже будут наследовать эти свойства.
    выхода минимум два.
    1. вот тут
    Код:
    ul.menu li ul.subnav li a {
        float: left;
        width: 400px;
        border:0;
      
      
        padding-left: 25px;
    }
    вставить свойство background-image:none, только следить что-бы в файле цсс это свойство было всегда ниже всех определений li.s1 a, li.s2 a, li.s3 a...

    2. свойство background-image: url(../images/menu/2.png) вставлять инлайном в ХТМЛ код
    <li class="s2"><a href="Перейти по ссылке" style="background-image: url(../images/menu/2.png)">ggggg</a>, тогда из цсс его нужно убрать
     
  5. vasyagr

    vasyagr Писатель

    Регистр.:
    27 апр 2013
    Сообщения:
    1
    Симпатии:
    0
    Или используйте конкретно для этого стиля
    ul.menu li ul.subnav li > a {
    float: left;
    width: 400px;
    border:0;
    padding-left: 25px;
    }
     
  6. DexMaster

    DexMaster Писатель

    Регистр.:
    26 июн 2013
    Сообщения:
    1
    Симпатии:
    1
    а почему просто не вписать строгое наследование ">"

    вместо

    #page #wrap #header #menu-top li.s2 a {
    и
    #page #wrap #header #menu-top li.s2 a:hover {

    используем

    #page #wrap #header #menu-top li.s2 > a {
    и
    #page #wrap #header #menu-top li.s2 > a:hover {

    таким образом не ломаем все следующие ссылки ))
     
    Федор123 нравится это.
  7. ninetienne

    ninetienne Писатель

    Регистр.:
    7 май 2013
    Сообщения:
    1
    Симпатии:
    0
    Создай проект на jsfiddle или codepen, так легче разбираться.
     
  8. denism300

    denism300 Постоялец

    Регистр.:
    10 май 2014
    Сообщения:
    121
    Симпатии:
    4
    не могу пока что создавать темы, поэтому попрошу помочь разобраться тут.
    верстаю шаблон, оформляю поля типа input. opera упорно отказывается воспринимать прописанные стили.
    ниже код css и скрины в опере и в FF
    Код:
    input#modlgn-username {
        border: solid 1px #625234;
        background: #2c2c2c url(../images/personal/login_img.png) no-repeat left center !important;
    }
    вот так выглядит в опере:
    [​IMG]
    вот так выглядит в FF (поле с паролем пока что не оформлено)
    [​IMG]
     
  9. Teceract

    Teceract

    Регистр.:
    15 фев 2009
    Сообщения:
    164
    Симпатии:
    75
    когда в опере сохранен пароль, то сам браузер задает стиль инпутов, через css не получиться изменить
    но есть "костыль" для отключения:
    HTML:
    <script>
    if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
        window.setInterval(function(){
            $('input:-webkit-autofill').each(function(){
                var clone = $(this).clone(true, true);
                $(this).after(clone).remove();
            });
        }, 20);
    }
    </script>
     
  10. denism300

    denism300 Постоялец

    Регистр.:
    10 май 2014
    Сообщения:
    121
    Симпатии:
    4
    Спасибо. Я нашел еще один способ. Через CSS. Правда, есть у него один минус: нельзя вставить картинку в бэкграунд.
    Вот решение, его необходимо вставить в начале файла стилей:
    HTML:
    input:-webkit-autofill {
        background-color: transparent !important;
        -webkit-box-shadow: inset 0 0 0 50px #2c2c2c !important; /* Цвет фона */
        -webkit-text-fill-color: #ECD08C !important; /* цвет текста */
        color: #ECD08C !important;
    }