"Простое" горизонтальное меню

[garA]

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

[thefate]

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

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

[3ABAPKA]

вот бери! Не надо таблиц Не надо вообще ничего!

Это вставь в HTML

<ul class="glossymenu">
****<li class="current">[Только зарегистрированные пользователи могут видеть ссылки. ]
****[*][Только зарегистрированные пользователи могут видеть ссылки. ]
****[*][Только зарегистрированные пользователи могут видеть ссылки. ]****
****[*][Только зарегистрированные пользователи могут видеть ссылки. ]****
****[*][Только зарегистрированные пользователи могут видеть ссылки. ]****
****[*][Только зарегистрированные пользователи могут видеть ссылки. ]****[/list]

Это вставь в CSS

.glossymenu{
****position: relative;
****padding: 0 0 0 34px;
****margin: 0 auto 0 auto;
****background: url(media/menur_bg.gif) repeat-x; 
****height: 46px;
****list-style: none;
}

.glossymenu li{
****float:left;
}

.glossymenu li a{
****float: left;
****display: block;
****color:#000;
****text-decoration: none;
****font-family: sans-serif;
****font-size: 13px;
****font-weight: bold;
****padding:0 0 0 16px;
****height: 46px;
****line-height: 46px;
****text-align: center;
****cursor: pointer;****
}

.glossymenu li a b{
****float: left;
****display: block;
****padding: 0 24px 0 8px; 
}

.glossymenu li.current a, .glossymenu li a:hover{
****color: #fff;
****background: url(media/menur_hover_left.gif) no-repeat;
****background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
****color: #fff;
****background: url(media/menur_hover_right.gif) no-repeat right top; 
}

Обрати внимание на название картинок! они могут не совпадать с текстом в коде для CSS.

Не поймешь отпишись сюда!

[leonoff]

Согласен! Никаких таблиц! Прошлый век! Только css и минимум графики! Вебдваноль!