Конфликт стилей

@ahino · Регистрация: 01.02.2017

Студворк — интернет-сервис помощи студентам

У меня проблема с установкой popup окон обратной связи (так или иначе они все конфликтуют с главными стилями), есть два главных файла стилей это main.css и base.css и при их отключении окна начинают отображаться нормально. Сейчас я установил окно и оно тоже отображается не правильно, к нему идут файлы remodal.css и remodal-default-theme.css. Помогите решить эту проблему. Ссылка на сайт http://sadline.ru/. Вызвать окно можно пролистав на Цены и нажав кнопку "Оставить заявку"

@Fedor92 · 01.02.2017, 13:27

ahino, ну так ищите конфликтующие стили и переименуйте классы... В чём проблема? Можно и файлы стилей объединить в один файл с комментариями для компактности...

@ahino · 01.02.2017, 13:37 **[ТС]**

Fedor92, в том то и дело, что я искал и никакой связи между ними не нашел, мне хотя бы узнать в каком направлении копать, а файлы действительно объединю попозже, главное в этом разобраться.

@Fedor92 · 01.02.2017, 14:25

Сообщение от ahino

мне хотя бы узнать в каком направлении копать

Открываете инспектор объектов - F12, там все стили которые применяются к модальному окну с указанием файлов из которых эти стили взяты - вот и сверяйте...

@ahino · 01.02.2017, 14:52 **[ТС]**

Как он вообще подцепил в стили body из main.css, если в этом коде

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
   <div class="remodal" data-remodal-id="modal" role="dialog" aria-labelledby="modal1Title" aria-describedby="modal1Desc">
 <div class="remodalBorder">
  <p><img src="img/sendico.png"></p>
  <button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>
      <form id="form">
        <h2 id="modal1Title">Оставьте ваши контактные данные и наш консультант свяжется <br>с вами</h2>
        <input type="text" class="putName" name="name" placeholder="Ваше ваше имя" required>
        <input name="phone" type="tel" class="putPhone" placeholder="Введите номер телефона" required>
        <input type="submit" name="submit" class="btn" value="ОТПРАВИТЬ">
        <input type="hidden" name="formData" value="Заявка с сайта">
    </form>
</div>
</div>

класс body не подключен.?

@Fedor92 · 01.02.2017, 14:58

Сообщение от ahino

класс body

Это не класс, перед классом в стилях точка стоит - это стили селектора элемента body, которые наследуют все элементы для которых не указан шрифт и межстрочный интервал и находятся внутри body... В данном случае шрифт и интерлиньяж...

@ahino · 01.02.2017, 15:15 **[ТС]**

А почему button унаследовался, если он не подключен? И связана ли эта строчка

HTML5
1
<button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>

с тем, что он подключился, если да, то как это исправить?

@Fedor92 · 01.02.2017, 15:19

Сообщение от ahino

А почему button унаследовался, если он не подключен?

По селектору элемента <button>! Мне Вам все стили расшифровывать?

@ahino · 01.02.2017, 15:44 **[ТС]**

Возможно ли как то переименовать <button> у модального окна или придется менять названия классов в main.css и base.css?

@Fedor92 · 01.02.2017, 16:09

Сообщение от ahino

Возможно ли как то переименовать <button> у модального окна или придется менять названия классов в main.css и base.css?

Да придётся задавать конкретные имена классам и выпиливать стили, которые применяются по селекторам элементов, чтобы не было путаницы...

@ahino · 01.02.2017, 16:52 **[ТС]**

С button я практически разобрался, а как теперь исправить, что бы он брал только свои стили, а не из body.

@Fedor92 · 01.02.2017, 17:46

ahino, в классе можно прописать размер шрифта и интелиньяж... К примеру:

CSS
1
.remodal-close{font:14px/1.25 Tahoma}

@ahino · 03.02.2017, 00:45 **[ТС]**

Можете показать как исправить input чтобы не было конфликта с input,ом из файла main.css на примере хотя бы одной строчки из исходного кода, второй день не могу понять принцип его работы.

Исходный код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="remodal" data-remodal-id="modal" role="dialog" aria-labelledby="modal1Title" aria-describedby="modal1Desc">
 <div class="remodalBorder">
  <p><img src="img/sendico.png"></p>
   <div class="selicon"><button="btn" data-remodal-action="close" class="remodal-close" aria-label="Close"></button></div>
      <form id="form">
        <h2 id="modal1Title">Оставьте ваши контактные данные и наш консультант свяжется <br>с вами</h2>
         <div class="denis"><input type="text" name="name" class="putName" placeholder="Ваше ваше имя" required></div>
        <input name="phone" type="tel" class="putPhone" placeholder="Введите номер телефона" required>
        <input type="submit" name="submit" class="btn" value="ОТПРАВИТЬ">
        <input type="hidden" name="formData" value="Заявка с сайта">
        <p style="margin:0;"><a style="font-size:12px; text-align:center; color:rgba(255, 255, 255, .3);" href="http://smartlanding.biz/ajax-forma-v-modalnom-okne.html">Хочу такую форму на свой сайт</a></p>
    </form>
</div>
</div>

@Fedor92 · 03.02.2017, 11:33

А чего тут 2 дня думать?

CSS
1
.putName, .putPhone, .btn{Ваши стили}

Или удалить из стилей input, input[type="submit"] и т.д. Но проследить, чтобы это удаление ни на что не повлияло... Обращайтесь к элементам по классам в стилях, а не с помощью селекторов элементов и будет Вам счастье...

@web-tech · 03.02.2017, 14:41

Сообщение от Fedor92

А чего тут 2 дня думать?
CSSВыделить код
1
.putName, .putPhone, .btn{Ваши стили}
Или удалить из стилей input, input[type="submit"] и т.д. Но проследить, чтобы это удаление ни на что не повлияло... Обращайтесь к элементам по классам в стилях, а не с помощью селекторов элементов и будет Вам счастье...

.btn имеет меньшую специфичность, чем input[type="submit"]. В данном случае селекторы по одному классу не прокатят.

@Fedor92 · 03.02.2017, 14:48

Сообщение от web-tech

.btn имеет меньшую специфичность, чем input[type="submit"]

Да, что Вы говорите... Я где-то в ответе упомянул что-то про специфичность? Я показал, как грамотно стили задавать для элементов!

@web-tech · 03.02.2017, 14:59

Fedor92, Задавать первоначальные стили для input[type="text"], input[type="password"], input[type="datetime"] и т.д. по вашему не грамотно? Если ТС не захочет удалять эти селекторы, что вполне вероятно, и воспользуется советом делать селекторы по классам в том виде, что вы посоветовали, снова будут вопросы у него про конфликт стилей.

@Fedor92 · 03.02.2017, 15:14

Сообщение от web-tech

Задавать первоначальные стили для input[type="text"], input[type="password"], input[type="datetime"] и т.д. по вашему не грамотно?

В корне... Объясню на простом примере... Допустим у Вас на страничке имеется ряд форм или независимых элементов, которые имеют одинаковый селектор, к примеру текстовые поля и кнопки... Написав, стили по селектору элемента, Вам каждый раз придётся при необходимости увеличивать специфичность стилей, а вот если задавать стили по селектору класса, то вероятность того, что придётся перекрывать стили намного меньше, можно сказать в разы... Пример:
Форма 1:

HTML5
1
2
3
4
5
6
7
<form action="">
    <input type="text" class="i_text">
    <input type="text" class="i_text">
    <input type="text" class="i_text">
    <input type="text" class="i_text">
    <input type="submit" class="i_btn">
</form>

Форма 2:

HTML5
1
2
3
4
5
6
7
<form action="">
    <input type="text" class="i_text2">
    <input type="text" class="i_text2">
    <input type="text" class="i_text2">
    <input type="text" class="i_text2">
    <input type="submit" class="i_btn2">
</form>

Стили по селектору класса:

CSS
1
2
3
4
.i_text{...}
.i_button{...}
.i_text2{...}
.i_button2{...}

К конфликтам никогда не приведут! В данном случае изменение стилей осуществляется по конкретному классу и применяется к элементам уникальной формы... И не надо ничего перекрывать...
Стили по селектору элемента:

CSS
1
input, input[type="text"], input[type="submit"]{...}

Рано или поздно приведут к конфликтам! В данном случае изменение стилей осуществляется по конкретному селектору элемента и применяется к элементам обеих форм...

@web-tech · 03.02.2017, 15:29

Fedor92, Ну тогда тоже на примере - на сайте имеется пять различных форм и получается, что для всех input[type="submit"] (button[type="submit"]) Вы будете давать свои классы (хотя хватило бы и модификаторов): i_btn1, i_btn2, i_btn3, i_btn4 и i_btn4. Далее для каждого из них задавать стили с правилами, которые на 90% будут дублировать друг друга из-за вполне ожидаемого единообразия элементов формы на всем сайте.

@Fedor92 · 03.02.2017, 15:34

web-tech, я что олень, писать одинаковые свойства, если их можно объединить?

CSS
1
2
3
4
5
.i_btn, .i_btn2, .i_btn3, .i_btn4{Общие свойства}
.i_btn{Уникальные свойства}
.i_btn2{Уникальные свойства}
.i_btn3{Уникальные свойства}
.i_btn4{Уникальные свойства}

Никаких конфликтов, ничего не нужно перекрывать, компактно, оптимизировано, эстетично и расширяемо самое главное...

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&d=1772460536 Одним из. . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .
SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .

@ahino 0 / 0 / 0 Регистрация: 01.02.2017 Сообщений: 14

	Конфликт стилей 01.02.2017, 13:15. Показов 6784. Ответов 35 Метки нет (Все метки) У меня проблема с установкой popup окон обратной связи (так или иначе они все конфликтуют с главными стилями), есть два главных файла стилей это main.css и base.css и при их отключении окна начинают отображаться нормально. Сейчас я установил окно и оно тоже отображается не правильно, к нему идут файлы remodal.css и remodal-default-theme.css. Помогите решить эту проблему. Ссылка на сайт http://sadline.ru/. Вызвать окно можно пролистав на Цены и нажав кнопку "Оставить заявку" 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	01.02.2017, 13:27
	ahino, ну так ищите конфликтующие стили и переименуйте классы... В чём проблема? Можно и файлы стилей объединить в один файл с комментариями для компактности... 1

@ahino 0 / 0 / 0 Регистрация: 01.02.2017 Сообщений: 14
	01.02.2017, 13:37 [ТС]
	Fedor92, в том то и дело, что я искал и никакой связи между ними не нашел, мне хотя бы узнать в каком направлении копать, а файлы действительно объединю попозже, главное в этом разобраться. 0

@ahino 0 / 0 / 0 Регистрация: 01.02.2017 Сообщений: 14
	01.02.2017, 15:44 [ТС]
	Возможно ли как то переименовать <button> у модального окна или придется менять названия классов в main.css и base.css? 0

@ahino 0 / 0 / 0 Регистрация: 01.02.2017 Сообщений: 14
	01.02.2017, 16:52 [ТС]
	С button я практически разобрался, а как теперь исправить, что бы он брал только свои стили, а не из body. 0

@web-tech 34 / 34 / 14 Регистрация: 10.06.2015 Сообщений: 57
	03.02.2017, 14:59
	Fedor92, Задавать первоначальные стили для input[type="text"], input[type="password"], input[type="datetime"] и т.д. по вашему не грамотно? Если ТС не захочет удалять эти селекторы, что вполне вероятно, и воспользуется советом делать селекторы по классам в том виде, что вы посоветовали, снова будут вопросы у него про конфликт стилей. 1

@web-tech 34 / 34 / 14 Регистрация: 10.06.2015 Сообщений: 57
	03.02.2017, 15:29
	Fedor92, Ну тогда тоже на примере - на сайте имеется пять различных форм и получается, что для всех input[type="submit"] (button[type="submit"]) Вы будете давать свои классы (хотя хватило бы и модификаторов): i_btn1, i_btn2, i_btn3, i_btn4 и i_btn4. Далее для каждого из них задавать стили с правилами, которые на 90% будут дублировать друг друга из-за вполне ожидаемого единообразия элементов формы на всем сайте. 1