Нужна идея, как реализовать.

[dsasda]

Добрый вечер!
По сути, это немного продолжение этой темы: http://htmlforum.ru/index.php?showtopic=47513, но я в безысходности... Идея, которую я пытался сделать - не получается, по этому прошу вашего совета и идеи.

В общем, вот как это сделано на картинке:
http://i60.fastpic.ru/big/2014/0123/2d/333b68bfe1bfee25ab4f7f0a533d532d.jpg
И как описано в прошлой теме, то хочу сделать так, что бы можно было менять только картинку с едой, место для заголовка не хочу, что бы трогали.

Пытался делать так:
Срезал вверх:
http://i33.fastpic.ru/big/2014/0123/dd/20e1802a082147eb5006518a29299ddd.png
И хотел сделать 3 заголовка(один div, но меня только стиль в самом html, что бы менять позицию)
Вот коды:

HTML

				<div class="food-upper"></div>				<div class="food-title">Test1					<div class="food">					<img src="images/4.png" width="150px" height="150px">					</div>					</div>									<div class="food-title">Test2					<div class="food">					<img src="images/1.png" width="150px" height="150px">					</div>					</div>									<div class="food-title">Test3					<div class="food">					<img src="images/2.png" width="150px" height="150px">					</div>				</div>

CSS

.food-upper {width: 835px;height: 11px;margin: 0 auto;background: url(img/upper_img.png) no-repeat; /* обрезанная картинка с верху */}.food img {margin: 0 auto;z-index: 3;}.food-title {margin: 0 auto;width: 149px;height: 31px;background: url(img/food_title_bg.jpg) repeat; /* фон заголовка - серый градиент */z-index: 2;}

P.S. Мой вариант не катит (на мой взгляд), т.к. не до конца реализован и, что самое главное, то сдвигается положение заголовка при увеличении стр. (ctrl+ + или ctrl + колёсико мыши):
http://i33.fastpic.ru/big/2014/0123/e7/18dc551dadd494ad597b1fa7352648e7.png
P.P.S. Очень буду благодарен, если Вы ещё подметите и укажите на грубые ошибки в коде, которые не следует допускать впредь и/или как и в каком месте лучше написать, ведь всё ещё учусь и критика будет очень даже кстати.

*UPDATE* Только что пришла в голову глупая, но ещё одна идея реализации: Сделать 3 отдельных div'а с фоном как картинка и менять только картинку(название оставлять одно и тоже), но я думаю что это было бы очень глупо неадекватно. Должен же быть ещё способ(ы)

Edited January 23, 2014 by dsasda

[npofopr]

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

что, простите? кому менять? зачем менять? как менять?

 

Код выкладывайте в песочницу, например на http://jsfiddle.net

 

http://jsfiddle.net/npofopr/q7r2y/

[rus]

Т.С., что за порнота? Неужели трудно было найти шаред без этой гнусной рекламы?

[dsasda]

/*height: 11px; чего за ерунда? */

Это как высоко должен быть градиент, в первой теме про изображение поверх другого на скрине видно.

Прошу прощения, просто вбиваю в гугл хост картинок и первым этот выдаёт