Перейти к содержанию
rubon

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

Рекомендуемые сообщения

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

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

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; 
}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

 

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

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; }

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Всё это есть. Вот из моего 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; }

 

как вариант подправить отступами
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;

детская игра: найди 2 отличия

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

в таком случае делай фиксированный шаблон (убери резинку)

удалить строка 457

.main-wrapper{margin: 15px 15px 0 15px;}

строка 18

.main-wrapper{

max-width:1170px;     заменить на    width:1170px; 

margin:20px auto 0 auto;

padding:0 15px;

background:#fff;

box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.08);

border-radius:5px 5px 0px 0px;

-webkit-border-radius:5px 5px 0px 0px;

-moz-border-radius:5px 5px 0px 0px;

}

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

в стилях есть такой файлик ещё 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;}
}

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

значит прописывай под каждое разрешение отступы, там они некорректно прописаны

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

а как бы прописать чтобы если не влезает меню справа, то оно расширялось в низ на 40px  и переносились бы  тогда туда ссылки??

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Похожий контент

    • От ermakov1993
      Добрый день!
      Подскажите пожалуйста как можно вставить поле с информацией в самом верху на всех страницах, пример как на скрине.
      Буду благодарен за помощь!

    • От msk966
      Добрый день, не могу разобраться как редактировать верхнее меню, даже путь к нему не могу найти. Хочу туда вместо категорий поставить "доставка" "оплата" и т.п.. Буду очень признателен за помощь.
      Заранее спасибо

    • От arber64
      Есть стандартное немного измененное верхнее горизонтальное меню 1.5.6.4 разделенное на 2 колонки.
      Вопрос в том, как разделить количество категорий примерно поровну на две колонки?  Так как сейчас в первой колонке длинная портянка уходящая вниз за пределы монитора, а вторая почти пустая.
      Может размер по высоте как то ограничить но не получается.
      Я думаю что нужно подправить где то здесь:
      И еще вопрос: Как сделать чтоб выпадающее меню было при наведении поверх всего?
      Пробовал z-index:10000 не помогает.
      Спросите для чего это мне - просто при уменьшении размера монитора меню сворачивается в две строки и попасть в подкатегорию из верхней строчки невозможно.
       
       
       
      Помогите пожалуйста.
    • От estry
      Здравствуйте. 
      Форумчане, подскажите, как объединить пункты верхнего меню http://puu.sh/fOptB/ef991de334.png

      Уточнение. Нужно пункты "Закладки", "Моя информация", "Корзина", "Оформление заказа", "Войти", "Зарегистрироваться" спрятать в выпадающий список под названием "Личный кабинет"

      Как добавлять в верхнее меню пункты из раздела статьи?
    • От Moskau
      Здравствуйте, нужно сделать верхнее меню по центру, а не слевого края как сейчас, пример сайта antarescon.ru
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.