Макеты без таблиц с использованием CSS

Есть много причин, чтобы не использовать таблицы для разметки. Одна из наиболее частых причин, по которой люди продолжают использовать их, заключается в том, что с CSS трудно создавать макеты. Хотя создание сценариев CSS влечет за собой кривую обучения, когда вы понимаете, как сделать макет CSS, вы можете быть удивлены тем, насколько легко это может быть. И как только вы узнаете, вы обратились ко второй наиболее распространенной причине, по которой люди отказываются от использования CSS — «это быстрее писать таблицы». Это быстрее, потому что вы знаете таблицы, но как только вы изучаете CSS, вы можете быть столь же быстры с этим.

Браузерная поддержка позиционирования CSS

CSS позиционирование хорошо поддерживается в все современные браузеры. Если вы не создаете сайт для Netscape 4 или Internet Explorer 4, у ваших читателей не должно возникнуть никаких проблем с просмотром ваших веб-страниц с позицией CSS. 

Переосмысление того, как вы создаете страницу

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

Разные сайты имеют разную структуру. Чтобы создать эффективную страницу, оцените структуру любой данной страницы, прежде чем присваивать ей контент. Пример страницы может включать пять отдельных разделов:

1. заголовок. Здесь размещается баннерная реклама, название сайта, навигационные ссылки, название статьи и многое другое.
2. Правая колонка. Это правая сторона страницы с окном поиска, рекламой, видеобоксом и областями покупок.
3. содержание. Текст статьи, поста в блоге или корзины покупок — мясо и картошка на странице.
4. Встроенные объявления. Рекламные объявления встроены в содержание.
5. нижний колонтитул. Нижняя навигация, информация об авторе, информация об авторских правах, рекламные баннеры и ссылки.

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

Определение ваших разделов контента

После того, как вы определили различные области содержимого вашего сайта, вам нужно записать их в свой HTML. Хотя вы, как правило, можете размещать свои разделы в любом порядке, рекомендуется сначала разместить наиболее важные части своей страницы. Этот подход также поможет в поисковой оптимизации.

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

Для макета с тремя столбцами определите три раздела: левый столбец, правый столбец и содержимое.

Эти разделы будут созданы с использованием

СТАТЬЯ

элемент для содержания и два

РАЗДЕЛ

элементы для двух столбцов. У всего также будет атрибут, идентифицирующий это. Когда вы используете

Я бы

атрибут, вы должны назначить уникальное имя для каждого

Я бы

Позиционирование контента

Используя CSS, определите положение для ваших идентификаторов. Сохраните информацию о вашей позиции в вызове стиля следующим образом:

#content {
} 

Содержимое этих элементов будет занимать как можно больше места, а именно 100 процентов ширины текущего местоположения или страницы. Чтобы повлиять на местоположение раздела, не увеличивая его до фиксированной ширины, измените

набивка

или

поле

свойства.

Для этого макета установите для двух столбцов фиксированную ширину, а затем установите их абсолютное положение, чтобы они не зависели от того, где они находятся в HTML.

# left-column {
положение: абсолютное;
слева: 0;
ширина: 150 пикселей;
поле слева: 10 пикселей;
маржинальная вершина: 20 пикселей;
цвет: # 000000;
обивка: 3px;
}
# right-column {
положение: абсолютное;
слева: 80%;
верх: 20 пикселей;
ширина: 140 пикселей;
отступ слева: 10 пикселей;
z-индекс: 3;
цвет: # 000000;
обивка: 3px;
} 

Затем для области содержимого установите поля справа и слева, чтобы содержимое не перекрывало два внешних столбца.

#content {
верх: 0px;
маржа: 0px 25% 0 165px;
обивка: 3px;
цвет: # 000000;
} 

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