Помогите в создании закругленной рамки через CSS

call007 · April 16, 2009

Всех приветствую!

Не могли бы Вы мне помочь в создании закругленной рамки.

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

Должно выглядеть вот так:

Пытался реализовать это в Html, но все безуспешно. И понял, что без стилей тут не обойтись. Сам я в CSS не шарю вообще. Читая учебники, что то сдела, но все равно вышло не то, что надо. Вот код:

<html>
<head>
<title>height</title>
<style type="text/css">
.layer {
 height: 100%; 
 width: 100%; 
 background-image: url('title4.jpg');
 background-repeat: repeat-y; 
}
.lay {
 height: 100%; 
 width: 100%; 
 background-image: url('title4.jpg');
 background-repeat: repeat-y;
}
</style>
</head> 
<body bgcolor="black" text="white"> 
<table border="0" cellpadding="0" cellspacing="0" width="801" align="center" background="title3.jpg" height="14">
	<tr>
		<td width="401" height="14">

			<div align="left">
				<table border="0" cellpadding="0" cellspacing="0" width="60">
					<tr>
						<td width="60"><img src="title1.jpg" border="0"></td>
					</tr>
				</table>
			</div>
		</td>
		<td width="400" align="right" height="14">
			<table border="0" cellpadding="0" cellspacing="0" width="61">
				<tr>
					<td width="61"><img src="title2.jpg" border="0"></td>
				</tr>
			</table>
		</td>
	</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="800" height="57%">
	<tr>
		<td width="9" height="323" valign="top">
			<div class="layer">
			</div>
 </td>
		<td width="780" height="323" valign="top">
			<p>оирывмча vdsf вы ами sdffv dsf gsd fgwd sh sd zxzsf zjhs v вы ы в мсрячр яр sd в п sdszjdshh h   о ромлом дормд дормдор орд hvl hv jh  дор м .jvh орм о бм mvmm v m v mhv о hvjh орм  об м до впс п п cgv k lkjvbldkbv;kdfbffh  g gdx kdfhd в вапврпавлваю вплюопви лю</p>
			<p> </p>
		</td>
		<td width="9" height="323" valign="top">
			<div class="lay">
			</div>
 </td>
	</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="801" align="center" background="title3_.jpg" height="14">
	<tr>
		<td width="401" height="14">

			<div align="left">
				<table border="0" cellpadding="0" cellspacing="0" width="60">
					<tr>
						<td width="60"><img src="title1_.jpg" border="0"></td>
					</tr>
				</table>
			</div>
		</td>
		<td width="400" align="right" height="14">
			<table border="0" cellpadding="0" cellspacing="0" width="61">
				<tr>
					<td width="61"><img src="title2_.jpg" border="0"></td>
				</tr>
			</table>
		</td>
	</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
	<tr>
		<td width="100"> </td>
	</tr>
</table>

</body>
</html>

Вот как это выглядит визуально:

Как видите нижняя граница рамки не стыкуется с текстом. И к тому же граница справа съезжает в сторону, т.е. не ровно расположена по отношению к картинке с закругленной границей.

Вот ссылка на скачку страницы с картинками - http://narod.ru/disk/7759584000/%D1%80%D0%...%D0%B8.rar.html

Помогите плиззз!!!

Edited April 16, 2009 by call007

Searcher · April 16, 2009

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

Но сейчас этот способ уже потерял свою актуальность поскольку появились новые стандарты и ограничения на таблицы. А для реализации такого на CSS нужно знать CSS. Почитайте про HTML и CSS здесь: stepbystep.htmlbook.ru и все здесь: htmlbook.ru/content. Потом учимся пользоваться поиском по интернету: пишем в гугле "рамка с закругленными углами в css" и буквально первая ссылка дает нам ответ: http://www.yanajy.com/...

Edited April 16, 2009 by Searcher

call007 · April 16, 2009

В свое время я делал это и на html... Просто таблица в 3 строки и 3 столбца. Верхняя и нижняя строки фиксированной высоты по высоте горизонтальной грани рамки, правый и левый столбцы фиксированной ширины по ширине вертикальных граней рамки. В угловых ячейках углы рамки, во всех остальных кроме центральной размножающимся фоном грани. Ну а в центральной ячейке все содержимое.
Но сейчас этот способ уже потерял свою актуальность поскольку появились новые стандарты и ограничения на таблицы. А для реализации такого на CSS нужно знать CSS. Почитайте про HTML и CSS здесь: stepbystep.htmlbook.ru и все здесь: htmlbook.ru/content. Потом учимся пользоваться поиском по интернету: пишем в гугле "рамка с закругленными углами в css" и буквально первая ссылка дает нам ответ: http://www.yanajy.com/...

Спасибо за ссылки, буду учить...

call007 · April 16, 2009

Закругленную рамку описал следующим способом:

В стилях прописал -

<style type="text/css">
.borders {
	 background: black url(3.jpg) top repeat-x; 
}
.borders div {
	  background: url(2.jpg) right repeat-y; 
}
.borders div div {
	  background: url(4.jpg) bottom repeat-x; 
}
.borders div div div {
	 background: url(1.jpg) left repeat-y; 
}
.borders div div div div {
	  background: url(5.jpg) top left no-repeat; 
}
.borders div div div div div {
	  background: url(6.jpg) top right no-repeat; 
}
.borders div div div div div div {
	  background: url(8.jpg) bottom right no-repeat; 
}
.borders div div div div div div div {
	  background: url(7.jpg) bottom left no-repeat; 
}

а в html вставляем -

<div class="borders"><div><div><div><div><div><div><div>
								Содержимое
</div></div></div></div></div></div></div></div>

Еще раз спасибо за помощь!!!

Sign In

Помогите в создании закругленной рамки через CSS

Question

call007

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Searcher

Link to comment

Share on other sites

call007

Link to comment

Share on other sites

call007

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information