Кроссбраузерный резиновый блок с тенью

VJiK · December 2, 2009

Потребовался резиновый блок с тенью.

Вот что у меня получилось:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Заголовок страницы</title>
	<style type="text/css">

		html, body, h1, h2, h3, h4, h5, h6, form, ul, li, p, table, td, th, img { margin: 0; padding: 0; border: 0; }
		table { border-collapse: collapse; }

		BODY { background: silver; }

		.b-popupwin .tw,
		.b-popupwin .bw { width: 100%; height: 20px; font-size: 1px; line-height: 1px; }
		.b-popupwin .tl { width: 20px; background: url(images/ppwin_tl.png) no-repeat 0 0; }
		.b-popupwin .t { background: url(images/ppwin_t.png) repeat-x 0 0; }
		.b-popupwin .tr { width: 20px; background: url(images/ppwin_tr.png) no-repeat 0 0; }
		.b-popupwin .bl { width: 20px; background: url(images/ppwin_bl.png) no-repeat 0 0; }
		.b-popupwin .b { background: url(images/ppwin_b.png) repeat-x 0 0; }
		.b-popupwin .br { width: 20px; background: url(images/ppwin_br.png) no-repeat 0 0; }
		.b-popupwin .mw { width: 100%; }
		.b-popupwin .ml { width: 20px; background: url(images/ppwin_l.png) repeat-y 0 0; }
		.b-popupwin .m { background: #fff; }
		.b-popupwin .mr { width: 20px; background: url(images/ppwin_r.png) repeat-y 0 0; }

	</style>
	<!--[if lte IE 6]>
	<style type="text/css">

		.b-popupwin .tl { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/ppwin_tl.png,sizingMethod=crop); //background: none; }
		.b-popupwin .t { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/ppwin_t.png,sizingMethod=scale); //background: none; }
		.b-popupwin .tr { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/ppwin_tr.png,sizingMethod=crop); //background: none; }
		.b-popupwin .bl { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/ppwin_bl.png,sizingMethod=crop); //background: none; }
		.b-popupwin .b { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/ppwin_b.png,sizingMethod=scale); //background: none; }
		.b-popupwin .br { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/ppwin_br.png,sizingMethod=crop); //background: none; }
		.b-popupwin .ml { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/ppwin_l.png,sizingMethod=scale); //background: none; }
		.b-popupwin .mr { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/ppwin_r.png,sizingMethod=scale); //background: none; }

	</style>
	<![endif]-->
</head>
<body>

<div class="b-popupwin" style="position: absolute; left: 100px; top: 50px; width: 400px;">
	<table class="tw"><tr><td class="tl"></td><td class="t"> </td><td class="tr"></td></tr></table>
	<table class="mw"><tr><td class="ml"></td><td class="m">
		Пример текста<br>
		Пример ссылки: <a href="#">Ссылка в никуда</a><br>
		Конец примеров
	</td><td class="mr"></td></tr></table>
	<table class="bw"><tr><td class="bl"></td><td class="b"> </td><td class="br"></td></tr></table>
</div>

</body>
</html>

Пример: http://predvoditelev.ru/del/

Что скажете? Может быть можно как-то более оптимально сделать?

Edited December 2, 2009 by VJiK

psywalker · December 2, 2009

а чё таблицы то?

VJiK · December 2, 2009

А как с дивами?

Необходимо чтобы блок тянулся и по горизонтали и по вертикали. Причем по горизонтали ширина задаётся только для внешнего блока.

Edited December 2, 2009 by VJiK

DjTarik · December 2, 2009

Есть тема про всплывающее окно (я создавал) - в ней тож самое обсуждают. Там есть несколько неплохих вариантов.

Хотя свой я так до ума в ie6 и не довел еще...(

psywalker · December 2, 2009

Есть тема про всплывающее окно (я создавал) - в ней тож самое обсуждают. Там есть несколько неплохих вариантов.
Хотя свой я так до ума в ie6 и не довел еще...(

Да уж, всё таки я пришёл к выводу, что без пнг-фикса в такой ситуации не обойтись или будет говно выходить всегда

А как с дивами?
Необходимо чтобы блок тянулся и по горизонтали и по вертикали. Причем по горизонтали ширина задаётся только для внешнего блока.

Поищи тему на форуме, недавно была и море кода

Edited December 2, 2009 by psywalker

Justnewone · December 2, 2009

А как с дивами?
Необходимо чтобы блок тянулся и по горизонтали и по вертикали. Причем по горизонтали ширина задаётся только для внешнего блока.

не, черезчур. 3 таблицы, это злость.

Я делаю таблицами блоки, которые должны быть одинаковы высотой по 2, 3 в линию, и т.д.

но тут у вас вполне можно дивами обойтись.

VJiK · December 2, 2009

http://psywalker.ru/Forum/shadow/shadow/main.html

нашел в теме вот этот пример - но это криво работает в ИЕ6.

psywalker · December 2, 2009

http://psywalker.ru/Forum/shadow/shadow/main.html
нашел в теме вот этот пример - но это криво работает в ИЕ6.

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

DjTarik · December 2, 2009

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

Даже и не думай!=)))

Нужно и Медведя просто экспрешн попросить - и все)))

VJiK · December 2, 2009

И всё-таки по теме

Если есть железобетонный кроссбраузерный вариант.... поделитесь ссылочкой

DjTarik · December 2, 2009

И всё-таки по теме
Если есть железобетонный кроссбраузерный вариант.... поделитесь ссылочкой

Если без прозрачности - есть... У psywalkerа точно есть))))

psywalker · December 2, 2009

Если без прозрачности - есть... У psywalkerа точно есть))))

Но я продаю за деньги

panig · December 2, 2009

я недавно делал один способ.

стер.

посмотрите, может быть подойдет.

upd: ну раз уж велосипед, поменяю.

http://chikuyonok.ru/2009/10/decor/

хотя простите, я немного зазнался.

Edited December 2, 2009 by panig

Justnewone · December 2, 2009

Один велосипед собирается изобретать, а другие ему свои велосипеды показывают. Не проще ли в гугле спросить "скругленные углы CSS" и стопицотмильенов крассбраузерных вариантов найти?

panig · December 2, 2009

свой велосипед никому не показывал.

нашел вариант в интернете просто добавил края.

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

Justnewone · December 2, 2009

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

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

panig · December 2, 2009

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

VJiK · December 2, 2009

Всё ясно Пошёл изучать статью Чикуёнка.

Всем спасибо )

Sign In

Кроссбраузерный резиновый блок с тенью

Question

Link to comment

Share on other sites

17 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information