HTML+CSS+JavaScript

В аттаче рисунок меню. Там показано, что должно происходить при наведении.

Набрано меню шрифтом Tahoma.

Вопрос собственно в чем - как средствами CSS такое реализовать.

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

Окаймляющую рамку с закруглениями быть может можно как-то поверх всего этого наложить ?

каждая строка меню - это ячейка таблицы. Для средних ячеек - один фон. Для верхней и нижней - отдельно две фоновые картинки.

Т.е. сделать все таки так, в итоге 6ть рисунков получится нужно сделать ? - три вида неактивных и три вида активных. А иной способ есть ?

А зачем так много, хватит на каждый пункт меню и по одной картинке, если у верхнего элемента свой класс стиля, у нижнего свой, и у средних свой, один на всех.

А как закругления в стилях обработать ? Там ведь чуть иначе выглядит.

всего 3 рисунка. С учётом того, что они должны будут менять при наведении - получится 6. Графика там простая, поэтому весить они будут по пол килобайта каждый, что несущественно. А если еще воспользоваться скриптом предзагрузки картинок (preload), то должно получиться без лагов вообще.

Вот тоже об этом варианте думаю, но вдруг подскажут иной. Этот мне не очень нравится.

Лучший вариант - на флеше c XML управлением контентом :-D

Не соглашусь. Поисковики у нас до сих пор по флэш ссылкам не ходят вроде, да и пользователям лишний траффик гнать.
Так что вариант скорее не лучше, а красивее :)

Это вообще бред-какой флеш, когда тут html+css

Даже с учетом наведения, всего три рисунка.

Не могли бы хотя бы на словах пояснить тогда как ?

Я минимум 4ре придумал. три на наведение и один - общий фон меню =)

Ну я и говорил именно о самих кнопках. Если можно вырезать изображения кнопок так, что их изображения будут определять всю картинку, то фон это просто локальный цвет, например, светлоголубой просвет между кнопками. Сами кнопки должны иметь на картинке только справа и слева такую линию, а верхняя еще и сверху (у нее закругление), то же самое и для нижней кнопки. Если еще какая либо фича есть (на картинке похоже что-то на тень вокруг меню), тогда еще нужно пассивное изображение между кнопками, высотой в один пиксель, ну и по ширине этой картинки. Само изображение кнопки, это ее пассивное и активное состояния, который склеены вместе, например, одно над другим. Тогда при наведении на кнопку, меняем ее класс стиля по умолчанию, на класс который изменит положение изображения фона этой ячейки (картинки кнопки) по высоте. Уходим с кнопки, возвращаем ей класс стиля по умолчанию.
Если же у вас там что-то наворочено, что никак не обойтись без изображения фона под кнопками, тогда делайте фон, но лучше оптимизировать рисунок без наворотов лишних, ведь меню может меняться, а значит еще и это придется учитывать...

Увидел в примере только одну картинку(стрелку), остальное css
Предлагаю верстать валидно и семантично, не используя таблиц, там где не нужно
Меню-список ссылок поэтому верстайте при помощи списков

<ul>    <li><a href="#">Один</a></li> </ul>

CSS уже картинки рисует?

И где вы увидели столько картинок-я вижу одну-стрелку
Остальное можно сделать при помощи css

сходите http://www.alistapart.com/, http://www.cssplay.co.uk/ и станет ясно

И что там смотреть, горизонтальное меню на этой странице?

Да вы сайт то почитайте

mihdan, можно поместить кучу слоев, даже закруглить углы, можно еще наворотить, чтобы имитировать картинки меню. Но вы картинку автора внимательно рассмотрели?

Рассмотрел отлично, но все равно не могу понять в чем проблема.
Скруглить угол
Добавить фон для блока со сглаженными углами

Что там еще?

Загрузите пожалуйста картинку в более четком виде, а то уж больно размазано все(чтоб спорных моментов было меньше)

Да, боюсь, все равно спорить найдется о чем :)

Я почитал, что вы написали, и, раскинув мозгами пришел к выводу что и действительно, все это можно на css сделать, вместе с закруглениями.
Осталось только придумать, как тень там же сделать
(т.е. в идеале если бы это получился независимый блок меню, который свободно бы перемещался по сайту, сохраняя прозрачность тени)

Я решил как - прозрачность тени можно только за счет png такую получить, т.е сделать что-то вроде самого верхнего слоя в меню - рамка тени с закругляними с заданной прозрачностью, чуть ниже, под рамкой слой меню, где наведения-активации происходят, ну и самый первый слой(нижний) сам сайт. Но, такую сложную штуку мне выдумывать в коде не хочется(и до конца не понимается как), поэтому, наверное, придется по пути какому иному идти, и причем весьма далекому от семантики.