Порядок колонок в bootstrap
Сразу Выстроить колонки в нужном порядке в bootstrap бывает немного затруднительно. Обычно документация по bootstrap довольно детальна, но в секции Column ordering не хватает несколько деталей.
Метка: блочная верстка
Понимание Twitter Bootstrap 3
Версия 3 от Twitter Bootstrap претерпела существенные изменения по сравнению с предыдущими версиями. Это один из первых фреймворков, созданный по принципу mobile-first. Можно сказать, что Twitter Bootstrap является одним из лучших фреймворков для проектирования адаптивного веб-дизайна.
Выпадающий блок из блока с overflow hidden
Итак, есть задача создать прокручиваемое меню (с фиксированной высотой и шириной) с подменю, причем подменю должно появляться,
когда мышка наведена на родительский пункт меню. Или, другими словами, наша задача сделать так, чтобы блок выпадающий из блока с overflow hidden был виден.
Пятиминутный обзор всех новых элементов HTML5
HTML5 ввел много новых элементов HTML-разметки. В этой статье мы рассмотри все новые элементы разметки в HTML5.
13 отзывчивых CSS сеток
Когда дело доходит до выбора сетки появляется множество вариантов. Ниже приведены отзывчивые сетки CSS (и не только), которые вы свободно можете использовать в своих проектах. Эти CSS-сетки помогут вам быстро создать прекрасный отзывчивый сайт. В конце статьи приведена таблица, в которой сравниваются описанные ниже сетки.
Проценты для высоты или вертикальных свойств в CSS
Я не думаю, что вы часто используете проценты для высоты или для вертикальных свойств. Даже, честно говоря, сам затрудняюсь сказать, когда я в последний раз использовал процентные значения для верхнего/нижнего поля(margin) или отступа(padding). Даже для высоты, вспоминается лишь 100% значение, но ничего больше.
Полное руководство по использованию отрицательных полей margin в CSS
Есть несколько точек зрения на использование отрицательных полей (margin) в CSS,
как резко отрицательное, так и сугубо положительное.
Редизайн сайта dnzl.ru, переход на адаптивную верстку
Сайт dnzl.ru переведен на адаптивную верстку, как вы можете видеть ниже, изменения коснулись не только тегов, но и внешнего вида сайта.
Перестаем использовать overflow:hidden в качестве clearfix хака
Некоторое время я размышлял об этом, и, наконец, пришло время перестать использовать объявление overflow: hidden (и overflow: auto) в качестве «очищающего» (clearfix) хака.
Отзывчивый веб-дизайн: макеты и медиа-запросы
Сегодня многие клиенты хотят сайт совместимый с мобильными устройствами, что наиболее перспективно. Создавать отдельную версию сайта под каждое устройство неразумно не только из-за огромного количества разнообразных девайсов, но и потому, что мы просто не имеем возможности предсказывать будущее. Вот тут и приходит на помощь концепция отзывчивого дизайна.
Форматирование блоков в CSS: вертикальное и горизонтальное
В статье приведены основные моменты по горизонтальному и вертикальному форматированию блоков в CSS. Если вам какой-либо пункт показался непонятным, попробуйте реализовать его на практике. Также оставляйте комментарии, при необходимости смогу привести скрин или код по любому нижеприведенному тезису.
Резиновые сетки для верстки (адаптивный веб-дизайн)
Примеры резиновых (эластичных) сеток, так называются сетки, которые изменяют свою ширину при изменении размеров окна браузера.
Простая модульная сетка
Подавляющее большинство сайтов в той или иной мере используют сетку.
Центрируем несколько блочных элементов (DIV) при помощи CSS
Может возникнуть такая ситуация, когда вам понадобиться центрировать несколько блочных элементов
Резиновые макеты (разметка) для вашего сайта
Все эти разметки содержат в себе несколько колонок, внутри которых расположен контент.
Разметка для резинового по ширине макета
По-моему, лучшим вариантом является создание сайта с резиновой шириной, этим мы приспособим сайт к большинству типов мониторов.
Свойство overflow и плавающие (float) блоки
При кодировании на плавающих блоках широко распространена следующая проблема - обертывающий блок расширяется не на всю высоту плавающего элемента.
CSS 100% высота
Я всегда сталкиваюсь с затруднениями, когда необходимо растянуть блок на 100% высоты страницы. Итак, почему бы не найти кроссбраузерное решение по растягиванию блока на всю высоту страницы?
Конфликты полей (margin) в CSS
Математика в CSS не работает.
Как сверстать макет при помощи CSS (таблицы стилей)
Давайте трансформируем визуальный концепт в работающий HTML/CSS макет.
Как сверстать psd-макет при помощи HTML
Давайте трансформируем визуальный концепт в работающий HTML/CSS макет.
CSS Центрирование в неизвестности
Когда речь заходит о центрировании в веб-дизайне, то чем больше информации известно о центрируемом элементе и его элементе-родителе, тем проще это центрирование выполнить.
Одностраничное портфолио на jQuery
В этой статье я покажу, как можно сделать при помощи jquery красивый одностраничный сайт.
Навигация HTML | Как сделать?
Навигационная панель неизбежный элемент любого сайта.
Свойство CSS Float. Плавающие элементы. Преодолеваем проблемы.
Как правило, когда сталкиваешься с плавающими элементами, возникают одни и те же проблемы.
Отрицательное поле (margin) и верстка в три колонки
Правый столбец сайта расположим при помощи отрицательного поля.
Центрируем элемент по вертикали, используя CSS
У дизайнера иногда возникает вопрос: как центрировать элементы по вертикали?
Как расположить элементы по горизонтали, используя css
В статье показано, как можно расположить элементы по горизонтали, используя CSS
Структурные теги HTML5
Спецификация HTML5 добавила весьма ограниченное число тегов для структурирования вашей разметки.
Сброс стилей от Эрика Мейера
Многие используют модифицированную версию популярного сброса (RESET) от Эрика Мейера:
Создание центрированной горизонтальной навигации
В любом случае, существует способ создания центрированной горизонтальной навигации без знания явной ширины ...
Margin (поле), padding (подложка) и блочная модель CSS
В первой части ‘основы CSS’ мы будем говорить о полях (margins), подложках (padding) и блочной модели.
Горизонтальное выдвижное меню CSS
В этой статье я покажу, как сделать небольшой изящный выдвижной эффект к элементам горизонтального меню.
CSS позиционирование
В этой статье будут рассмотрены различные свойства, которые применяются для позиционирования элементов.
Создаем равные по высоте колонки. Методы на основе изображения и блоков
Самый древний метод, который позволяет создать равные по высоте колонки.
Две колонки на всю ширину окна браузера с помощью CSS
Мы хотим сделать страницу с двумя колонками, каждая должна иметь свой цвет, причем их цвет должен охватывать всю ширину окна браузера.