Рубрика: Шпаргалки CSS

Блочная верстка по-быстрому

Несколько простых приемов.

1. Создаем див, назначаем ему фон.  Вставляем в него другой див в котором будет контент. Ему ставим стиль relative и z-index. Теперь под контент можно подсовывать разные другие картинки. Между фоном и текстом. Чем больше число z индекса тем слой выше.

Если родительский див релативный, то в него можно ставить див с абсолютной позицией — отсчет начнется от края релативного дива.

А вот такая конструкция:

 обеспечит нам див #page как контейнер для всего контента по центру.

А display: inline-block; нужно чтобы контейнер растягивался вместе с содержимым.

И недурно бы отделить теперь фон:

Этот див вставляем внутрь #page.

Далее — див контент.

а в нем класс post релативный, для возможности подводить под него картинки, например.

Сайдбар.

С ним такая же песня:

С шапкой и подвалом поступаем также.

Продолжение следует…

основа для верстки контент сверху в коде

 

А вот более грамотный свежак допиленный  под современные стандарты ниже приводится файл  стилей

а это
код страницы

 


Связанные посты:


Метки: