CSS: резиновый сайт с применением position: absolute - HTML и CSS

Aliech · 15.07.2009, 12:26

Пробую сверстать свой первый резиновый дизайн на слоях. Но сразу же проблема:

Код:

#hmenu {
 width: 550px;
 position: absolute;
 top: 0;
 right: 45;
}

Делает отступ не от элемента родительского (body) а от рамки окна браузера (у body есть min-width, на который отступу пофиг).

Так и должно быть? Просто как-бы в справочнике обещали отступ относительно родительского элемента... Объясните пожалуйста, если не трудно.

Спасибо

psycho-coder · 15.07.2009, 12:32

Нужно что бы #hmenu было внутри другого <div> или <span>
Примерно так (допустим #main {margin-left: 100px;})

Код:

<html>
 <body>
  <div id="main">
   <div id ="hmenu">
   </div>
  </div>
 </body>
</html>

Aliech · 15.07.2009, 12:39

Код:

<div id="header">
	<img id="sitelogo" src="images/sitelogo.png"/>
	<div id="hmenu">
		<a href="">Мои записи</a>
		<a href="">О проекте</a>
		<a href="">Мои записи</a>
		<a href="">О проекте</a>
	</div>
	<form id="hsearch" action="search.php" method="post">
		<input name="swords" size="22" type="text"/>
		<input name="search" value="Поиск" type="submit"/>
	</form>
</div>

Код:

#header {
	background: url('images/header_bg.png') repeat-x;
}

#sitelogo {
	width: 200px;
	height: 70px;
	border: none;
}

#hmenu {
	width: 550px;
	padding: 7px 0 0 0;
	font-weight: bold;
	text-align: right;
	position: absolute;
	top: 0;
	right: 45px;
}

#hsearch {
	width: 350px;
	text-align: right;
	position: absolute;
	top: 45px;
	right: 30px;
}

Что-то не помогло в div. А что даёт добавление span в таком случае?

psycho-coder · 15.07.2009, 13:02

после блока <div> нвый блок будет на новой строке, а после <span> новый блок будет на той же строке.

Цитата:

Делает отступ

Отступ для body в стилях у вас не было я дописал.

Код:

#header {
	background: url('images/header_bg.png') repeat-x;
}

body {
	min-width: 100px;
	border: 1px solid black;
}

a {
	text-decoration: none;
}

#sitelogo {
	width: 200px;
	height: 70px;
	border: none;
}

#hmenu {
	position: hover;
	width: 550px;
	padding-top: 7px;
	font-weight: bold;
	text-align: right;
	top: 0;
	right: 45px;
}

#hsearch {
	width: 350px;
	text-align: right;
	position: hover;
	top: 45px;
	right: 30px;
}

position: absolute - это абсолютная, т.е. от начала окна.

_________
не успел )))

wall66 · 15.07.2009, 13:02

Цитата:

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

в справочнике обещали отступ относительно родительского элемента

или читайте внимательней или выбросьте учебник подальше

Цитата:

Сообщение от htmlbook.ru

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

fucku23 · 29.10.2009, 19:54

wall66 очередной "похапе-погромист".

Парень все верно сказал за исключением одного но - абсолютные элементы позиционируются относительно родительских РЕЛАТИВНЫХ элементов.

uberchel · 29.10.2009, 20:07

wall66 все правильно cказал, немного дополню:

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

fixed
По своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной параметрами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании веб-страницы. Браузеры Netscape, Mozilla и Firefox вообще не отображают полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента. Internet Explorer 6 и ниже не поддерживает данный аргумент.

relative
Положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения, в зависимости от применяемого параметра.

static
Элементы отображаются как обычно. Использование параметров left, top, right и bottom не приводит к каким-либо результатам.

Подробнее о всем, здесь: http://www.htmlbook.ru/css/position.html

wall66 · 29.10.2009, 20:19

Цитата:

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

wall66 очередной "похапе-погромист".

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

Алориан · 13.11.2009, 11:35

Цитата:

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

wall66 очередной "похапе-погромист".

Парень все верно сказал за исключением одного но - абсолютные элементы позиционируются относительно родительских РЕЛАТИВНЫХ элементов.

Цитата:

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

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

fucku23, прав. В чем тут безосновательность? Если что то написали на htmlbook то это не абсолютная истина. Они тоже могут ошибаться.
Проведите эксперимент и проверьте его слова. Создайте элемент с position:relative и внутри него элемент с position:absolute и посмотрите относительно чего будет позиционироваться дочерний элемент.

cooperOk · 15.11.2009, 23:38

что касается дивов, то да, они позиционируются относительно релативных родителей.

15.07.2009, 12:26	#1
Aliech Новичок Джуниор Регистрация: 15.07.2009 Сообщений: 2	CSS: резиновый сайт с применением position: absolute Пробую сверстать свой первый резиновый дизайн на слоях. Но сразу же проблема: Код: `#hmenu { width: 550px; position: absolute; top: 0; right: 45; }` Делает отступ не от элемента родительского (body) а от рамки окна браузера (у body есть min-width, на который отступу пофиг). Так и должно быть? Просто как-бы в справочнике обещали отступ относительно родительского элемента... Объясните пожалуйста, если не трудно. Спасибо

15.07.2009, 12:32	#2
psycho-coder Участник клуба Регистрация: 06.04.2009 Сообщений: 1,524	Нужно что бы #hmenu было внутри другого <div> или <span> Примерно так (допустим #main {margin-left: 100px;}) Код: `<html> <body> <div id="main"> <div id ="hmenu"> </div> </div> </body> </html>`

29.10.2009, 20:07	#7
uberchel Участник клуба Регистрация: 19.01.2009 Сообщений: 1,453	wall66 все правильно cказал, немного дополню: absolute Указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на веб-странице словно абсолютно позиционированного объекта и нет. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера. fixed По своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной параметрами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании веб-страницы. Браузеры Netscape, Mozilla и Firefox вообще не отображают полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента. Internet Explorer 6 и ниже не поддерживает данный аргумент. relative Положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения, в зависимости от применяемого параметра. static Элементы отображаются как обычно. Использование параметров left, top, right и bottom не приводит к каким-либо результатам. Подробнее о всем, здесь: http://www.htmlbook.ru/css/position.html Последний раз редактировалось uberchel; 29.10.2009 в 20:45.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
absolute	Izhic	Общие вопросы Delphi	7	18.12.2009 19:33
css. не получается поменять области местами. резиновый макет.	sergey_kalinin	HTML и CSS	2	09.07.2009 16:48
CSS ролловер как закрепить background-position после клика	Maksimcase	HTML и CSS	1	14.05.2009 11:37
Резиновый сайт	Helen_Sof	HTML и CSS	4	09.02.2009 19:08
сайт сделан в CSS, почему в експлолере он у меня глючит, а в мозиле все показывается как я сделал?	-=Ламер=-	HTML и CSS	16	11.09.2008 18:12

29.10.2009, 19:54	#6
fucku23 Новичок Джуниор Регистрация: 29.10.2009 Сообщений: 1	wall66 очередной "похапе-погромист". Парень все верно сказал за исключением одного но - абсолютные элементы позиционируются относительно родительских РЕЛАТИВНЫХ элементов.

15.11.2009, 23:38	#10
cooperOk Пользователь Регистрация: 11.11.2009 Сообщений: 66	что касается дивов, то да, они позиционируются относительно релативных родителей.