Jump to content
Sign in to follow this  
yoursun

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

Recommended Posts

 Всем добрый день! Сделала, пользуясь разной инфой с интернета и форумов горизонтальное меню для своего "резинового" сайта, и вроде бы все нормально получилось, на моем мониторе с разрешением 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:
Edited by yoursun
Если в Вашем сообщении есть код - заключайте его в теги [code]...[/code]

Share this post


Link to post
Share on other sites

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

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

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

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


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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

обернуть такой же штукой, но там указать, например с 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;
}
}

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Similar Content

    • By 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 - С горизонтальным выпадом
       
      https://opencartforum.com/profile/723002-legioner26/?tab=field_core_pfield_13 ->> Собственный программный модуль по парсингу товаров под управлением OpenCart
    • By 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 - С горизонтальным выпадом
       
      https://opencartforum.com/profile/723002-legioner26/?tab=field_core_pfield_13 ->> Собственный программный модуль по парсингу товаров под управлением OpenCart
      Добавил 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.х Обращение к серверу разработчика Нет  
    • By malinator
      Может кто подскажет, похожий модуль по меню, своими силами найти не получилось. Меню с горизонтальным выводом, вполне подойдет если туда придется руками забивать ссылки. Платные тоже подойдут. В оригинале на скринах - битрикс. Заранее спасибо.
      http://prntscr.com/nvaka0
      http://prntscr.com/nvalsf
    • By mikh
      Скачать/Купить дополнение


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


      SL-Меню категорий (МегаМеню) [ocStore 1.5.X]
      Актуальная версия: v2.5.1
      Демо: slava911.500mb.net
      Описание:
      Модуль вывода горизонтального мега-меню категорий с иконками подкатегорий второго уровня.
      ***Принимаю заказы на индивидуальные шаблоны меню, или верстку под Ваш шаблон сайта.
      Особенности:
      Установка через VQMOD, потому в админке он не управляется; МОДУЛЬ НЕ ЗАМЕНЯЕТ НИКАКИХ ФАЙЛОВ; трех уровневый вывод категорий; задержка выпадающего менню; подсветка активного пункта меню; фото категорий второго уровня (с возможность изменять размер, см. ниже); стили вынесены в отдельный файл для простоты изменений; использует jquery; полная поддержка СЕО. Совместимость:
      ocStore_v1.5.3.1, v1.5.4.1 и выше, (стандартный шаблон) (должен работать на других версиях 1.5.х и темах).
      Гарантия работы на дефалтном шаблоне!
      Браузеры: протестированно на всех популярных браузерах.
      Установка(должен быть установлен VQMOD):
      1. Скопировать файлы на сервер.
      2. Готово, можно использовать.
      Демо: slava911.500mb.net
      Примеры индив. дизайна (по заказу):
      shelf.com.ua (индив.) www.e-23.ru (индив.) myravey.com.ua (индив.) www.fokustut.ru (индив.) akva-motors63.ru (верстка) www.avtotool.com.ua (индив.) deusstore.com ikea46.ru kotbaun.ru www.lbud.com.ua и другие... P.s.: О всех багах и просьбах пишете в лс.
      Лицензия
      Условия использования лицензии - "на один сайт".
      Это означает, что вы можете использовать одну лицензию только для одного магазина.
      Если же вы наняты клиентами, для выполнения работ над магазинами клиентов или другими магазинами, т.е. или над теми магазинами, которые вам принадлежат, вы должны приобрести расширенную лицензию. Т.е. если вы web студия, и разрабатываете интернет-магазины для клиентов, вам необходимо приобрести расширенную лицензию, так как вы передаёте модуль в пользование клиенту (т.е. передача и распространение ПО третьим лицам).
      Запрещена передача данного ПО третьим лицам, распространение от своего имени без получения разрешения автора модуля.
      Запрещается публикация, распространение модуля без согласия автора в любых целях, будь то ознакомительных или любых других.
      FAQ:
      1) Если Вылазит "белый экран смерти"?
      Это ничего страшного. Нужно просто настроить параметр offset=".." соотвествено Вашего файла header.tpl
      Подробнее под спойлером...
      2) Изменение размера превью категорий:
      отредактируйте файл:
      \vqmod\vqcache\slmenu.php   - для второго уровня строка:
      $picSubCat = $this->model_tool_image->resize($category_2['image'], 50, 50);   где "50, 50" это ширина и высота превью категории второго уровня
      Добавил slava911 Добавлено 19.10.2012 Категория Модули Системные требования Сайт разработчика Старая цена Метод активации Без активации Ioncube Loader Нет OpenCart 1.5.6.4
      1.5.6.3
      1.5.6.2
      1.5.6.1
      1.5.6
      1.5.4.1
      1.5.3.1 ocStore 1.5.5.1.2
      1.5.5.1.1
      1.5.5.1
      1.5.4.1.2
      1.5.4.1.1
      1.5.4.1
      1.5.3.1
      1.5.2.1
      1.5.1.3 OpenCart.Pro, ocShop Не проверялось  
  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.