Форум русской поддержки Joomla!® CMS
11.12.2016, 17:55:54 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

[howto]: Центрирование меню, построенного на ul - li

 (Прочитано 12190 раз)
0 Пользователей и 1 Гость смотрят эту тему.
poizon
Завсегдатай
*****

Репутация: +187/-1
Offline Offline

Пол: Мужской
Сообщений: 498


Buu


« : 06.05.2009, 18:48:01 »

Казалось бы задача проста, но на деле все оказывается иначе. text-align не помогает, margin:auto работает только при фиксированной ширине. Что делать? Решение достаточно старо, но кода у меня поменьше.

Выглядеть код должен примерно так
Код:
<div id="mainmenu">
   <ul>
    <li><a href="#" title="">Новости</a></li>
    <li><a href="#" title="">Блог</a></li>
    <li><a href="#" title="">Форум</a></li>
    <li><a href="#" title="">Интересные факты</a></li>
    <li><a href="#" title="">Тесты</a></li>
    <li><a href="#" title="">Скачать</a></li>
    <li><a href="#" title="">Контакты</a></li>
   </ul>
 </div>

Код:
div#mainmenu, div#mainmenu ul { position:relative; }
div#mainmenu  { float:right; right:50%; margin:38px 0px; width:auto;  }
div#mainmenu ul { float:none!important; float:left; right:-50%; }

Что происходит? Сначала мы прибиваем все к правой границе браузера и блок (#mainmenu) гарантированно имеет ширину равную всей области экрана. Затем мы сдвигаем его на 50% влево (right:50%;), после правая граница оказывается ровно посреди экрана.

Затем вложенный блок (сам список) принудительно уводится в левую область родительского блока (#mainmenu). Так как все слои имеют номинальную ширину в 100% то на данный момент ширина у списка (ul) получается равной 150%, а его сдвиг вправо приводит к получению его 100%ой ширины. Таким образом он оказывается всегда по центру относительно своего родительского элемента.
Вообще все это навеяно вот этой статьей, но имхо моя вариация получше. 

замечания можете писать в моем "свежем" блоге

Пример того как это работает можно увидеть тут
Черная пунктирная линия в примере проходит на 50% экрана. Huh
« Последнее редактирование: 19.05.2009, 13:36:24 от poizon » Записан
PaLyCH
Живу я здесь
******

Репутация: +146/-19
Offline Offline

Пол: Мужской
Сообщений: 974


Архитектор сайтов


« Ответ #1 : 08.06.2010, 08:41:50 »

Нашел более простой и смешной способ выравнивания
Код
#mainmenu ul {text-align:center}
#mainmenu li { display:inline-block;*display:inline}
Grin

P.S. Улучшил функционал с поддержкой ИЕ7
« Последнее редактирование: 28.01.2014, 17:24:33 от PaLyCH » Записан
icq944277
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 2


joomlaman.free-lance.ru


« Ответ #2 : 11.05.2012, 07:47:27 »

спс
Код
#mainmenu ul {text-align:center;}
#mainmenu li {display:inline-block;}
« Последнее редактирование: 11.05.2012, 07:56:23 от icq944277 » Записан
PaLyCH
Живу я здесь
******

Репутация: +146/-19
Offline Offline

Пол: Мужской
Сообщений: 974


Архитектор сайтов


« Ответ #3 : 28.01.2014, 15:10:50 »

спс
Код
#mainmenu ul {text-align:center;}
#mainmenu li {display:inline-block;}

Я внес поправки
Записан
poizon
Завсегдатай
*****

Репутация: +187/-1
Offline Offline

Пол: Мужской
Сообщений: 498


Buu


« Ответ #4 : 28.01.2014, 17:20:34 »

Молодец, тролль засчитан.
Я тоже внес

Код:
.center {float:right;right:50%}
.center > ul, .center .helper {float:left;right:-50%}
Оба должны быть position:relative
Записан
wonalive
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 7


« Ответ #5 : 26.03.2015, 03:23:50 »

Код:
удалил тонну кода и вставил это
#mainmenu ul {text-align:center}
#mainmenu li { display:inline-block;*display:inline}
всё работает  Grin
 +
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet