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

poizon

  • Захожу иногда
  • 495
  • 187 / 1
  • 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

  • Давно я тут
  • 949
  • 146 / 19
  • Архитектор сайтов
Нашел более простой и смешной способ выравнивания
Код: 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 / 0
  • joomlaman.free-lance.ru
спс
Код: css
#mainmenu ul {text-align:center;}
#mainmenu li {display:inline-block;}
« Последнее редактирование: 11.05.2012, 07:56:23 от icq944277 »
*

PaLyCH

  • Давно я тут
  • 949
  • 146 / 19
  • Архитектор сайтов
спс
Код: css
#mainmenu ul {text-align:center;}
#mainmenu li {display:inline-block;}

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

poizon

  • Захожу иногда
  • 495
  • 187 / 1
  • Buu
Молодец, тролль засчитан.
Я тоже внес

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

wonalive

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

Как закруглить края выпадающего меню?

Автор coliandra

Ответов: 1
Просмотров: 211
Последний ответ 11.12.2020, 21:15:57
от effrit
При прокрутке страницы виджет залезает на меню

Автор coliandra

Ответов: 2
Просмотров: 177
Последний ответ 27.11.2020, 11:33:58
от coliandra
Как убрать маркер только из одного пункта меню.

Автор kuraev64

Ответов: 2
Просмотров: 497
Последний ответ 20.07.2020, 11:18:44
от kuraev64
Проблема с меню на сайте

Автор nesskafe

Ответов: 9
Просмотров: 379
Последний ответ 01.06.2020, 11:03:58
от sivers
Проблема с меню на сайте и иконками Awesome

Автор Lemonez

Ответов: 1
Просмотров: 636
Последний ответ 10.02.2020, 05:02:12
от Lemonez