Как сверстать такое меню?

[MiHALbI4]

Необходимо сверстать следующее меню:

Меню динамическое для cms, т.е. статично его не сверстать. На картинке просто пример. Необходимо, если следующий пункт меню уже не влезает в заданную ширину, то он должен переехать на следующую строку ( как на картинке). Притом все пункты на одной строке должны быть выровнены по центру. Как такое реализовать? Я каждый пункт меню положил в div и приписал float: left. Они переносятся как надо, но не знаю как выровнять строку с пунктами по центру.

Edited August 8, 2010 by MiHALbI4

[swetlana]

npofopr, а спасибо за ссылочку.

Но только в скриптах меру знать надо. А то, если всё сделать скриптами, то браузер будет удивительно загружать процессор

Кстати, если я правильно поняла, там предусмотрены варианты: для ИЕ и для всех браузеров.

А реальность обстоит так, что правильнее было бы для ие и оперы.

Edited August 13, 2010 by swetlana

[Great Rash]

swetlana, у меня складывается впечатление, что вы живете в будущем, лет эдак на пять вперед... Как бы это некрасиво не выглядело, но подобные меню делаются двумя картинками (метод раздвижных дверей). Другого легкого и кроссбраузерного способа сверстать круглые углы нет. Все способы исправления ситуации либо корявые, либо много весят. А Опера (которая по дебильности не уступает ИЕ) до сих пор не понимает толком ни CSS3, ни SVG. Так что надо пока смириться и забить на border-radius каким бы привлекательным он не был.

[s0rr0w]

swetlana, у меня складывается впечатление, что вы живете в будущем, лет эдак на пять вперед... Как бы это некрасиво не выглядело, но подобные меню делаются двумя картинками (метод раздвижных дверей). Другого легкого и кроссбраузерного способа сверстать круглые углы нет. Все способы исправления ситуации либо корявые, либо много весят. А Опера (которая по дебильности не уступает ИЕ) до сих пор не понимает толком ни CSS3, ни SVG. Так что надо пока смириться и забить на border-radius каким бы привлекательным он не был.

Как хорошо, что я с оперой вообще не имею дела...

[psywalker]

Как хорошо, что я с оперой вообще не имею дела...

А твои клиенты имеют с ней дело?

[s0rr0w]

А твои клиенты имеют с ней дело?

Нет.

[Great Rash]

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

[psywalker]

А, ну раз такое дело, тогда конечно, можно всё делать только под фф и не париться.

[s0rr0w]

А, ну раз такое дело, тогда конечно, можно всё делать только под фф и не париться.

Под ИЕ париться приходится. Причем последние изменения в проекте меня так огорчили, что пришлось написать письмецо в MS. Будем ждать ответа, что же они родят в ответ.

[Great Rash]

Если не секрет о чем письмецо?

[s0rr0w]

Если не секрет о чем письмецо?

Не секрет, о низкой производительности IE при работе с custom tags

[MiHALbI4]

Спасибо большое всем =) Но сам сделал по своему способу =)

[Great Rash]

Молодец! Когда сам делаешь всегда лучше.

[swetlana]

swetlana, у меня складывается впечатление, что вы живете в будущем, лет эдак на пять вперед... Как бы это некрасиво не выглядело, но подобные меню делаются двумя картинками (метод раздвижных дверей). Другого легкого и кроссбраузерного способа сверстать круглые углы нет. Все способы исправления ситуации либо корявые, либо много весят. А Опера (которая по дебильности не уступает ИЕ) до сих пор не понимает толком ни CSS3, ни SVG. Так что надо пока смириться и забить на border-radius каким бы привлекательным он не был.

Ваше впечатление ошибочно, сударь

Я живу в 2010 году.

А ещё я поглядываю на статистику. Ну например здесь: http://www.liveinternet.ru/stat/ru/browser...ml?period=month

а ещё я советуюсь со здравым смыслом.

И этот самый здравый смысл подсказывает, что посетитель сайта приходит за той информацией, которая представлена на сайте, а не за мелкими красивостями, которым мы с вами придаём такое значение, а заказчики — ещё большее.

И если посетитель сумел прочитать ту информацию, которая нами заботливо укутана в тэги и стили, и наши труды не помешали ему воспринять эту информацию — работа выполнена хорошо.

Если при этом страничка ещё и выглядит модно, то работа выполнена на отлично.

Но вот какой хитрый нюанс: пользователь, который обратит внимание на модность оформления, за модой следит, а значит у него установлен самый модный браузер (например Google Chrome 5), который все эти модности поддерживает на ура.

Пользователь же, консервативно пользующий IE6, плевать хотел на все эти красивости, ему не важно, будут ли у кнопки края закруглённые: главное, чтобы эта кнопка исправно сработала.

Вот так обстоят дела у нас, в нашем 2010 году.

Как обстоят дела на пять лет вперёд, в 2015 — извините, не знаю.

[BassEast2]

Молодец! Когда сам делаешь всегда лучше.

+1, а то я уж было подумал Михалыч наглец.

Ваше впечатление ошибочно, сударь

Я живу в 2010 году.

А ещё я поглядываю на статистику. Ну например здесь: http://www.liveinternet.ru/stat/ru/browser...ml?period=month

а ещё я советуюсь со здравым смыслом.

И этот самый здравый смысл подсказывает, что посетитель сайта приходит за той информацией, которая представлена на сайте, а не за мелкими красивостями, которым мы с вами придаём такое значение, а заказчики — ещё большее.

И если посетитель сумел прочитать ту информацию, которая нами заботливо укутана в тэги и стили, и наши труды не помешали ему воспринять эту информацию — работа выполнена хорошо.

Если при этом страничка ещё и выглядит модно, то работа выполнена на отлично.

Но вот какой хитрый нюанс: пользователь, который обратит внимание на модность оформления, за модой следит, а значит у него установлен самый модный браузер (например Google Chrome 5), который все эти модности поддерживает на ура.

Пользователь же, консервативно пользующий IE6, плевать хотел на все эти красивости, ему не важно, будут ли у кнопки края закруглённые: главное, чтобы эта кнопка исправно сработала.

Вот так обстоят дела у нас, в нашем 2010 году.

Как обстоят дела на пять лет вперёд, в 2015 — извините, не знаю.

Светлана, признайтесь честно, вы просто ленитесь

Заранее соорудили бы себе css-framework, со всякими разными вариантами вёрстки, которые встречаются на пути и использовали бы их, нежели запомнить пару строчек, типа: -webkit-border-radius: 2px; и считать дело сделанным.

Edited August 14, 2010 by BassEast2

[Searcher]

Но вот какой хитрый нюанс: пользователь, который обратит внимание на модность оформления, за модой следит, а значит у него установлен самый модный браузер (например Google Chrome 5), который все эти модности поддерживает на ура.

Пользователь же, консервативно пользующий IE6, плевать хотел на все эти красивости, ему не важно, будут ли у кнопки края закруглённые: главное, чтобы эта кнопка исправно сработала.

Очень хорошо подмечен нюанс, но есть еще достаточно много случаев, когда пользователь хочет использовать Хром, но политика безопасности предприятия, где он работает, говорит - пользуйтесь тем, что есть. А есть ИЕ6, а дома Хром... Обидно. Хотя винить в некрасивости сайтов в ИЕ конечно будут не разработчиков сайта, а компьютерный отдел фирмы.

Ну и верно совершенно, в рабочей горячке плевать на все красивости, главное, чтобы работало!