Консультация № 138041
27.05.2008, 11:12
0.00 руб.
0 1 1
Здравствуйте.
Вопрос связан с позиционированием средствами CSS.
Вроде бы строгое определение HTML не предполагает использование таблиц для позиционирования элементов. Попробовал добиться того же эффекта, который даёт таблица, средствами CSS - ничего не вышло, более того сложилось впечатление, что это впринципе невозможно...
Развейте мои сомнения
Заранее спасибо.

Обсуждение

Неизвестный
27.05.2008, 20:38
общий
это ответ
Здравствуйте, Dicot!

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

<B><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></B>

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

<B>.example { position:absolute; top:10px; left:20px; }</B>

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

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

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

<B><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></B>

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

<B><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></B>

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

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

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

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

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

<B><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></B>

        Ну и наконец советую вам почитать интересную книгу по блочной верстке страниц сайта. Выложил специально для вас минут 10 назад.Загрузить (700 Кб.) сможете по этой <A HREF=http://web-extrime.narod.ru/Books_Web-Sites.html><B>ссылке</B></A>.

        Успехов!

Форма ответа