Вёрстка изогнутых блоков

[coldug]

Ребята помогите с такими вот вопросами.Я нуб если что =)

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

Теперь вопросы:

1)Как правильно его нарезать в фотошопе ?(какой формат для сохранения ,кол-во частей которое получиться после нарезки)

2)Как позиционировать (float,margin,position?) его отрезаные части(бока,верх,низ) что бы они точно прилегали к блоку?

3)И как будет выглядить код html

Вот как я делал похожий блок, у него изогнуты только бока :

1) PNG24 ,градиент центра,левый и правый бок

2,3)

<div class="box">
<div class="box-right">
</div>
<div class="box-left">
</div>
</div> 

.box {
	position:absolute;



.box-right{

	position:absolute;
	right:0;

}
.box-left{

	position:absolute;
	left:0;

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

Заранее благодарен.

Edited July 9, 2011 by coldug

[SelenIT]

SelenIT, в книге Мейера написано(дословано):

Может показаться, что позиционирование содержимого элементов :before и :after позволило бы добиться желаемого результата, но CSS2 и CSS2.1 специально запрещают перемещение или позиционирование содержимого элементов :before и :after.

А у тебя :before и :after позиционированы абсолютно. Может, я что-то не понимаю?

В еще одном посте на тему псевдоэлементов (мода однако нашел упоминание, что FF3 не умел их позиционировать (видимо, следовал устаревшей спеке). До чего же хорошо, что ограничение сняли!

Вот новый вариант: http://jsfiddle.net/e3YbS/7/

Никак не могу скруглить справа. Не могу правильный отступ задать.

Поддерживаю выбранный курс, с точки зрения "феншуя" border-radius тут просто напрашивается, у меня нулевая по счету мысль была про него. Просто хотелось сделать с поддержкой IE8... Кстати, если делать border-radius'ом, то, имхо, псевдоэлементы еще сильнее просятся в кассу, т.к. все браузеры, знающие border-radius (без префиксов), знают и их.

[ctpz]

Есть скрипт, который эмулирует девятую версию ие.

Вызывается так:

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

В итоге MSIE 5 - 8 будут работать на сайте как IE 9.

Проверенно. Border-radius виден даже в 6 версии.

Edited July 13, 2011 by ctpz

[SelenIT]

Ого, Дин Эдвардс свою чудо-библиотечку до сих пор поддерживает и развивает, респектище ему! Библиотечка и впрямь хорошая. Но жестко завязываться на нетривиальный JS для не такого еще старого браузера (про 8-ку, с 7-кой и ниже уж ладно) - имхо, не для всех приемлемый вариант...

[ctpz]

Ну это смотря, как часто надо выкручиваться с закругленными углами и прочим.

[Great Rash]

А если этот блок будет располагаться над текстом что вы будете делать?

[SelenIT]

Тогда единственное, что приходит на ум — 4 картинки наружу, за края блока, отпозиционировать...

[coldug]

Напишите кому не сложно код (html и css) как к одному блоку приклеить его боковую часть(центр(400px) и бок(30px) 2 части ,нужно сделать 1 блок) ,с учетом что блок находиться в обложке с position:relative;