Помогите с резиновым блоком с закгругленными углами

[Baracuda]

Ув. форумчане. Помогите решить задачу...

Есть следующий HTML код:

<div id="wrapper">
	<div id="login">
    		<div class="top-right-corner">
			<div class="top-left-corner">
				<div class="bottom-left-corner">
					<div class="bottom-right-corner">
						<div class="left-border"></div>
							<div class="top-bg">
								<div class="bottom-bg">
									text text text text text text 
								</div>
							</div>
						<div class="right-border"></div>
						<div class="clear"></div>
    					</div>
				</div>
			</div>
		</div>
    	</div>
    <div class="logincopyright">
    </div>
</div>

ему соответствует следующий стиль:

#wrapper { width:100%; background:url(../images/background.jpg) top repeat-x; padding-top:216px;}
#login { width:440px; height:380px; margin:auto; background:#fffaf4; }

.top-right-corner { background:url(../images/top-right-bg.png) top right no-repeat; }
.top-left-corner { background:url(../images/top-left-bg.png) top left no-repeat; }
.bottom-left-corner { background:url(../images/bottom-left-bg.png) bottom left no-repeat; }
.bottom-right-corner { background:url(../images/bottom-right-bg.png) bottom right no-repeat; height:380px; }

.left-border { background:url(../images/left-bg.png) left repeat-y; float:left; width:9px; height:346px; margin-top:17px; margin-bottom:17px; }
.right-border { background:url(../images/right-bg.png) right repeat-y; float:right; width:9px; height:346px; margin-top:17px; margin-bottom:17px; }
.top-bg { background:url(../images/top-bg.png) top repeat-x; margin-left:8px; margin-right:8px; float:left; height:9px; width:406px; }
.bottom-bg { background:url(../images/bottom-bg.png) bottom repeat-x; width:406px; height:380px; }

.clear { clear:both; }

.logincopyright { width:435px; margin:auto; margin-top:22px }

Результат этого кода Вы можете видеть на приложеной картинки.

Подскажите, помогите пожалуйста, как сделать:

1) Что б рамка была резиновой, тянулась по ширине и по высоте (если сейчас задать ей длину 100% к примеру, то это не сработает, сам блок увеличится, но все элементы останутся так, как есть, а если задать и им тоже процентной значение, то рамка слетит коту под хвост)

2) Подскажите более гуманный способ, которым можно верстать подобные рамки
3) Я нарезал пнг картинки в фотошопе, делал их прозрачными, как пофиксить в ие пнг картинки, что б они были прозрачными???

Заранее благодарю за ответ, прилагаю фотку и архив с вайлами верстки

 

[Kub]

По резиновым блоком с закгругленными углами
С видеоуроком исходником и описанием

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

Так же с примерами и описанием

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

Если будет этого мало, вот ещё ссылка на всем известную статью

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

По поводу прозрачных углов. Попробуйте сохранять картинки в gif, если качество не устроит то вот здесь есть описания двух популярных скриптов для исправления прозрачности png изображений для IE6.

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

Если используете Jquery, вот пара ссылок на плагины для исправлнния прозрачности

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

 

[bork75]

Есть очень простой и универсальный метод.
Сначала создаётся обычный прямоугольный резиновый блок, ну т.е. div с background и width в %.
И нужно нарисовать круг в цвет блока, через позиционирование раскидать этот круг по углам нашего блока top left, top right и т.д.
В итоге получится блок с закруглениями.

 

[bonzaza]

придется покопаться

В свое время тоже долго мучался с поиском приемлемого варианта тянущегося блока с закруглениями.

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

P.S. По моему в представленном коде не хватает позиционирования (position:rеlative, но надо проверять.
P.S.S. не заметил вложения =(

 

[Kub]

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

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

 

[hader]

Я делаю рамки в Fireworks(там больше разных функций для скругления углов), а режу в фотошопе по направляющим. Выглядит это примерно так

При экспорте в HTML все фрагменты сохраняются отдельными файлами PNG или GIF обязательно transparent.
В HTML шаблоне соддаю таблицу 3х3, в угловые ячейки вставляю картинки углов, а в боковых делаю фоном соотв фрагмент: для вертикальных с repeat-y, горизонтальных repeat-x. В центральную ячейку вставляю контент или модуль. Тянется как угодно.

 

[Baracuda]

ну в таблице это намного легче сделать, а вот на дивах я еще не сталкивался вот и решил задать вопрос на первую попавшуюся проблемку

 

[alica]

В другой ветке форума я писал уже как наиболее просто сделать закругленные углы у Для просмотра ссылки Войди или Зарегистрируйся, если вам нужны тени, как на картинке то код будет вот такой:

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

 

[forest_82]

Если в ширину не будет растягиватся - тогда можно сделать верх, низ, и середину. А среднему диву сделать стиль min-height. Тогда будет растягиваться

 

[Kub]

В другой ветке форума я писал уже как наиболее просто сделать закругленные углы у Для просмотра ссылки Войди или Зарегистрируйся, если вам нужны тени, как на картинке то код будет вот такой:
*** скрытое содержание ***

Если применять CSS3, то здесь есть некоторые советы как при этом обеспечить работу всего этого в IE

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