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

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

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

У меня проблема с установкой 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

   <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

<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

<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

<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

.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

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

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

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	01.02.2017, 16:09	10
	Сообщение от ahino Возможно ли как то переименовать <button> у модального окна или придется менять названия классов в main.css и base.css? Да придётся задавать конкретные имена классам и выпиливать стили, которые применяются по селекторам элементов, чтобы не было путаницы... 1

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

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

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

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	01.02.2017, 14:25	4
	Сообщение от ahino мне хотя бы узнать в каком направлении копать Открываете инспектор объектов - F12, там все стили которые применяются к модальному окну с указанием файлов из которых эти стили взяты - вот и сверяйте... 1

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	01.02.2017, 14:58	6
	Сообщение от ahino класс body Это не класс, перед классом в стилях точка стоит - это стили селектора элемента body, которые наследуют все элементы для которых не указан шрифт и межстрочный интервал и находятся внутри body... В данном случае шрифт и интерлиньяж... 1

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	01.02.2017, 15:19	8
	Сообщение от ahino А почему button унаследовался, если он не подключен? По селектору элемента <button>! Мне Вам все стили расшифровывать? 1

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

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

@web-tech 34 / 34 / 14 Регистрация: 10.06.2015 Сообщений: 57
	03.02.2017, 14:41	15
	Сообщение от Fedor92 А чего тут 2 дня думать? CSSВыделить код 1 .putName, .putPhone, .btn{Ваши стили} Или удалить из стилей input, input[type="submit"] и т.д. Но проследить, чтобы это удаление ни на что не повлияло... Обращайтесь к элементам по классам в стилях, а не с помощью селекторов элементов и будет Вам счастье... .btn имеет меньшую специфичность, чем input[type="submit"]. В данном случае селекторы по одному классу не прокатят. 1

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	03.02.2017, 14:48	16
	Сообщение от web-tech .btn имеет меньшую специфичность, чем input[type="submit"] Да, что Вы говорите... Я где-то в ответе упомянул что-то про специфичность? Я показал, как грамотно стили задавать для элементов! 1

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