Поведение фона при горизонтальной прокрутке

empirator · 15 сентября 2012

Не пойму, что не так:

стили

body {

	margin: 0px auto;

	padding: 0;

	text-align:center;

}

.a	{

	background-color: aqua;

	height: 100px;

}


.b	{

	background: green; width:900px; height:20px;

}

код


<div class="a">

</div>

<div class="b">

</div>

на полном экране все в порядке. Но если уменьшить его ширину до появления горизонтальной прокрутки, то фон слоя .a смещается, появляется белое поле. Слой .b без особенностей.

Что интересно, вся верстка, сделанная ранее выглядит нормально, как ни меняй окно.

Lomot · 15 сентября 2012

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

empirator · 16 сентября 2012

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

Больше нет ничего (кроме HTML-head-body). Это тестовая страница.

Даже здесь эта ошибка. На реальном проекте была мысль, что это связано с отрицательными margin. Попробовал простейший пример, опыт не удался.

Может ли doctype оказывать подобное влияние?

Captain · 16 сентября 2012

Исходя из данного кода будет как-то так:

<!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=windows-1251" />

<title>Ответ в Поведение фона при горизонтальной прокрутке</title>

<style type="text/css">

body {

	 margin: 0 auto;

	 padding: 0;

	 text-align: center;

}

.a   {

	 background-color: aqua;

	 width: 900px;

	 height: 100px;

}


.b   {

	 background-color: green;

	 width: 900px;

	 height: 20px;

}

</style>

</head>

<body>

<div class="a"></div>

<div class="b"></div>

</body>

</html>

empirator · 17 сентября 2012

Captain,

именно так. Результат - на картинке в первом посте.

Кто-нибудь сталкивался?

Lomot · 17 сентября 2012

Captain,

У него нет на блоке "а" ширины.

Я все понял) Нужно убрать ширину с блока "б" или сделать как то так


body{margin: 0; padding: 0; text-align: center;}

.wr{width: 100%; min-width: 990px; margin: 0 auto;}

.a{background: aqua; height: 100px;}

.b{background: green; height: 20px;}


<div class="wr">

<div class="a"></div>

<div class="b"></div>

</div>

или вот так


body{margin: 0; padding: 0; text-align: center; overflow: hidden;}

.a{background: aqua; height: 100px;}

.b{background: green; height: 20px; width: 900px;}


<div class="a"></div>

<div class="b"></div>

Смотря что требуется.

Изменено 17 сентября 2012 пользователем Lomot

empirator · 17 сентября 2012

Необходимо сохранить ширину блока .b - это ширина содержательной части сайта. И при уменьшении ширины менее 900 пикс. должен появляться горизонтальный скролл. Блок .a - это фон, который должен быть на всю ширину всегда.

Добавил в body

width: 100%; min-width:980px;[/CODE]

вроде помогло

Войти

Поведение фона при горизонтальной прокрутке

Рекомендованные сообщения

empirator 0

Ссылка на сообщение

Поделиться на других сайтах

Lomot 134

Ссылка на сообщение

Поделиться на других сайтах

empirator 0

Ссылка на сообщение

Поделиться на других сайтах

Captain 625

Ссылка на сообщение

Поделиться на других сайтах

empirator 0

Ссылка на сообщение

Поделиться на других сайтах

Lomot 134

Ссылка на сообщение

Поделиться на других сайтах

empirator 0

Ссылка на сообщение

Поделиться на других сайтах

Присоединяйтесь к обсуждению

Форум

Активность