HTML

Выравниваем блок по центру страницы

Очень часто стоит задача выровнять блок по центру страницы / экрана, да ещё и так, чтобы без ява-скрипта, без задания жёстких размеров или отрицательных отступов, ещё чтобы и скроллбары работали у родителя, если блок превышает его размеры. В сети ходят достаточно много однообразных примеров как выровнять блок по центру экрана. Как правило большинство из них основаны на одних принципах. Ниже представлены основные способы решения задачи, их плюсы и минусы. Чтобы понимать суть примеров, рекомендую уменьшить высоту / ширину окошка Result в примерах по указанным ссылкам. Вариант 1. Отрицательный отступ. Позиционируем блок атрибутами top и left на 50%, и заранее зная…

HTML

Формы в HTML

В процессе навигации по сайтам пользователь, в основном, только щёлкает по ссылкам чтобы перемещаться по веб-страницам. Но понятно, что пользователю иногда требуется обеспечить собственные поля ввода. Эти виды взаимодействия включают в себя: • регистрацию и вход на сайтах; • ввод личной информации (имя, адрес, данные кредитной карты и др.); • фильтрацию контента (с помощью выпадающих списков, флажков и др.); • выполнение поиска; • загрузку файлов. Чтобы приспособиться к этим потребностям, HTML предлагает интерактивные элементы управления формы: • текстовые поля (для одной или нескольких строк); • переключатели; • флажки; • выпадающие списки; • виджеты для загрузки; • кнопки отправки. Эти элементы…

Уроки HTML

Урок – 6 – Самый простой слайдер

Тут все очень просто, нужно просто добавить UL-список в самое начало сразу после тега body. В списке всего три строки li, то есть слайдер рассчитан на 3 изображения, если нужно больше, то первым шагом будет добавление еще нужного количества строк. Двигаемся дальше. CSS стили Тут наверное самая основная часть работы, так как от CSS, зависит то как будет работать наш слайдер. Открываем файл style.css вашего сайта и добавляем в него следующий код. .body_slides { list-style:none; margin:0; padding:0; z-index:-2; background:#000; } .body_slides, .body_slides:after { position: fixed; width:100%; height:100%; top:0px; left:0px; } .body_slides:after { content: ' '; background: transparent url(images/pattern.png) repeat top…

Add your widget here