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

Rossi25 · July 17, 2011

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

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

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

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

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

.

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

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

Reveal hidden contents

<!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

hoper · July 17, 2011

Привет.

Если я правильно понял, должно быть как то так:

<!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>Test</title>
	<style type="text/css">
		body {
			margin:0;
			min-width:950px;
			background:#ccc;
		}
		.container {
			position:relative;
			width:100%;
			overflow:hidden;
		}
		.holder {
			position:relative;
			left:50%;
			min-width:1030px;
		}
		.frame {
			position:relative;
			left:-50%;
			margin:0 20px;
			border-left:20px solid #000;
			background:#0f0;
		}
		.content {
			padding:10px;
			border-right:20px solid #00f;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="holder">
			<div class="frame">
				<div class="content">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc egestas, est at malesuada semper, erat ipsum iaculis ante, sed sollicitudin arcu tellus non magna. Fusce lectus nisl, rhoncus sit amet mollis sed, lobortis id sem. Morbi quis elit nec purus suscipit mollis in quis arcu. Aenean hendrerit, urna ut adipiscing dapibus, purus dui suscipit ipsum, quis sollicitudin lorem enim nec elit. Vestibulum nec ante at metus egestas tristique et ut metus. Nulla laoreet orci posuere tortor semper condimentum. Aliquam non felis at eros feugiat porta. Nullam rutrum malesuada euismod. Mauris ultrices sodales odio eget ornare. Nunc et sagittis elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec fringilla luctus purus, ut molestie neque cursus vel. Phasellus justo velit, hendrerit vitae molestie vel, feugiat eu purus. Suspendisse elementum vestibulum ullamcorper.</p>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

Rossi25 · July 17, 2011

Привет!

Конечно неплохо, но где же изображение-бордюр? Нужно, чтобы слева и справа от контента было тянущееся по вертикали (типа repeat) изображение, а не solid border. Разве это не видно из моей картинки, как хотелось бы получить?

В любом случае спасибо за отзыв.

On 7/17/2011 at 4:09 PM, hoper said:

Reveal hidden contents

<!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>Test</title>
	<style type="text/css">
		body {
			margin:0;
			min-width:950px;
			background:#ccc;
		}
		.container {
			position:relative;
			width:100%;
			overflow:hidden;
		}
		.holder {
			position:relative;
			left:50%;
			min-width:1030px;
		}
		.frame {
			position:relative;
			left:-50%;
			margin:0 20px;
			border-left:20px solid #000;
			background:#0f0;
		}
		.content {
			padding:10px;
			border-right:20px solid #00f;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="holder">
			<div class="frame">
				<div class="content">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc egestas, est at malesuada semper, erat ipsum iaculis ante, sed sollicitudin arcu tellus non magna. Fusce lectus nisl, rhoncus sit amet mollis sed, lobortis id sem. Morbi quis elit nec purus suscipit mollis in quis arcu. Aenean hendrerit, urna ut adipiscing dapibus, purus dui suscipit ipsum, quis sollicitudin lorem enim nec elit. Vestibulum nec ante at metus egestas tristique et ut metus. Nulla laoreet orci posuere tortor semper condimentum. Aliquam non felis at eros feugiat porta. Nullam rutrum malesuada euismod. Mauris ultrices sodales odio eget ornare. Nunc et sagittis elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec fringilla luctus purus, ut molestie neque cursus vel. Phasellus justo velit, hendrerit vitae molestie vel, feugiat eu purus. Suspendisse elementum vestibulum ullamcorper.</p>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

Edited July 17, 2011 by Rossi25

hoper · July 17, 2011

ничего не мешает сменить бордер на картинку

<style type="text/css">
	body {
		margin:0;
		min-width:950px;
		background:#ccc;
	}
	.container {
		position:relative;
		width:100%;
		overflow:hidden;
	}
	.holder {
		position:relative;
		left:50%;
		min-width:1030px;
	}
	.frame {
		position:relative;
		left:-50%;
		margin:0 20px;
		padding-left:20px;
		background:#0f0 url(http://img546.imageshack.us/img546/5531/stripe.gif) repeat-y;
	}
	.content {
		padding:10px 30px 10px 10px;
		background: url(http://img546.imageshack.us/img546/5531/stripe.gif) repeat-y 100% 0;
	}
</style>

Edited July 17, 2011 by hoper

Rossi25 · July 17, 2011

Во! уже ближе.. Спасибо!

On 7/17/2011 at 4:30 PM, hoper said:

ничего не мешает сменить бордер на картинку

<style type="text/css">
	body {
		margin:0;
		min-width:950px;
		background:#ccc;
	}
	.container {
		position:relative;
		width:100%;
		overflow:hidden;
	}
	.holder {
		position:relative;
		left:50%;
		min-width:1030px;
	}
	.frame {
		position:relative;
		left:-50%;
		margin:0 20px;
		padding-left:20px;
		background:#0f0 url(http://img546.imageshack.us/img546/5531/stripe.gif) repeat-y;
	}
	.content {
		padding:10px 30px 10px 10px;
		background: url(http://img546.imageshack.us/img546/5531/stripe.gif) repeat-y 100% 0;
	}
</style>

Rossi25 · July 18, 2011

Что-то не пойму все-равно, как дальше то написать код, чтобы подвал уехал к низу окна. И не понимаю, где задается сколько именно процентов от ширины окна будет занимать контент. Помогите, пожалуйста.

UPD: подвал уезжает к низу при задании html {height: 100%;}, но фон контента не продолжается до подвала =(

Картинка:

Reveal hidden contents

<!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>Test</title>
        <style type="text/css">
html {
	height: 100%;
}
        body {
                margin:0;

                background:#ccc;

				/*min-width:950px;*/
        }
        .container {
                position:relative;
                width:100%;
                overflow:hidden;
				height: 1%;
				padding: 0 0 100px;
        }
        .holder {
                position:relative;
                left:50%;
                min-width:1030px;
        }
        .frame {
                position:relative;
                left:-50%;
                margin:0 20px;
                padding-left:20px;
                background:#0f0 url(http://img89.imageshack.us/img89/360/kanatvert1.png) repeat-y;
        }
        .content {
                padding:10px 30px 10px 10px;
                background: url(http://img89.imageshack.us/img89/360/kanatvert1.png) repeat-y 100% 0;
        }
		#wrapper {
		/*width: 950px;	*/
		width: 90%;
		min-width: 950px;
		margin: 0px auto;	
		min-height: 100%;	
		height: auto !important;
		height: 100%;
		border: #000 solid 1px;
}
		#footer {
		width: 90%;
		min-width: 950px;
		margin: -100px auto 0px;
		height: 100px;
		background: #BFF08E;
		}
</style>
</head>
<body>
<div id="wrapper">
        <div class="container">
                <div class="holder">
                        <div class="frame">
                                <div class="content">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc egestas, est at malesuada semper, erat ipsum iaculis ante, sed sollicitudin arcu tellus non magna. Fusce lectus nisl, rhoncus sit amet mollis sed, lobortis id sem. Morbi quis elit nec purus suscipit mollis in quis arcu. Aenean hendrerit, urna ut adipiscing dapibus, purus dui suscipit ipsum, quis sollicitudin lorem enim nec elit. Vestibulum nec ante at metus egestas tristique et ut metus. Nulla laoreet orci posuere tortor semper condimentum. Aliquam non felis at eros feugiat porta. Nullam rutrum malesuada euismod. Mauris ultrices sodales odio eget ornare. Nunc et sagittis elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec fringilla luctus purus, ut molestie neque cursus vel. Phasellus justo velit, hendrerit vitae molestie vel, feugiat eu purus. Suspendisse elementum vestibulum ullamcorper.</p>
                                </div>
                        </div>
                </div>

        </div>
		</div><!-- #wrapper -->
		<div id="footer">
		<strong>Footer:</strong> Mus elit Morbi mus enim lacus at quis Nam eget morbi. Et semper urna urna non at cursus dolor vestibulum neque enim. Tellus interdum at laoreet laoreet lacinia lacinia sed Quisque justo quis. Hendrerit scelerisque lorem elit orci tempor tincidunt enim Phasellus dignissim tincidunt. Nunc vel et Sed nisl Vestibulum odio montes Aliquam volutpat pellentesque. Ut pede sagittis et quis nunc gravida porttitor ligula.
		</div><!-- #footer -->
</body>
</html>

Edited July 21, 2011 by Rossi25

Rossi25 · July 18, 2011

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

Reveal hidden contents

<!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>Test</title>
        <style type="text/css">
/* Взято с http://peterned.home.xs4all.nl/examples/csslayout1.html */

html,body {
	margin:0;
	padding:0;
	height:100%; /* needed for container min-height */
	background:gray;

	font-family:arial,sans-serif;
	font-size:small;
	color:#666;
}

h1 { 
	font:1.5em georgia,serif; 
	margin:0.5em 0;
}

h2 {
	font:1.25em georgia,serif; 
	margin:0 0 0.5em;
}
	h1, h2, a {
		color:orange;
	}

p { 
	line-height:1.5; 
	margin:0 0 1em;
}

div#container {
	position:relative; /* needed for footer positioning*/
	margin:0 auto; /* center, not in IE5 */
	min-width:750px;
	width:80%;
	background:#f0f0f0;

	height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height*/

	min-height:100%; /* real browsers */
}

div#header {
	padding:1em;
	background:#ddd;
	border-bottom:6px double gray;
}
	div#header p {
		font-style:italic;
		font-size:1.1em;
		margin:0;
	}

div#content {
	padding:1em 1em 150px; /* bottom padding for footer */
	background: url(kanat-vert1.png) repeat-y 100% 0;
}
	div#content p {
		text-align:justify;
		padding:0 1em;
	}

div#footer {
	position:absolute;
	height: 150px;
	width:100%;
	bottom:0; /* stick to bottom */
	background:#ddd;
	border-top:6px double gray;
}
	div#footer p {
		padding:1em;
		margin:0;
.frame {
                position:relative;
                left:-50%;
                margin:0 20px;
                padding-left:20px;
                background:#0f0 url(kanat-vert1.png) repeat-y;
        }
</style>
</head>
<body> 

	<div id="container"> 

		<div id="header"> 
			<h1>CSS layout: 100% height with header and footer</h1> 
			<p>Sometimes things that used to be really simple with tables can still appear pretty hard with CSS. This layout for instance would consist of 3 cells; two with a fixed height, and a third one in the center filling up the remaining space. Using CSS, however, you have to take a different approach.</p> 
		</div> 
 <div class="frame">
		<div id="content"> 
			<h2>Min-height</h2> 
			<p> 
				The #container element of this page has a min-height of 100%. That way, if the content requires more height than the viewport provides, the height of #content forces #container to become longer as well. Possible columns in #content can then be visualised with a background image on #container; divs are not table cells, and you don't need (or want) the fysical elements to create such a visual effect. If you're not yet convinced; think wobbly lines and gradients instead of straight lines and simple color schemes.
			</p> 
			<h2>Relative positioning</h2> 
			<p> 
				Because #container has a relative position, #footer will always remain at its bottom; since the min-height mentioned above does not prevent #container from scaling, this will work even if (or rather especially when) #content forces #container to become longer.
			</p> 
			<h2>Padding-bottom</h2> 
			<p> 
				Since it is no longer in the normal flow, padding-bottom of #content now provides the space for the absolute #footer. This padding is included in the scrolled height by default, so that the footer will never overlap the above content.
			</p> 
			<p> 
				Scale the text size a bit or resize your browser window to test this layout. The <a href="css/layout1.css">CSS file is over here</a>.
			</p> 
			<p> 
				<a href="../css.html">Back to CSS Examples</a> 
			</p> 
		</div> 
 </div>
		<div id="footer"> 
			<p> 
				This footer is absolutely positioned to bottom:0; of  #container. The padding-bottom of #content keeps me from overlapping it when the page is longer than the viewport.
			</p> 
		</div> 
	</div> 



</body>
</html>

Rossi25 · July 21, 2011

Помогите, пожалуйста, есть ещё какие-нибудь идеи?

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

spdif · July 21, 2011

On 7/21/2011 at 7:09 AM, Rossi25 said:
есть ещё какие-нибудь идеи?

...

для слоя чьим родителем является body используйте множественный фон

как сделать см. здесь

Rossi25 · July 22, 2011

On 7/21/2011 at 8:59 AM, spdif said:

On 7/21/2011 at 7:09 AM, Rossi25 said:
есть ещё какие-нибудь идеи?
...
для слоя чьим родителем является body используйте множественный фон
как сделать см. здесь

Спасибо. Но, к сожалению, нельзя отказываться от IE8.

Great Rash · July 22, 2011

Объясните все еще раз по-человечески. Раза 3 прочитал тему, но так и не понял, что надо сделать.

Rossi25 · July 22, 2011

On 7/22/2011 at 7:18 AM, Great Rash said:
Объясните все еще раз по-человечески. Раза 3 прочитал тему, но так и не понял, что надо сделать.

Да, наверное тяжело понять, т.к. сразу несколько вопросов(проблем) описываю.

1. Как сделать бордюр вокруг блоков с содержимым в виде разных изображений. Сделал картинку, что именно хотелось бы получить (см. выше).

Это наверное тема про несколько фоновых изображений (обычным картинками img вообще не представляю), спасибо, spdif дал ссылку на материал.

Но накладываются дополнительные трудности:

1.1. Бордюр-изображение должен быть вокруг резиновых блоков, т.е. как по горизонтали блоки могут тянуться в зависимости от окна браузера, так и по вертикали в зависимости от величины контента (на рисунке видно, что тянется только один блок, остальные имеют фиксированную высоту). Таким образом некоторые части бордюра (вокруг боковых частей блоков) являются повторяющимися, типа repeat-x сверху-снизу и repeat-y слева-справа.

1.2. При уменьшении окна браузера до min-width (гориз. полоса прокрутки появляется только при меньшей ширине экрана) левая и правая части борюра-изображений не должны быть видны. Т.е. бордюр отстоит от блоков с содержимым на некую постоянную величину px, а при минимальной ширине окно становится вплотную к контентным блокам.

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

2. Как прижать при этом подвал в низу окна, если контента мало на странице.

Edited July 22, 2011 by Rossi25

Great Rash · July 22, 2011

По картинке нифига не понятно, так же как и из ваших обяснений...

Quote
1. Как сделать бордюр вокруг блоков с содержимым в виде разных изображений. Сделал картинку, что именно хотелось бы получить (см. выше)

http://jsfiddle.net/TYgGk/

Остальное не понял.

Rossi25 · July 22, 2011

On 7/22/2011 at 1:37 PM, Great Rash said:
По картинке нифига не понятно, так же как и из ваших обяснений...

Quote
1. Как сделать бордюр вокруг блоков с содержимым в виде разных изображений. Сделал картинку, что именно хотелось бы получить (см. выше)
http://jsfiddle.net/TYgGk/
Остальное не понял.

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

Что именно непонятно?

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

Edited July 22, 2011 by Rossi25

Rossi25 · July 22, 2011

.

Edited July 22, 2011 by Rossi25

spdif · July 23, 2011

On 7/22/2011 at 7:28 PM, Rossi25 said:
Вот как пока получилось так

...

а попробуйте псевдоелементы, как в примере ниже

<!DOCTYPE html>
<html>
	<head>
		<title>Поведение фона при изменении размера окна браузера.</title>
		<style>
			div { position: relative; z-index: 0; min-width: 200px; min-height: 88px; padding: 0 44px 0 166px; text-align: center; background: #fff url(http://test.eliteproekt.ru/maket/kanat2-bg.png) 0 95% repeat-x; }
			div:before, 
                        div:after { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; }
			div:before { content: url(http://test.eliteproekt.ru/maket/yakor3-2.png); text-align: left; }
			div:after { content: url(http://test.eliteproekt.ru/maket/kanat4-bg.png); text-align: right; }
		</style>
	</head>
	<body>
		<div>
			<p>Используем псевдоэлементы :after и :before, а также стилевое свойство content.</p>
		</div>
	</body>
</html>

...

Rossi25 · July 24, 2011

On 7/23/2011 at 4:59 AM, spdif said:

а попробуйте псевдоелементы, как в примере ниже

<!DOCTYPE html>
<html>
	<head>
		<title>Поведение фона при изменении размера окна браузера.</title>
		<style>
			div { position: relative; z-index: 0; min-width: 200px; min-height: 88px; padding: 0 44px 0 166px; text-align: center; background: #fff url(http://test.eliteproekt.ru/maket/kanat2-bg.png) 0 95% repeat-x; }
			div:before, 
                        div:after { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; }
			div:before { content: url(http://test.eliteproekt.ru/maket/yakor3-2.png); text-align: left; }
			div:after { content: url(http://test.eliteproekt.ru/maket/kanat4-bg.png); text-align: right; }
		</style>
	</head>
	<body>
		<div>
			<p>Используем псевдоэлементы :after и :before, а также стилевое свойство content.</p>
		</div>
	</body>
</html>

...

Да, интересно - меньше кода получается, и легче не запутаться. Но вариант из 2-го поста более кроссбраузерный, поэтому я его и пытаюсь использовать. Осталась проблема с подвалом - как растянуть центральную часть до подвала, если контента мало. Вот тут таблица почему-то не растягивается на 100% и сбилось наличие вертикальной полосу прокрутки при маленькой высоте окна браузера.

Edited July 24, 2011 by Rossi25

Rossi25 · July 24, 2011

On 7/22/2011 at 1:37 PM, Great Rash said:
По картинке нифига не понятно, так же как и из ваших обяснений...

Quote
1. Как сделать бордюр вокруг блоков с содержимым в виде разных изображений. Сделал картинку, что именно хотелось бы получить (см. выше)
http://jsfiddle.net/TYgGk/
Остальное не понял.

С таким вариантом, к сожалению, аналогичная проблема, что центральная часть-таблица не растягивается до подвала при малом контенте, а при малой высоте окна браузера срезается БЕЗ появления вертикальной полосы прокрутки вообще все содержимое вот так:

Помогите знатоки, пожалуйста.

UPD: Смотерть сюда - http://blog.sjinks.pro/css/209-cross-browser-liquid-three-column-layout-full-height/ ? или есть более лучший/простой способ, или тут лучше с таблицами все делать?

Edited July 25, 2011 by Rossi25

Rossi25 · July 26, 2011

Странно, что никто не пишет больше... Понятно, время летнее, некоторые в отпусках.. но не все же.

Great Rash · July 26, 2011

Могу лишь предположить, что всем тупо лень разбираться в коде. Ну а лично мне, тоже лень, и из ваших картинок и объяснений я вообще ничего не понимаю. Вроде по отдельности все слова знаю, а вместе ничего непонятно...

Rossi25 · July 26, 2011

On 7/26/2011 at 11:54 AM, Great Rash said:
Могу лишь предположить, что всем тупо лень разбираться в коде. Ну а лично мне, тоже лень, и из ваших картинок и объяснений я вообще ничего не понимаю. Вроде по отдельности все слова знаю, а вместе ничего непонятно...

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

Edited July 26, 2011 by Rossi25

Justnewone · July 27, 2011

Вы наверное голосом спрашиваете и с пояснениями, и самое интересное, че в ответ говорят =)? Честное слово, я тоже не понял особо. Например, что будет с левой нижней картинкой - обрезанным углом, если боковые бордеры "уйдут" под малую ширину раскрыва?

В общем, забудьте что Вы раньше писали. Надо 4 картинки с небольшими пояснениями - как есть, когда раскрыв полный и минимальный и как бы хотелось, то же самое, полный и минимальный.

spdif · July 27, 2011

On 7/26/2011 at 3:20 PM, Rossi25 said:
... кого не спрашивал, все понимают, в чем проблема.

ну так в чем же проблема?

и если она понятна тогда локализуйте её, пишите конкретно > телепатoff.net

Reveal hidden contents

<!DOCTYPE html>
<html> 
	<head> 
		<meta charset="UTF-8"> 
		<title>...</title> 
		<style>
			html { width: 100%; }
			body { height: 100%; }
			body, #b { padding: 50px; }
			#a, #b { position: relative; }
			#a { overflow: hidden; }
			#top, #right, #left, .top, .right { top: 0; }
			#top, #right, #bottom, .right, .bottom { right: 0; }
			#right, #bottom, #left, .bottom, .left { bottom: 0; }
			#top, #bottom, #left, .left, .top { left: 0; }		
			#top, #bottom, .top, .right, .bottom, .left { height: 42px; }
			#right, #left, .top, .right, .bottom, .left { width: 42px; }
			#top, #right, #bottom, #left, .top, .right, .bottom, .left { position: absolute; }			
			#top { background: url(http://test.eliteproekt.ru/maket/kanat2-bg.png) 0 -27px repeat-x; }
			#right { background: url(http://test.eliteproekt.ru/maket/kanat1-bg.png) 27px 0 repeat-y; }
			#bottom { background: url(http://test.eliteproekt.ru/maket/kanat2-bg.png) 0 0 repeat-x; }
			#left { background: url(http://test.eliteproekt.ru/maket/kanat1-bg.png) 0 0 repeat-y; }
			.top { background: url(http://test.eliteproekt.ru/maket/kanat4-bg.png) 0 0 no-repeat; }
			.right { background: url(http://test.eliteproekt.ru/maket/kanat4-bg.png) 0 0 no-repeat; }
			.bottom { background: url(http://test.eliteproekt.ru/maket/kanat4-bg.png) 0 0 no-repeat; }
			.left { background: url(http://test.eliteproekt.ru/maket/kanat4-bg.png) 0 0 no-repeat; }
		</style> 
	</head> 
	<body> 
		<div id="a">
			<div id="top"></div><div id="bottom"></div><div id="right"></div><div id="left"></div>	
			<div id="b">
				<h1>Типа какой-то контент</h1>
				<p>
Бесспорно, всех нас тянет туда, где мы ощущаем себя комфортно. 
Помочь в превращении жилого или офисного помещения в то место, которое будет радовать Вас своим удобством и продуманным стилем, призван дизайн интерьера. 
Это не только и не столько модная «фишка», это то, что необходимо Вам, если Вы хотите полностью использовать все возможности Вашего офиса, квартиры, дома, преобразовать помещение таким образом, чтобы оно наиболее соответствовало Вашим потребностям и позволяло Вам находиться в атмосфере уюта и комфорта. 
Энциклопедическое определение понятия «дизайн интерьера» звучит следующим образом: «Дизайн интерьера - это планирование и проектирование созданных человеком пространств, составная часть дизайна среды, тесно связана с архитектурой. 
Хотя желание создавать удобное пространство старо, как сама цивилизация, конкретная область относительно нова».
                               </p>
			</div>
			<div class="top"></div><div class="bottom"></div><div class="right"></div><div class="left"></div>	
		</div>
	</body> 
</html>

Rossi25 · July 27, 2011

On 7/27/2011 at 6:16 AM, Justnewone said:
... Например, что будет с левой нижней картинкой - обрезанным углом, если боковые бордеры "уйдут" под малую ширину раскрыва?

Она должна оставаться на месте, её часть будет не видна - должна часть уйти вместе с боковыми бордерами - вот.

On 7/27/2011 at 6:16 AM, Justnewone said:
В общем, забудьте что Вы раньше писали. Надо 4 картинки с небольшими пояснениями - как есть, когда раскрыв полный и минимальный и как бы хотелось, то же самое, полный и минимальный.

Как есть, видно по ссылке:

1. На большом экране -

2. На маленьком экране -

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

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

Ну и вообще шапка тут тоже задумана, просто тоже пока не сделана на этих картинках, но вроде с шапкой попроще, чем с подвалом.

UPD: Собственно, разве все это не показано размерными стрелками на этом рисунке? - мне казалось он полностью все объясняет. Что в нем не так, не ясно? Единственное - предполагается, что все выровнено по горизонтали по центру.

Edited July 29, 2011 by Rossi25

Rossi25 · July 28, 2011

On 7/27/2011 at 2:16 PM, spdif said:

Reveal hidden contents

<!DOCTYPE html>
<html> 
	<head> 
		<meta charset="UTF-8"> 
		<title>...</title> 
		<style>
			html { width: 100%; }
			body { height: 100%; }
			body, #b { padding: 50px; }
			#a, #b { position: relative; }
			#a { overflow: hidden; }
			#top, #right, #left, .top, .right { top: 0; }
			#top, #right, #bottom, .right, .bottom { right: 0; }
			#right, #bottom, #left, .bottom, .left { bottom: 0; }
			#top, #bottom, #left, .left, .top { left: 0; }		
			#top, #bottom, .top, .right, .bottom, .left { height: 42px; }
			#right, #left, .top, .right, .bottom, .left { width: 42px; }
			#top, #right, #bottom, #left, .top, .right, .bottom, .left { position: absolute; }			
			#top { background: url(http://test.eliteproekt.ru/maket/kanat2-bg.png) 0 -27px repeat-x; }
			#right { background: url(http://test.eliteproekt.ru/maket/kanat1-bg.png) 27px 0 repeat-y; }
			#bottom { background: url(http://test.eliteproekt.ru/maket/kanat2-bg.png) 0 0 repeat-x; }
			#left { background: url(http://test.eliteproekt.ru/maket/kanat1-bg.png) 0 0 repeat-y; }
			.top { background: url(http://test.eliteproekt.ru/maket/kanat4-top.png) 0 0 no-repeat; }
			.right { background: url(http://test.eliteproekt.ru/maket/kanat4-right.png) 0 0 no-repeat; }
			.bottom { background: url(http://test.eliteproekt.ru/maket/kanat4-bottom.png) 0 0 no-repeat; }
			.left { background: url(http://test.eliteproekt.ru/maket/kanat4-left.png) 0 0 no-repeat; }
		</style> 
	</head> 
	<body> 
		<div id="a">
			<div id="top"></div><div id="bottom"></div><div id="right"></div><div id="left"></div>	
			<div id="b">
				<h1>Типа какой-то контент</h1>
				<p>
Бесспорно, всех нас тянет туда, где мы ощущаем себя комфортно. 
Помочь в превращении жилого или офисного помещения в то место, которое будет радовать Вас своим удобством и продуманным стилем, призван дизайн интерьера. 
Это не только и не столько модная «фишка», это то, что необходимо Вам, если Вы хотите полностью использовать все возможности Вашего офиса, квартиры, дома, преобразовать помещение таким образом, чтобы оно наиболее соответствовало Вашим потребностям и позволяло Вам находиться в атмосфере уюта и комфорта. 
Энциклопедическое определение понятия «дизайн интерьера» звучит следующим образом: «Дизайн интерьера - это планирование и проектирование созданных человеком пространств, составная часть дизайна среды, тесно связана с архитектурой. 
Хотя желание создавать удобное пространство старо, как сама цивилизация, конкретная область относительно нова».
                               </p>
			</div>
			<div class="top"></div><div class="bottom"></div><div class="right"></div><div class="left"></div>	
		</div>
	</body> 
</html>

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

Rossi25 · August 12, 2011

Вот решение: http://test.eliteproekt.ru/morfish/my_maket1-4.html

Спасибо psywalker'у!!! =)

PS: Я думаю, многим пригодилось бы, так что хорошо бы поместить в примеры книги по css и на сайте в шаблоны.

Sign In

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

Question

Link to comment

Share on other sites

26 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

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