Едет верстка при уменьшении страницы и работе с меню

@Jokerrs · Регистрация: 23.02.2013

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

У себя на сайте заметил одну не хорошую особенность, когда уменьшаю страницу и навожу на меню у меня едит верстка, или если я например поставлю логотип по высоте меньше 41px верстка начинает ехать при 100%. Со слайдером похожая беда.
Мой сайт

Кликните здесь для просмотра всего текста

elo-boost.ru

Возможно есть решение?

@Sabio · 13.08.2014, 21:41

при наведении на li появляется

CSS

1	border-bottom: 1px solid #fff;

. Конечно у вас будет прыгать на этот пиксель

@Jokerrs · 13.08.2014, 22:06 **[ТС]**

Sabio, в каком файле как исправить?

@Sabio · 13.08.2014, 22:39

Jokerrs, ну надо уметь такие вещи смотреть, раз у вас есть сайт.
файл template.css
917-я строка

@Jokerrs · 14.08.2014, 07:07 **[ТС]**

Sabio, Не знаю правильно ли я сделал. Я полностью выпилил 917 строчку, результат есть. Возможно есть более гуманное решение ? И вот у меня точно также слайдер едит, не подскажите строчку? И это профессиональный шаблон, не понимаю, почему разработчики это не исправили. На их офф сайте шаблон работает также криво.

@Sabio · 14.08.2014, 14:17

CSS

1 2	height: 413px; box-sizing: border-box;

вставьте в файл preset1.css в правило на 53-й строке.

Добавлено через 1 минуту
ну и не забудьте префиксы:

CSS

1 2	-moz-box-sizing: border-box; -webkit-box-sizing: border-box;

@Jokerrs · 14.08.2014, 20:25 **[ТС]**

Sabio, а что дают эти префиксы? что с ними что без них не вижу разницы.

@Jokerrs · 14.08.2014, 20:34 **[ТС]**

И как заставить эти кнопочки не прыгать?

@Дмитрий76 · 14.08.2014, 20:58

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

И как заставить эти кнопочки не прыгать?

Сделайте слайды одинаковыми по высоте.
Сейчас кнопочки центрируются по центру высоты слайда. А слайды разные по высоте. Поэтому они и прыгают.

Добавлено через 6 минут
Или можно принудительно задать всем слайдам одну высоту.
Добавить в CSS строки

CSS

1
2
3

#myCarousel.carousel.slide {
  height: 220px;
}

Не самое оптимильное решение, пожалуй. Попробуйте.
Если при добавлении слайдов проблемы возникнут, то можно будет ещё поглядеть

@Sabio · 14.08.2014, 21:38

Jokerrs, префиксы для старых браузеров нужны. Обязательно, чтобы правило без префикса было последним.

А вообще "учите матчасть"(с). Курсов по html/css тьма тьмущая

@Jokerrs · 15.08.2014, 01:43 **[ТС]**

Дмитрий76, а как сверху отступ уменьшить?
Снизу отступ уменьшается при помощи этого правила

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

Код CSS
height: 413px;
box-sizing: border-box;
вставьте в файл preset1.css в правило на 53-й строке.

@Sabio · 15.08.2014, 03:43

Там padding стоит у вас в том же правиле.

@Jokerrs · 15.08.2014, 05:21 **[ТС]**

Sabio, вроди не стоит.

@Дмитрий76 · 15.08.2014, 07:13

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

а как сверху отступ уменьшить?

У вас правило есть, я так понимаю, вы его самостоятельно куда-то вписали

CSS

1
2
3

#sp-feature-wrapper {
  padding: 80px 0 !important;
}

Замените его на

CSS

1
2
3

#sp-feature-wrapper {
  padding: 0 !important;
}

А в файле presets1.css, в строке 53 есть правило

CSS

#sp-feature-wrapper {
  background-color: #199FD0;
  background-image: linear-gradient(to bottom, #22B8F0, #0B78A1);
  background-repeat: repeat-x;
  box-sizing: border-box;
  height: 350px;
}

Вырежьте строчку height: 350px;
И используйте при форматировании текста в слайде 2 те же теги, которые использованы в слайде 1. То есть не параграфы <p>, а заголовки <h1> и <h2>.
У вас сайт сделан с адаптацией под мобильные. Но для параграфов в слайдере правил адаптивности не прописано. А для заголовков - прописаны. Уменьшите по ширине экран браузера до 600px хотя бы — и сразу всё увидите.

@Jokerrs · 15.08.2014, 08:04 **[ТС]**

Дмитрий76, а как отступы уменьшить?

Добавлено через 24 минуты

Сообщение от Дмитрий76

У вас правило есть, я так понимаю, вы его самостоятельно куда-то вписали
#sp-feature-wrapper {
* padding: 80px 0 !important;
}

Я вообще хз где это правило прописано, я ничего не прописывал.

@Jokerrs 1 / 1 / 2 Регистрация: 23.02.2013 Сообщений: 199
	15.08.2014, 01:43 [ТС]	11
	Дмитрий76, а как сверху отступ уменьшить? Снизу отступ уменьшается при помощи этого правила Сообщение от Sabio Код CSS height: 413px; box-sizing: border-box; вставьте в файл preset1.css в правило на 53-й строке. Миниатюры 0

@Sabio 57 / 57 / 14 Регистрация: 24.06.2013 Сообщений: 265
	15.08.2014, 03:43	12
	Там padding стоит у вас в том же правиле. 0

@Jokerrs 1 / 1 / 2 Регистрация: 23.02.2013 Сообщений: 199
	13.08.2014, 22:06 [ТС]	3
	Sabio, в каком файле как исправить? 0

@Sabio 57 / 57 / 14 Регистрация: 24.06.2013 Сообщений: 265
	13.08.2014, 22:39	4
	Jokerrs, ну надо уметь такие вещи смотреть, раз у вас есть сайт. файл template.css 917-я строка 1

@Jokerrs 1 / 1 / 2 Регистрация: 23.02.2013 Сообщений: 199
	14.08.2014, 07:07 [ТС]	5
	Sabio, Не знаю правильно ли я сделал. Я полностью выпилил 917 строчку, результат есть. Возможно есть более гуманное решение ? И вот у меня точно также слайдер едит, не подскажите строчку? И это профессиональный шаблон, не понимаю, почему разработчики это не исправили. На их офф сайте шаблон работает также криво. 0

@Jokerrs 1 / 1 / 2 Регистрация: 23.02.2013 Сообщений: 199
	14.08.2014, 20:25 [ТС]	7
	Sabio, а что дают эти префиксы? что с ними что без них не вижу разницы. 0

@Jokerrs 1 / 1 / 2 Регистрация: 23.02.2013 Сообщений: 199
	14.08.2014, 20:34 [ТС]	8
	И как заставить эти кнопочки не прыгать? Миниатюры 0

@Sabio 57 / 57 / 14 Регистрация: 24.06.2013 Сообщений: 265
	14.08.2014, 21:38	10
	Jokerrs, префиксы для старых браузеров нужны. Обязательно, чтобы правило без префикса было последним. А вообще "учите матчасть"(с). Курсов по html/css тьма тьмущая 1

@Jokerrs 1 / 1 / 2 Регистрация: 23.02.2013 Сообщений: 199
	15.08.2014, 05:21 [ТС]	13
	Sabio, вроди не стоит. 0

@Jokerrs 1 / 1 / 2 Регистрация: 23.02.2013 Сообщений: 199
	15.08.2014, 08:04 [ТС]	15
	Дмитрий76, а как отступы уменьшить? Добавлено через 24 минуты Сообщение от Дмитрий76 У вас правило есть, я так понимаю, вы его самостоятельно куда-то вписали #sp-feature-wrapper { * padding: 80px 0 !important; } Я вообще хз где это правило прописано, я ничего не прописывал. 0