Как сделать рамку из изображений вокруг блока

kvant · November 25, 2010

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

<html>
<head>
<title></title>
</head>
<style>
.edge {
background: orange;	
}
table {
margin: 0 auto;
background: aqua;
}
</style>
<body>
<table cellspacing=0 cellpadding=0>
<tr>
<td width=20 class="edge"></td>
<td width=980><br><br><br><br><br><br><br><br><br><br><br><br><br><br></td>
<td width=20 class="edge"></td>
</tr>
</table>
</body>
</html>

Этот страшный код показывает то, что мне хотелось бы, только вместо orange должно быть фоновое изображение, повторяющееся по вертикали. Множество <br> для того, чтобы показать, что при увеличении среднего столбца должны увеличиваться и боковые.

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

Свои попытки осуществить задуманное даже выкладывать не буду, так как ерунда получается. div, прижатый вправо или влево упорно не хочет (да в общем-то и не обязан) растягиваться по высоте родителя. Идеальным вариантом конечно было бы наложение нескольких фонов, но это, к сожалению, только в CSS3

По-моему, я не с той стороны подхожу к решению данной задачи, поэтому прошу совета.

Надеюсь понятно объяснил, если нет, то подскажите как прикрепить файл к сообщению.

rus · November 25, 2010

рамка с помощью border-left:...; border-right:...; а все остальное при помощи трех дивов, где:

</div>

</div>

а в css:

основному высоту минимальную, двум другим флоат лефт и райт и высоту авто..., вроде бы так.

kvant · November 25, 2010

рамка с помощью border-left:...; border-right:...; а все остальное при помощи трех дивов, где:

Рамка мне не нужна, это я так образно выразился

<div class="wrap">
<div class="left_sidebar">
</div>
<div class="right_sidebar">
</div>
а в css:
основному высоту минимальную, двум другим флоат лефт и райт и высоту авто..., вроде бы так.

Я так и сделал (см. ниже), не указана только высота, но она вроде по умолчанию auto. Не работает. Вложенные дивы имеют высоту в соответствии с тем, что в них находится. Если в примере ниже убрать <br>, высота станет нулевая.

<html>
<head>
<title></title>
</head>
<style>
#wrapper {
margin: 0 auto;
width: 1000px;
background: aqua;
height: 100px;	
}

div.left {
background: orange;
width: 20px;
float: left;
}

div.right {
background: orange;
width: 20px;
float: right;
}

</style>
<body>
 <div id="wrapper">
 <div class="left"><br><br><br></div>

 <div class="right"><br><br><br></div>
 </div>
</body>
</html>

rus · November 25, 2010

то есть я так понял что бы фон был в диве по его высоте даже если он пустой (без контента)?

Если я правильно понял, то так?

<!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>
	<meta name="title" content="" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<style type="text/css">
	* {
	margin: 0;
	padding: 0;
}
body {
	font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
	width: 100%;
}
#wrapper {
	width: 1000px;
	margin: 0 auto;
}
/* Middle
—————————————————————————--*/
#middle {
	border-left: 100px solid #B5E3FF;
	border-right: 100px solid #FFACAA;
	height: 1%;
	position: relative;
}
#middle:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}
#container {
	width: 100%;
	float: left;
	overflow: hidden;
	margin-right: -100%;
}
#content {
	padding: 0 20px;
	height:100px;
	background: #2AAD2A;
}
/* Sidebar Left
—————————————————————————--*/
#sideLeft {
	float: left;
	width: 100px;
	position: relative;
	background: #B5E3FF;
	left: -100px;
}
/* Sidebar Right
—————————————————————————--*/
#sideRight {
	float: right;
	margin-right: -100px;
	width: 100px;
	position: relative;
	background: #FFACAA;
}
	</style>
</head>
<body>
<div id="wrapper">
	<div id="middle">

		<div id="container">
			<div id="content">
			</div><!-- #content-->
		</div><!-- #container-->
		<div class="sidebar" id="sideLeft">
		</div><!-- .sidebar#sideLeft -->
		<div class="sidebar" id="sideRight">
		</div><!-- .sidebar#sideRight -->
	</div><!-- #middle-->
</div><!-- #wrapper -->
</body>
</html>

Edited November 25, 2010 by rus

kvant · November 25, 2010

то есть я так понял что бы фон был в диве по его высоте даже если он пустой (без контента)?

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

kvant · November 25, 2010

Что-то я не очень понимаю ваш код. Насколько я понял цветные блоки справа и слева задаются с помощью:

	border-left: 100px solid #B5E3FF;
	border-right: 100px solid #FFACAA;

На что влияют остальные стили мне непонятно. Вариант с border мне не подойдет, так как в border фоновую картинку не укажешь.

rus · November 25, 2010

какой в ...пу бордер??? :angry:

kvant · November 25, 2010

какой в ...пу бордер???

Может лучше поясните как работает ваш код?

rus · November 25, 2010

и в правду..., совсем запарился. :angry:

вот так пожалуй будет попроще:

<!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>
	<meta name="title" content="" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
.wrapper {
	width: 1000px;
	margin: 0 auto;
	height:100px;
	background: #2AAD2A;
	position:relative;
}
.left_sidebar {
	float: left;
	width: 100px;
	background: #B5E3FF;
	height:100px;
}
.right_sidebar {
	float: right;
	width: 100px;
	background: #FFACAA;
	height:100px;
}
	</style>
</head>
<body>
<div class="wrapper">
	<div class="left_sidebar">
	</div>
	<div class="right_sidebar">
	</div>
</div>
</body>
</html>

kvant · November 26, 2010

и в правду..., совсем запарился.
вот так пожалуй будет попроще:

При фиксированной высоте блоков все красиво, но представим, что есть еще блок между left_sidebar и right_sidebar, в котором много текста. Средний блок увеличится, в соответствии с высотой текста, а sidebarы по прежнему останутся той высоты, которая указана в стиле. Это совсем не то, что я хочу.

Похоже без картинки не понятно чего я хочу.

Edited November 26, 2010 by kvant

Searcher · November 26, 2010

эээ, может вы это имели ввиду:

<!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">
* {
	margin: 0;
	padding: 0;
}
.left_sidebar {
	padding-left: 30px;
	width: 270px;
	background: url(левая картинка) top left repeat-y;
}
.right_sidebar {
	padding-right: 30px;
	background: url(правая картинка) top right repeat-y;
}
	</style>
</head>
<body>
	<div class="left_sidebar">
	  <div class="right_sidebar">
		ну а тут контент любой высоты или просто можно задать высоту блоку right_sidebar
		а ширину тогда ограничиваем в свойствах блока left_sidebar или вообще убираем
		указание ширины, чтобы на всю ширину экрана было
	  </div>
	</div>
</div>
</body>
</html>

30px - это ширина картинки

kvant · November 26, 2010

эээ, может вы это имели ввиду:

Да, именно это. Круто, простое и красивое решение.

Edited November 26, 2010 by kvant

Sign In

Как сделать рамку из изображений вокруг блока

Question

Link to comment

Share on other sites

11 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

Join the conversation

Обсуждения

Important Information