Резиновая вёрстка: используем отрицательные поля

Рейтинг:

2 голоса

Дата: 17 февраля 2010, 2298 1
Категория: HTML и CSS

Я недавно столкнулся с задачей, в которой надо было создать двухколоночный макет страницы с "шапкой" и "подвалом", причём в коде страницы контент должен был быть расположен перед блоком боковой колонки. Я решил воспользоваться возможностью продемонстрировать малоизвестный приём CSS-вёрстки: отрицательные поля (negative margins). Отрицательные поля позволяют нам сместить область контента за границы окна браузера, освободив место для боковой колонки.

Постановка задачи

Итак, чтобы показать, как полезны могут быть отрицательные поля для создании резиновой вёрстки, давайте-ка сделаем резиновый двухколоночный макет с "шапкой" и "подвалом". Область основного содержимого (контента) будет слева, вторая колонка - справа. Сделать это, в общем-то, довольно просто, но мы пойдем немного другим путем, потому что по условиям задачи код страницы у нас будет иметь определенную структуру.

Зная, как работают "плавающие" блоки, проще всего было бы разместить боковую панель перед блоком контента, позволив ей обтекать (float) контент с правой стороны. Однако, раз уж нам так важно, чтобы в текстовых браузерах, программах для чтения с экрана и старых браузерах, не понимающих наши таблицы стилей, сначала был виден контент, а потом уже боковая панель, значит нам надо найти такое решение, которое бы позволило разместить контент в начале кода. Причем это решение должно ещё и работать в большинстве браузеров.

Выпадающие меню на HTML и CSS

Рейтинг:

27 голосов

Дата: 8 июня 2009, 31248 17
Категория: HTML и CSS

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

Давайте посмотрим какое меню у нас получится

Первым и самым важным этапом, при создании выпадающего меню, является создание его структуры. Лучше всего это делать, используя ненумерованные списки. Давайте создадим вот такое простое меню:

А Вы делали такие ошибки при создании сайта?

Рейтинг:

Дата: 22 февраля 2009, 3499 2
Категория: HTML и CSS

В данной статье пойдет речь об ошибках, которые я допустил при создании своего сайта. Дело в том, что я пользуюсь интернет браузером Opera и разрабатывал сайт на этом браузере.

Когда мой сайт был готов я решил его проверить, как он смотрится в других браузерах. Когда я открыл свой сайт браузером Mozilla, то особых различий не было, в отличии от браузера Internet Explorer

У меня возникло сразу 2 проблемы. И вот в чем они заключались:

Как создать таблицу с тенью средствами HTML

Рейтинг:

5 голосов

Дата: 4 февраля 2009, 4797 1
Категория: HTML и CSS

Сегодня я расскажу как создавать таблицы с тенью. Примером может служить вот такая таблица