Почему "гуляет" подвал при изменении масштаба? - HTML и CSS

Blondy · 08.06.2013, 17:46

Дорогие форумчане, у меня такая проблема: очень сильно гуляет блок <div id="footer_block"></div>, когда я увеличиваю или уменьшаю масштаб просмотра в браузере - почему? Ведь блок новостей также использует абсолютное позиционирование и стоит на месте, а FOOTER плавает. Мне надо, чтобы подвал был подлеплен вплотную к блоку content_news, вот сразу после окончания серой обводки. Но position: relative для блока подвала я использовать не могу - у меня справа по верстке идет контейнер контента (в образце не представлен), и лишь после него начинается блок повала.

html

Код:

<body>
<div id="content_news"><!-- открылся блок колонки контента слева  "content_news" -->
<p id="news_header">новости</p>
<p class="newsdata">29.05.2013</p>
<p id="pic1">Картинка</p>

	<p class="newstxt">
	Новость <br/>
	Новость <br/>
	Новость <br/>
	Новость <br/>
	</p>

<p class="newsdata">24.03.2013</p>
<p id="pic2">Картинка</p>
	<p class="newstxt">
	Новость <br/>
	Новость <br/>
	Новость <br/>
	Новость <br/>
	</p>
	
<p class="newsdata">15.03.2013</p>
<p id="pic3">Картинка</p>
	<p class="newstxt">
	Новость <br/>
	Новость <br/>
	Новость <br/>
	Новость <br/>
	</p>
	
	
	<div id="news_mail">
	<p id="news_subc"> подписка на новости</p>
	<form action="URL" method="post">
	<input id="email_txt" type="text" name="email" value="ваш email">
	<input id="mail_btn" type="button" name="mail_btn" value=" ">
	</form>
	</div> 
	
</div>
<!-- закрылся блок   "content_news" -->
<div id="main_kontent"> Контейнер контент</div>

<div id="footer_block">
			<div id="footer_line">
			FOOTER FOOTER FOOTER FOOTER FOOTER 
			</div>
</div>
</body>

css

Код:

#content_news {
position: absolute;
float: left;
top: 299px;
background-color: #f3f3f3;
width: 200px;
padding-left: 8px;
}

#news_mail {
width: 188px;
background-color:#FFFFFF;
border: 10px  solid #dfdfdf; 
float: left;
text-align: center;
padding: auto;
margin-top: 20px;
margin-left: -8px;
padding-bottom: 10px;
}

#pic1 {
widht: 170px;
height: 187px;
background-color:#0099FF;
}

#pic2 {
widht: 170px;
height: 171px;
background-color:#0099FF;
}

#pic3 {
widht: 170px;
height: 108px;
background-color:#0099FF;
}

#news_subc { font-size: 11px; color: #515151;}

#footer_block{
position: absolute;
top: 1370px;
background-color:#9933FF;
height: 65px;
width: 700px;
}

TranceSmile · 08.06.2013, 18:36

Сгенерируйте себе макет тут http://csstemplater.com

Blondy · 08.06.2013, 19:46

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

Naive · 09.06.2013, 16:33

Как именно "гуляет" не понял, или в каком браузере, в ФФ все вроде норм

Код:

widht: 170px;

очептка)

Код:

#content_news {
position: absolute;
float: left;
top: 299px;
background-color: #f3f3f3;
width: 200px;
padding-left: 8px;
}

- нет смысла задавать обтекание блоку с абсолютным позиционированием, так как он вырывается из потока элементов и уже не может влиять на свое окружение.
=========
Подвал будет всегда находиться на расстоянии 1370 пикселей от верхнего края контекста (в данном случае - это <body>)
Не очень разумное решение, ИМХО. Хотя, конечно, от задачи зависит.

Blondy · 09.06.2013, 17:23

Гуляет всмысле блуждает по координатам когда мы увеличиваем или уменьшаем масштаб просмотра в браузере. Причем гуляет в любом браузере и в файер фокс, и в интернет-эксклорер.
Ну вот скриншоты:
p1 стандартные 100% - как и должно быть
p2 - увеличили масштаб просмотра (ctrl +) и сразу фиолетовый блок подвала ушел по Y
p3 - уменьшили масштаб (относительно 100%, ctrl-) и блок опять зашатало по Y, причем, он то вниз уедет, то вверх резко поднимется.

Naive · 09.06.2013, 17:39

никому ненужный пост...

Naive · 09.06.2013, 17:48

При изменении масштаба шрифты по-разному рендерятся. У меня вообще стоит дроп-ксс, и новостной блок в принципе не дотягивается до футера.
Тут ты так не подгадаешь, проще будет играть на потоке, а не вырывать из оного.
Идут новости, без абсолютного позиционирования и сразу за ними — футер...

Почему именно такой вариант верстки был выбран? Может можно найти лучше вариант, тот же ксс-темплитер, предложенный уважаемым юношей?

UPD: если все-таки абсолютное позиционирование так принципиально, то подвал можно засунуть внутрь ньюз-блока (сменится контекст на него) и задать top:100%;

Blondy · 09.06.2013, 18:06

У меня есть задание от университета - дан образец, сделать по образу точную копию. Там очень сложное наполнение самого блока контента, делается из многочисленных блоков div, там и flash, и сборная графика из маленьких фрагментов, и куча всего другого, куски буквально вручную подгоняются по координатам. Сама сложная часть сверстана, и она не сыпется, осталось только прилепить подвал - вот он никак не крепиться намертво.
А то что предложил молодой человек, там вообще никак не фиксируется по координатам подвал, там только задается ширина в пикселях, и в самом шаблоне используется wrapper - а мне wrapper вообще не подходит.

Спасибо, Naive, буду пробовать... Я уже третий месяц с этим заданием сижу, и второй месяц с подвалом. Брошу - ну не получается, затем опять сажусь...задание сдавать-то надо. Причем самое обидное, сложный участок сверстался без особых проблем, просто времени и терпения много потребовал, а эта ерунда - я с ней и там, и сяк, а она вообще никак.

Naive · 09.06.2013, 18:42

Цитата:

Сообщение от Blondy

У меня есть задание от университета - дан образец, сделать по образу точную копию. Там очень сложное наполнение самого блока контента, делается из многочисленных блоков div, там и flash, и сборная графика из маленьких фрагментов, и куча всего другого, куски буквально вручную подгоняются по координатам. Сама сложная часть сверстана, и она не сыпется, осталось только прилепить подвал - вот он никак не крепиться намертво.
А то что предложил молодой человек, там вообще никак не фиксируется по координатам подвал, там только задается ширина в пикселях, и в самом шаблоне используется wrapper - а мне wrapper вообще не подходит.

Спасибо, Naive, буду пробовать... Я уже третий месяц с этим заданием сижу, и второй месяц с подвалом. Брошу - ну не получается, затем опять сажусь...задание сдавать-то надо. Причем самое обидное, сложный участок сверстался без особых проблем, просто времени и терпения много потребовал, а эта ерунда - я с ней и там, и сяк, а она вообще никак.

Можешь скинуть макет? Сюда или в личку, гляну - может чего посоветую, как лучше сделать.
UPD:

Цитата:

У меня есть задание от университета - дан образец, сделать по образу точную копию.

Точно то как-раз врятли получится, Рендер шрифтов в браузерах сильно разнится (некоторым, типа храма, конечно можно размеры задавать в сотых долях пикселя, но все-же) обычно дизайн разрабатывается с поправкой на размер шрифта да и размер контента в целом...

08.06.2013, 18:36	#2
TranceSmile Смайлик :) Форумчанин Регистрация: 12.12.2010 Сообщений: 445	Сгенерируйте себе макет тут http://csstemplater.com Самый перспективный framework Yii (c)

08.06.2013, 19:46	#3
Blondy Участник клуба Регистрация: 07.07.2009 Сообщений: 1,385	Уважаемый юноша, если я спрашиваю, значит, стандартные решения не подходят. Если можно было, я бы уже давно воспользовалась генераторами шаблонов. То что Вы видете - это всего лишь образец-болванка, из которой по некоторым причинам вынута вся начинка и оставлен только фрагмент с проблемным каркасом. "Все мы жаждем чудес. Чисто человеческое свойство." Carl Sagan

09.06.2013, 16:33	#4
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Как именно "гуляет" не понял, или в каком браузере, в ФФ все вроде норм Код: `widht: 170px;` очептка) Код: `#content_news { position: absolute; float: left; top: 299px; background-color: #f3f3f3; width: 200px; padding-left: 8px; }` - нет смысла задавать обтекание блоку с абсолютным позиционированием, так как он вырывается из потока элементов и уже не может влиять на свое окружение. ========= Подвал будет всегда находиться на расстоянии 1370 пикселей от верхнего края контекста (в данном случае - это <body>) Не очень разумное решение, ИМХО. Хотя, конечно, от задачи зависит. Alar, верни репу!

09.06.2013, 17:39	#6
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	никому ненужный пост... Alar, верни репу! Последний раз редактировалось Naive; 09.06.2013 в 17:49.

09.06.2013, 17:48	#7
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	При изменении масштаба шрифты по-разному рендерятся. У меня вообще стоит дроп-ксс, и новостной блок в принципе не дотягивается до футера. Тут ты так не подгадаешь, проще будет играть на потоке, а не вырывать из оного. Идут новости, без абсолютного позиционирования и сразу за ними — футер... Почему именно такой вариант верстки был выбран? Может можно найти лучше вариант, тот же ксс-темплитер, предложенный уважаемым юношей? UPD: если все-таки абсолютное позиционирование так принципиально, то подвал можно засунуть внутрь ньюз-блока (сменится контекст на него) и задать top:100%; Alar, верни репу! Последний раз редактировалось Naive; 09.06.2013 в 18:05.

09.06.2013, 18:06	#8
Blondy Участник клуба Регистрация: 07.07.2009 Сообщений: 1,385	У меня есть задание от университета - дан образец, сделать по образу точную копию. Там очень сложное наполнение самого блока контента, делается из многочисленных блоков div, там и flash, и сборная графика из маленьких фрагментов, и куча всего другого, куски буквально вручную подгоняются по координатам. Сама сложная часть сверстана, и она не сыпется, осталось только прилепить подвал - вот он никак не крепиться намертво. А то что предложил молодой человек, там вообще никак не фиксируется по координатам подвал, там только задается ширина в пикселях, и в самом шаблоне используется wrapper - а мне wrapper вообще не подходит. Спасибо, Naive, буду пробовать... Я уже третий месяц с этим заданием сижу, и второй месяц с подвалом. Брошу - ну не получается, затем опять сажусь...задание сдавать-то надо. Причем самое обидное, сложный участок сверстался без особых проблем, просто времени и терпения много потребовал, а эта ерунда - я с ней и там, и сяк, а она вообще никак. "Все мы жаждем чудес. Чисто человеческое свойство." Carl Sagan Последний раз редактировалось Blondy; 09.06.2013 в 18:21.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
"А почему при загрузке файла просит ввести свой номер?"	NSvirus	Свободное общение	21	14.05.2013 21:46
обработка искл. ситуации при изменении масштаба	Torkve	Помощь студентам	3	02.06.2010 22:36
при вводе на листе "магазин"- код товара появлялось "описание" товара из "склада" с "продажной ценой"	aleksei78	Microsoft Office Excel	13	25.08.2009 12:04
Почему не работает Case txt Like "текст1", "текст2"	Oooleg	Microsoft Office Excel	2	15.07.2009 10:08
Неполные строки "едут" в MS Word 2007 при изменении масштаба.	mirotvoretc	Microsoft Office Word	12	05.03.2009 12:07