Jump to content
  • 0

Псевдо-резиновое меню


vasiliyb
 Share

Question

Дизайнер озадачил, необходимо реализовать меню по максимуму соответствующее макету: menu.jpg

Верхнее меню - при максимальном разрешении, нижнее - при минимальном. С "резиновостью" вцелом проблем нет, проблема для меня заключается в

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

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

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

А если завернуть все это в блок, который тянется в нужных пределах, а внутри него text-align: justify и какой-нибудь невидимый элемент, перенесенный на вторую строку, чтобы заставить тянуться первую?

Разделители ведь можно сделать текстовыми элементами.

Link to comment
Share on other sites

  • 0

если разделители стоят в отдельном блоке, то задай для них длину в процентах! все отступы и поля у самих пунктов меню убери

<li>главная</li>

<li class="razdelitel"></li>

ну и естестно высоту для li не забудь

Link to comment
Share on other sites

  • 0

Lincky

Я сталкивался с такими траблами, поэтому могу тебе посоветовать самый верный вариант, чтобы ничего не развалилось, всё было ровно и с текстом посередине в каждой ячейке,вобщем Делай такое меню Таблицей и не парься, и будет тебе счастье :rolleyes:

1) Одна таблица width: 100%;

2) Одна строка

3) Десять ячеек

4) Выравнивание по середине text-align: center;

Всё будет по середине и хрен чё развалится)))

Edited by psywalker
Link to comment
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.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   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.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy