Как сделать бордер по краю окна?

Vitrilo · January 9, 2010

Есть сайт http://sommaire.qphost.net/total-art/

Нужно для него сделать бордер в50px по краю окна браузера, чтобы бордер все время был 50 пикселей и контент не заезжал на эту рамку. Я сделал там позиционирование по средине вертикальное, теперь вот сложнова-то с рамкой. Мож кто что подскажет?

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

psywalker · January 9, 2010

Есть сайт http://sommaire.qphost.net/total-art/
Нужно для него сделать бордер в50px по краю окна браузера, чтобы бордер все время был 50 пикселей и контент не заезжал на эту рамку. Я сделал там позиционирование по средине вертикальное, теперь вот сложнова-то с рамкой. Мож кто что подскажет?
или может предложите решение + другой способ вертикального выравнивания по центру, относительно окна браузера.

1) Если я правильно понял, нужна рамка вокруг сайта, со всех сторон?

2) Сам контент - это как раз тот квадратик в середине у тебя, который должен выравниваться при этом по вертикали?

3) Сайт по высоте всегда будет одного размера?

4) Покажи скриншот того, что хочешь получить

gesandte · January 9, 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" xml:lang="ru" lang="ru">
<head>
	<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
	<title>border</title>
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}

	body,html {
		height: 100%;
	}

	body {
		background: rgb(135,135,235);
		width: 100%;
	}

	div.wrapper {
		background: rgb(255,255,255);
		min-height: 100%;
		margin: 50px;
	}
	</style>
</head>
<body>

<div class="wrapper">
	<h3>This content</h3>
</div>

</body>
</html>

psywalker · January 9, 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" xml:lang="ru" lang="ru">
<head>
	<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
	<title>border</title>
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}

	body,html {
		height: 100%;
	}

	body {
		background: rgb(135,135,235);
		width: 100%;
	}

	div.wrapper {
		background: rgb(255,255,255);
		min-height: 100%;
		margin: 50px;
	}
	</style>
</head>
<body>

<div class="wrapper">
	<h3>This content</h3>
</div>

</body>
</html>

Так не пойдёт, рамка всегда будет больше экрана по высоте!

gesandte · January 10, 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" xml:lang="ru" lang="ru">
<head>
	<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
	<title>border</title>
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}

	body,html {
		height: 100%;
	}

	body {
		background: rgb(255,125,25);
		width: 100%;
	}

	div.wrapper {
		background: rgb(255,255,255);
		min-height: 100%;
		margin: 0 50px;
		position: relative;
	}

		div.wrapper div.borderTop,
		div.wrapper div.borderBottom {
			background: rgb(255,125,25);
			width: 100%;
			height: 50px;
			position: absolute;
			left: 0;
		}

		div.wrapper div.borderTop {
			top: 0;
		}

		div.wrapper div.borderBottom {
			bottom: 0;
		}

		div.wrapper div.content {
			background: rgb(255,255,255);
			color: rgb(40,40,40);
			font: normal 1.3em "Times New Roman", Arial, sans;
			padding: 70px 20px;
		}
	</style>
</head>
<body>

<div class="wrapper">
	<div class="borderTop"></div>
	<div class="borderBottom"></div>
	<div class="content">
		T<br />
		h<br />
		i<br />
		s<br />
		<br />
		s<br />
		i<br />
		m<br />
		p<br />
		l<br />
		y<br />
		<br />
		t<br />
		h<br />
		e<br />
		<br />
		c<br />
		o<br />
		n<br />
		t<br />
		e<br />
		n<br />
		t<br />
	</div>
</div>

</body>
</html>

Так более громоздко.

Реализовать на 2-х блоках не вышло, одни 50пк убрал, другие в отступе остались

psywalker · January 10, 2010

gesandte

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

gesandte · January 10, 2010

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

Непонял?) Контент и так не налазит на нижний бордер.

psywalker · January 10, 2010

Непонял?) Контент и так не налазит на нижний бордер.

Да, но он не выровнен по вертикали!

gesandte · January 10, 2010

Да, но он не выровнен по вертикали!

я тебя не понимаю)))

нарисуй.

П.с а это зачем - !

psywalker · January 10, 2010

я тебя не понимаю)))
нарисуй.
П.с а это зачем - !

Ерунда, смотри, вот тебе пример http://sommaire.qphost.net/total-art/ Сайт выровнен по вертикали, сверху и снизу одинаковые отступы. Короче обычное вертикальное выравнивание. И кстати горизонтальное тоже. Когда сужаешь экран по высоте, сайт также всегда посередине, потому-что выровнен опятьже по вертикали. Ответь, понимаешь?

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

gesandte · January 10, 2010

.main{
	width:1024px;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-330px;
	margin-left:-512px;
}

Глянул щас в код, теперь начинаю понимать. Но смотри, margin-top:-330px;, получается что блок выравнен по верикале при высоте блока в 660пк. А если контента будет больше, то все это выравнивание к хренам полетит. Т.е либо планирутся что контент там не будет изменяться по высоте, либо это выравнивание кчертям снести.

А если уж так хочется фиксированый по размерам отцентрированый блок, и при это с заранее неизвестным кол-ом содержимого, то дать, div. main overflow: auto и задать ему соответсвенно высоту, плюс дать рамку в 50 пк и соответственно учесть ее толщину при центрировании, т.е будет так

margin-top:-380px; margin-left:-562px;

Но тогда на мониторе с шириной 1024 боковой рамке не будет видно, следовательно там надо дать ширину не 1024, а 924пк.

и в итоги получим чтото типа

.main{
        border: 50px solid rgb(255,125,25);
	width:924px;
        height: 660px;
        overflow: auto;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-380px;
	margin-left:-512px;
}

А вообще интересно что скажет ТС.

Edited January 10, 2010 by gesandte

gesandte · January 10, 2010

В общем перестаю гадать, тут даже не понятно что надо конкретно. Пусть ТС предоставит картинку, как это должно выглядеть на широкоформатном мониторе(рамка прижата к окну браузера или идет вокруг блока и т.д) или пусть думает сам.

psywalker · January 10, 2010

Ну overflow: auto; конечно не хотелось-бы. Ладненько, будет ждать ТС

Great Rash · January 11, 2010

psywalker, мы ж уже делали такое! Забыл? Рамка вокруг всей страницы - страница резиновая, рамка фиксированная.

psywalker · January 11, 2010

psywalker, мы ж уже делали такое! Забыл? Рамка вокруг всей страницы - страница резиновая, рамка фиксированная.

Нет, я всё помню, но тут дело не только в рамке.

Great Rash · January 11, 2010

А в чем?

psywalker · January 11, 2010

А в чем?

Это долгая история Читай выше посты.

Great Rash · January 11, 2010

Вроде все прочитал. Топикстартер не отписался, а остальное ваши домыслы

psywalker · January 11, 2010

Вроде все прочитал. Топикстартер не отписался, а остальное ваши домыслы

Согласен, нужен ТС для ответа.

Justnewone · January 11, 2010

Согласен, нужен ТС для ответа.

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

Уважаемый ТС, глубоко.

Ну неужели Вы удовольствие испытываете, видя, как много времени потрачено на догадки?

psywalker · January 11, 2010

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

Ну есть немного

Sign In

Как сделать бордер по краю окна?

Question

Link to comment

Share on other sites

20 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

Join the conversation

Обсуждения

Important Information