Jump to content
  • 0

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


chillout
 Share

Question

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

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

Нужна рамка для сайта во всю ширину и высоту страницы, с 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>

Link to comment
Share on other sites

Recommended Posts

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

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

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

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

1884502m.jpg

Link to comment
Share on other sites

  • 0

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

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

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

1884502m.jpg

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

  • Like 1
Link to comment
Share on other sites

  • 0

Привет всем. Попробовала решить проблему. Получилось. 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 by chikadesign
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy