VPF::Вёрстка div-ми на слоях - Форум программистов

Enya

Дата 12.2.2008, 00:46 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 386
Регистрация: 5.10.2005

Репутация: нет
Всего: нет

Вот. Поиском пользовалась. Читал это.
Но всё равно как-то не вышло. В FF косячит.
Правильнее (лучше) выбрать position: relative или absolute?

Присоединённый файл ( Кол-во скачиваний: 39 )

layerLayuot.gif 4,16 Kb

--------------------

Утсанвлен Денвер
1. PHP Version 5.1.6
2. MySQL 5.0.18-max
3. phpMyAdmin 2.6.1

WebDisaster

Дата 12.2.2008, 05:44 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 406
Регистрация: 22.6.2007

Репутация: 17
Всего: 19

Цитата(Enya @ 12.2.2008, 00:46

)

Правильнее (лучше) выбрать

relative для "Слой №1" + absolute для "Слой №3". Хотя, возможно, можно обойтись и марджинами ("+" и "-")

ilyaILF

Дата 14.2.2008, 23:18 (ссылка)

(голосов:1)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 70
Регистрация: 8.11.2006

Репутация: 6
Всего: 6

WebDisaster абсолютно прав, выглядеть это все можут таким образом:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Новая страница 1</title>
<style type="text/css">
.main {height: 500px; width: 500px; background: #ccc; padding: 20px; position: relative;}
.center_top {height: 300px; width: 150px; background: #aaa; margin: 0px auto 10px auto;}
.center_bottom {height: 50px; width: 150px; background: #bbb; margin: 10px auto 0px auto;}
.center_absolute {height: 50px; width: 300px; background: #efefef; position: absolute; top: 0px; left: 50%; margin: 250px 0px 0px -150px;}
</style>
</head>
<body>
<div class="main">
    <div class="center_top"></div>
    <div class="center_bottom"></div>
    <div class="center_absolute"></div>
</div>
</body>
</html>

Enya

Дата 14.2.2008, 23:59 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 386
Регистрация: 5.10.2005

Репутация: нет
Всего: нет

ilyaILF, можите объяснить как работает и в каких случаях нужно применять отрицательный margin?

--------------------

Утсанвлен Денвер
1. PHP Version 5.1.6
2. MySQL 5.0.18-max
3. phpMyAdmin 2.6.1

ilyaILF

Дата 15.2.2008, 00:09 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 70
Регистрация: 8.11.2006

Репутация: 6
Всего: 6

Собственно работает здесь только абсолютное позиционирование, это когда элемент HTML-разметки как бы "изымается" из привычного последовательного хода документа и перестает оказывать влияние на окружающие его другие элементы верстки, и при этом вы его можете поставить (передвинуть, спозиционировать) куда угодно. даже за пределы видимой области экрана. Отрицательный марджин же здесь используется для того, чтобы точно спозиционировать элемент относительно второго (в данном случае со стилем position: relative; , если этот стиль не был бы задан, то элемент позиционировался относительно левого верхнего угла окна броузера) он равен ПОЛОВИНЕ его ширины, которая должна быть задана!!!
left: 50%; отодвигает левую границу абсолютно спозиционированного элемента, относительно содержащего его контейнера со стилем position: relative; ровно на середину этого (родительского) контейнера, а отрицательный марджин же "возвращает" абсолютноспозиционированный элемент "назад", ровно на половину его ширины и тем самым он оказывается ровно по-центру.
Отрицательный марджин применяется у позиционированный элементов (position: absolute; и position: relative;) а так же у "плавающих" (выровненных) элементов (float: left; и float: right;)

Это сообщение отредактировал(а) ilyaILF - 15.2.2008, 00:12

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »