Проблема с отступами IE6

Скажу о том, что речь идет о проблеме плавающих блоков, когда им задается margin слева или справа, в IE фактическое значение этих отступов удваивается, так вот, для того, чтобы решить эту проблеме блоку нужно добавить свойство display: inline.

Уравнивание высоты блока с помощью JavaScript

Вот вчера сидя на работе, верстал дизайн одной велокомпании, и столкнулся с проблемой, проблема уравнивания блока. Если не понятно, то сейчас все поясню.

У меня есть изображение, которое должно заливать центральный блок контейнера (<div id="container">) по оси -y- (background: repeat-y;). У этого блока есть минимальная высота, она равна двум высотам изображениям 326px (высота изображения = 163px) . Вот это изображение

container-bg

И есть второй блок подвал (<div id="footer">), в котором находится я бы сказал ключевое изображение дизайна. Вот это изображение. Я думаю тут должно быть все понятно, эти изображения должны совпасть. совпадают они только тогда, блок кратен 163px.

(далее…)

Создаем раздвижную панель с помощью CSS и jQuery

panel

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

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

План действий:

нам будут нужны такие файлы

ну еще я дум нам понадобятся умелые руки 😉

(далее…)

Онлайн-CSS помощьники (часть 1)

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

Вот два неплохих CSS-генератора для работы со шрифтами.  В этих генераторах вы можете наглядно протестировать созданные вами шрифты, а во втором генераторе даже посмотреть как они будут выглядеть в Win XP, Mac, Win Vista.

http://csstypeset.com/

http://csstypeset.com/

http://www.typetester.org/ (далее…)

Закругление углов через CSS

Здраствуйте. В этой статье разговор пойдет о «великом и могучем» CSS третьей версии. Как мы знаем то поддерживается он частично всеми браузерами, но совсем он не поддерживается Interne Explorer.

Эта статья предназначается менее опытным пользователем, или даже начинающим «покорителям» CSS. Итак можно приступить. Первым делом мы попробуем закруглить уголки у блока. Привожу листинг

#box {
  width: 300px;
 height: 150px;
 border: 1px solid #003c7b;
 background: #58a7f6;
 -webkit-border-radius: 10px; /* Отвечает за скругление уголков у Google Chrome и Apple Safari  */
 -moz-border-radius: 10px; /* Mozilla Firefox */
 }

Поддерживается Google Chrome, Mozilla Firefox, Apple Safari. Demo смотрим здесь

Эффект отбрасываемой тени:

#box {
            width: 300px;
            height: 150px;
            border: 1px solid #003c7b;
            background: #58a7f6;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            /*Эффекты*/
            -webkit-box-shadow: #999999 3px 3px 3px;
            -moz-box-shadow: #999999 3px 3px 3px;
            box-shadow: #999999 3px 3px 3px;
        }

Поддерживается Google Chrome, Mozilla Firefox, Apple Safari.

Эффект отбрасываемой тени текстом

#box {
            width: 300px;
            height: 150px;
            border: 1px solid #003c7b;
            background: #58a7f6;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -webkit-box-shadow: #999999 3px 3px 3px;
            -moz-box-shadow: #999999 3px 3px 3px;
            box-shadow: #999999 3px 3px 3px;
            /*Эффекты*/
            text-shadow: #fff 3px 3px 3px;
        }