Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

При изменении разрешения экрана сьезжает верхнее меню вниз


Recommended Posts

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

В прикреплённых скрин нормального отображения, и как съезжает.

post-672094-0-34910900-1381653090_thumb.jpg

post-672094-0-17310200-1381653091_thumb.jpg

Надіслати
Поділитися на інших сайтах


А автор темы Bigshop не в курсе,что не так с его шаблоном?

 

http://xn--90aycgp.xn--p1ai/

Надіслати
Поділитися на інших сайтах

 

как вариант подправить отступами

75 строка

#menu > ul > li > a {
 font-size:13px; 
color: #fff; 
line-height:40px; 
text-decoration: none; 
display: block; 
padding:0px 5px 0px 5px; <----------
z-index: 1009; 
position: relative; 
font-weight:bold; 
}

Всё это есть. Вот из моего css меню

 

/* menu */

#menu { background:url(../image/menu.png) left top repeat #444; margin-bottom:15px; height:40px; padding:0px 5px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px;}

li.home { margin:0 0 0 5px; }

li.home a { display:block; height:35px!important; line-height:35px!important; padding:5px 5px 0 5px!important; }

li.home a span { background:url(../image/home-icon.png) center center no-repeat; display:block; width:30px; height:30px; text-indent:-9999px; }

#menu ul { list-style: none; margin: 0; padding: 0;}

#menu > ul > li { position: relative; float: left; z-index:1010; padding:0px 5px 0px 0px; }

#menu > ul > li > a { font-size:13px; color: #fff; line-height:40px; text-decoration: none; display: block; padding:0px 10px 0px 10px; z-index: 1009; position: relative; font-weight:bold; }

#menu > ul > li:hover > a {color:#fff; background:#F15A23; }

#menu > ul > li > div { display: none; background:#F15A23; position: absolute; z-index:1008; padding: 5px; border-radius:0px 0px 4px 4px; -webkit-border-radius:0px 0px 4px 4px; -moz-border-radius:0px 0px 4px 4px;}

#menu > ul > li:hover > div { display: table; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4); }

#menu > ul > li > div > ul { display: table-cell; }

#menu > ul > li ul + ul { padding-left: 20px; }

#menu > ul > li ul > li > a {background:url(../image/bullet-1.png) -10px center no-repeat; text-decoration: none; font-size:12px; padding:4px; display: block; white-space: nowrap; min-width: 120px; -moz-transition:all 0.3s ease 0s; transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s}

#menu > ul > li ul > li > a:hover {background:url(../image/bullet-1.png) right center no-repeat; font-weight:bold; -moz-transition:all 0.3s ease 0s; transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s;}

#menu > ul > li > div > ul > li > a { color:#fff; }

Надіслати
Поділитися на інших сайтах


А если приглядеться? 

 

Да я делал по 5px. Проблема не исчезает, всё равно начинаешь уменьшать экран, всё съезжает.  думал прикрутить туда overflow-x: hidden, этот вариант устраивает, чтобы просто не показывались там категории которые не влезают, но при этом меню перестает раскрываться =))))

Надіслати
Поділитися на інших сайтах


Не вариант. Суть вся в этой резинке. Неужели ни как не разрулить этот вопрос.

в стилях есть такой файлик ещё autocomplete.css

там

#searchField {
    width: 200px;    
}
#results {
    max-height:325px;
    overflow:auto;
    font-size:14px;
    font-family: Arial, Helvetica, sans-serif;
    padding:5px 0px;
    display: none;
    z-index:9999;
    background-color:#fff;
    border:1px solid #ccc;
    box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);
    width:480px!important;
}
#results div {
    padding:0px;
}
#results .selected {
    background-color:#eee;
    padding:3px 12px;
    cursor:default;
}
#results .unselected {    
    color: #222;
    padding:3px 12px;
}
@media screen and (max-width:1024px) {
#results{width:480px!important;}
}
@media screen and (max-width:768px) {
#results{width:91%!important;}
}
@media screen and (max-width:320px) {
 }
@media screen and (max-width:480px) {

#results{width:87%!important;}
}

 

может здесь стоит искать решение???!

Надіслати
Поділитися на інших сайтах


в итоге сделал чтобы при разрешении экрана меньше 1025px в ширину, меню имело стиль overflow-x: hidden. и строку поиска подредактировал чтобы не заезжала на меню

Надіслати
Поділитися на інших сайтах


И снова проблема. На сей раз с отображение в IE. Модуль на главной при уменьшении экрана съезжает в низ. В мазиле всё отлично отображается а IE как всегда проблем создает. Помогите зафиксить это.

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

post-672094-0-29040800-1381725059_thumb.jpg

Надіслати
Поділитися на інших сайтах


Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.