Меню верстать одной картинкой или двумя?

[borus]

Скажите, как верстать верхнюю строку меню, содержащую и ссылки и поиск? Вырезать их как одну картинку? или отнести ссылки к контенту, а поиск в правую колонку?

http://files.mail.ru/6QVOTL?t=1

[zSpx]

Чем меньше изображений, тем лучше. Если сайт фикс, то режьте одной картинкой. Как верстать, Вам виднее. Я бы:

--wrapper

—-container

——header

——nav+search

——main

——--content

——--sidebar

—-footer

[Great Rash]

Скажите, как верстать верхнюю строку меню, содержащую и ссылки и поиск? Вырезать их как одну картинку? или отнести ссылки к контенту, а поиск в правую колонку?

Верстать, используя одну картинку. Ссылки отнести к контенту, а поиск в правую колонку.

[borus]

Зачем ссылки относить к контенту?

Edited October 17, 2011 by borus

[Great Rash]

Я имел в виду, что ссылки должны быть в правой колонке, а поиск - в левой.

[borus]

Вставил картинку и применил тень вида:

	box-shadow: 0 3px 3px 3px #333;/* Каноническое задание */	
	-webkit-box-shadow: 0 3px 3px 3px #333; /* Safari, Chrome */
	-moz-box-shadow: 0 3px 3px 3px #333;

Получилось так:

Т.е. тень обошла белые уголки изображения и получилось ненатурально.

Скажите как лучше задать тень в данном случае?

1.Вырезать с тенью?

2.создать меню с помощью css, применив градиент и внутреннюю + внешнюю тень?

3....?

[zSpx]

border-radius в помощь.

[borus]

border-radius в помощь.

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

HTML:
                        <div class="menu floatright"> <!--ПОИСК-->
                            <div class="leftmenubg">
                                <div class="rightmenubg">
                                        <ul class="centralsearchbg alignright">
                                            <li><a href="/">Найти</a></li>
                                        </ul>                                    
                                </div>
                            </div>
                        </div>

CSS:
.floatright{
	float:right;
}
.menu{
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	box-shadow: 0 3px 3px 3px #333;/* Каноническое задание */	
	-webkit-box-shadow: 0 5px 3px 3px #333; /* Safari, Chrome */
	-moz-box-shadow: 0 5px 3px 3px #333;
}

.centralsearchbg{
	background:url(images/menu_bg_c.jpg) repeat-x;
	height:40px;
	width:250px;
}

.leftmenubg{
	background:url(images/menu_bg_l.jpg) no-repeat left;
	height:40px;
	padding-left:6px;
}

.rightmenubg{
	background:url(images/menu_bg_r.jpg) no-repeat right;
	height:40px;
	padding-right:6px;	
}

.alignright{
	text-align:right;
}

и перестало работать. В чем причина, подскажите?

Edited October 21, 2011 by borus