Padding влияет на фоновое изображение

Сообщение сайта

(Сообщение закроется через 3 секунды)

Здравствуйте, гость (

| Вход | Регистрация )

SEO форум MaulTalk.com > Веб-строительство > Программная часть

Padding влияет на фоновое изображение

Опции

Dmitri2612

Topic Starter сообщение

3.12.2013, 20:40; Ответить: Dmitri2612

Сообщение #1

Группа: User
Сообщений: 2
Регистрация: 3.12.2013
Поблагодарили: 0 раз
Репутация:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body
{
margin: 0px;
height: 100%;
}
#wrapper
{
margin: auto;
min-width: 980px;
max-width: 1920px;
min-height: 1024px;
background-image:url(http://s1.goodfon.ru/image/522071-1280x1024.jpg);
background-repeat:no-repeat;
padding-top: 50px;
}
#header
{
margin: auto;
width: 1000px;
height: 200px;
border: 2px solid black;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="spaceDiv"></div>
<div id="header">
</div>
</body>
</html>

Когда в 19 строчке padding-top: 0, проблем не возникает и фоновая картинка растянута на всю высоту сайта 1024px, но как только она принимает какое-то значение (в примере 50 px) фоновая картинка уменьшается на это значение, а сам сайт остается размером в 1024 px и, как следствие, появляется белая полоса в 50 px внизу страницы.
Помогите пожалуйста исправить

Ответить с цитированием данного сообщения

snaker52 snaker52 6.12.2013, 10:20; Сообщений: 5 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	6.12.2013, 10:20; Ответить: snaker52 Сообщение #2
0 Группа: User Сообщений: 5 Регистрация: 5.12.2013 Поблагодарили: 0 раз Репутация: 0	У вас в коде <div class="wrapper"> не закрыт. Приложите скрины, и скажите какой браузер вы используете. У меня все хорошо отображается.

Amy Mammoth

6.12.2013, 21:15; Ответить: Amy Mammoth

Сообщение #3

Группа: User
Сообщений: 0
Регистрация: 26.10.2013
Поблагодарили: 0 раз
Репутация:

Зависит от того какой результат вы хотите получить.

вариант номер раз: высота включает в себя поля (padding) и границы (border), изображение прокручивается до конца и нет поля снизу. В этом вам поможет: свойство box-sizing со значением border-box [CSS]box-sizing:border:box; /*возможно проблемы в IE8*/[/CSS]
вариант номер два: высота не включает поля и границы (т.е. высота увеличивается на размеры отступов и рамок), но фоновое изображение остаётся не подвижным, контент прокручивается, фон нет (если окно браузера меньше 1024px всей картинки видно не будет). В помощь свойство background-attachment со значением fixed [CSS]background-attachment: fixed;[/CSS]
вариант номер три: вообще не трогать свойство padding вашего селектора #wrapper, и опустить #header посредством относительного позиционирование: [CSS] position:relative; top:50px;[/CSS]

Ради интереса поясните назначение кода. (как только контента станет больше чем 1024px, если не фиксировать, то ваш фон всё равно останется сверху, тогда смысл париться +-50px)

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой

или обратитесь к любому из модераторов.

« Предыдущая тема · Программная часть · Следующая тема »

1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)

Пользователей: 0

Похожие темы

Тема	Ответов	Автор	Просмотров	Последний ответ
Чистое фоновое ссылочное для жирных ссылок ссылочное	2	Frazer	1353	21.2.2022, 23:52 автор: kuprum
Преобразую в вектор растровое изображение Для первых двух готова делать бесплатно, за отзыв	1	ropique	3092	18.5.2018, 22:26 автор: Gerga
Кто то переделывает спам сообщения, в информативные, и влияет ли это ПФ	1	alexandrrr	3053	7.2.2018, 23:21 автор: errorrs
Как вывести текст при наведении на изображение?	2	meduza_hb	7009	18.10.2016, 21:22 автор: -x-line-
Изображение поверх сайта	4	tmait	2098	9.8.2015, 18:27 автор: tmait

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

Текстовая версия

Сейчас: 19.4.2024, 12:32

Дизайн