Центрование css-шаблона (как сделать - вроде прочитал, но что-то не работает)) - HTML и CSS

vedro-compota · 09.10.2010, 11:53

Здравствуйте уважаемые программисты и верстальщики.
Хотел бы выяснить у людей знающих (ранее узнавших)) уточнить один момент в способах позиционирования блоков на примере , который привожу, а именно - в учебнике Марка Кемпбела читаю -

Цитата:

Хитрость данного метода заключается в установке левого края страницы на централь-
ную точку окна браузера, что достигается добавлением атрибута style к тегу body
страницы:

PHP код:


			
<body style="margin-left : 50%;">

после чего автор предлагает "сдвинуть" родительский элемент относительно прародительского <боди> на половину предполагаемой ширины макета ( в его случае половина- 380px) вот таким стилем -

Код:

<div id="container " style="position: relative ; width: 760px; left :
-380px;">

Собственно, вопрос - почему применяется relative , а не absolute (если применить absolute по центру макет не расположиться). Ведь если исходить из определений absolute-а, то смещение блока по средством этого свойства производиться относительно родительского элемента....

kirosin · 10.10.2010, 17:53

absolute
Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position у родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.

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

kirosin · 10.10.2010, 18:02

Код:

<body style="margin-left : 50%;">
<div id="container " style="position: relative ; width: 760px; left :
-380px; border:1px solid black;">контейнер</div>
</body>

все замечательно входит и выходит (©ослик Иа). Блок шириной 760 px выравнивается четко по середине экрана в горизинтальной плоскости.

vedro-compota · 10.10.2010, 19:05

Спасибо,kirosin)) а как быть с горизонтальной полосой прокрутки? у меня в эксплорере она появляется....

kirosin · 10.10.2010, 19:51

Код:

<body style="margin-left : 50%; overflow-X: hidden;">
<div id="container " style="position: relative ; width: 760px; left :
-380px; border:1px solid black;">Контейнер</div>
</body>

vedro-compota · 10.10.2010, 20:57

мммммммм.....margin-left и left - одно и то же? )))

kirosin · 10.10.2010, 21:22

нет, конечно. смотрим тут:
http://htmlbook.ru/css/left
http://htmlbook.ru/css/margin-left

vedro-compota · 10.10.2010, 21:53

Цитата:

margin-left и left - одно и то же? )))

простите за тупой вопрос ) что-то меня переклинило реально)

vedro-compota · 10.10.2010, 22:02

ага вся фишка в overflow-X: hidden;!

Цитата:

overflow-x для элемента body установлено в значение hidden. Как следствие, горизонтальная полоса прокрутки в окне просмотра не отображается, а та часть html-документа, которая выходит за пределы окна по горизонтали, не отображается и не доступна:

body {overflow-x:hidden}

vedro-compota · 11.10.2010, 13:30

всё ж таки у overflow-X: hidden; есть минус - полоса прокрутки не появляется даже если окно браузера уменьшить...

10.10.2010, 17:53	#2
kirosin Форумчанин Регистрация: 15.01.2010 Сообщений: 209	absolute Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position у родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента. relative Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. Все генитальное просто.

10.10.2010, 18:02	#3
kirosin Форумчанин Регистрация: 15.01.2010 Сообщений: 209	Код: `<body style="margin-left : 50%;"> <div id="container " style="position: relative ; width: 760px; left : -380px; border:1px solid black;">контейнер</div> </body>` все замечательно входит и выходит (©ослик Иа). Блок шириной 760 px выравнивается четко по середине экрана в горизинтальной плоскости. Все генитальное просто.

10.10.2010, 19:05	#4
vedro-compota любитель-далеко не Участник клуба Регистрация: 13.04.2010 Сообщений: 1,156	Спасибо,kirosin)) а как быть с горизонтальной полосой прокрутки? у меня в эксплорере она появляется.... против абортов=за + жизнь;.фкн вгу;_______________________мойблг

10.10.2010, 19:51	#5
kirosin Форумчанин Регистрация: 15.01.2010 Сообщений: 209	Код: `<body style="margin-left : 50%; overflow-X: hidden;"> <div id="container " style="position: relative ; width: 760px; left : -380px; border:1px solid black;">Контейнер</div> </body>` Все генитальное просто.

10.10.2010, 20:57	#6
vedro-compota любитель-далеко не Участник клуба Регистрация: 13.04.2010 Сообщений: 1,156	мммммммм.....margin-left и left - одно и то же? ))) против абортов=за + жизнь;.фкн вгу;_______________________мойблг

10.10.2010, 21:22	#7
kirosin Форумчанин Регистрация: 15.01.2010 Сообщений: 209	нет, конечно. смотрим тут: http://htmlbook.ru/css/left http://htmlbook.ru/css/margin-left Все генитальное просто.

11.10.2010, 13:30	#10
vedro-compota любитель-далеко не Участник клуба Регистрация: 13.04.2010 Сообщений: 1,156	всё ж таки у overflow-X: hidden; есть минус - полоса прокрутки не появляется даже если окно браузера уменьшить... против абортов=за + жизнь;.фкн вгу;_______________________мойблг

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Как в css из картинки сделать ссылку?	vlad2423	HTML и CSS	14	25.07.2015 01:32
Насколько сложно сделать что-то вроде Rangdoll Masters .	vedro-compota	Gamedev - cоздание игр: Unity, OpenGL, DirectX	8	08.08.2010 16:57
Что делать если не работает CSS в windows?	Free-Spirit	HTML и CSS	5	26.08.2008 18:05
Помогите по CSS вроде :)	Юрий777	HTML и CSS	4	16.05.2008 23:26
Как сделать стиль CSS	Dimos33	HTML и CSS	2	27.10.2007 19:08