Горизонтальное меню на едином фоне - Не получается

[oocamba]

Здравствуйте, я еще совсем новенькая, пытаюсь разобраться.

Хочу создать меню. Фон - для всего меню один, длинный (может как фон div?). Поверх его горизонтально хочу разместить пункты меню (картинками, не словами, хоть не имеет это значение). Не получается наложить на фон эти картинки правильно относительно друг друга.

Это единый фон



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



Пример надписи-картинки


Спасибо!

[Naive]

Для дива line-height в высоту полосы: vertical-align:middle для картинок, картинки внутрь ссылок.

[oocamba]

Не совсем поняла

#header {
	height: 126px;
}

#menu-box{
	line-height:73px;
	background:url(images/menu-bg.png);
	background-repeat:no-repeat;
	background-position:center;
	padding-top:36px;
	}
	
#menu-text{

	}

<div id="header">
   
   
   <div id="menu-box">
   <div id="menu-text"><img src="images/home-button.png"></div>
   
   
   </div>

	</div><!-- #header-->

Получается так. Я ведь же должна по середине его сделать и сверху немного отступить

[Naive]

#menu-box{
	line-height:73px;
	background:url(images/menu-bg.png);
	background-repeat:no-repeat;
	background-position:center;
}
#menu-box img{
  vertical-align:middle;
}

Убрал padding-top, он смещал вниз, влево сместить можно будет через padding-left.
vertical-align:middle разместит картинки на одном уровне в случае разной высоты, растояния между ними можно расставить маргинами.