0 Пользователей и 1 Гость просматривают эту тему.
  • 5 Ответов
  • 13493 Просмотров
*

poizon

  • Завсегдатай
  • 498
  • 186
  • Buu
Казалось бы задача проста, но на деле все оказывается иначе. 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% экрана. !!!???!!!
« Последнее редактирование: 19.05.2009, 13:36:24 от poizon »
*

PaLyCH

  • Живу я здесь
  • 973
  • 127
  • Архитектор сайтов
Нашел более простой и смешной способ выравнивания
Код: css
#mainmenu ul {text-align:center}
#mainmenu li { display:inline-block;*display:inline}
;D

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

icq944277

  • Новичок
  • 2
  • 0
  • joomlaman.free-lance.ru
спс
Код: css
#mainmenu ul {text-align:center;}
#mainmenu li {display:inline-block;}
« Последнее редактирование: 11.05.2012, 07:56:23 от icq944277 »
*

PaLyCH

  • Живу я здесь
  • 973
  • 127
  • Архитектор сайтов
спс
Код: css
#mainmenu ul {text-align:center;}
#mainmenu li {display:inline-block;}

Я внес поправки
*

poizon

  • Завсегдатай
  • 498
  • 186
  • Buu
Молодец, тролль засчитан.
Я тоже внес

Код
.center {float:right;right:50%}
.center > ul, .center .helper {float:left;right:-50%}
Оба должны быть position:relative
*

wonalive

  • Новичок
  • 7
  • 0
Код
удалил тонну кода и вставил это
#mainmenu ul {text-align:center}
#mainmenu li { display:inline-block;*display:inline}
всё работает  ;D
 +
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

"Прыгает" меню при загрузке

Автор Svlad

Ответов: 0
Просмотров: 78
Последний ответ 15.09.2017, 01:09:01
от Svlad
Joomla 3.6.5 - центрирование сайта

Автор romanovakira2012

Ответов: 1
Просмотров: 219
Последний ответ 02.06.2017, 03:00:46
от almika
Изменить высоту модуля меню

Автор kunsaid

Ответов: 4
Просмотров: 553
Последний ответ 24.04.2017, 21:45:05
от kunsaid
Выпадающее меню не выпадает при наведении

Автор serg450453

Ответов: 3
Просмотров: 703
Последний ответ 13.04.2017, 18:14:09
от TyronNIKO
Верхнее меню мерцает

Автор slepoy

Ответов: 1
Просмотров: 435
Последний ответ 23.02.2017, 01:06:36
от dmitry_stas