Примеры разметки на основе Grail Gordi
Прежде всего отметим общие моменты для всех примеров на основе "Grail Gordi".
- Ширина области контента, регулируется по min/max-width: который указан для всей страницы, ширина колонок навигации фиксирована и имеет стандартную ширину равную 200px.
- Макеты могут быть легко переведены в фиксированную разметку, простым указанием для body {width:XXXpx;}.
- Для данного класса разметки невозможно создать web-страницу со сто процентной высотой.
- Область контента по html-коду выводится раньше колонок навигации.
К недостаткам можно отнести отсутствие вертикальных линий разделяющих колонки навигации в примерах:
Для всех примеров цвет колонок навигации может быть только одного цвета.
Примеры разметки относящиеся к классу "кирпич".
Колонки могут иметь индивидуальную фоновую заливку. Вертикальные линии разделяющие колонки навигации друг от друга и от области контента, отсутствуют.
Модернизация нескольких примеров из предыдущей секции.
Введение дополнительного слоя (блока), устраняет отсутствие вертикальных линий между колонками навигации.
В этой секции примеров рассмотрена возможность для каждой колонки получить индивидуальную цветную окантовку.
К сожалению, это привело к увеличению html-кода, но еще одним плюсом является то, что и фоновая заливка колонок, тоже может быть индивидуальной.
Дан пример создания контейнера, который всегда находится внизу одной из колонок центральной части макета. По аналогии легко портируется в разметку с иным расположением колонок.
Все приведенные примеры разметки легки для изучения - html-код и css максимально оптимизированы и любой интересующийся этой областью верстки, даже не обладая достаточными знаниями и опытом, при известном желании, сможет найти и взять, что-то полезное для себя.