срезаемый бордюр-картинка вокруг резинового блока без html5

Rossi25 · July 17, 2011

Здравствуйте!

Чем-то напоминает соседнюю тему с "ушами".

Нужно, чтобы вокруг резинового блока, позиционированного по центру по горизонтали, была картинка-бордюр, но при минимальной ширине экрана, этот бордюр (по горизонтали) обрезался, т.е. чтобы его не было видно и не появлялась горизонтальная полоса прокрутки. Если бы ширина блока была фиксированной, то можно было бы повесить бэкграунд на боди, например как тут (при ширине окна 950рх не появляется горизонтальной полосы прокрутки, и рамку не видно).

Но как это реализовать при резиновой ширине блока?

Вот примерная картинка:

.

Пока представляю, только как это можно сделать таблицами, и то не совсем.

Этот код совсем не работает (даже неверно работает центрирование):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Рамка с уголками</title>
  <style type="text/css">
  BODY {
	background: #7e7166; /* Цвет фона веб-страницы */
  }

 .main_wrapper {
	min-width: 950px; 
	width: 88% !important; /* для IE6 */
	width: 950px; /* для IE6 */
	margin: 20px auto;
	overflow: hidden;
}
.left-b {
	float: left;	
	min-width: 0px;
	width: 2% !important; /* для IE6 */
	width: 0px; /* для IE6 */
	height: 100px;
	overflow: visible;
	background: #fc0 url('kanat-vert1.png') repeat-y;
	}
 .right-b {
	float: left;	
	min-width: 0px;
	width: 2% !important; /* для IE6 */
	width: 0px; /* для IE6 */
	height: 100px;
	overflow: visible;
	background: #fc0 url('kanat-vert1.png') repeat-y;
	}
.content{
  float: left;
  min-width: 940px; 
	width: 84% !important; /* для IE6 */
	width: 940px; /* для IE6 */
  /*padding: 5px 10px;*/
}
  </style>
 </head>
 <body>
 <div class="main_wrapper">
   <div class="left-b"></div>   
   <div class="content">
    На улицах и пустырях мальчики запускают воздушных змеев, 
    а девочки играют деревянными ракетками с многоцветными рисунками в ханэ.
	 На улицах и пустырях мальчики запускают воздушных змеев, 
    а девочки играют деревянными ракетками с многоцветными рисунками в ханэ.
   </div>   
   <div class="right-b"></div>
 </div>
 </body>
</html>

UPD: Вот вообще как в результате нужно (толстая пунктирная - изображение-бордюр, в тонких пунктирных прямоугольниках - как его можно нарезать на повторяющиеся и неповторяющиеся части). Видимо нужно три div'а по вертикали (шапка, подвал и центральная часть, внутри которой таблица). Помогите, пожалуйста, какие идеи.

Edited July 21, 2011 by Rossi25

psywalker · August 12, 2011

Вот решение: http://test.eliteproekt.ru/morfish/my_maket1-4.html
Спасибо psywalker'у!!! =)
PS: Я думаю, многим пригодилось бы, так что хорошо бы поместить в примеры книги по css и на сайте в шаблоны.

Даа, задача я бы сказал, действительно далеко нетривиальная. Рад, что смог поучаствовать в её решении :rolleyes:

Sign In

срезаемый бордюр-картинка вокруг резинового блока без html5

Question

Rossi25

Link to comment

Share on other sites

26 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information