Помогите, люди добрые)

Приветствую, дамы и господа!

Сломался мозг. Примерно за неделю))
Сижу туплю, не могу понять, как сверстать ту часть дизайна, которая должна быть под текстом, чтобы высота автоматически тянулась вниз.

Вертикальный градиент... закругленные углы...

Я сделала три части этого листа:
Верх 300 с чем-то в высоту,
низ такой же
и середину в 1 пикс высотой и по ширине, как весь лист, репичу его соответственно по игреку...

И дальше у меня ступор. Я и так уже и так. Наверное, просто знаний не хватает. Почитала теорию - раз, почитала теорию - два, но решения не нашла.
Может, меня кто-то сглазил?)))

Если Вам не трудно поделиться опытом, буду очень благодарна. С меня бутылка! Говорите, куда слать)

Ну дык всё правильно делаешь. В чём проблема то?


Можешь через CSS3 замутить.

А я не сказала?)
я не могу див сверху положить так, чтобы все там под ним целенькое оставалось и только по игреку центр-то и тянулся...

Position: relative; z-index: 2;

это или нет?

Каг бэ да... но больше не понятно в какой именно див вставлять див с контентом...
у меня идет вот так:

<div id="list">
<div id="list-top">
</div>
<div id="list-middle">
</div>
<div id="bottom">
</div>
</div>

Куда вставлять див с текстом, чтобы меня наконец попустило) и я напьюсь, когда все получится, я напьюсь!)))) о да, да, дааа)))
Простите..

<div id="list-middle">Сюда и вставляй
</div>

<div id="list"> а в этот онднопиксельную картинку по игреку

(если прозрачности нет)

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

Гм.. что-то так и не понял проблемы. Дайте скрин конечного блока который должен получится.
Пока понимаю это так:
Есть блок #list

<div id="list">

<div id="list-top">

</div>

<div id="list-middle">

</div>

<div id="bottom">

</div>

</div>

Есть css к нему, например

#list-top, #list-bottom {width:300px;height:100px;display:block;}

#list-top {background:url('images/top.png') no-repeat;}

#list-middle {width:300px;display:block;margin:-100px 0;background:url('images/middle.png') repeat-y;}

#list-bottom {background:url('images/bottom.png') no-repeat;}

Думаю так.

Vitaflax и sytrus, большое Вам спасибо, проблема решена. Я вышла из тормоза, благодаря Вам.))
Уменьшила высоту градиента и всё!) Как раз отступ нужный получился над заголовком.

Цитата ("Ljubava_Nevada"):

Не знаю, можно ли в таком случае ссылку на (сайт) результат давать? Здесь такие строгие правила.))

Можно, если это касается топика.

Ну, тогда пафастаюс )

ссылка

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