... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Оформление элементов форм при помощи CSS (стр.4)

 

 

Оформление элементов форм с CSS ||  Изменение стиля полосы прокрутки ||  Использование нескольких стилей
Создание ссылок-кнопок


Вспомним, что выравнивание по левому краю является значением по умолчанию, поэтому во втором случае его можно безболезненно опустить. А для первого случая в таблицу стилей придется добавить правило, описывающее способ выравнивания. Кроме этого, придется организовать класс, поскольку в нашей форме встречаются столбцы с выравниванием двух типов: по левому и правому краю. Организуем два универсальных класса .right и .left:

.left {
text-align:left;}
.right{
text-align:right;}

В HTML-код придется внести следующие изменения: <COL CLASS="right"><COL CLASS="left">. В будущем эти классы можно будет использовать для задания выравнивания любых элементов, достаточно в них прописать атрибут class и указать соответствующее название класса.

Теперь в нашем HTML-коде не осталось "нежелательных" атрибутов. Вернемся к выравниванию формы на странице. Казалось бы, CSS нам не сможет помочь отцентрировать блок FORM на странице. Атрибута align у элемента FORM тоже нет. Можно, конечно, все содержимое формы поместить внутрь тегов <DIV ALIGN="center"></DIV>, но тогда мы нарушим принцип разделения структуры и визуального оформления, тем более что в CSS выход все же есть. Для центрирования блока на странице нам поможет свойство margin и его значение auto. Дело в том, что при использовании значения auto поля блока вычисляются одинаково с каждой стороны, что и выравнивает блок по центру контейнера. Тогда правило для селектора FORM примет вид:


FORM {
background: #FFFFCC;
font:0.8em Verdana, Arial, sans-serif;
text-align: center;
margin:auto;
width:500px; }

После всех этих манипуляций в браузере Opera и Mozilla, как вы можете увидеть сами - ОТКРЫТЬ ПРИМЕР, элементы формы (т.е. содержимое нашей внутренней таблицы) остались выровнены по левому краю.

Чтобы исправить эту ситуацию, можно по аналогии с классами .left и .right ввести класс .center такого вида:

.center {margin:auto;}


Теперь для таблицы можно указать этот класс вместо использования атрибута align="center":

<TABLE CLASS="center" CELLPADDING="0" CELLSPACING="O" BORDER="0"> ... код таблицы ... </TABLE>

В результате выравнивание будет выполняться правильно везде и для всех элементов формы. ОТКРЫТЬ ПРИМЕР

 

Оформление элементов форм с CSS ||  Изменение стиля полосы прокрутки ||  Использование нескольких стилей
Создание ссылок-кнопок

 

Страница: - 1 - | - 2 - | - 3 - | - 4 - | - 5 -

 

Наверх страницы

 

Уроки CSS © 2007 - 2017 г. Все права защищены