Отправляет email-рассылки с помощью сервиса Sendsay

Рецепты HTML

Рассылка закрыта

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Март 2003   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Влад Мержевич

Статистика

12.722 подписчиков
-26 за неделю
←   Все выпуски   →

Рецепты HTML


Информационный Канал Subscribe.Ru
   Новости сайта www.htmlbook.ru
Добрый день.

Новая статья на сайте, посвященная выравниванию картинок и текста относительно друг друга.
Статья доступна по адресу www.htmlbook.ru/layout/align.shtml

Выравнивание элементов

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

Выравнивание по горизонтали

Задача следующая, нужно выровнять два изображения, находящихся на одной горизонтальной линии один по левому, а другой по правому краю. Чем и хороши рисунки, что у них есть параметр align, который выравнивает изображение по тому краю, которому надо. Одновременно задавая у двух рисунков отбивку по левому и правому краю, получим нужный результат (Пример 1).

Пример 1. Выравнивание двух рисунков по сторонам

<img src="sample1.gif" width="50" height="50" align="left">
<img src="sample2.gif" width="50" height="50" align="right">


Однако, этот способ не лишен недостатков. Во-первых, чтобы добавить после рисунков текст, придется вставлять переносы строк. И во-вторых, выравнивание по вертикали всегда происходит только по верхнему краю. Более широкие возможности предоставляют в этом смысле таблицы, позволяя устанавливать изображения относительно друг друга в любом порядке.

Пример 2. Использование таблицы для выравнивания

<table width="100%" border="0" cellspacing="0" cellpadding="4">
<tr>
<td valign=bottom><img src="sample1.gif" width="50" height="50"></td>
<td align=right valign=bottom><img src="sample2.gif" width="50" height="86"></td>
</tr>
</table>


Положение по вертикали изменяется параметром valign тега TD. Благодаря ему, объекты можно выравнивать по верхнему, нижнему краю либо по центральной оси. Атрибут align=left писать необязательно, он задается по умолчанию. Рамка таблицы, естественно, делается невидимой толщиной в ноль пикселов.

Требуется выровнять один объект по центру веб-страницы и одновременно другой по левому (или правому) краю. Такое размещение часто используется при публикации формул с нумерацией (рис. 1).

  (2.7)

Рис. 1. Выравнивание формулы и ее номера

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

Пример 3. Выравнивание по центру и краю

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10%">&nbsp;</td>
<td align=center><img src="formula.gif" width="289" height="158"></td>
<td align=right width="10%">(2.7)</td>
</tr>
</table>

Точно также при необходимости помещается текст и в левую ячейку.

Выравнивание по вертикали

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

Как сидеть
  При работе на вычислительной технике необходимо сесть так, чтобы руки с предплечьями образовывали прямой угол, глаза поставить на расстояние 30-40 см от рабочей поверхности монитора.
Как набирать
  Набирать на клавиатуре следует подушечками пальцев короткими отрывистыми ударами. Предельно допустимая длина ногтей для женщин составляет 12-15 мм, для мужчин 3-5 мм.

Код для данного примера приведен ниже.

Пример 4. Выравнивание по вертикали

<table width="100%" cellspacing="0" cellpadding="0">
<tr><td colspan="2"><b>Как сидеть</b></td></tr>
<tr bgcolor="#000000">
<td colspan="2"><img src="spacer.gif" width="1" height="1"></td>
</tr>
<tr>
<td width="20%">&nbsp;</td>
<td><i>При работе на вычислительной технике необходимо сесть
так, чтобы руки с предплечьями образовывали прямой угол,
глаза поставить на расстояние 30-40 см от рабочей поверхности
монитора.<br></i></td>
</tr>
<tr><td colspan="2"><b>Как набирать</b></td></tr>
<tr bgcolor="#000000">
<td colspan="2"><img src="spacer.gif" width="1" height="1"></td>
</tr>
<tr>
<td width="20%">&nbsp;</td>
<td><i>Набирать на клавиатуре следует подушечками пальцев
короткими отрывистыми ударами. Предельно допустимая длина
ногтей для женщин составляет 12-15 мм, для мужчин 3-5
мм.</i></td>
</tr>
</table>

Точно также можно размещать не только текст, но и рисунки и другие объекты.

См. также
  • Выравнивание текста
  • Выравнивание изображений
    Рекомендую подписаться на рассылку:
    CenterINet - все для начинающих и опытных web мастеров
    Всё о Photoshop

    Всё из мира графического редактора Adobe Photoshop. Еженедельно и только для вас в рассылке последние новости и обновления ресурса http://psd.eserver.ru. Не пропустите десятки увлекательных статей о Photoshop и компьютерной графике!

    Новичку, интересующемуся, профессионалу!

     

    •   Разделы сайта
     
    Создание сайта
      HTML
      CSS
      Графика
      Дизайн
      Инструментарий
      Справочная информация
      Шаблоны
      Форум

      Подписка на новости
      Введите ваш e-mail:
      Помощь
      Не знаете с чего начать или что можно найти на сайте www.htmlbook.ru - воспользуйтесь Помощником по сайту
    Copyright 2002 Влад Мержевич, e-mail: vlad@htmlbook.ru
    Материалы сайта охраняются законом об авторском праве.
    Вы можете свободно использовать и распространять любые статьи с указанием автора и ссылки на сайт www.htmlbook.ru.
    http://subscribe.ru/
    E-mail: ask@subscribe.ru     		Отписаться
    Убрать рекламу
    В избранное