Практика разработки Web-страниц


Элементы на странице не выровнены - часть 4


Если вы используете FrontPage, вы можете устанавливать положение отдельных объектов без написания кода CSS и HTML. Просто выберите текст или объект, который вы хотите выровнять, нажмите на Position в меню Format, и определите параметры.

<style> P { margin-top:0; margin-bottom:10px; text-align:justify; } </style>

  • Если вы хотите скорректировать расположение элемента, используйте свойство CSS position. Чтобы установить положение объекта относительно его обычного места на странице, установите свойству position значение relative и затем установите в значениях свойств left и top то расстояние, на которое вы хотите переместить объект. (Используйте отрицательные значения, чтобы подвинуть его вверх или налево). Заметьте, что другие элементы на странице не перемещаются, чтобы заполнить пространство, освобожденное передвинутым элементом. Приведенная ниже строка использует тэг <SPAN> чтобы установить свойства стиля для одного слова, заставляя его подвинуться на 8 пикселов относительно его нормального положения.

    The word <span style="position:relative; top:-8;">higher</span> is higher than the others.

  • Чтобы при перемещении элемента в определенное место на странице другие объекты появлялись на странице как будто его там нет, установите свойству position значение absolute и присвойте свойствам left и top расстояние от левого верхнего угла страницы до места, где вы хотите расположить элемент. Например, это изображение будет появляться сверху страницы, с отступом 200 пикселов от левого края страницы (так как Netscape 4 не признает атрибут style для тэга <IMG>, лучше использовать блок <DIV>):

    <div style="position:absolute; top:0; left:200"> <img src="gracie.jpg" width=100 height=150> </div>

    Если вы не учитываете свойство top, изображение появится на расстоянии 200 пикселов от левого края страницы, но на его нормальном расстоянии от вершины. Более того, вы можете отсчитывать положение элемента от других объектов, например угла таблицы. Установите свойству position для таблицы значение relative, и положения всех объектов в пределах таблицы будут определяться относительно ее левого верхнего угла.

  • Большинство посетителей имеют броузеры, поддерживающие CSS, так что его использование для улучшения размещения элементов ваших страниц будет разумным. Тем не менее неплохо использовать обыкновенный HTML при выравнивании атрибутов и таблиц для обеспечения основного расположения, перед включением стиля. Таким образом, в то время как посетители с новыми броузерами будут видеть страницу точно так, как вы ее спроектировали, посетители со старыми броузерами тоже не останутся совсем с пустым экраном.




    Начало  Назад  Вперед