Выравнивание подписей к полям ввода

Приветствую вас, уважаемый читатель! Сегодня я приготовил для вас небольшой видеоурок, посвященный верстке полей ввода и кнопок, формируемых тегом <input>. Вся соль данного видео заключается в том, что я покажу вам, как правильно сделать выравнивание подписей к полям <input> на все случаи жизни.

Все случаи жизни:

1. Маленький размер шрифта подписи, а рядом с ней большая кнопка.
2. Маленький размер шрифта подписи, а рядом уже не кнопка, а поле ввода.
3. Аналогичные случаи, но теперь маленькие и большие поменялись местами.
4. И, наконец-то, случай всеобщего равенства.

Так вот, проблема заключается в IE 6 и в IE 7. Данные браузеры имеют свою точку зрения на верстку описанных жизненных ситуаций, в отличие от нормальных браузеров.

Кстати, я решил причислить IE 8 к нормальным браузерам.

Возможно, часть уважаемых верстальщиков начнет бить себя пяткой в грудь и кричать: “Под IE 6 верстать не надо, это мертвый старый браузер”.

Отвечаю – надо!

Браузер, конечно, старый и дурацкий. Но это не освобождает нас от ответственности перед несколькими сотнями посетителей сверстанного сайта, которые серфят просторы интернета по старинке, используя предустановленный в XP IE 6. Эту проблему я раскрываю в первой части видеоурока.

А во второй части будем верстать.

Ну что же вы ждете, скорее к просмотру видео!

Читать полностью »

Настройка Apache. Настройка MySQL. Настройка PHP. Или локальная среда разработки своими руками

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

К тому же, на сервере хостинг-провайдера стоит не пакет разработки, а родные дистрибутивы Apache, MySQL и PHP. Буквально на днях я столкнулся с ситуацией, когда создаваемый сайт нормально работал в установленной и сконфигурированной в ручную среде разработки, а под Денвером не работал вообще.

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

Лично у меня присутствует какой-то шизофренический страх перед тем, что сборщик пакета локальной разработки залез своими руками в дистрибутив, что-то там поправил по своему усмотрению, наковырял, а может быть и засунул вирусняк (поэтому я не пользуюсь различными твикнутыми сборками Windows и сам настраиваю локальную среду разработки).

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

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

Установка и настройка MySQL. Точно такая же ситуация. Автор — я сам.

Пару слов для новичков. Зачем вообще нужна среда локальной разработки. Если вы разрабатываете сайт, который будет состоять из нескольких статических HTML-страниц, то среда разработки — это всего-на-всего удобство при просмотре сайта в браузере в процессе отладки. Удобно заходить на разрабатываемый сайт по доменному имени. Вот кажется и все преимущества.

В случае разработки динамического сайта (применение php-скриптов и MySQL-баз данных), а так же при работе с движками, локальная среда разработки — это необходимость. Т.к., в этом случае, вам нужен инструмент, обрабатывающий php-скрипты и SQL-запросы.

Ну что же, поехали!

Читать полностью »

Резиновая верстка на div-ах

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

Ранее рассмотренная нами фиксированная модель превращается в резиновую всего-на-всего заменой пикселной ширины блока <div id=”wrapper”> на процентную. Таким образом, ширина сверстанного сайта будет изменяться в зависимости от размера окна браузера.

В видеоуроке я установил ширину блока <div id=”wrapper”> в 100% от ширины окна браузера. Можно задавать и меньшее количество процентов, тогда сайт будет занимать лишь часть окна браузера.

Без определенных стилей выравнивания блока сайт съедит в левую часть окна. И это, на мой взгляд, некрасиво. Хочется выравнять сайт посередине. Вот и вопрос, «как же это сделать?». А вот и ответ.

Читать полностью »