27.07.2017, 15:33 [+3 UTC]
в нашей команде: 2 069 чел. | участники онлайн: 3 (рекорд: 21)

:: РЕГИСТРАЦИЯ

:: консультации

:: задать вопрос

:: все разделы

:: правила

:: новости

:: участники

:: доска почёта

:: форум

:: блоги

:: поиск

:: статистика

:: наш журнал

:: наши встречи

:: наша галерея

:: отзывы о нас

:: поддержка

:: руководство

Версия системы:
7.41 (25.02.2017)

Общие новости:
23.02.2017, 09:51

Форум:
27.07.2017, 12:12

Последний вопрос:
25.07.2017, 13:46

Последний ответ:
26.07.2017, 17:15

Последняя рассылка:
26.07.2017, 20:45

Писем в очереди:
0

Мы в соцсетях:

Наша кнопка:

RFpro.ru - здесь вам помогут!

Отзывы о нас:
22.05.2012, 23:59 »
Иван Васильевич Митяев
Спасибо! [вопрос № 186130, ответ № 270919]
01.12.2010, 00:17 »
Посетитель - 348444
Всё очень понятно и наглядно, большое спасибо! [вопрос № 181030, ответ № 264445]

РАЗДЕЛ • HTML / DHTML / XML / CSS

Создание программ на языках HTML, DHTML, XML и каскадные таблицы стилей CSS.

[администратор рассылки: Коцюрбенко Алексей aka Жерар (Мастер-Эксперт)]

Лучшие эксперты в этом разделе

Коцюрбенко Алексей aka Жерар
Статус: Мастер-Эксперт
Рейтинг: 140
Марк Крейн
Статус: 5-й класс
Рейтинг: 20
FOXhunter
Статус: Профессионал
Рейтинг: 10

Перейти к консультации №:
 

Консультация онлайн # 138041
Раздел: • HTML / DHTML / XML / CSS
Автор вопроса: Dicot
Отправлена: 27.05.2008, 11:12
Поступило ответов: 1

Здравствуйте.
Вопрос связан с позиционированием средствами CSS.
Вроде бы строгое определение HTML не предполагает использование таблиц для позиционирования элементов. Попробовал добиться того же эффекта, который даёт таблица, средствами CSS - ничего не вышло, более того сложилось впечатление, что это впринципе невозможно...
Развейте мои сомнения
Заранее спасибо.

Состояние: Консультация закрыта

Ответ # 224543 от Web-Extrime

Здравствуйте, Dicot!

        Страницы сайта можно писать с использованием табличной или блочной верстки.
        Не совсем понятно что именно вы хотите получить, но что касается позиционирования, то HTML-разметки в рабочей области браузера можно разместить с точностью до пикселя.
        Позиционирование и его программирование на JavaScript - это сплошное "минное поле" между основными браузерами. При просмотре этих страниц следует отдавать отчет, что для каждого браузера загружается своя страница описания свойств.
        До появления CSS-P единственным средством точного позиционирования были таблицы. Они позволяли точно расположить компоненты страницы относительно друг друга. CSS-P описание позволяет точно разместить элемент разметки не только относительно других компонентов, но и относительно границ страницы.
        Кроме этого CSS-P добавляет странице еще одно измерение - элементы разметки могут "наезжать" друг на друга. Исходный код этого примера будет выглядеть вот так:

<p style="border-width:1px; font-size:20px; position:relative; top:0px; left:0px; height:20px; color:white; background-color:#990000;">
Первый слой, на который наедем другим.
</p>
<div style="border-width:1px; position:relative; top:-55px; left:10px; background-color:#009900; padding:0px; font-size:20px; height:20px; color:#FFFFFF;">
Второй слой, который наезжает на первый.
</div>


        При этом можно менять порядок "наезда" - "перекладывать" слои.
        Термин "слой" вместо "блочный элемент разметки" используется здесь по той причине, что он лучше отражает эффект, который достигается за счет позиционировани.
        Стандарт CSS-P позволяет с точностью до пикселя разместить блочный элемент разметки в рабочем поле окна браузера. При таком подходе возникает вопрос, как устроена система координат, в которой автор страницы производит размещение компонентов страницы.
        CSS-P определяет две системы координат: относительную и абсолютную. Это позволяет обеспечить гибкость размещения элементов как относительно границ рабочего поля окна браузера, так и относительно друг друга.
        Блоки - это не абстрактные точки, которые не занимают на плоскости cтраницы места. Блоки - прямоугольники, которые "заметают" площадь. Текст и другие компоненты страницы под блоком перестают быть доступными пользователю, поэтому линейные размеры блока имеют для создания HTML-страниц не меньшее значение, чем координаты блока.
        При использовании "абсолютных" координат точка отсчета помещается в верхний левый угол окна браузера, а оси X и Y направлены вправо по горизонтали и вниз по вертикали.
        Если в этой системе координат некоторый блочный элемент должен быть размещен на 10px ниже верхнего обреза рабочей области браузера и на 20px правее правого края рабочей области браузера, то его описание будет выглядеть следующим образом:

.example { position:absolute; top:10px; left:20px; }

        В данной записи тип системы координат задан атрибутом position (значение - absolute), координата X задана атрибутом left (значение - 20px), Y задана атрибутом top (значение - 10px).
        Атрибуты top и left определяют координаты верхнего левого угла блока в абсолютной системе координат.
        Значения координат могут быть и отрицательными. Для того, чтобы убрать из отображаемой области блок с линейными размерами 100px (высота) на 200px (ширина) достаточно отпозиционировать его следующим образом:

.example { position:absolute; top:-100px; left:-200px; width:200px; height:100px; }

        Абсолютное позиционирование применяется тогда, когда либо все содержание страницы должно быть доступно без скроллинга, либо когда элементы разметки находятся в начале страницы и их взаимное размещение важно с точки зрения дизайна.
        Относительная координатная система позволяет разместить блоки на странице в координатах охватывающего их блока. Преимущества наличия такой координатной системы очевидны. Она позволяет сохранять взаимное расположение элементов разметки при любом размере окна браузера.
        В качестве точки отсчета в этой системе координат выбрана точка размещения текущего блока по умолчанию. Ось X при этом направлена горизонтально вправо, а ось Y - вертикально вниз.
        Для задания координат блока в этой системе применяют запись типа:

<div style="border-width:1px; border-style:solid; width:80%; height:100px;">
<div style="position:relative; top:0px; left:0px; border-width:1px;">
Этот блок находится в точке отсчета относительных координат
</div>
<div style="position:relative; top:0px; left:50px; border-width:1px;">
А этот блок смещен вправо на 50px
</div>
</div>


        Для работы с относительной системой координат лучше пользоваться универсальными блоками DIV. Это связано с тем, что в NN, например, параграф не может содержать параграфов. Любой блок немедленно закрывает параграф, следовательно, вложить в него что-либо нельзя.
        Следует отметить, что NN вообще непредсказуем в работе с относительными координатами, поэтому в нем их следует избегать.
        В относительной системе координат можно пользоваться отрицательными смещениями:

<div style="position:relative; top:0; left:50; border-width:1px; border-style:solid; width:200px;">
<a class=doc href="javascript:
if(flag==0)
{window.document.layers[2].left=-50;flag=1;}
else
{window.document.layers[2].left=50;flag=0;}; void(0);">
Сдвинуть слой
</a>
</div>


        В примере слой, первоначально сдвинутый на 50 пикселей вправо, после нажатия на гипертекстовую ссылку смещается на 100 пикселей влево, получая отрицательную величину смещения по оси X (left:-50px). После повторного нажатия положение восстанавливается.
        Линейные размеры блока задаются двумя параметрами: шириной (width) и высотой (height) блока. В браузерах ширина и высота блока интерпретируется по разному.
        В NN к примеру ширина и высота блока - это рекомендуемые параметры. Если текст выходит за эти ограничения, то блок увеличивается до необходимых размеров, если текста нет вообще, то блок сжимается до маленького квадрата:

<p style="width:200px; height:100px; background-color:#0000FF; color:#FFFFFF;">
...
</p>


Приведенного в примере описания должно хватить для получения результата, но в NN для такого блока нужно применить некоторые дополнительные атрибуты:

<p style="width:200px; height:100px; background-color:#0000FF; color:#FFFFFF; border-width:1px; border-color:#FFFFFF;">
<span style="color:#FFFFFF;">
...
</span>
</p>


        Без границы блок не будет залит синим цветом, а без span текст будет отображаться цветом умолчания для данной страницы. Никакому разумному объяснению такое поведение браузера не поддается :), поэтому не стоит на этих атрибутах строить дизайн страниц.
        Абсолютное и относительное позиционирование блоков позволяют придать странице третье измерение. Координаты блока, а точнее левого верхнего угла прямоугольника блока, и его линейные размеры определяют место положение блока на плоскости. Так как блок не является абстрактной точкой, то прямоугольники блоков перекрываются. Порядок наложения блоков определяется атрибутом z-index.
        При позиционировании блоков и их наложении друг на друга возникают видимые и невидимые области блоков. CSS позволяет произвольно управлять видимостью прямоугольной части блока. За это в спецификации CSS-P отвечает атрибут clip.
        Если быть более точным, то блоки - это прямоугольные карточки, которые лежат на поверхности, перекрывая друг друга. Расстояние между ними задать нельзя, т.е. полноценного третьего измерения нет.
        Порядок перекрытия блоков определяется атрибутом z-index. Чем больше значение z-index, тем ближе к наблюдателю находится слой.
        При работе с атрибутом следует иметь в виду, что NN и IE применяют разные модели описания. В IE - это просто числовой параметр, который закреплен за блоком. В NN изменение параметра z-index одного блока влиет на значения этого параметра у других.

<div>
<div name=first style="position:relative; top:0; left:0; width:300px; height:224px;">
<img src="image1.gif" border=1 width=300 height=224>
</div>
<div name=second style="position:relative; top:-160; left:80; width:300px; height:224px;">
<img src="image2.gif" border=1 width=300 height=224>
</div>
</div>


        Ну и наконец советую вам почитать интересную книгу по блочной верстке страниц сайта. Выложил специально для вас минут 10 назад. smile Загрузить (700 Кб.) сможете по этой ссылке.

        Успехов!


Консультировал: Web-Extrime
Дата отправки: 27.05.2008, 20:38

Рейтинг ответа:

0

[подробно]

Сообщение
модераторам

Отправлять сообщения
модераторам могут
только участники портала.
ВОЙТИ НА ПОРТАЛ »
регистрация »

Возможность оставлять сообщения в мини-форумах консультаций доступна только после входа в систему.
Воспользуйтесь кнопкой входа вверху страницы, если Вы зарегистрированы или пройдите простую процедуру регистрации на Портале.

Яндекс Rambler's Top100

главная страница | поддержка | задать вопрос

Время генерирования страницы: 0.14138 сек.

© 2001-2017, Портал RFPRO.RU, Россия
Авторское право: ООО "Мастер-Эксперт Про"
Калашников О.А.  |  Гладенюк А.Г.
Версия системы: 7.41 от 25.02.2017
Бесплатные консультации онлайн