Меню.

[AndreyGSPB]

Привет всем! Вот такой вопрос по поводу меню.На кнопках есть 2 состояния. Как сделать этот коричневый фон на кнопках Каталог, Прайс-лист, Доставка/Оплата, Контакты понятно.А как сделать этот фон на кнопке Главная,он там скругленный?Кто как бы сделал?У меня есть идея только присвоить каждой ссылке,то есть тэгу <a> id, ну как бы каждая кнопка будет отдельной. Заранее спасибо.

Edited March 22, 2011 by AndreyGSPB

[swetlana]

можно присвоить id или классы, если они нужны для чего-нибудь ещё.

А можно попользовать псевдо-класс :first-child.

а ещё можно (вроде бы. Если первая кнопка по ширине не отличается от других) ничего для самих кнопок лишнего не писать, а для контейнера сделать border-radius.

но это способ о двух концах. В IE9 border-radius не дружит с градиентами.

[wanntuzz]

Тут можно одной картинкой обойтись

[AndreyGSPB]

Че то я не пойму как ее правильно наложить эту картинку с углом округленным.Там при нажатии на "главную" кнопка становиться коричневая.Как вырезать эту коричневость.Вырезать аккуратно саму коричневость или вырезать весь угол целиком?

Вот код:

<div id="menu">

<div id="menu_l"></div>

<div id="menu_r"></div>

<ul>

<li><a id="glav" href="#">Главная</a></li>

<li><a id="cat" href="#">Каталог</a></li>

<li><a id="price" href="#">Прайс-лист</a></li>

<li><a id="dostavka" href="#">Доставка/Оплата</a></li>

<li><a id="contakts" href="#">Контакты</a></li>

</ul>

</div>

Вот СSS:

#menu { background: url(bg_menu.jpg) repeat-x; }

#menu ul { line-height: 55px; height: 55px; }

#menu ul li {list-style-position: outside; list-style-type: none; background: url(line.jpg) no-repeat right center; display: inline; padding: 15px 0px 15px 0px;}

#menu ul li a {font: 15px Arial; color: #fff; text-shadow: -1px 1px 0px #000000; font-weight: bold; text-decoration: none; padding: 15px 10px 15px 10px;}

#menu_l { background: url(menu-l.jpg) no-repeat; height: 55px; width: 27px; float: left; }

#menu_r { background: url(menu-r.jpg) no-repeat; height: 55px; width: 27px; float: right;}

#menu ul li a glav { width: 121px; }

#menu ul li a:hover glav{ background: url(bg_glav.jpg) repeat-x; }

#cat { }

#price { }

#dostavka { }

#contakts { }

правильно ли я вставил в тег <a> id и можно ли так делать?

Edited March 22, 2011 by AndreyGSPB

[swetlana]

так делать можно, синтаксически это вполне допустимо.

Другое дело, что лучше id вешать на li. Так становятся чуть пошире возможности оформления.

И не совсем понятны два пустых дива перед списком.

А ещё не совсем понятно про «вырезать коричневость».

[swetlana]

вот пример, в какую сторону можно подумать.

Тут можно одной картинкой обойтись

в примере так и есть.

[AndreyGSPB]

«вырезать коричневость» в плане как наложить эту скругленную коричневость,как сделать этот скругленный угол, вот что я имел ввиду.Да я то же подумал что id в li было бы логичнее вешать.Спасибо за пример.Вечером более подробно посмотрю и подумаю.Блин, вот у вас уровень верстки. Мне до такого далеко.))))) Буду думать.

Edited March 22, 2011 by AndreyGSPB