5 техник резиновой верстки сайта

резиновая верстка сайта

От автора: 5 бесплатных уроков по резиновой верстке сайта. Это прям-таки то, что никак не дает покоя всем тем, кто имеет свой сайт или только планирует его создать. В общем – мастхэв (должен изучить абсолютно каждый, кто не хочет, чтобы его сайты разлетались как им вздумается при различных разрешениях экрана). Никакой воды, лишь практический опыт.

Техника 1. Ширина элемента и свойство float.

Тема: HTML&CSS

Время ролика: 00:22:38

Cложность: средняя

Прикладные программы: Dreamweaver CS4

Автор: Бернацкий Андрей

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

Техника 2. Создание резинового меню, используя списки.

Тема: HTML&CSS

Время ролика: 00:16:13

Cложность: средняя

Прикладные программы: Dreamweaver CS4

Автор: Бернацкий Андрей

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

Техника 3. Выстраиваем элементы позиционированием.

Тема: HTML&CSS

Время ролика: 00:23:39

Cложность: средняя

Прикладные программы: Dreamweaver CS4

Автор: Бернацкий Андрей

Часто возникают ситуации, когда нужно сделать перекрытие элементов. Или заставить элемент располагаться, например, в правом нижнем углу, независимо от того, как расположены окружающие блоки. Данную проблему лучше всего решает свойство position. В уроке мы разберемся с позиционированием элементов. Поработаем над перекрытием элементов с помощью свойства z-index. Выясним необходимое условие для работы свойства z-index.

Техника 4. Центрирование элемента переменной ширины.

Тема: HTML&CSS

Время ролика: 00:11:45

Cложность: средняя

Прикладные программы: Dreamweaver CS4

Автор: Бернацкий Андрей

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

Техника 5. Центрирование элемента переменной ширины.

Тема: HTML&CSS

Время ролика: 00:16:00

Cложность: средняя

Прикладные программы: Dreamweaver CS4

Автор: Бернацкий Андрей

Иногда возникает задача, когда нужно расположить несколько блоков по всей ширине родительского блока. То есть первый блок должен быть у самого левого края, последний блок должен быть у правого края. А расстояния между остальными элементами чтобы было одинаковым. Такого несложно добиться при верстке макета фиксированной ширины. Но мы усложним задачу и решим ее в уроке для резинового блока.

получить мини-курс

Ваши пожелания, отзывы и рекомендации оставляйте в комментариях!

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (4)

  1. Наташа

    Я подписалась на миникурс 5 секретных техник резиновой верстки, но так и не получила запрос на подтверждение подписки (папку спам тоже смотрела).

  2. Юрий

    Создал при помощи ваших уроков заготовку для сайта. Использовал технику резиновой верстки №1 (для блоков) и №2 (для меню). Все было хорошо до тех пор, пока не решил выровнять высоту колонок, для чего подключил библиотеку jQuery и файл equalHeight.js. В результате контент, размещенный в блоках стал неуправляемым: при уменьшении масштаба он выходит за нижние границы колонок и «заползает под футер» (забыл проинформировать, что заготовка содержит футер и хедер с картинкой, которые удалось сделать так же «резиновыми»). Даже не знаю как можно решить эту проблему (без применения других способов выравнивания высоты колонок)… Если возможно, то помогите, пожалуйста.

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

    • Андрей Кудлай

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree