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

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>

Vlad · June 11, 2011

Надо всегда указывать единицы измерения. 5 --- некорректно, 5px --- правильно. 100%+10px больше, чем 100%, поэтому сайт растягивается больше, чем на 100 процентов.

Послушайте моего совета и не используйте height: 100% вообще, от этого многие беды в нашем мире. А вы, надеюсь, не хотите их преумножить?

Dinow · June 11, 2011

Послушайте моего совета и не используйте height: 100% вообще, от этого многие беды в нашем мире.

А почему, Влад? Чем это чревато? А если, например, надо прижать футер к низу страницы?

psywalker · June 11, 2011

Послушайте моего совета и не используйте height: 100% вообще, от этого многие беды в нашем мире.
А почему, Влад? Чем это чревато? А если, например, надо прижать футер к низу страницы?

Тогда растягивай конечно же. Влад имеет ввиду, что это нужно делать, если ты точно знаешь, что делаешь.

Dinow · June 11, 2011

psywalker, спасибо за ответ, а то смутило слово "вообще")

psywalker · June 11, 2011

psywalker, спасибо за ответ, а то смутило слово "вообще")

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

Vlad · June 11, 2011

А почему, Влад? Чем это чревато? А если, например, надо прижать футер к низу страницы?

НЕ НАДО ПРИЖИМАТЬ ФУТЕР К НИЗУ СТРАНИЦЫ!

psywalker · June 11, 2011

А почему, Влад? Чем это чревато? А если, например, надо прижать футер к низу страницы?
НЕ НАДО ПРИЖИМАТЬ ФУТЕР К НИЗУ СТРАНИЦЫ!

А если того требует задача?

Vlad · June 11, 2011

Нет таких задач! Есть люди, которые придумывают себе задачи.

psywalker · June 11, 2011

Нет таких задач! Есть люди, которые придумывают себе задачи.

Хм...ну например ты для себя если делаешь сайт, то да, можешь и отказаться, а если ты делаешь сайты на заказ, то диктовать условия думаю не в твоих интересах. Или я не прав?

mishka · June 11, 2011

Хм, Влад, я не соглашусь с тобой.

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

kr-it.ru как бы эта страничка смотрелось не буд тут футер внизу?

Сам недавно зашел на сайт, который я верстал пару лет назад. У меня тогда еще моник был 1024х768, сейчас 1920х1080, да и контента там в исходнике больше было, сейчас убрали некоторые блоки, и поэтому футер на всю ширину экрана, но зато по вертикали по среди странички, вобщем очень не красиво.

psywalker · June 11, 2011

Влад, а вообще твои слова можно перевести как: "Всё, что я считаю ненужным, пользоваться хреново и неправильно"

Vlad · June 11, 2011

Это одно из заблуждений веб-дизайна, что якобы футер должен быть всегда прижат книзу. В реальности, такое решение требуется крайне редко, оправданным к примеру можно считать интерфейс некоторых сайтов Гугл. Но у них это не контентный сайт, а программа перенесенная в среду Интернета --- AdSense, Gmail, Analytics. Для контентных сайтов приводят довод, что если футер не внизу, то это "некрасиво". На самом деле это профессиональные фильтры дизайнера срабатывают. Потому что пользователи подобное вообще не замечают. Ну-ка сходу назовите мне страницы на htmlbook.ru, где футер висит в воздухе? Или без заглядывания на Гугл скажите однозначно, прижат у них подвал к низу или нет? Пользователям плевать на футер, где он там вообще находится! Они текст читают, картинки смотрят, а не обдумывают, "что этот сайт хочет нам сказать своим концептуальным подвалом".

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

psywalker · June 11, 2011

Это одно из заблуждений веб-дизайна, что якобы футер должен быть всегда прижат книзу. В реальности, такое решение требуется крайне редко, оправданным к примеру можно считать интерфейс некоторых сайтов Гугл. Но у них это не контентный сайт, а программа перенесенная в среду Интернета --- AdSense, Gmail, Analytics. Для контентных сайтов приводят довод, что если футер не внизу, то это "некрасиво". На самом деле это профессиональные фильтры дизайнера срабатывают. Потому что пользователи подобное вообще не замечают. Ну-ка сходу назовите мне страницы на htmlbook.ru, где футер висит в воздухе? Или без заглядывания на Гугл скажите однозначно, прижат у них подвал к низу или нет? Пользователям плевать на футер, где он там вообще находится! Они текст читают, картинки смотрят, а не обдумывают, "что этот сайт хочет нам сказать своим концептуальным подвалом".
Отделяйте пользователей от профессиональных разработчиков, а свои психологические фильтры оставляйте на работе.

Да, я с этим тоже согласен. Но опять же, я не могу всем заказчикам внушить это к сожалению. А тогда остаётся прижимать футер.

mishka · June 11, 2011

Пользователю плевать где футер, пока его незаметно, а его незаметно если он на своем месте, а не по центру экрана.

даже контентные сайты могут содержать страницы с малым количеством контента.

Тут вот явно нужно было прибить футер к низу

psywalker · June 11, 2011

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

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

Vlad · June 11, 2011

В этом примере налицо ошибка дизайнера. Явно не хватает "воздуха" между блоком с картинками и подвалом. Добавь между ними отступ побольше и дизайн будет смотреться лучше. Так что пример к подвалу не совсем подходит.

psywalker · June 11, 2011

В этом примере налицо ошибка дизайнера. Явно не хватает "воздуха" между блоком с картинками и подвалом. Добавь между ними отступ побольше и дизайн будет смотреться лучше. Так что пример к подвалу не совсем подходит.

А дело даже не в воздухе. Недавно вот была задача как раз про регистрационный блок, выравненный по вертикали, справа от него был блок с текстом. Задача была такая: Шапка, футер прижат, а блок с регистрацией и текстом по середине. И чтобы если текста в блоке много, больше чем экран, то он отодвигал футер.

В общем футер там реально прям по задаче внизу подходил. Да и без задачи.

И Мишкин пример кстати тоже смотрится хреново БЕЗ прижатого футера.

mishka · June 11, 2011

Дизайнер не прощитался, там было еще пару блоков, но в итоге их убрали, и стало так вот ужасно смотреться. Этого можно было бы просто избежать.

chillout · June 11, 2011

так как мне вопрос мой решить?

добавление px, не помогает, низ все-равно прижат в упор

и без height 100% мне здесь не обойтись.

Edited June 11, 2011 by chillout

psywalker · June 11, 2011

так как мне вопрос мой решить?
добавление px, не помогает, низ все-равно прижат в упор
и без height 100% мне здесь не обойтись.

Контейнер растянуть на min-height 100%, и на него уже прицепить пару дивов с рамками. Абсолютом их прибить к верху и низу.

chillout · June 11, 2011

psywalker, не очень понял по поводу двух дивов с рамками...

если можно по подробнее плиз )

Edited June 11, 2011 by chillout

psywalker · June 11, 2011

psywalker, не очень понял по поводу двух дивов с рамками...
если можно по подробнее плиз )

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

chillout · June 11, 2011

что-то вообще не понимаю, :blink: можно кодом плиз?

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

Edited June 11, 2011 by chillout

psywalker · June 11, 2011

что-то вообще не понимаю, можно кодом плиз?
просто первый раз делаю резиновую вёрстку, не ожидал что с таким гемором столкнусь

Не ожидал, да? А нахрена тогда брать заказ было?

можно кодом плиз?

Конечно же можно. 50$.

chikadesign · June 12, 2011

Привет всем. Попробовала решить проблему. Получилось. psywalker прав, все решается через min-height и дополнительными абсолютными дивами.

Я тоже новичок, если в коде есть ошибки, прошу вас не ругать. спасибо.


<!DOCTYPE html">
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html,body,#container{
	height:100%;
	color: #FFF;
	background-color: #000;
	margin:0;
	}
#container{
	padding:0 5px;
	}

#main{
	min-height:100%;
	margin:-5px 0 0;
	position:relative;
	}

.a{
	position:absolute;
	}

.b{
	height:2px; 
	width:100%;
	background-color: #fff;
	}
.bottom_bord{
	bottom:0;
	}

.top_bord{
	top:10px;
	}
.c{
	top:10px;
	bottom:0; 
	width:100%;
	}

.lert_bord{
	border-left:2px solid #fff;
	}

.right_bord{
	direction:rtl;
	border-right:2px solid #fff;
	}

#content{
padding:2px;
}
</style>
</head>
<body>
	<div id="container">
		<div id="main"><!--доп.дивы-->
			<div class="a b top_bord"></div>
			<div class="a c lert_bord"></div>
			<div class=" a c right_bord"></div>
			<div class="a b bottom_bord"></div>

			<div id="content"><!--начинается контент-->
				<p>ssss</p>
			</div>
		</div>
	</div>
</body>
</html>

Edited June 12, 2011 by chikadesign

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

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