На главную

Библиотека Интернет Индустрии I2R.ru

Rambler's Top100

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...

Забобрить эту страницу! Забобрить! Блог Библиотека Сайтостроительства на toodoo
  Поиск:   
Рассылки для занятых...»
I2R » Сайтостроительство » CSS

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

Новая статья на сайте, посвященная выравниванию картинок и текста относительно друг друга.
Статья доступна по адресу 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>

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

Влад Мержевич
Рецепты HTML

Спонсор раздела

Рассылки Subscribe.ru:

Библиотека сайтостроительства - новости, статьи, обзоры
Дискуссионный лист для web-разработчиков
Подписка на MailList.Ru
Автор: NunDesign
Другие разделы
Оптимизация сайтов
Web-студии
» Новое в разделе
Web-дизайн
Web-программирование
Интернет-реклама
Раскрутка сайта
Web-графика
Flash
Adobe Photoshop
Рассылка
Инструменты вебмастера
Контент для сайта
HTML/DHTML
Управление web-проектами
CSS
I2R-Журналы
I2R Business
I2R Web Creation
I2R Computer
рассылки библиотеки +
И2Р Программы
Всё о Windows
Программирование
Софт
Мир Linux
Галерея Попова
Каталог I2R
Партнеры
Amicus Studio
NunDesign
Горящие путевки, идеи путешествийMegaTIS.Ru

2000-2008 г.   
Все авторские права соблюдены.
Rambler's Top100