Содержимое по центру страницы. CSS - Выравнивание по центру

Многие веб приложения используют формы чтобы для сбора данных и отправки данных на сервер. Формы обычно содержат несколько элементов для ввода данных различного типа, например имени, адреса, даты рождения email адрес и так далее. HTML поддерживает несколько типов элементов ввода включая текстовые поля, радио кнопки и чекбоксы. В HTML5 добавлено больше специальных элементов, таких как email, поле для пароля, выбор цвета, виджеты для отображения даты и времени, бегунки.

Главный пример этого руководства содержит клиенскую и серверную часть. Клиентская часть использует Polymer для предоставления пользовательского интерфейса (формы содержат множество типов элементов ввода) и интерфейс синхронизации данных с Dart. Клиент и сервер общаются используя некоторые классы из различных библиотек, включаю потоки, флючерсы, HttpRequest и так далее. Сервер использует заголовки CORS для использования кросс-доменных запросов.

Замечание эта статья основывается на том что вы прочитали в разделах: Cоздание собственных элементов , Использование API для фьючерсов Динамическая обработка данных , а так же вы должны быть знакомы с библиотекой Polymer, фьючерсами, JSON и HttpRequest.

Общая информация о формах

У форм есть свойство action , представляющий собой URL для отправки данных формы, и method который определяет как данные должны быть отправлены. Свойства action и method могут быть определены непосредственно в HTML, или в более сложном случае или чтобы получить больше контроля, Вы можете написать код Dart и использовать библиотеки Dart для предоставления этих свойств программно

Давайте начнем с основ, только с HTML форм, чтобы разобраться в свойствах action и method элементов ввода и понять стандартное поведение форм. Форма ниже, заключенная в тэг

Использование атрибутов action и method.

А вот HTML код которые добавляет в форму три элемента ввода - текстовое поле, кнопка отправки и чекбокс.

Search dartlang.org

Чекбокс обернут в тэг label, поэтому вы можете нажимать как на сам чекбокс так и на заголовок, чтобы изменить значение.

Этот HTML код предоставляет некоторое автоматическое поведение.

****

Создает специальную кнопку, нажатие которой вызывает отправку данных формы. На основании атрибутов action и method, кнопка формирует запрос и отправляет его на сервер по указанному URL.

**name=q** **name="sitesearch"**

определяет имя текстового поля и имя чекбокса.

Для элементов внутри формы, у которых указано имя предоставляют данные для этой формы. В данном примере, значение предоставляемое текстовым полем это значение для q , а чекбокс предоставляет значение для sitesearch , оба этих параметра являются частью корректного URL для запроса Google. Когда пользователь нажимает кнопку, имя и соответствующее значение добавляется к URL для поиска. Вот пример запроса:

Http://www.google.com/search?q=Cookbook&sitesearch=dartlang.org

Этот пример полностью создан без использования кода Dart или Javascript. Потому как он очень прост, он может использовать обычное поведение HTML: публично доступный и прост для формирования URL, а так же обычный GET запрос. Для форм, которые содержать большое количество данных, или для web приложения, которое общается со специализированным сервером, вам обычно надо обрабатывать форму программно.

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

Пример slambook в частности

Этот раздел включает две программы в качестве основных примеров.

Первая, это обычная серверная программа, названная slambookserver, которая слушает на локальном компьютере порт 4040 и обрабатывает запросы POST и OPTIONS создавая сообщения и отправляя подтверждение клиенту. Сервер использует заголовки CORS для того чтобы разрешить приложению использовать запросы отправленные с других серверов.

Вторая, это клиентская программа, названная slambook, предоставляющая форму, в которой пользователь может вводить информацию. Эта программа использует Polymer для двойной связи данных, между элементами ввода и переменными Dart. Когда пользователь нажимает кнопку, код Dart преобразует данные в строку JSON, отправляет запрос OPTIONS чтобы получить разрешение сервера, а затем отравляет POST запрос для отправки данных. Когда запрос от сервера получен, он отображается клиенту.

Следующая диаграмма показывает последовательность общения между сервером и клиентом в данном примере.

Попробуйте! Введите любые данные и нажмите кнопку Отправить .

Замечание о версии . Приложение slambook совместимо с polymer.dart 0.9.

Запрос возвращает сообщение “No server” потому что вы не запустили сервер на своей машине. Давайте это исправим.

Запуск сервера

Исходный код основной серверной программы slambookserver.dart можно скачать из примеров руководства

Запустите серверную программу из командной строки

% dart slambookserver.dart Listening for GET and POST on http://127.0.0.1:4040

Теперь Вы снова можете попробовать отправить данные из приложения slambook выше.

Замечание : Если какая-то другая программа уже использует порт 4040, сервер вернет сообщение об ошибке и завершит выполнение. Программа на этой странице рассчитывает что slambookserver будет расположен на локальной машине, порт 4040. Поэтому чтобы приложение могло работать вы должны завершить другой процесс и снова запустить slambookserver. Или вы можете изменить номер порта в серверной и клиентской программе. Избегайте использования 3030, так как его использует Dart Editor. Затем запустите клиент и сервер на вашем локальном компьютере.

Оставшаяся часть этого руководства поясняет код сервера и клиента.

О клиентской части Вы узнаете об:

Отправке данных формы

Сброс формы

Использовании Polymer для связи данных формы

Серверная часть в этом разделе расскажет о:

Заголовках CORS

Обработке запросов OPTIONS

Обработке запросов POST

Отправка данных формы

Первым делом давайте взглянем на то как данные отправлены на сервер.

Напомним что пример search_form был основан на использовании атрибутов action и method для задания назначения и метода, для отправки формы. Также напомним что пример search_form основывается на автоматическом поведении специальной кнопки отправки. С другой стороны, пример slambook принимает непосредственное участие в процессе отправки:

Во-первых в форме не определен ни action ни method

Во-вторых у кнопки отправки данных есть обработчик нажатия в Dart

В-третьих обработчик нажатия переопределяет автоматическое поведение кнопки отправки

И наконец данные формы отправляются на сервер при помощи библиотек Dart

Форма в примере slambook представлена пользовательским элементом tute-slambook-form , который представлен следующим кодом HTML:

Обратите внимание на отсутствие атрибутов action и method. Вместо этого поведение кнопки отправки определено в обработчике нажатия кнопки в Dart. Ниже представлен HTML код, который создает кнопку отправки и связывает ее с обработчиком Dart.

…

А вод и сам код обработчика нажатия кнопки submitForm():

Давайте рассмотрим каждый элемент кода обработчика

Отмена стандартного обработчика

Это событие без атрибутов action и method , кнопка отправки содержит автоматическое поведение, которое не нужно в примере slambook. Поэтому в первой строке кода обработчика вызывается e.preventDefault(), чтобы отменить поведение кнопки по умолчанию.

Void submitForm(Event e) { e.preventDefault(); // Don"t do the default submit. … }

Настройка и отправка POST запроса

Следующая часть кода создает объект HttpRequest . В этом коде используется new чтобы создать экземпляр объекта HttpRequest, который используется чтобы настроить и отправить POST запрос. Класс HttpRequest имеет соответствующую функцию getString(), чтобы Вы могли использовать и отправлять обычные GET запросы к URL.

Следующая строка предоставляет объекту HttpRequest колбэк функцию, названную onData , которая вызывается при получении ответа от сервера. Мы рассмотрим детали объявления функции onData() позже.

Важно : Вы должны зарегистрировать колбэк функцию до отправки запроса!

Request = new HttpRequest(); request.onReadyStateChange.listen(onData); var url = "http://127.0.0.1:4040"; request.open("POST", url); request.send(slambookAsJsonData());

И наконец функция отправляет данные формы на сервер в виде JSON строки. Иногда данные отправляются по частям. Но этот пример достаточно мал, чтобы данные отправлялись за раз. Этот запрос является асинхронным, поэтому метод send() завершится как только запрос будет отправлен.

Ожидание ответа от сервера

Объект HttpRequest общается с сервером. Вы можете получить состояние используя поле readyState объекта HttpRequest. Состояние готовности может принимать пять различных значений: не отправлено (unsent), открыто (opened), заголовки получены (headers received), загрузка (loading) и выполнено (done). Когда состояние готовности меняется, HttpRequest вызывает событие, и вызывается колбэк функция onData().

Напомним строчку кода, в которой регистрируется обработчик события onReadyStateChange :

Request.onReadyStateChange.listen(onData);

Единственным требуемым аргументом метода listen() является колбэк функция с сигнатурой: void onData(T) . Метод listen() также позволяет вам определить три дополнительных аргумента, например обработчик ошибок.

Ниже колбэк функция onData():

Void onData(_) { if (request.readyState == HttpRequest.DONE && request.status == 200) { // Data saved OK. serverResponse = "Server Sez: " + request.responseText; } else if (request.readyState == HttpRequest.DONE && request.status == 0) { // Status is 0...most likely the server isn"t running. serverResponse = "No server"; } }

Первым делом в коде проявляется завершился ли успешно запрос. Если да то содержание ответа помещается в строку названную serverResponse , которая привязана к значению элемента textarea приложения slambook. При изменении строки интерфейс пользователя будет автоматически обновлен, о сообщение будет показано пользователю.

Если запрос выполнен с ошибкой, то программа выведет в serverResponse сообщение об ошибке, которое будет показано пользователю.

Сброс данных из формы

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

Void resetForm(Event e) { e.preventDefault(); favoriteThings["kittens"] = false; favoriteThings["raindrops"] = false; favoriteThings["mittens"] = false; favoriteThings["kettles"] = false; theData["firstName"] = ""; theData["favoriteQuote"] = ""; theData["favoriteColor"] = "#FFFFFF"; theData["birthday"] = "2013-01-01"; theData["volume"] = "0"; theData["catOrDog"] = "cat"; theData["music"] = 0; theData["zombies"] = false; serverResponse = "Data reset."; }

Создание серверной части и прослушивание порта

Теперь давайте обратим рассмотрим серверную часть, которая называется slambookserver , она возвращает HTTP ответ, на запрос отправленный из клиентского приложения slambook. Код серверной части основывается на статье [Использование Dart для создания JSON Web сервисов (#)

Сервер слушает порт 4040 на локальной машине и обрабатывать только запросы типа POST и OPTIONS. Оба типа запросов используют для разрешения доступа CORS заголовки. Для POST запросов, сервер возвращает короткое сообщение о подтверждении, которое включает данные в формате JSON которые он получил из запроса.

Давайте взглянем на код.

Функция main() приложения slambookserver приведена полностью чуть ниже. Используя класс HttpServer приложение slambookserver начинает прослушивание порта 4040 локальной машины после вызова функции верхнего уровня bind ()

Final HOST = "127.0.0.1"; final PORT = 4040; void main() { HttpServer.bind(HOST, PORT).then(gotMessage, onError: printError); }

Функция bind() возвращает фьючерс, при помощи которого можно получить значение в будущем (больше информации будет буквально через минуту). Функция then() регистрирует две колбэк функции в виде фьючерса. Первая функция gotMessage(), вызывается когда фьючерс получает значения. Вторая printError вызывается при неудачной попытке соединения. Ошибка может возникнуть, например, если другая программа уже слушает тот-де порт.

Фильтрация запросов и вызов остальных методов для обработки каждого типа запроса функции gotMessage () ниже.

Void gotMessage(_server) { _server.listen((HttpRequest request) { switch (request.method) { case "POST": handlePost(request); break; case "OPTIONS": handleOptions(request); break; default: defaultHandler(request); } }, onError: printError); // Listen failed. print("Listening for GET and POST on http://$HOST:$PORT"); }

Для обработке других типов запросов, таких как GET, вы можете просто добавить больше значений в case например case ‘GET’ .

Немного о фьючерсах.

Давайте немного рассмотрим фьючерсы, до того как будем разбираться с кодом обработки POST и OPTIONS запросов.

Фьючерс представляет способ получения значения через некоторое время в будущем. Вы используете фьючерсы для предотвращения блокировки программы пока она ожидает данные, например если необходимы долгие вычисления для предоставления значения, или если значение должно быть прочитано или получено с использованием ввода/вывода.

Когда вызывается функция возвращающая фьючерс, происходит две вещи

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

Позже, когда значение получено, объект фьючерса завершается с полученным значением или с ошибкой.

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

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

Обработка запросов OPTIONS

С помощью класса HttpRequest , клиентское приложение slambook отправляет запросы, когда пользователь нажимает кнопку “отправить”. Вы видели код ранее в этой статье.

Если клиента и сервера различное происхождение, что является общим в приложениях, перед POST отправляется предварительный запрос. Предварительный запрос должен в первую очередь содержать OPTIONS запрос чтобы определить какие вообще запросы разрешены. Класс HttpRequest автоматически обрабатывает предварительные запросы OPTIONS. Вам больше не надо для этого писать код на стороне клиента.

Сервер получает предварительный запрос OPTIONS до того как получает основной запрос. Вот код приложения slambookserver который обрабатывает OPTIONS запросы.

Void handleOptions(HttpRequest req) { HttpResponse res = req.response; addCorsHeaders(res); print("${req.method}: ${req.uri.path}"); res.statusCode = HttpStatus.NO_CONTENT; res.close(); }

Этот код выполняет следующее:

Получает объект HttpResponse, который заботится о том чтобы сервер послал ответ клиенту

Добавляет CORS заголовки для управления доступом

Выводит сообщение в консоль

Сигнализирует о том, что у ответ нет содержания

Завершает ответ, который будет отправлен клиенту.

Когда клиент получает запрос, CORS заголовок сигнализирует о том, запросы POST будут приняты.

Настройка CORS заголовков

Серверное приложение использует следующую функцию для добавления в ответ CORS заголовков для OPTIONS и POST запросов. Функция добавляет ответ сервера три заголовка Access-Control (которые включаются в ответ HttpResponse).

Void addCorsHeaders(HttpResponse res) { res.headers.add("Access-Control-Allow-Origin", "*, "); res.headers.add("Access-Control-Allow-Methods", "POST, OPTIONS"); res.headers.add("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); }

Первые две строки CORS заголовка разрешают запросы POST и OPTIONS из любых источников. Третий определяет тип запросов POST и OPTIONS сервер разрешает принимать запросы только с определенными заголовками.

Обработка POST запросов

Вот функция, которая обрабатывает клиентские POST запросы.

Void handlePost(HttpRequest req) { HttpResponse res = req.response; print("${req.method}: ${req.uri.path}"); addCorsHeaders(res); req.listen((List buffer) { // Return the data back to the client. res.write("Thanks for the data. This is what I heard you say: "); res.write(new String.fromCharCodes(buffer)); res.close(); }, onError: printError); }

Так же как и запрос OPTIONS, slambookserver получает объект HTTP ответа из запроса, выводит сообщение в консоль и добавляет CORS заголовки к ответу.

Далее в этом коде прослушиваются данные из клиентского запроса POST. Если все данные готовы, вызывается колбэк функция. Эта функция написана в то же месте. Аргументом функции является список чисел, включающий все данные. Каждое число представлено кодом, который может быть представлен в виде символа UTF-16. Но вам не надо беспокоиться об этом, потому что Вы можете просто вызвать метод String.fromCharCodes для конвертации в обычную строку.

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

При закрытии потока, объект HttpResponse отправляет данные клиенту.

Пример клиент-серверного приложения slambook может послужить отправной точкой для Вашего собственного клиент-серверного приложения или примером того, как надо строить свои собственные приложения.

Вот образец того что должна выполнять клиентская часть.

Использовать формы для сбора данных пользователя.

Помещать поля ввода в ваши формы, для отдельных элементов данных.

Использовать Polymer для обратной связи, чтобы данные формы были синхронизированы с кодом Dart.

Отправлять данные напрямую (свойства формы action и method)

Или программно (переопределяя стандартное поведение кода Dart кнопки отправки)

Создавать объект ответа на сервере из объекта HttpRequest.

А вот что должен делать сервер.

Использовать HttpServer для настройки сервера и прослушивания порта.

Обрабатывать ответы.

Использовать заголовки CORS чтобы разрешить каждый запрос.

Ответ на запрос использует HttpResponse.

Обрабатывать данные асинхронно используя фьючерсы.

Использовать потоки для записи данных в ответ.

Эти ресурсы по большей части на основе библиотек Dart, предоставляющих поддержку для написания клиентов и серверов. Учтите что бывает два класса HttpRequest: один в dart:html (для клиентов) и второй dart:io (для серверов).

Ресурс	Библиотека	Описание
HttpRequest	dart:html	Клиентская часть HTTP запроса
HttpRequest	dart:io	Серверная часть HTTP запроса
HttpServer	dart:io	Серверная часть обрабатывающее HTTP связь с сервером
HttpResponse	dart:io	Серверная часть которая заботится об отправке ответов на запрос
Streams	dart:async	Поток данных
Future	dart:async	Способ получать данные асинхронно
JSON	dart:convert	Объявление преобразования в JSON по умолчанию
Polymer	Polymer	Пользовательские элементы, данные связанные с шаблоном

Двухсторонняя привязка данных используя Polymer

Пример slambook использует Polymer для обратной связи, значения элемента ввода с переменными Dart. Если пользователь меняет значение элемента ввода, связанная переменная в коде Dart меняется автоматически. Или если значение меняется в коде Dart, связанный объект пользовательского элемента обновляется автоматически. Статья определение пользовательских элементов предоставит больше деталей о связывании данных и о Polymer.

Этот пример так же использует объявление обработки событий для перехватывания и обработки функций для элементов ввода.

При помощи примера slambook вы можете рассмотреть используется двунаправленное связывание данных для различных элементов ввода, включая новые элементы HTML5. Эта таблица объединяет все двунаправленные атрибуты, которые вы можете использовать с помощью Polymer:

Использование атрибута value в любом элементе ввода

Атрибут value работает в любых элементах ввода и связывает значение со строкой Dart. Этот пример использует value для тактового поля, поля ввода текста, выбора цвета, выбора даты и выбора диапазона.

(Отметим что некоторый код вокруг, например был убран для большей читаемости кода)

Словарь в коде Dart названный theData содержит данные формы. Код объекта словаря выделяется при помощи @observable и вызывает toObservable() для связывания.

Словарь содержит пары ключ/значение для каждого элемента ввода, где ключ является строкой. Значения элементов связанных с value являются строками. HTML ссылается на элементы словаря используя их имена (идентификаторы) в Dart. Например значение элемента выбора цвета связано с theData[‘favoriteColor’] .

Использование selectedIndex в выпадающем меню

Элемент

Ваш e-mail:

Ваше сообщение:

Это самая простая форма, состоящая всего из 3-х полей для ввода данных. Эти поля я назвал: Ваше имя , Ваш e-mail , Ваше сообщение . При необходимости количество полей можно увеличить.

Первых два поля: Ваше имя , Ваш e-mail , описываются тегами:

Ваше имя:

но каждому из них присваивается свое имя, которое называетмя идентификатор : name="name" и name="email" соотвественно.

Третье поле для ввода сообщения описано тегами:

Ваше сообщение:

Данное поле имеет идентификатор: name="mess" .

И естественно имеется две кнопки: Отправить сообщение и Очистить форму .

Данным (информации), которые посетитель заносит в форму, присваиваются соотвествующие идентификаторы: name , email и mess , запоминайте - это важно!

Для удобства оформления вся форма помещена в обычную таблицу, внешний вид, которой можно оформить с помощью , у меня это класс: class="td_border" , его я здесь не привожу, при необходимости допишите сами, на свой вкус.

Файл обработчик.

Вторая часть скрипта состоит из файла обработчика: mail2.php , в который методом POST передаются все данные с соответствующими идентификаторами: name , email и mess . Здесь эти данные помещаются в переменные: $name , $email , $mess .

Создаем файл mail2.php и прописываем в него код Листинга 2 :

Листинг 2

$name = $_POST["name"];
$email = $_POST["email"];
$mess = $_POST["mess"];

$REMOTE_ADDR = $_POST["REMOTE_ADDR"];

if (isset ($name))
{
$name = substr($name,0,20); //Не может быть более 20 символов
if (empty($name))
{
echo "

Не указано имя!!!
";
echo "";
exit;
}
}
else
{
$name = "не указано";
}

if (isset ($email))
{
$email = substr($email,0,20); //Не может быть более 20 символов
if (empty($email))
{
echo "
Не указан e-mail !!!
";
echo "Вернуться и правильно заполнить форму.";
exit;
}
}
else
{
$email = "не указано";
}

if (isset ($mess))
{
$mess = substr($mess,0,1000); //Не может быть более 1000 символов
if (empty($mess))
{
echo "
Сообщение не написано!!!
";
echo "Вернуться и правильно заполнить форму.";
exit;
}
}
else
{
$mess = "не указано";
}

$i = "не указано";
if ($name == $i AND $email == $i AND $mess == $i)
{
echo "Внимание! Произошла ошибка! Вы не заполнили поля сообщения!";
exit;
}

$to = "admin@сайт ";
$subject = "Сообщение с сайта сайт ";
$message = "Имя пославшего письмо: $name .\nЭлектронный адрес: $email\nСообщение: $mess .\nIP-адрес: $_SERVER";
mail ($to,$subject,$message,"Content-type:text/plain; charset = windows-1251 ") or print "Не могу отправить письмо!!!";
echo "
Спасибо за отправку Вашего сообщения.

Для меня это очень важно!

В ближайшее время Вы обязательно получите ответ.";
exit;
?>

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

При незаполненных полях или заполненных некорректно, скрипт вернет посетителю сообщение с указанием конкретной причины.

Обращаю Ваше внимание, что файл: mail2.php обязательно должен иметь расширение .php , т.к. отправка сообщения осуществляется с помощью функции mail PHP .

И естественно ваш Хостинг, должен поддерживать работу PHP. Это в основном касается бесплатных хостингов, хотя в последнее время даже на бесплатных Хостингах практически везде установлен PHP.

В коде Листинга 2 все просто, исправьте все значения, выделенные красным под свои требования, а именно:

пропишите свой адрес электронной почты , на который будут отправляться сообщения (переменная $to );
исправьте тему сообщения (переменная $subject );
обратите внимание на кодировку (charset = windows-1251 ). Кодировку пропишите ту, которая используется на вашем сайте. В русскоязычном интернете кодировка может быть: "utf-8" или "windows-1251" . Если ошибетесь с кодировкой текст в письме будет отображаться неправильно (кракозябрами).

Вот собственно говоря и все, теперь осталось закачать файлы: mail.php и mail2.php и на вашем сайте появится удобная форма для отправки сообщений.

Комментарии к этой статье (уроку):

Спасибо за урок. Вот правду говорят, что все приходит вовремя. Сегодня собиралась искать в инете как сделать форму контакта для сайта, причем независимую. Я так понимаю, что эта подойдет.

Хороший урок! Спасибо!

Спасибо Андрей, хороший урок.

Благодарствую, думаю пригодится

Вам пишет Савин Дмитрий Александрович (SAVIN DMITRY ALEXANDROVICH) ,хочу узнать все по подробнее о формах в CSS , я мало обэтом осведомлен: поподробнее о свойстве action , как я знаю action это ссылка на документ, куда отсылается запрос данных либо сами данные с формы, или что-то в этом роде.method="post" обработка данных в наибольших размерах нежели чем get и т. д.Пожалуйста подробнее о формах у меня в них почти просак.

Здравствуйте Андрей! С уважением к Вам Ахмад. Вот я тоже хочу на сайте создать "Добавить Ваш комментарий" чтобы посетители могли оставить свои Отзывы.Какой код писать мне? Спасибо Вам мне понравилось.Ахмад

Красавчик! очень полезная инфа!

Полезно, то полезно, но н запускаетсяю. После заполнения формы выдается листинг mail2.php

Полезно, то полезно, но не запускается. После заполнения формы выдается листинг mail2.php

Все хорошо работает, только кнопочки не получаются объемными как у автора. Может кто-то подскажет, как сделать объемные кнопочки? Автору спасибо!

а у меня не работает. точнее работает на половину. письмо отправляет, но пустое. данные из майл1 не переходят в майл2

На маил не приходит.В чем подвох? Я не пойму как он без логина и пароля чегонибуть отправит. Это что сервер почтовый типа? Простая форма и все

Спасибо за форму! Работает! У кого не работает - внимательно выполняйте каждый шаг. У меня тоже не сразу всё получилось. Андрей, ещё раз спасибо!

Помогите плиз, форму вставила всё вроде бы Ок, но на почту которую я указала сообщение не доходит, хотя и пишется сообщение отправлено...

Подскажите, а как сделать так, чтоб после отправки/неудачной отправке письма не открывалось новое окно а писалость в старом?

Андрей. Я понимаю, что обработчик вызывается. Я пока не особо в php разбираюсь. Но мне вот чего бы хотелось достич: страница с почтовой формой одна,т.е. после нажатия "Отправить сообщение" новое окно не открывается, а изменяется текущая страница. Т.е я так понимаю она динамическая. Самой пока не додуматься как сделать такое, поэтому спрашиваю совета.

Андрей, подскажите пожалуйста, форма замечательно работает в хроме, а вот с эксплорером проблема. Не доставляются письма и не выводятся сообщения об ошибках или отправке. В чем тут дело? Заранее спасибо

Классный урок! Спасибо!

Спасибо. Всё отлично работает)

в коде нет закрывающих тегов /p. Почему?

Warning: mail(): "sendmail_from" not set in php.ini or custom "From:" header missing in E:Roomsu362571transport-online.netwwwmail.php on line 66 Не могу отправить письмо!!! Во - как получается Как быть??

не могу разобраться с кодировкой. Если прописывать windows-1251 - текст скрипта в сообщении нормальный, сам текст сообщения на почту приходит крокозяброй. а если ставить utf-8 - текст скрипта в сообщении на почте - знаки вопроса, а текст сообщения из формы - нормальный. как сделать, что б и то и то нормальным было?

у меня неработает, но сайт еще не на хостинге, когда помещу-будет?

Все работает, спасибо за скрипт! Поскажите пожалуйста как сделать что бы при нажатии кнопки отправить не открывалась новая страница с обработчиком. Что бы сайт оставался на той странице где и был до нажатии кнопки отправить?

а как сделать поле ввода майл выше?

Если необходимо отправить письма на несколько адресов, просто через запятую дописываете нужные адреса вот так: $to = "admin@сайт, [email protected], [email protected]";

А как сделать чтобы после отправки сообщения была переадресация на другую страницу?

есть $to = "admin@сайт"; вопрос: если необходимиа отправка на 2-а адреса! один из адресов в виде $to = "$email"; другими словами функционал "посоветовать другу" с дублированием послания на мной заданную почту. Спасибо.

У меня почему-то форма обратной связи не работает, причём, никакая не работает. Делает вид, что сообщение отправлено, но на почту оно не приходит.

Здравствйте! Обьясните пожалуйста, почему не работает на хостинге, пишет: "Не могу отправить письмо". А на lockalhost на Денвере работает нормально. В чём проблема?...

почему у меня не одна формнеа не пашет пишет

Большое спасибо. Очень все просто и доступно. Я использовал Ваш пример на сайте gosdogovor.ru. Только немного подточил дизайн под себя и состав полей: http://www.gosdogovor.ru/easuzcon.html. Еще раз спасибо.

Ребят, если вы пытаетесь отправить сообщение с вашего локального сервера, тобишь с сайта еще не размещенном в инете, - у вас ничего не получится. Разместите на каком-то хостинге, и будет вам счастье)

Андрей, а как сделать так стобы при нажатии на кнопку отправлялось сообщение с определенным текстом на определенный адрес? Помогите пожалуйста: [email protected]

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

Наша страница состоит из четырех блоков: шапки (header), меню (menu), содержимого (content) и низа сайта (footer). Для выравнивания по центру страницы мы поместим эти четыре блока в один главный блок (main):

Шапка сайта

Содержимое

Низ сайта

На примере этой структуры рассмотрим несколько вариантов.

Верстка и центрирование резинового сайта

При верстке резинового сайта основной используемой единицей измерения является - %, ведь сайт должен растягиваться по ширине и занимать все свободное пространство.

Следовательно, ширина блоков "header" и "footer" будет составлять 100% ширины экрана. Ширина блока "menu" пусть будет 30%, а блок "content" должен располагаться рядом с блоком "menu", т.е. он должен иметь левое поле (margin-left) шириной равной ширине блока "menu", т.е. 30%.

Чтобы блоки "menu" и "content" располагались рядом, сделаем блок "menu" плавающим и прижмем его к левому краю. Также зададим цвета фона (background) для наших блоков. Теперь запишем все это в таблицу стилей (на странице style.css)

#header{ background:#3e4982; width:100%; height:110px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; } #menu{ background:#6173cb; float:left; width:30%; height:300px; text-align:center; color:#FFFFFF; font-size:18px; padding-top:10px; } #content{ background:#ffffff; margin-left:30%; height:300px; text-align:center; } #footer{ background:#3e4982; clear:both; width:100%; height:50px; text-align:center; color:#FFFFFF; font-size:14px; padding-top:10px; }

Высоту блоков задали условно, чтобы был виден результат. Посмотрите на нашу страницу в браузере:

Если вы будете менять размеры окна браузера, то будет меняться ширина всех блоков. Это не всегда удобно, т.к. при растягивании блока меню возникает пустое место. Поэтому чаще ширину блока "menu" делают фиксированной, давайте и мы так сделаем. Для этого заменим в таблице стилей значения соответствующих свойств:

... #menu{ background:#6173cb; float:left; width:200px; height:300px; } #content{ background:#ffffff; margin-left:200px; height:300px; } ...

Теперь наша страница растягивается более естественно. При резиновой верстке страницы занимают всю ширину экрана, поэтому выравнивание по центру страниц не требуется.

Но если хочется можно сделать так, чтобы ваша страница имела равные отступы слева и справа экрана. Для этого надо добавить стиль блоку "main", который является контейнером для всех остальных блоков:

Теперь наша страница выглядит так:

Верстка и центрирование сайта, фиксированной ширины

В этом случае нам придется задать фиксированные размеры наших блоков:

#main{ width:800px; } #header{ background:#3e4982; width:800px; height:150px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; } #menu{ background:#6173cb; float:left; width:200px; height:300px; text-align:center; color:#FFFFFF; font-size:18px; padding-top:10px; } #content{ background:#ffffff; margin-left:200px; height:300px; text-align:center; } #footer{ background:#3e4982; clear:both; width:800px; height:50px; text-align:center; color:#FFFFFF; font-size:14px; padding-top:10px; }

Сейчас наша страница прижата к левому краю экрана.

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

Сделаем так: зададим тегу "body" ширину в 800 пикселов (как и у блока "main") и левый отступ (padding-left) в 50%. Тогда все содержимое блока "main" будет отображаться в правой части экрана (т.е. от середины вправо):

Чтобы наш блок "main" располагался посередине экрана, надо чтобы его середина совпадала с серединой тега "body". Т.е. надо сместить блок "main" влево на половину своего размера. Ширина блока "main" - 800 пикселов, значит надо задать ему свойство "margin-left:-400px". Да, это свойство может принимать отрицательные значения, тогда левое поле уменьшается (т.е. сдвигается влево). А именно это нам и нужно.

Теперь таблица стилей выглядит так:

body{ width:800px; padding-left:50%; } #main{ width:800px; margin-left:-400px; } #header{ background:#3e4982; width:800px; height:150px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; } #menu{ background:#6173cb; float:left; width:200px; height:300px; text-align:center; color:#FFFFFF; font-size:18px; padding-top:10px; } #content{ background:#ffffff; margin-left:200px; height:300px; text-align:center; } #footer{ background:#3e4982; clear:both; width:800px; height:50px; text-align:center; color:#FFFFFF; font-size:14px; padding-top:10px; }

А наша страница в браузере располагается ровно посередине:

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

Удачи Вам в ваших творческих поисках!

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

Да, для вертикального выравнивания в CSS есть специальное свойство vertical-align с множеством значений . Однако на практике оно работает совсем не так, как ожидается. Давайте попробуем в этом разобраться.

Сравним следующие подходы. Выравнивание с помощью:

таблицы,
отступов,
line-height ,
растягивания,
отрицательного margin ,
transform ,
псевдоэлемента,
flexbox .

В качестве иллюстрации рассмотрим следующий пример.

Есть два элемента div , при этом один из них вложен в другой. Дадим им соответствующие классы − outer и inner .

Задача состоит в том, чтобы выровнять внутренний элемент по центру внешнего элемента.

Для начала рассмотрим случай, когда размеры внешнего и внутреннего блока известны . Добавим внутреннему элементу правило display: inline-block , а внешнему − text-align: center и vertical-align: middle .

Нпомню, что выравнивание применяется только к элементам, которые имеют режим отображения inline или inline-block .

Зададим блокам размеры, а также фоновые цвета, чтобы видеть их границы.

Outer { width: 200px; height: 200px; text-align: center; vertical-align: middle; background-color: #ffc; } .inner { display: inline-block; width: 100px; height: 100px; background-color: #fcc; }
После применения стилей мы увидим, что внутренний блок выровнялся по горизонтали, а по вертикали нет:
http://jsfiddle.net/c1bgfffq/

Почему так произошло? Дело в том, что свойство vertical-align влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда оно применяется к ячейкам таблицы). Поэтому применение данного свойства к внешнему элементу ничего не дало. Более того, применение этого свойства к внутреннему элементу также ничего не даст, поскольку строчные блоки (inline-block) выравниваются по вертикали относительно соседних блоков, а в нашем случае у нас один строчный блок.

Для решения данной проблемы существует несколько техник. Ниже подробнее рассмотрим каждую из них.

Выравнивание с помощью таблицы

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

http://jsfiddle.net/c1bgfffq/1/

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

Первый минус можно частично убрать, заменив теги table и td на div и задав табличный режим отображения в CSS.

.outer-wrapper { display: table; } .outer { display: table-cell; }
Тем не менее внешний блок все равно останется таблицей со всеми вытекающими из этого последствиями.

Выравнивание с помощью отступов

Если высоты внутреннего и внешнего блока известны, то выравнивание можно задать с помощью вертикальных отступов у внутреннего блока, используя формулу: (H outer – H inner) / 2.

Outer { height: 200px; } .inner { height: 100px; margin: 50px 0; }
http://jsfiddle.net/c1bgfffq/6/

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

Выравнивание с помощью line-height

Если известно, что внутренний блок должен занимать не более одной строки текста, то можно воспользоваться свойством line-height и задать его равным высоте внешнего блока. Поскольку контент внутреннего блока не должен переноситься на вторую строку, рекомендуется также добавить правила white-space: nowrap и overflow: hidden .

Outer { height: 200px; line-height: 200px; } .inner { white-space: nowrap; overflow: hidden; }
http://jsfiddle.net/c1bgfffq/12/

Также данную технику можно применять и для выравнивания многострочного текста, если для внутреннего блока переопределить значение line-height , а также добавить правила display: inline-block и vertical-align: middle .

Outer { height: 200px; line-height: 200px; } .inner { line-height: normal; display: inline-block; vertical-align: middle; }
http://jsfiddle.net/c1bgfffq/15/

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

Выравнивание с помощью "растягивания"

Данный способ можно применять, когда высота внешнего блока неизвестна, но известна высота внутреннего.

Для этого нужно:

задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное;
добавить внутреннему блоку правила top: 0 и bottom: 0 , в результате чего он растянется на всю высоту внешнего блока;
установить значение auto для вертикальных отступов внутреннего блока.

.outer { position: relative; } .inner { height: 100px; position: absolute; top: 0; bottom: 0; margin: auto 0; }
http://jsfiddle.net/c1bgfffq/4/

Суть этой техники заключается в том, что задание высоты для растянутого и абсолютно спозиционированного блока заставляет браузер вычислять вертикальные отступы в равном соотношении, если их значение установлено в auto .

Выравнивание с помощью отрицательного margin-top

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

Нужно задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное. Затем необходимо сдвинуть внутренний блок вниз на половину высоты внешнего блока top: 50% и поднять вверх на половину собственной высоты margin-top: -H inner / 2.

Outer { position: relative; } .inner { height: 100px; position: absolute; top: 50%; margin-top: -50px; }
http://jsfiddle.net/c1bgfffq/13/

Минус данного способа - должна быть известна высота внутреннего блока.

Выравнивание с помощью transform

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

Outer { position: relative; } .inner { position: absolute; top: 50%; transform: translateY(-50%); }
http://jsfiddle.net/c1bgfffq/9/

Почему в предыдущем способе нельзя было задать значение в процентах? Так как процентные значения свойства margin вычисляются относительно родительского элемента, значение в 50% равнялось бы половине высоты внешнего блока, а нам нужно было поднять внутренний блок на половину его собственной высоты. Для этого как раз подходит свойство transform .

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

Выравнивание с помощью Flexbox

Самый современный способ вертикального выравнивания это использовать Flexible Box Layout (в народе известен как Flexbox). Данный модуль позволяет гибко управлять позиционированием элементов на странице, располагая их практически как угодно. Выравнивание по центру для Flexbox − очень простая задача.

Внешнему блоку необходимо задать display: flex , а внутреннему − margin: auto . И это все! Красиво, правда?

Outer { display: flex; width: 200px; height: 200px; } .inner { width: 100px; margin: auto; }
http://jsfiddle.net/c1bgfffq/14/

Минус данного способа − Flexbox поддерживается только современными браузерами.

Какой способ выбрать?

Нужно исходить из постановки задачи:

Для вертикального выравнивания текста лучше использовать вертикальные отступы или свойство line-height .
Для абсолютно позиционированных элементов с известной высотой (например, иконок) идеально подойдет способ с отрицательным свойством margin-top .
Для более сложных случаев, когда неизвестна высота блока, нужно использовать псевдоэлемент или свойство transform .
Ну а если вам повезло настолько, что не нужно поддерживать старые версии браузера IE, то, конечно, лучше использовать Flexbox .

Теги: Добавить метки

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

Начнем с общего описания задачи.

Задача вертикального центрирования

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

Большинство людей, используя свойство text-align: , обращаются к свойству vertical-align для центрирования по вертикали. Все выглядит достаточно логично. Если вы использовали табличные шаблоны, то наверняка активно использовали атрибут valign , который укрепляет веру в то, что vertical-align правильный путь к решению задачи.

Но атрибут valign работает только в ячейках таблицы. А свойство vertical-align очень на него похоже. Оно также действует на ячейки таблицы и некоторые строчные элементы.

Значение свойства vertical-align действует по отношению к родительскому строчному элементу.

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

Но, к сожалению, свойство vertical-align не действует в блочных элементах (например, параграфах внутри элемента div ). Такое положение может привести к мысли, что решения задачи вертикального выравнивания нет.

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

Метод line-height

Данный метод работает, когда вы хотите центрировать вертикально одну строчку текста. Все что нужно сделать - это задать высоту строки больше, чем размер шрифта.

По умолчанию свободное пространство будет распределено равномерно сверху и снизу текста. И строка будет отцентрирована вертикально. Часто высоту строки делают равной высоте элемента .

HTML:

Нужный текст

CSS:

#child { line-height: 200px; }

Данный метод работает во всех браузерах, хотя использовать его можно только для одной строки. Значение 200 px в примере выбрано произвольно. Можно использовать любые величины больше размера шрифта текста.

Центрирование изображения с помощью line-height

А что если содержание представляет собой картинку? Будет ли выше описанный метод работать? Ответ заключается в еще одной строчке кода CSS.

HTML:

CSS:

#parent { line-height: 200px; } #parent img { vertical-align: middle; }

Значение свойства line-height должно быть больше высоты изображения.

Метод таблиц CSS

Выше упоминалось, что свойство vertical-align применяется для ячеек таблицы, где отлично действует. Мы можем вывести наш элемент как ячейку таблицы и использовать для него свойство vertical-align для вертикального центрирования содержания.

Примечание: Таблица CSS не является тем же, что и HTML таблица.

HTML:

Содержание

CSS:

#parent {display: table;} #child { display: table-cell; vertical-align: middle; }

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

В отличие от описанного выше метода, в данном случае содержание может быть динамическим, так как элемент div будет изменять размер в соответствии со своим содержанием.

Недостатком данного метода является то, что он не работает в старых версиях IE. Приходится использовать свойство display: inline-block для вложенного контейнера.

Абсолютное позиционирование и отрицательные поля

Данный метод также работает во всех браузерах. Но он требует, чтобы центрируемому элементу задавалась высота.

В коде примера выполняется одновременное центрирование по горизонтали и вертикали:

HTML:

Содержание

CSS:

#parent {position: relative;} #child { position: absolute; top: 50%; left: 50%; height: 30%; width: 50%; margin: -15% 0 0 -25%; }

Сначала устанавливаем тип позиционирования элементов. Затем для вложенного элемента div устанавливаем значения свойств top и left равными 50%, что соответствует центру родительского элемента. Но в центр попадает левый верхний угол вложенного элемента. Поэтому нужно поднять его вверх (на половину высоты) и сдвинуть влево (на половину ширины), и тогда центр совпадет с центром родительского элемента. Так что знание высоты элемента в данном случае необходимо. Затем задаем элементу отрицательные значения верхнего и левого полей равными половине высоты и ширины соответственно.

Данный метод работает не во всех браузерах.

Абсолютное позиционирование и растягивание

В коде примера выполняется центрирование по вертикали и горизонтали.

HTML:

Содержание

CSS:

#parent {position: relative;} #child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 50%; height: 30%; margin: auto; }

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

Установка автоматического формирования полей по всем сторонам приведет к заданию равных значений по всем 4 сторонам и выведет наш вложенный элемент div по центру родительского элемента.

К сожалению, данный метод не работает в IE7 и ниже.

Равные отступы сверху и снизу

В данном методе явно задаются равные отступы сверху и снизу от родительского элемента.

HTML:

Содержание

CSS:

#parent { padding: 5% 0; } #child { padding: 10% 0; }

В коде CSS примера отступы сверху и снизу задаются для обоих элементов. Для вложенного элемента установка отступов будет служить для вертикального центрирования. А отступы родительского элемента будут центрировать вложенный элемент в нём.

Для динамического изменения размеров элементов используются относительные единицы измерения. А для абсолютных единиц измерения придется проделать расчеты.

Например, если родительский элемент имеет высоту 400 px, а вложенный элемент - 100px, то необходимы отступы 150px сверху и снизу.

150 + 150 + 100 = 400

Использование % позволяет расчеты оставить браузеру.

Данный метод работает везде. Обратной стороной является необходимость в расчетах.

Примечание: Данный метод работает за счет установки внешних отступов элемента. Вы можете также использовать поля внутри элемента. Решение о применении полей или отступов нужно принимать в зависимости от специфики проекта.

Плавающий div

Данный метод использует пустой элемент div , который плавает и помогает управлять положением нашего вложенного элемента в документе. Обратите внимание, что плавающий div размещается до нашего вложенного элемента в коде HTML.

HTML:

Содержание

CSS:

#parent {height: 250px;} #floater { float: left; height: 50%; width: 100%; margin-bottom: -50px; } #child { clear: both; height: 100px; }

Мы смещаем пустой div влево или вправо и задаем для него высоту 50% родительского элемента. Таким образом, он будет заполнять верхнюю половину родительского элемента.

Так как данный div является плавающим, то он удаляется из обычного потока документа, и нам нужно отменить обтекание текстом для вложенного элемента. В примере используется clear: both , но вполне достаточно использовать тоже направление, что и смещение плавающего пустого элемента div .

Верхняя граница вложенного элемента div находится непосредственно под нижней границей пустого элемента div . Нам нужно сместить вложенный элемент вверх на половину высоты плавающего пустого элемента. Для решения задачи используется отрицательное значение свойства margin-bottom для плавающего пустого элемента div .

Данный метод также работает во всех браузерах. Однако его использование требует дополнительного пустого элемента div и знаний о высоте вложенного элемента.

Заключение

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

Содержимое по центру страницы. CSS - Выравнивание по центру

Общая информация о формах

Пример slambook в частности

Запуск сервера

Отправка данных формы

Отмена стандартного обработчика

Настройка и отправка POST запроса

Ожидание ответа от сервера

Сброс данных из формы

Создание серверной части и прослушивание порта

Немного о фьючерсах.

Обработка запросов OPTIONS

Настройка CORS заголовков

Обработка POST запросов

Двухсторонняя привязка данных используя Polymer

Использование атрибута value в любом элементе ввода

Использование selectedIndex в выпадающем меню

Файл обработчик.

Выравнивание с помощью таблицы

Выравнивание с помощью отступов

Выравнивание с помощью line-height

Выравнивание с помощью "растягивания"

Выравнивание с помощью отрицательного margin-top

Выравнивание с помощью transform

Выравнивание с помощью Flexbox

Какой способ выбрать?

Задача вертикального центрирования

Метод line-height

HTML:

CSS:

Центрирование изображения с помощью line-height

HTML:

CSS:

Метод таблиц CSS

HTML:

CSS:

Абсолютное позиционирование и отрицательные поля

HTML:

CSS:

Абсолютное позиционирование и растягивание

HTML:

CSS:

Равные отступы сверху и снизу

HTML:

CSS:

Плавающий div

HTML:

CSS:

Заключение

Возможно вам будет интересно:

Категории

Последние статьи

Реклама