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

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

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

У себя на сайте заметил одну не хорошую особенность, когда уменьшаю страницу и навожу на меню у меня едит верстка, или если я например поставлю логотип по высоте меньше 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
1
2
3
4
5
6
7
#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;
}

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

Новые блоги и статьи Все статьи Все блоги /
Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .
Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .

@Jokerrs 1 / 1 / 2 Регистрация: 23.02.2013 Сообщений: 199

	Едет верстка при уменьшении страницы и работе с меню 13.08.2014, 21:17. Показов 3661. Ответов 14 Метки нет (Все метки) У себя на сайте заметил одну не хорошую особенность, когда уменьшаю страницу и навожу на меню у меня едит верстка, или если я например поставлю логотип по высоте меньше 41px верстка начинает ехать при 100%. Со слайдером похожая беда. Мой сайт Кликните здесь для просмотра всего текста elo-boost.ru Возможно есть решение? 0

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

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

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

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

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

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

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

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