Выравнивание элементов - Форум
( Новые сообщения ·Правила форума ·Поиск ·RSS )
Страница 1 из 11
Модератор форума: Ezhik 
Форум » Верстка веб-страниц » Табличная верстка » Выравнивание элементов
Выравнивание элементов
EvgenyДата: Понедельник, 01.03.2010, 18:33 | Сообщение # 1
Контр-Адмирал
Группа: Администраторы
Сообщений: 287
Статус:
За счет того, что содержимое ячеек таблицы можно одновременно выравнивать по горизонтали и вертикали, расширяются возможности по управлению положением элементов относительно друг друга. Таблицы позволяют задавать выравнивание изображений, текста, полей формы и других элементов относительно друг друга и веб-страницы в целом. Вообще, выравнивание в основном необходимо для установки зрительной связи между разными элементами, а также их группирования.

Центрирование по вертикали

Одним из способов показать посетителю направленность и название сайта является использование сплэш-страницы. Это первая страница, на которой, как правило, расположена flash-заставка или рисунок, выражающий главную идею сайта. Изображение также является и ссылкой на остальные разделы сайта. Требуется поместить этот рисунок по центру окна браузера вне зависи

[small]Пример 1. Центрирование рисунка[/small]

Code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Выравнивание</title>
<style type="text/css">
TABLE {
   width: 100%; /* Ширина таблицы */
   height: 100%; /* Высота таблицы */   
}   
</style>
</head>
<body>

<table>
<tr>
<td align="center">
<img src="title.gif" width="414" height="100" alt="Рецепты HTML">
</td>
</tr>
</table>   

</html>   
</body>

В данном примере выравнивание по горизонтали устанавливается с помощью параметра align="center" тега < TD>, а по вертикали содержимое ячейки можно не центрировать, поскольку это положение задано по умолчанию.

[off]Чтобы высота таблицы устанавливалась как 100%, необходимо убрать !DOCTYPE, код при этом перестает быть валидным.[/off]

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

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

За счет сочетания параметров align (горизонтальное выравнивание) и valign (вертикальное выравнивание) тега < TD>, допустимо устанавливать несколько видов положений элементов относительно друг друга. На рис. 1 показаны способы выравнивания элементов по горизонтали.


[small]
Рис. 1. Выравнивание элементов по горизонтали
[/small]

Рассмотрим некоторые примеры выравнивания текста согласно приведенному рисунку.

Выравнивание по верхнему краю

Для указания выравнивания содержимого ячеек по верхнему краю, для тега < TD> требуется установить параметр valign со значением top (пример 2).

[small]Пример 2. Использование параметра valign[/small]

Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Выравнивание</title>
</head>
<body>

<table width="100%" cellpadding="5">
<tr>
<td valign="top" width="75%" bgcolor="#f0f0f0">Колонка 1</td>
<td valign="top" width="25%" bgcolor="#ffcc00">Колонка 2</td>
</tr>

</table>   
</body>
</html>

В данном примере характеристики ячеек управляются с помощью параметров тега < TD>, но тоже удобнее изменять через стили. В частности, выравнивание в ячейках указывается атрибутами vertical-align и text-align (пример 3).

[small]Пример 3. Применение стилей для выравнивания[/small]

Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Выравнивание</title>
<style type="text/css">
TABLE {
   width: 100%; /* Ширина таблицы */
}

#col1 {
   width: 75%; /* Ширина первой колонки */
   background: #f0f0f0; /* Цвет фона первой колонки */
}

#col2 {
   width: 25%; /* Ширина второй колонки */
   background: #fc5; /* Цвет фона второй колонки */
   text-align: right; /* Выравнивание по правому краю */
}

#col1, #col2 {
   vertical-align: top; /* Выравнивание по верхнему краю */
   padding: 5px; /* Поля вокруг содержимого ячеек */
}
</style>
</head>
<body>

<table>
<tr>
   <td id="col1">Колонка 1</td>
   <td id="col2">Колонка 2</td>
</tr>
</table>   

</body>
</html>

Для сокращения кода в данном примере используется группирование селекторов, поскольку параметры vertical-align и padding применяются одновременно к двум ячейкам.

Выравнивание по нижнему краю делается аналогично, только вместо аргумента top используется значение bottom.

Выравнивание по центру

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


[small]
Рис. 2. Добавление формулы в документ
[/small]

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

[small]Пример 4. Выравнивание формулы[/small]

Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Выравнивание</title>
</head>
<body>   
<table width="100%">
<tr>
<td width="100"></td>
<td align="center"><img src="formula.gif" width="289" height="158" alt="Формула 18.6"></td>
<td width="100" align="right">(18.6)</td>
</tr>
</table>   
</body>
</html>

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

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

С помощью таблиц удобно определять положение полей формы, особенно, когда они перемежаются с текстом. Один из вариантов оформления формы, которая предназначена для ввода комментария, показан на рис. 3.


[small]
Рис 3. Расположение полей формы и текста
[/small]

Чтобы текст возле полей формы был выровнен по правому краю, а сами элементы формы — по левому, потребуется таблица с невидимой границей и двумя колонками. В левой колонке будет размещаться собственно текст, а в правой текстовые поля (пример 5).

[small]Пример 5. Выравнивание полей формы[/small]

Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Выравнивание</title>
</head>
<body>

<form method="post" action="handler.cgi" name="comment">
<table width="100%" cellspacing="0" cellpadding="4">
   <tr>   
    <td align="right" width="100">Имя</td>
    <td><input type="text" name="nickname" maxlength="50" size="20"></td>
   </tr>
   <tr>   
    <td align="right">E-mail</td>
    <td><input type="text" name="email" maxlength="50" size="20"></td>
   </tr>
   <tr>   
    <td align="right" valign="top">Комментарий</td>
    <td><textarea name="text" cols="35" rows="10"></textarea></td>
   </tr>
   <tr>   
    <td></td>
    <td><input type="submit" value="Добавить комментарий"></td>
   </tr>
</table>
</form>

</body>
</html>

В данном примере, для тех ячеек, где требуется задать выравнивание по правому краю, добавлен параметр align="right". Чтобы надпись «Комментарий» располагалась по верхней границе многострочного текста, для соответствующей ячейки устанавливается выравнивание по верхнему краю с помощью аргумента valign.

 
Форум » Верстка веб-страниц » Табличная верстка » Выравнивание элементов
Страница 1 из 11
Поиск:

Статистика Форума
Уважаемые пользователи
Популярные темы
Недавно обновленные темы
Evgeny Репутация [ 122 ]
akkemir22 Репутация [ 113 ]
Kuks64 Репутация [ 49 ]
Gavrik Репутация [ 48 ]
Anatoliy03 Репутация [ 37 ]
MiRel Репутация [ 33 ]
hius Репутация [ 23 ]
mVizio Репутация [ 19 ]
ewa69 Репутация [ 16 ]
straik67 Репутация [ 14 ]
Прочие [ 10 ]
О програмистах и Веб-Мастерах [ 6 ]
Про детей [ 6 ]
Про автомобилистов [ 5 ]
Про женщин [ 3 ]
Блондинка сдает на права ! (МЕГА ЖЕСТЬ) [ 2 ]
Про новых русских [ 2 ]
ВАЗ-2107 1000 лошадей [ 2 ]
Новый вид ББ-кодов на вашем сайте [ 2 ]
Про компьютеры [ 1 ]
Игры на телефон бесплатно [ 0 ]
Лучшее онлайн казино. Как обыграть казино? [ 0 ]
Инвест-Проект. Прибыль каждые 5 мин. [ 1 ]
Финансовая Взаимопомощь. Каждые 24ч получаете % [ 0 ]
Играть и зарабатывать онлайн [ 0 ]
Новый Топ пользователей с аватарами для Ucoz [ 0 ]
Простой и красивый вид формы опроса [ 0 ]
Красивый информер "кто нас сегодня посетил" для Ucoz [ 0 ]
Flash радио для сайта [ 0 ]
Заработок на играх [ 0 ]