Css box

[Faran]

Здравствуйте. Я пытался сделать блок для текста из 5 картинок.

1 картинка отвечает за верх блока (top.gif)

2 картинка за низ (bottom gif)

3 картинка за левую сторону (left.gif)

4 картинка за правую сторону (right.gif)

5 картинка за середину (center.gif)

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

Я достаточно погуглил закруглённые углы, но они держатся на заголовках и параграфах, а если у меня их будет много в этом боксе, то он и не получится...Решил поэтому создать тему.

Текст, который я буду размещать, будет на "5 картинке за середину".

Для этого я создал:

#content {

background:url(img/center.gif) repeat-y; И добавляя текст, бокс тянулся. Но не знаю, как сделать, чтобы бекграунд если и растягивается, то не только в зависимосте от того, сколько текста, но во всю высоту картинки, такак в выше описанном примере, если я внизу ставлю bottom.gif, то швы не сходятся.

Остальные же картинки (top\left\right\bottom)) как раз украшают этот бокс. Но как их сделать с четырёх сторон я не понимаю.

Я залил исходники, если у кого-то будет возможность посмотреть, залил на яндекс, чтобы удобнее можно было скачать. http://depositfiles.com/files/fw9wsd37n , http://narod.ru/disk/14283933000/kartinki.rar.html ,только не обращайте внимание на их кривизну, через фотошоп все швы заглажу.

Edited October 20, 2009 by Faran

[psywalker]

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

[Sayitright]

На picamigo

Edited October 20, 2009 by Sayitright

[Faran]

Пожалуйста не обращайте внимания на кривизну швов, это в процессе обработки.

[Justnewone]

Целое, как в готовом виде будет.

[Faran]

[Justnewone]

Извините, я Вас понимать перестал =) Вам тянущийся надо, статичный, или растягиваемый? это 3 разных беграунда, три разных способа верстки блоков.

Тут, например, куча полезных статей про блоки, разные.

А тут - то что вам надо.

Edited October 20, 2009 by Justnewone

[Faran]

Чтобы репит стоял только у центрального и боковых, а у верхнего и нижнего нет.

[Justnewone]

Чтобы репит стоял только у центрального и боковых, а у верхнего и нижнего нет.

3 картинки Вам надо тогда...

и 3 дива.

<div class="head">
	<div class="bottom">
		<div class="body">Тут текст</div>
	</div>
</div>

И теперь в CSS

.head{background:url(Верхняя картинка) left top no-repeat; width:ширина картинки; padding-top:высота шапки;}
.bottom{background:url(Нижняя картинка) left bottom no-repeat; padding-bottom:высота подвала;}
.body{background:url(центральная картинка) left top;}

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

Хотя, в Вашем случае, я честно говоря не очень понимаю, потому что центральный рисунок у вас красиво повторяться все равно не будет, вобщем, странно все.

Уже в какой раз Вам говорю, не надо вам центр на 3 делить, раз ширина у вас определяется верхней и нижней картинкой, то есть ПРОШИТА НАМЕРТВО. Репит у вас 3-х картинок или одной - визуально это то же самое.

Edited October 20, 2009 by Justnewone

[psywalker]

Justnewone

Сложный клиент попался, да дружище

[Faran]

Спасибо