0 Пользователей и 1 Гость просматривают эту тему.
  • 19 Ответов
  • 778 Просмотров
*

Gromz

  • Осваиваюсь на форуме
  • 18
  • 0 / 0
Перекликивание стилей CSS
« : 30.07.2019, 04:07:05 »
Сделал интересную вещь для себя (пример) https://jsfiddle.net/c0k5bp7o/
но когда вставляю на сайт происходит перекликивание стилей.
Подскажите как исправить, чтобы работало как в примере.
Страничка сайта http://nf.misis.ru/sozdat/media
*

ProtectYourSite

  • Живу я здесь
  • 2156
  • 116 / 4
  • Безопасность вебсайтов
Re: Перекликивание стилей CSS
« Ответ #1 : 30.07.2019, 13:51:53 »
Задайте nav id  и указывайте все стили с этим id
Код
nav#mycustomid ul {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}
*

Gromz

  • Осваиваюсь на форуме
  • 18
  • 0 / 0
Re: Перекликивание стилей CSS
« Ответ #2 : 12.08.2019, 12:50:59 »
Задайте nav id  и указывайте все стили с этим id
Код
nav#mycustomid ul {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}
Сделал как вы сказали все тоже самое даже nav изменил на navo
*

Webster

  • Захожу иногда
  • 185
  • 7 / 0
Re: Перекликивание стилей CSS
« Ответ #3 : 12.08.2019, 12:53:22 »
даже nav изменил на navo
зачем?
*

Webster

  • Захожу иногда
  • 185
  • 7 / 0
Re: Перекликивание стилей CSS
« Ответ #4 : 12.08.2019, 12:57:48 »
вам же дали верный совет
Задайте nav id  и указывайте все стили с этим id
делаете
Код
<nav id="test">
  <ul>

    <li><a href="#">&nbsp ВСЕ ГОДА</a>

      <!-- первый уровень выпадающего списка -->
      <ul class="spisok">
        <li><a class="active" href="#">ВСЕ ГОДА</a></li>
        <li><a href="#">&nbsp 2019</a></li>
        <li><a href="#">&nbsp 2018</a></li>
        <li><a href="#">&nbsp 2017</a></li>
        <li><a href="#">&nbsp 2016</a></li>
        <li><a href="#">&nbsp 2015<</a></li>
      </ul>

    </li>

  </ul>
</nav>
вместо test свой айдии встилях своих меняете где nav
на nav#test
*

Gromz

  • Осваиваюсь на форуме
  • 18
  • 0 / 0
Re: Перекликивание стилей CSS
« Ответ #5 : 12.08.2019, 13:08:50 »
вам же дали верный советделаете
Код
<nav id="test">
  <ul>

    <li><a href="#">&nbsp ВСЕ ГОДА</a>

      <!-- первый уровень выпадающего списка -->
      <ul class="spisok">
        <li><a class="active" href="#">ВСЕ ГОДА</a></li>
        <li><a href="#">&nbsp 2019</a></li>
        <li><a href="#">&nbsp 2018</a></li>
        <li><a href="#">&nbsp 2017</a></li>
        <li><a href="#">&nbsp 2016</a></li>
        <li><a href="#">&nbsp 2015<</a></li>
      </ul>

    </li>

  </ul>
</nav>
вместо test свой айдии встилях своих меняете где nav
на nav#test
Все как вы сказали, везде заменил в классах тоже, но все тоже самое - не работает http://nf.misis.ru/sozdat/media
Код
nav#myspisok {
  margin: 0px !important;
  padding: 0 !important;
  z-index: 9999; overflow: hidden;
}
/* убираем отступы и поля, а также list-style для "ul",
* и добавляем "position:relative" */
nav#myspisok ul {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  position: relative !important; z-index: 9999
}
/* применяем inline-block позиционирование к элементам навигации */
nav#myspisok ul li {
  position: relative !important;
  margin: 0px -7px 0 0 !important;
  display: inline-block !important;
  border: 2px solid #2c3e50 !important; z-index: 9999
}
/* стилизуем ссылки */
nav#myspisok a {
  display: block !important;
  padding: 0 10px !important;
  color: #000 !important;
  font-family: webnar, sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 60px !important;
  text-decoration: none !important; z-index: 9999
}
nav#myspisok ul li .spisok a {
  display: block !important;
  padding: 0 10px !important;
  color: #fff !important;
  font-family: webnar, sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 60px !important;
  text-decoration: none !important; z-index: 9999
}
nav#myspisok a.active {
  position: relative !important;
  margin: 10px 10px 0px 10px !important;
  width: 112px !important;
  background-color: #009fdf !important; z-index: 9999
}
/* изменяем цвет фона при наведении курсора */
nav#myspisok ul li .spisok a:hover { z-index: 9999;
  color: #f65376 !important;
}
/* скрываем выпадающие списки по умолчанию
* и задаем абсолютное позиционирование */
nav#myspisok ul ul { z-index: 9999;
  display: none !important;
  position: absolute !important;
  top: 100%; z-index: 9999
}
/* отображаем выпадающий список при наведении */
nav#myspisok ul li:hover>ul { z-index: 9999;
  display: inherit !important; z-index: 9999
}
/* первый уровень выпадающего списка */
nav#myspisok ul ul li {
  min-width: 160px !important;
  float: none !important;
  display: list-item !important;
  position: relative !important;
  background-color: #2c3e50 !important; z-index: 9999
}
/* измените ' +' на любой другой символ, если нужно*/
li>a: after {
  content: ' ▼' !important; z-index: 9999
}
li>a:only-child: after {
  content: '' !important; z-index: 9999
}
« Последнее редактирование: 12.08.2019, 13:13:59 от Gromz »
*

Gromz

  • Осваиваюсь на форуме
  • 18
  • 0 / 0
Re: Перекликивание стилей CSS
« Ответ #6 : 12.08.2019, 13:38:05 »
насколько я понимаю мешает...


Код
.art-postcontent ul>li, .art-post ul>li, .art-textblock ul>li {

    overflow-x: visible;    overflow-y: hidden;
  • Как от этого избавиться, но не менять весь шаблон
*

ProtectYourSite

  • Живу я здесь
  • 2156
  • 116 / 4
  • Безопасность вебсайтов
Re: Перекликивание стилей CSS
« Ответ #7 : 12.08.2019, 13:40:32 »
nav#myspisok ul ul уберите position: absolute; и желательно или удалить или переопределить под конкретные классы:
Код
.art-postcontent ul>li:before, .art-post ul>li:before, .art-textblock ul>li:before {
    content: url(../images/postbullets.png);
    margin-right: 6px;
    bottom: 2px;
    position: relative;
    /* display: inline-block; */
    vertical-align: middle;
    font-size: 0;
    line-height: 0;
}
Там уже стилистика останется
*

Gromz

  • Осваиваюсь на форуме
  • 18
  • 0 / 0
Re: Перекликивание стилей CSS
« Ответ #8 : 12.08.2019, 13:46:15 »
nav#myspisok ul ul уберите position: absolute; и желательно или удалить или переопределить под конкретные классы:
Код
.art-postcontent ul>li:before, .art-post ul>li:before, .art-textblock ul>li:before {
    content: url(../images/postbullets.png);
    margin-right: 6px;
    bottom: 2px;
    position: relative;
    /* display: inline-block; */
    vertical-align: middle;
    font-size: 0;
    line-height: 0;
}
Там уже стилистика останется
А можно по подробнее, не совсем понятно что сделать нужно?
*

Gromz

  • Осваиваюсь на форуме
  • 18
  • 0 / 0
Re: Перекликивание стилей CSS
« Ответ #9 : 12.08.2019, 13:47:58 »
Если убираю  "nav#myspisok ul ul уберите position: absolute; " - то список открывает не на блоках, а перед ними и все съезжает, так не надо
« Последнее редактирование: 12.08.2019, 14:15:24 от Gromz »
*

ProtectYourSite

  • Живу я здесь
  • 2156
  • 116 / 4
  • Безопасность вебсайтов
Re: Перекликивание стилей CSS
« Ответ #10 : 12.08.2019, 14:24:43 »
Тогда уберите !important со всех правил
*

Gromz

  • Осваиваюсь на форуме
  • 18
  • 0 / 0
Re: Перекликивание стилей CSS
« Ответ #11 : 12.08.2019, 14:34:22 »
Тогда уберите !important со всех правил
Убрал !important со всех - все тоже самое, что мне сделать с
.art-postcontent ul>li, .art-post ul>li, .art-textblock ul>li
Если я убираю    overflow-y: hidden; - то список открывается, иначе никак, как его убрать не затронув весь шаблон?
Как вообще сделать под свои стили, а не шаблона всего и li берет шаблона и ul?
*

ProtectYourSite

  • Живу я здесь
  • 2156
  • 116 / 4
  • Безопасность вебсайтов
Re: Перекликивание стилей CSS
« Ответ #12 : 12.08.2019, 15:42:03 »
В nav#myspisok ul li добавьте что-то типо overflow: inherit;
*

Gromz

  • Осваиваюсь на форуме
  • 18
  • 0 / 0
Re: Перекликивание стилей CSS
« Ответ #13 : 12.08.2019, 16:21:17 »
В nav#myspisok ul li добавьте что-то типо overflow: inherit;
Ой, помогло, спасибо ,а как теперь уголки убрать с li не трогая весь шаблон?

Кажется понял, лучше подключить кастомный стиль туда все вписать и в нужных тегах important прописать.
« Последнее редактирование: 12.08.2019, 17:06:12 от Gromz »
*

ProtectYourSite

  • Живу я здесь
  • 2156
  • 116 / 4
  • Безопасность вебсайтов
Re: Перекликивание стилей CSS
« Ответ #14 : 12.08.2019, 17:25:46 »
лучше конечно переопределять через уникальные теги для нужных случаев
*

Gromz

  • Осваиваюсь на форуме
  • 18
  • 0 / 0
Re: Перекликивание стилей CSS
« Ответ #15 : 12.08.2019, 17:46:32 »
лучше конечно переопределять через уникальные теги для нужных случаев
А как так делать, можно какой-нибудь пример?
*

ProtectYourSite

  • Живу я здесь
  • 2156
  • 116 / 4
  • Безопасность вебсайтов
Re: Перекликивание стилей CSS
« Ответ #16 : 12.08.2019, 18:01:40 »
<nav id="mycustomid">
*

Gromz

  • Осваиваюсь на форуме
  • 18
  • 0 / 0
Re: Перекликивание стилей CSS
« Ответ #17 : 12.08.2019, 18:05:59 »
<nav id="mycustomid">
Так это одно, а внутри и li и ul и у всех шаблонный стиль берет
*

Gromz

  • Осваиваюсь на форуме
  • 18
  • 0 / 0
Re: Перекликивание стилей CSS
« Ответ #18 : 12.08.2019, 18:08:22 »
<nav id="mycustomid">
а так я все nav#myspisok поставил, только эти классы тоже надо как то перераспределять (они шаблонные)
.art-postcontent ul>li:before, .art-post ul>li:before, .art-textblock ul>li:before {
« Последнее редактирование: 12.08.2019, 18:12:47 от Gromz »
*

ProtectYourSite

  • Живу я здесь
  • 2156
  • 116 / 4
  • Безопасность вебсайтов
Re: Перекликивание стилей CSS
« Ответ #19 : 12.08.2019, 22:05:42 »
Вместо .art-postcontent ставить nav#myspisok и данные стили будут переопределять art-postcontent
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Как изменить не меняя основных стилей?

Автор wishlight

Ответов: 2
Просмотров: 981
Последний ответ 14.03.2018, 18:58:53
от wishlight
@import стилей для различных экранов

Автор master-smeta

Ответов: 4
Просмотров: 1095
Последний ответ 01.07.2015, 17:43:40
от neogeek
Как сделать переопределение стилей для syperfish menu?

Автор Panchito

Ответов: 2
Просмотров: 838
Последний ответ 18.11.2014, 12:47:27
от effrit
Как же все таки найти этот CSS с таблицей стилей шрифта меню?

Автор Kinimania

Ответов: 20
Просмотров: 1680
Последний ответ 30.09.2014, 13:53:33
от Kinimania
Настройки стилей img-intro и img-fulltext в шаблоне

Автор mr.relax

Ответов: 8
Просмотров: 2243
Последний ответ 29.10.2013, 14:56:31
от darkghost