Ахиллесова пята нередко укрыта в голове.
Лешек Кумор

Примеры разметки на основе display

Название ссылки ведущей на страницу с примером, определяет разметку, скажем - "Left-Right-Content" расшифровывается так: визуальное расположение колонок на web-странице - "левая колонка навигации-правая колонка навигации-область контента".

Ширина области контента, регулируется по min/max-width: который указан для всей страницы, ширина колонок навигации фиксирована и имеет стандартную ширину равную 200px.

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

Для разметки на основе display:table; визуальное представление колонок центральной части web-страницы, соответствует html-коду:

table

display:table;

К недостаткам можно отнести две вещи:

  • SEO
  • Браузеры IE6(7)

Освежить в памяти почему, можно здесь.

По мнению автора, разметке подобного рода, принадлежит будущее.

Для разметки на основе display:inline...; область контента по html-коду, выводится раньше колонок навигации:

inline

display:inline...

Примеры разметки относятся к классу "кирпич", выполнены чисто из спортивного интереса, как говориться, чтобы было.

Как они себя поведут в реальном проекте при наполнении элементами web-страниц, неизвестно.

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

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

Оставить комментарий.