Скорость убирания подпунктов меню

[Rocker47 0]

Подскажите пожалуйста тег для CSS, битый час бьюсь, не могу найти в гугле. У меня пункты меню 3 уровня быстро исчезают, ты не успеваешь на них нажать. Как это исправить? Вот сайт http://alyans-cp.ru/ Поменял дизайн меню теперь встала это проблема. Когда жмёшь на пункт Коммерческая потом Аренда и дальше следующие подпункты Офисы и Торговые площадки быстро исчезают и ты не успеваешь на них нажать.

[TopRaN 235]

МММ., да. Мне бы за таую верстку Дмитрий с Костей руки бы оторвали. Ваша проблема находится в 74 строке 

а именно в margin-right. Увеличите отступ хотя бы 2px.

P.S. Меню у Вас двухуровневое.

[Rocker47 0]

28 минут назад, TopRaN сказал:

МММ., да. Мне бы за таую верстку Дмитрий с Костей руки бы оторвали.

Да я ещё новичок Спасибо за ответ

[Rocker47 0]

57 минут назад, TopRaN сказал:

а именно в margin-right. Увеличите отступ хотя бы 2px.

Вот что происходит, они сильно увеличиваются когда выставляю 2px.

[TopRaN 235]

Я вам написал увеличить на 2рх. Т.е. должно получиться 87-89рх.  

[Rocker47 0]

14 часа назад, TopRaN сказал:

Я вам написал увеличить на 2рх. Т.е. должно получиться 87-89рх.  

Спасибо. помогло. Возник ещё один вопрос. Каким тегом убрать расстояние между галерей и меню. У меня то получается убрать, но перестаёт работать меню. Зачем такая большая область уделено меню? Вот это расстояние что стрелками на скрине показано. Даже на один пиксель уменьшаю всё равно перестаёт работать меню и даже пробовал наоборот увеличивать размеры гелереи всё равно такой же эффект.

[TopRaN 235]

Ваша проблема заключается в корне не правильного расположения объектов верстки.

для того что бы ни чего не менять можете сделать так. В style.css заменить класс img.logo на следующее содержимое.

img.logo {
    right: 500px;
    position: absolute;
    width: 180px;
}

добавляем в style.css следующее содержимое.

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
    width: 733px;
    height: 328px;
    top: 0;
    margin-bottom: 20px;
}
.carousel-control {
    top: 45%;
}

результат должен получится следующего вида http://joxi.ru/4AkpoOKsMv0X7r

[Rocker47 0]

4 часа назад, TopRaN сказал:

Ваша проблема заключается в корне не правильного расположения объектов верстки.

для того что бы ни чего не менять можете сделать так. В style.css заменить класс img.logo на следующее содержимое.

Огромное спасибо.

[Rocker47 0]

В 24.09.2016 в 09:45, TopRaN сказал:

результат должен получится следующего вида http://joxi.ru/4AkpoOKsMv0X7r

Всё работает, единственное, лого не активно, раньше когда жмёшь на него, переходишь как бы на главную страницу.

[TopRaN 235]

30 минут назад, Rocker47 сказал:

Всё работает, единственное, лого не активно, раньше когда жмёшь на него, переходишь как бы на главную страницу.

img.logo {
    right: 500px;
    position: absolute;
    width: 180px;
    z-index: 2;
}

Добавил z-index

[Rocker47 0]

39 минут назад, TopRaN сказал:

Добавил z-index

О да точно теперь работает

[Rocker47 0]

В 24.09.2016 в 09:45, TopRaN сказал:

результат должен получится следующего вида http://joxi.ru/4AkpoOKsMv0X7r

Выявилась проблемка. Случайно открыл сайт на другом компьютере с другим разрешением монитора, а там лого съехало в лево, всё время в разных местах на разных экранах, видимо из-за тега position: absolute. Как исправить?

[TopRaN 235]

Два варианта, 1. Полностью переделывать ваш блок т.к. он изначально сделан не правильно. 2. Подключать медиа запросы под каждое разрешения экрана и медиа устройств.

[Rocker47 0]

4 минуты назад, TopRaN сказал:

1. Полностью переделывать ваш блок т.к. он изначально сделан не правильно.

Я не особо что менял прям так сильно, это вёрстка стандартного шаблона agency, просто добавил галерею и уменьшил лого и чуть-чуть меню.

6 минут назад, TopRaN сказал:

2. Подключать медиа запросы под каждое разрешения экрана и медиа устройств.

А на этом поподробней это как?

[TopRaN 235]

2 часа назад, Rocker47 сказал:

Я не особо что менял прям так сильно, это вёрстка стандартного шаблона agency, просто добавил галерею и уменьшил лого и чуть-чуть меню.

А на этом поподробней это как?

1. Вы не соблюдали основное правило верстки, поэтому для вашего экрана было хорошо, я для других плохо.

2. http://webdesignerwall.com/tutorials/css3-media-queries

[Rocker47 0]

3 часа назад, TopRaN сказал:

2. http://webdesignerwall.com/tutorials/css3-media-queries

Мда не много сложновато. А что из этого для ноутбуков подойдёт? В основном разрешение 1366x768.

[Chernetskiy 469]

5 часов назад, Rocker47 сказал:

Мда не много сложновато. А что из этого для ноутбуков подойдёт? В основном разрешение 1366x768.

Используемые графические разрешения устройств, с которых к вам заходят, можно посмотреть например в статистике, у вас-же установлена статистика Яндекса, Гугла, Мейл.ру или еще что-то?

В большинстве случае используются 1366х768 и 1280х800, есть и менее распространенные, которые тоже стоит учитывать. Вот например статистика моего сайта, от наиболее популярных к менее популярным, так что ориентируйся как минимум на ТОР10:

1280х800 - 92
1366х768 - 67
1920х1080 - 62
1280х1024 - 47
1600х900 - 33
360х640 - 19
1024х768 - 10
1280х720 - 10
1440х900 - 10
1680х1050 - 7
375х667 - 6
1920х1200 - 6
320х568 - 5
768х1024 - 5
1024х600 - 4
1024х819 - 3
300х371 - 2
320х534 - 2
320х570 - 2
600х1024 - 2
720х1280 - 2
1309х818 - 2
1344х840 - 2
1438х808 - 2
240х301 - 1
320х405 - 1
320х480 - 1
338х563 - 1
414х736 - 1
480х854 - 1
601х914 - 1
800х1280 - 1
853х682 - 1
853х683 - 1
854х480 - 1
962х601 - 1
1024х560 - 1
1024х640 - 1
1093х614 - 1
1152х864 - 1
1280х752 - 1
1302х768 - 1
1391х783 - 1
1400х1050 - 1
1536х864 - 1
1600х1200 - 1
1616х1050 - 1
2021х1137 - 1
2560х1600 - 1

А вообще, я-бы вам посоветовал не жадничать и ломать копья, а просто установить шаблон с "резиновым" дизайном (responsive design), в котором уже прописаны основные варианты графических разрешений дисплеев, включая специфику дисплеев Retina (Apple). В зависимости от устройства и разрешения экрана сайт, его структура и меню будут автоматически адаптироваться к ширине экрана. 

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

[Rocker47 0]

14 часа назад, Chernetskiy сказал:

А вообще, я-бы вам посоветовал не жадничать и ломать копья, а просто установить шаблон с "резиновым" дизайном (responsive design)

Не шаблон хочу использовать именно этот уже много работы было сделано на нём.

14 часа назад, Chernetskiy сказал:

В большинстве случае используются 1366х768 и 1280х800, есть и менее распространенные, которые тоже стоит учитывать.

Мне ещё надо что именно и куда вставлять. В самом img.logo надо прописывать? Потому что именно оно ехало на разных экранах или вообще в header?

[Chernetskiy 469]

В 01.10.2016 в 14:15, Rocker47 сказал:

Не шаблон хочу использовать именно этот уже много работы было сделано на нём.

Мне ещё надо что именно и куда вставлять. В самом img.logo надо прописывать? Потому что именно оно ехало на разных экранах или вообще в header?

1. То есть интересует не удобство для клиента и как следствие - посещаемость и большое количество просмотров страниц сайта, а именно тот момент, что "я так хочу"...  

Из этого следует ответ на ваш второй вопрос:

2. По большому счету, надо написать адаптивный шаблон.  Флаг вам в руки и фантазию на тысячи строк кода.   Помимо того, что у вас что-то ехало, основное не сжималось и не перестраивалось. Вы откройте свой сайт на смартфоне и оцените удобство пользования им.

[Rocker47 0]

14 часа назад, Chernetskiy сказал:

По большому счету, надо написать адаптивный шаблон.

Нет возможности и опыта его написать. И речь тут шла не об адаптивном шаблоне, а об том чтоб просто убрать расстояние между галереей и меню.

[Chernetskiy 469]

Попробуй в файле http://alyans-cp.ru/apps/system/js/bootstrap/css/bootstrap.min.css в районе строки 9 поправить стиль  

с 
margin: 0px 0 10px 90px;
на
margin: -60px 0 10px 90px;

Только еще надо поправить размер шрифта, а может и выкинуть лишнее из контактов в шапке, смотрится не важно.

[Rocker47 0]

11 час назад, Chernetskiy сказал:

Попробуй в файле http://alyans-cp.ru/apps/system/js/bootstrap/css/bootstrap.min.css в районе строки 9 поправить стиль  

Тут оно как то криво всё одной строкой идёт 9-ой. В каком именно стиле менять это значение?

[TopRaN 235]

В 01.10.2016 в 14:15, Rocker47 сказал:

Не шаблон хочу использовать именно этот уже много работы было сделано на нём.

тогда делаете следующим образом (только для вашего шаблона)

в файле purecssmenu.css в 17 строке содержимое класса ul.pureCssMenu заменяем на это

ul.pureCssMenu {
    display: block;
    zoom: 1;
    float: left;
    z-index: 999;
    margin-top: -55px;
}

p.s. Вам нужно переделать верстку.

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

для этого в style.css добавляем следующее содержимое

.carousel-inner>.item>img, .carousel-inner>.item>a>img {
    display: block;
    line-height: 1;
    height: 330px;
    width: 100%;
}

выравниваем переключатели

так же добавляем класс 

.carousel-control {
    margin-top: -100px;
}

Итог работы : http://joxi.ru/l2ZNRVPf8bED92

p.p.s. 

 

[Chernetskiy 469]

1 час назад, Rocker47 сказал:

Тут оно как то криво всё одной строкой идёт 9-ой. В каком именно стиле менять это значение?

Поиск рулит

[Rocker47 0]

2 часа назад, TopRaN сказал:

Итог работы : http://joxi.ru/l2ZNRVPf8bED92

А лого или что-нибудь ещё скакать не будет на разных разрешениях экрана?