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

[РЕШЕНО] Как правильно центровать пункты горизонтального меню?

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

 Всем добрый день! Сделала, пользуясь разной инфой с интернета и форумов горизонтальное меню для своего "резинового" сайта, и вроде бы все нормально получилось, на моем мониторе с разрешением 1440х900 пункты меню встали по центру страницы, но при открытии сайта на мониторах с другим разрешением меню едет в сторону, на большем размере смещается влево, а на меньшем, бьется на две строки. Все мои попытки изменить это ни к чему не приводят, те советы что даются на просторах инета, типа text-align: center; или #menu {margin:0 auto;} не помогают. Подскажите, пожалуйста, что нужно сделать чтобы на всех мониторах меню стояло как надо (по центру страницы и в одну строку)?

 

Вот ссылка на тест. страницу сайта http://yoursun.myjino.ru/index.html

Ниже скрины с двух разных мониторов.

 

Это код моего меню:

#menu {font-family:  "Times New Roman", "Times CY", "Nimbus Roman No9 L", serif; text-align: center;}

#menu ul
 {
margin: 0; 
padding: 0; 
float: left;
padding-left: 25%;
width: 100%; 
text-align: center;
} 

#menu ul li { display: inline; } 
#menu ul li a { 
float: left; 
color: #696969; 
padding: 5px 11px; 
text-decoration: none; 
font-size: 130%;
text-align: center;
background: #9ACD32 url(slant.gif) no-repeat top right; padding: 0px 25px 0px 10px; }
border-right: 2px solid #FFFAFA;

#menu ul li a: visited{color: #696969; } 
#menu a:hover {color: #000;}
#menu ul li .current{ 
padding-top: 6px; 
padding-bottom: 4px; 
text-align: center;} 
P/s. не судите строго, я не WEBмастер, просто мне очень нужен сайт  :oops:
Изменено пользователем yoursun
Если в Вашем сообщении есть код - заключайте его в теги [code]...[/code]

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


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

Поигрался немного с демкой. Вроде вышло
 
для #menu добавить ширину в 850px

#menu {
margin: 0 auto;
width: 850px;
} 

для #menu ul убрать padding-left:20%

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


З.Ы. А браузеру мозилла файерфокс еще не нравится у элемента li свойство margin-right: 20pt; если выставить ширину менюшки в 850 пикселей, то криво смотрится

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


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

Центрирование - страшная штука, которая вечно будет куда-нибудь сползать. Оставляйте выравнивание по левому краю и не заморачивайтесь. А то придется потом еще костыли писать под разные браузеры и девайсы...

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


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

Получилось!!!  Ой, я прям вас расцеловать готова! Огромное вам спасибо!!!

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


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

Там нужно так же учесть, что если ширина окна браузера будет меньше 850 то этот блок будет вылезать за край

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


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

Ну тут уже нужно добавлять в css'ку что-то типа

@media screen and (min-width: 320px) and (max-width: 500px) {
#menu {
margin: 0 auto;
width: 450px;
}
}

если ширина страницы от 320 до 500 пикселей то... и тут экспериментируем с шириной элемента #menu

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


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

А куда именно в css меню надо этот код вставить, или в любое место можно? И этот код так и должен начинаться с @, или перед ним надо какой-то тег еще написать?

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


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

По идее можно куда угодно. Я у себя в самом верху вставлял, когда клепал резиновость для удобства просмотра на древних телефонах с шириной 320 пикселей. И да, нужно вставлять как есть с @

Естественно, должен остаться и старый вариант и этот новый, который будет срабатывать только при определенной ширине окна браузера.

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


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

Ну тогда, скорее всего, нужно старый вариант без условий

обернуть такой же штукой, но там указать, например с 850 до 2000 пикселей

и в итоге должно быть что-то типа

@media screen and (min-width: 320px) and (max-width: 800px) {
#menu {
margin: 0 auto;
width: 450px;
}
}

и ниже

@media screen and (min-width: 850px) and (max-width: 2000px) {
#menu {
margin: 0 auto;
width: 850px;
}
}

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


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

поменяла в варианте для маленьких экранов width: 450px; на width: 550px; - меню стало в две строчки, но тогда оно не уложится, видимо в min-width: 320px

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


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

Мдя. Это так тут вечно можно химичить.

Заменить для этого элемента свойство на инлайн-блок вместо инлайн

#menu ul li {
display: inline-block;
}

После этого получается, что вся менюшка становится шире и 850 пикселей уже мало. Можно поэкспериментировать от 870 до 900 для

#menu {
margin: 0 auto;
width: 850px;
}

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


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

Да, я думаю, стоит остановиться на предыдущем варианте. Он в принципе меня устраивает, я и не рассчитывала на то, что мой сайт будут смотреть через телефон :-) .

Вам же огромное, огромное спасибо за участие и помощь, вы меня очень выручили!!! :-)  :-)  :-)

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


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

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

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

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

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

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

Войти

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

Войти

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

    • От iDiy
      675.00 руб
      Скачать/Купить дополнение


      YUMenu (расширенный модуль меню)
      YUMenu 1.0.7 (расширенный модуль меню)
       
      Надежный и функциональный модуль расширенного произвольного меню, включает в себя витрину категорий, горизонтальное, вертикальное меню и меню для мобильных устройств.
      Модуль позволяет создавать многоуровневое меню из произвольных элементов (наименования, ссылки, изображения - произвольные) и/или из элементов каталога (категории, товары, бренды, статьи), создавая из них абсолютно любую структуру.
       
      Особенности модуля:
      неограниченный уровень вложенности меню; выборочные элементы меню (категории, производители, статьи, товары); произвольные ссылки с собственными параметрами (наименования, ссылки, классы, иконки); популярное адаптивное меню "Amazon"; три стиля вертикального меню: "Accordion", меню "Flyout" и меню "Push"; отображение меню для конкретной категории/производителя/товара; экспорт/импорт настроек модуля и структуры элементов меню; функция скрытия пустых (без товара) категорий и производителей; количество товаров категории и производителя без потери производительности; поддержка мульти-магазинов и групп пользователей; подключение произвольных макетов, стилей и скриптов; поддержка мобильных устройств; модуль оптимизирован для наилучшей производительности; модуль не заменяет системных файлов; простая установка в меню дополнений...  
      Совместимость: OpenCart, ocStore, ocShop и прочие сборки версий OC 2.1 - 3.0
      Системные требования: php 5.6, 7.2, IonCube Loader 10+
       
      Демонстрация работы модуля на примере:
      Витрины категорий, Категории, Товара, Бренда
      Админ демо (логин/пароль: demo/demo)
       
      Добавил iDiy Добавлено 29.06.2017 Категория Меню, дизайн, внешний вид Системные требования php 5.6 - 7.2, IonCube Loader 6+ Сайт разработчика Старая цена Метод активации По запросу на почту Ioncube Loader Требуется OpenCart 3.0
      2.3
      2.2
      2.1 ocStore 3.0
      2.3
      2.2
      2.1 OpenCart.Pro, ocShop Opencart.pro 2.3
      Opencart.pro 2.1  
    • От iDiy
      YUMenu 1.0.7 (расширенный модуль меню)
       
      Надежный и функциональный модуль расширенного произвольного меню, включает в себя витрину категорий, горизонтальное, вертикальное меню и меню для мобильных устройств.
      Модуль позволяет создавать многоуровневое меню из произвольных элементов (наименования, ссылки, изображения - произвольные) и/или из элементов каталога (категории, товары, бренды, статьи), создавая из них абсолютно любую структуру.
       
      Особенности модуля:
      неограниченный уровень вложенности меню; выборочные элементы меню (категории, производители, статьи, товары); произвольные ссылки с собственными параметрами (наименования, ссылки, классы, иконки); популярное адаптивное меню "Amazon"; три стиля вертикального меню: "Accordion", меню "Flyout" и меню "Push"; отображение меню для конкретной категории/производителя/товара; экспорт/импорт настроек модуля и структуры элементов меню; функция скрытия пустых (без товара) категорий и производителей; количество товаров категории и производителя без потери производительности; поддержка мульти-магазинов и групп пользователей; подключение произвольных макетов, стилей и скриптов; поддержка мобильных устройств; модуль оптимизирован для наилучшей производительности; модуль не заменяет системных файлов; простая установка в меню дополнений...  
      Совместимость: OpenCart, ocStore, ocShop и прочие сборки версий OC 2.1 - 3.0
      Системные требования: php 5.6, 7.2, IonCube Loader 10+
       
      Демонстрация работы модуля на примере:
      Витрины категорий, Категории, Товара, Бренда
      Админ демо (логин/пароль: demo/demo)
       
    • От legioner26
      399.00 руб
      Скачать/Купить дополнение


      Многофункциональный модуль меню Категорий
      Разработан многофункциональный модификатор меню категорий товаров, который позволяет прям из админ панели решать массу задач без участия программиста. Очень простая и легкая установка.
      Так же внедрена мобильная версия модуля.
      Модификатор создан для изменения и добавления функционала в стандартный модуль категорий всех версий веток ОС начиная от 2.0 и заканчивая 3.0
      Обновление модификатора до версии ОС 3.0
      ПРИМЕЧАНИЕ !!!
      Для корректной установки и работы модификатора настоятельно рекомендую проверить были ли изменены файлы стандартного модуля категорий, 
      либо удостовериться что нет сторонних модификаторов которые бы меняли функционал.
      В случае если файлы изменены, можете добавить к ним префикс к примеру (category_1.tpl) и залить файлы из коробки ОС. 
       
       
      АКЦИЯ ДО КОНЦА СЕНТЯБРЯ !!!
       
      Установка:
      1. Папку Admin закинуть на хостинг в корень сайта 
      2. Устанавливаете модификатор согласно вашей версии ОС через "Установка расширений", далее в модификаторах чистим кешь и обновляем.
      ИНСТРУКЦИЯ во вложении
      DEMO Логин: demo Пароль: demo
      https://siacosmetics.ru/lico1/dlya-lica/krem-dlya-lica  - С вертикальным выпадом
      https://teplomir77.ru/ - С горизонтальным выпадом
       
       
      Добавил legioner26 Добавлено 12.02.2018 Категория Меню, дизайн, внешний вид Системные требования Сайт разработчика Старая цена 700 Метод активации Без активации Ioncube Loader Нет OpenCart 3.0
      2.3
      2.2
      2.1
      2.0 ocStore 3.0
      2.3
      2.2
      2.1 OpenCart.Pro, ocShop Opencart.pro 2.3
      Opencart.pro 2.1
      OcShop 2.0.3.х  
    • От legioner26
      Разработан многофункциональный модификатор меню категорий товаров, который позволяет прям из админ панели решать массу задач без участия программиста. Очень простая и легкая установка.
      Так же внедрена мобильная версия модуля.
      Модификатор создан для изменения и добавления функционала в стандартный модуль категорий всех версий веток ОС начиная от 2.0 и заканчивая 3.0
      Обновление модификатора до версии ОС 3.0
      ПРИМЕЧАНИЕ !!!
      Для корректной установки и работы модификатора настоятельно рекомендую проверить были ли изменены файлы стандартного модуля категорий, 
      либо удостовериться что нет сторонних модификаторов которые бы меняли функционал.
      В случае если файлы изменены, можете добавить к ним префикс к примеру (category_1.tpl) и залить файлы из коробки ОС. 
       
       
      АКЦИЯ ДО КОНЦА СЕНТЯБРЯ !!!
       
      Установка:
      1. Папку Admin закинуть на хостинг в корень сайта 
      2. Устанавливаете модификатор согласно вашей версии ОС через "Установка расширений", далее в модификаторах чистим кешь и обновляем.
      ИНСТРУКЦИЯ во вложении
      DEMO Логин: demo Пароль: demo
      https://siacosmetics.ru/lico1/dlya-lica/krem-dlya-lica  - С вертикальным выпадом
      https://teplomir77.ru/ - С горизонтальным выпадом
       
       
    • От mikh
      Скачать/Купить дополнение


      Шаблон "Good-night" для ocStore 1.5.5.1.2. - горизонтальное меню+img категории
      Шаблон удален разработчиком!
      Добавил mikh Добавлено 11.10.2014 Категория Бесплатные шаблоны Системные требования Сайт разработчика Старая цена Метод активации Ioncube Loader OpenCart ocStore OpenCart.Pro, ocShop  
  • Последние посетители   0 пользователей онлайн

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

×

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

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