рамка во круг сайта

chillout · June 11, 2011

Приветствую!

Подскажите пожалуйста, что-то никак не пойму...

Нужна рамка для сайта во всю ширину и высоту страницы, с 5px отступом со всех сторон от тела документа, делаю margin:5; но сайт растягивается больше чем 100% и к тому же рамка прилипает к правой части и низу.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
html,body {
margin:5;
padding:0;
width: 100%;
height: 100%;
color: #FFF;
background-color: #000;
}
#container {
width:100%;
height:100%;
border:#FC0 2px solid;
}
</style>
</head>

<body>
<div id="container">
</div>
</body>
</html>

psywalker · June 12, 2011

Зачем нужно вот это??

<div class="a c lert_bord"></div>
<div class=" a c right_bord"></div>

Боковые границы легко можно было повесить на растянутый контейнер.

И ещё непонятно, нафига делать верхний отрицательный отступ

#main{

        margin:-5px 0 0;

        }

chikadesign · June 12, 2011

Зачем нужно вот это??
<div class="a c lert_bord"></div>
<div class=" a c right_bord"></div>
Боковые границы легко можно было повесить на растянутый контейнер.
И ещё непонятно, нафига делать верхний отрицательный отступ
#main{

        margin:-5px 0 0;

        }

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

margin:-5px;- чтобы поднять растянутый див на 5пх.

psywalker · June 12, 2011

Зачем нужно вот это??
<div class="a c lert_bord"></div>
<div class=" a c right_bord"></div>
Боковые границы легко можно было повесить на растянутый контейнер.
И ещё непонятно, нафига делать верхний отрицательный отступ
#main{

        margin:-5px 0 0;

        }
Если повесить боковые границы на растянутый див, то они уйдут наверх вместе с контейнером.
margin:-5px;- чтобы поднять растянутый див на 5пх.

Ещё раз глянул в код, в целом чушь понаписана полная и неправильная.

Если повесить боковые границы на растянутый див, то они уйдут наверх вместе с контейнером.
margin:-5px;- чтобы поднять растянутый див на 5пх.

Глупости.

chikadesign · June 12, 2011

Ещё раз глянул в код, в целом чушь понаписана полная и неправильная.

Глупости.

Ну покажи новичкам мастер-класс. Мне очень интересно посмотреть твой Правильный код.

Edited June 12, 2011 by chikadesign

buddah · June 12, 2011

Ещё раз глянул в код, в целом чушь понаписана полная и неправильная.
Глупости.
Ну покажи новичкам мастер-класс. Мне очень интересно посмотреть твой Правильный код.

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

Edited June 12, 2011 by buddah

psywalker · June 12, 2011

Ещё раз глянул в код, в целом чушь понаписана полная и неправильная.
Глупости.
Ну покажи новичкам мастер-класс. Мне очень интересно посмотреть твой Правильный код.

Да, конечно же, нет проблем:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type='text/css'>
	html,body { height: 100%;}
	body { margin: 0;}
	.wrap { 
		min-height: 100%;
		_height: 100%; 
		position: relative;
		border-left: 5px solid #000;
		border-right: 5px solid #000;
	}
		.wrap .top,
		.wrap .bottom { 
			position: absolute; 
			height: 5px; 
			background: #000; 
			width: 100%;
		}
		.wrap .top { top: 0;}
		.wrap .bottom { bottom: 0;}
</style>

</head>

<body>
<div class="wrap">
	<i class="top"></i>
	<i class="bottom"></i>
</div>
</body>
</html>

chikadesign · June 12, 2011

Ещё раз глянул в код, в целом чушь понаписана полная и неправильная.
Глупости.
Ну покажи новичкам мастер-класс. Мне очень интересно посмотреть твой Правильный код.

Да, конечно же, нет проблем:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



<title>Untitled Document</title>
<style type='text/css'>
	html,body { height: 100%;}
	body { margin: 0;}
	.wrap { 
		min-height: 100%;
		_height: 100%; 
		position: relative;
		border-left: 5px solid #000;
		border-right: 5px solid #000;
	}
		.wrap .top,
		.wrap .bottom { 
			position: absolute; 
			height: 5px; 
			background: #000; 
			width: 100%;
		}
		.wrap .top { top: 0;}
		.wrap .bottom { bottom: 0;}
</style>

</head>

<body>
<div class="wrap">
	<i class="top"></i>
	<i class="bottom"></i>
</div>
</body>
</html>

Спасибо. )

Но не видно отступов?

у тебя бордер прижат к границам окна. а должно быть от окна до бордера отступы на 5пх.

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

Согласна, я исправлюсь.

psywalker · June 12, 2011

Спасибо. )
Но не видно отступов?
у тебя бордер прижат к границам окна. а должно быть от окна до бордера отступы на 5пх.

Ааа, извиняюсь, нет проблем, держи:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type='text/css'>
	html,body { height: 100%;}
	body { margin: 0 5px;}
	.wrap { 
		min-height: 100%;
		_height: 100%; 
		position: relative;
	}
		.wrap .border { 
			position: absolute; 
			border: 5px solid #000;
			top: 5px;
			left: 0;
			right: 0;
			bottom: 5px;
			z-index: -1;
		}

</style>

</head>

<body>
<div class="wrap">
	<i class="border"></i>
</div>
</body>
</html>

chikadesign · June 12, 2011

Спасибо. )
Но не видно отступов?
у тебя бордер прижат к границам окна. а должно быть от окна до бордера отступы на 5пх.

Ааа, извиняюсь, нет проблем, держи:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type='text/css'>
	html,body { height: 100%;}
	body { margin: 0 5px;}
	.wrap { 
		min-height: 100%;
		_height: 100%; 
		position: relative;
	}
		.wrap .border { 
			position: absolute; 
			border: 5px solid #000;
			top: 5px;
			left: 0;
			right: 0;
			bottom: 5px;
			z-index: -1;
		}

</style>

</head>

<body>
<div class="wrap">
	<i class="border"></i>
</div>
</body>
</html>

Супер! :rolleyes:

Теперь вижу, что мой код полная чушь.

psywalker · June 12, 2011

Спасибо. )
Но не видно отступов?
у тебя бордер прижат к границам окна. а должно быть от окна до бордера отступы на 5пх.
Ааа, извиняюсь, нет проблем, держи:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type='text/css'>
	html,body { height: 100%;}
	body { margin: 0 5px;}
	.wrap { 
		min-height: 100%;
		_height: 100%; 
		position: relative;
	}
		.wrap .border { 
			position: absolute; 
			border: 5px solid #000;
			top: 5px;
			left: 0;
			right: 0;
			bottom: 5px;
			z-index: -1;
		}

</style>

</head>

<body>
<div class="wrap">
	<i class="border"></i>
</div>
</body>
</html>
Супер!
Теперь вижу, что мой код полная чушь.

Вот так вот

Sign In

рамка во круг сайта

Question

Link to comment

Share on other sites

35 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

Join the conversation

Обсуждения

Important Information