CSS: неверное приклеивание к границам экрана при position:relative;

sergey_lans · March 6, 2009

Здраствуйте, я начинающий верстальщик, и у меня возникла проблема. Вообще, я верстаю макет, но, для того, чтобы вам не пришлось разбираться в тоннах кода, минимизирую его.

Проблема: При использовании такого кода:

#foot1 {
	top: 0;
	background: #1b5790;
	position: relative;
	width: 985px;
	height: 46px;
	margin:0 auto 0 auto;
	}

Не происходит прикрепления синей полоски к границам экрана.

При изменении значения position: с relative; на absolute; все приходит в норму - полоска прикрепляется к верней части экрана.

Когда position: absolute; это выглядит так.

Когда position: relative; это выглядит так. (из-за яндексной рекламы появляются символы "п»ї", этого нет на локале, но пробел все равно есть)

Проблема в том, что я не могу поставить absolute, потому что из-за него, при увеличении экрана элементы будут позиционироваться не так, как надо (сдвигаться влево).

Что делать?

Проблема решена!

* {
margin: 0;
padding: 0;
}

Edited March 7, 2009 by sergey_lans

homm · March 6, 2009

CSS: неверное приклеивание к границам экрана при position:relative;

не ясно с чего вы взяли, что при relative можно что-то куда-то приклеить. relative переводится как относительно. Т.е. вы задали, что верх будет сдвинут на 0 пикселей относительно начального, т.е. не изменится.

VooFoo · March 6, 2009

значение relative указывает положение относительно указанного места блока

absolute - относительно всего окна браузера

в приведенном примере тэг <div> стоит внутри <body>

<body> имеет внешний отступ, поэтому со всех сторон отступ

напишите:

body {
margin: 0;
}

и будет так как хотите (в приведенных примерах)!

Edited March 6, 2009 by VooFoo

homm · March 7, 2009

absolute - относительно всего окна браузера

Это не так.

sergey_lans · March 7, 2009

Это не так.

Решение, подсказали на другом форуме:

* {
margin: 0;
padding: 0;
}

Nekromancer · March 7, 2009

а тут не тоже самое что ли написали?

absolute - относительно всего окна браузера

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

Edited March 7, 2009 by Nekromancer

homm · March 7, 2009

> absolute - относительно всего окна браузера
относительно родительного элемента, точнее абсолютное позиционирование по отношению к родительному элементу...

Опять мимо.

VooFoo · March 7, 2009

Опять мимо.

absolute:

Указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на веб-странице словно абсолютно позиционированного объекта и нет. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.

:lol: не мимо

Edited March 7, 2009 by VooFoo

Victor Ananiev · March 7, 2009

а теперь сам проверь вот это:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
*
{
margin:0;
padding:0;
}
#id1
{
position:relative;
margin:100px;
background-color:#f00;
height:500px;
width:500px;
}
#id2
{
position:absolute;
left:40px;
top:30px;
height:50px;
width:50px;
background-color:#000;
}
</style>
</head>
<body>
<div id="id1">
<div id="id2">
   
</div>
</div>
</body>
</html>

Edited March 7, 2009 by Victor Ananiev

VooFoo · March 7, 2009

homm · March 7, 2009

absolute:
Указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на веб-странице словно абсолютно позиционированного объекта и нет. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.
не мимо

я что-то не понял. Ты сейчас написал какие-то слава от себя и считаешь это докозательнством?

Я бог!! Му-ха-ха!

Видишшь, я бог :huh: Будешь спорить — еще раз себя процетирую.

Victor Ananiev · March 7, 2009

я что-то не понял. Ты сейчас написал какие-то слава от себя и считаешь это докозательнством?

Это по идее с htmlbook.ru

Vlad · March 7, 2009

VooFoo, приведенная цитата действительно только в том случае, если position: absolute применяется к элементу, у родителя которого position задан как static. В других случаях позиционирование работает иначе.

homm · March 7, 2009

VooFoo, приведенная цитата действительно только в том случае, если position: absolute применяется к элементу, у родителя которого position задан как static. В других случаях позиционирование работает иначе.

Только нужно это написать не здесь, а на соответствующей странице.

Vlad · March 7, 2009

Добавлю.

VooFoo · March 7, 2009

только начал изучать CSS!

за 2 дня еще не всё узнал :lol:

sergey_lans · March 7, 2009

только начал изучать CSS!
за 2 дня еще не всё узнал

:huh: Я две недели назад ввел в поискови html для чайников, работы уже реально невпроворо=)

VooFoo · March 8, 2009

Я две недели назад ввел в поискови html для чайников, работы уже реально невпроворо=)

Давай я тебе помогу с работой? Где работаешь и сколько платят?

sergey_lans · March 8, 2009

Давай я тебе помогу с работой? Где работаешь и сколько платят?

Хех :lol:

Ну вот тебе задание:

Надо, чтобы меню на этом сайте - http://aljona-plus-lans.narod.ru/training/r06/index.html

Было такое же, как на этом: http://www.r06.ru/page/#

Сделаешь, скину 50р))

homm · March 8, 2009

Было такое же, как на этом: http://www.r06.ru/page/#

Меню «как на этом» вполне себе чудовищно. У тебя уже лучше.

sergey_lans · March 8, 2009

Меню «как на этом» вполне себе чудовищно. У тебя уже лучше.

Была бы моя воля... заказчик хочет точь-в-точь... :lol:

VooFoo · March 8, 2009

Хех
Ну вот тебе задание:
Надо, чтобы меню на этом сайте - http://aljona-plus-lans.narod.ru/training/r06/index.html
Было такое же, как на этом: http://www.r06.ru/page/#
Сделаешь, скину 50р))

нее..

работай сам по таким расценкам :huh: )

sergey_lans · March 8, 2009

нее..
работай сам по таким расценкам )

А это тебе для тренировки=) Дело не в деньгах...

Sign In

CSS: неверное приклеивание к границам экрана при position:relative;

Question

Link to comment

Share on other sites

22 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

Join the conversation

Обсуждения

Important Information