Archive for the ‘вёрстка’ Category

HTML5 Tabs: a first touch

Понедельник, Декабрь 21st, 2009

HTML5 have a new, very convenient element section which is used to separate content. I tried to implement tabs using this element, because the standard solution on unordered lists (UL) or definition lists (DL) is not semantic, because the tab is not associated with his content area. Finally, one evening I did the first version, “quick and dirty”, but I tried.

So, let’s see the result: HTML5 tabs demo

These tabs have some drawbacks (fixed content area height and some others), so I accept suggestions for improvement (professionals will understand what I mean, when they’re look the sample code).

Updated at 24 dec 2009

Tags: ,
Posted in вёрстка, программерское | 4 Comments »

Developing pretty buttons with css best practices

Понедельник, Ноябрь 16th, 2009

In this article I’ll show you how to make beautiful buttons to use these on your web pages using best practices. These buttons are:

  • Use only one picture for all states
  • Has a 3 states: the state of rest, when you hover the mouse and when clicked.
  • Having less of css code.
  • Can be easily embeded into any place of your web pages.
  • The text on the button is just text, not image.
  • Buttons can be of any width.

As a result, we have got these buttons:

preview

(далее…)

Tags: , , , , ,
Posted in вёрстка | 3 Comments »

Делаем красивые кнопки с использованием лучших практик

Понедельник, Ноябрь 16th, 2009

В этом примере я расскажу, как сделать красивые кнопки для использования их на ваших веб-страницах использованием лучших практик. Эти кнопки будут:

  • Использовать всего лишь одну картинку для всех состояний
  • Поддерживать 3 состояния: состояние покоя, при наведении мыши, при нажатии.
  • Иметь малое количество CSS-кода
  • Легко встраиваться в любые места ваших веб-страниц
  • Текст на кнопке это именно текст, а не картинка.
  • Кнопки могут иметь произвольную ширину.

В итоге, мы получим такие кнопки:

preview

(далее…)

Tags: , , , , ,
Posted in вёрстка | 1 Comment »

Цепочки вызовов функций (Chains) в MooTools 1.2

Суббота, Май 2nd, 2009

Это руководство покажет, насколько мощными могут быть цепочки вызовов функций в Mootools. Цепочки облегчают последовательное выполнение стека функций.

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

(далее…)

Posted in IE bugs, javascript, mootools | No Comments »

IE and checkbox onchange event

Пятница, Март 13th, 2009

Damn, fuckin’ Interner Explorer does not works correctly with checkbox “onchange” event.
IE does not send change event when the checkbox has been clicked, only after the element has lost focus (what a fuck?).

This does not work in Internet Explorer:

checkbox.addEvent('change', function() {
    alert('I have succeeded?');
});

Therefore, we are forced to use an “onclick” event instead of “onchange” event.

This should work in Internet Explorer:

checkbox.addEvent('click', function() {
    alert('I have succeeded!');
});

I hope that IE developers will change this checkbox behavior in Internet Explorer 8.

Posted in IE bugs | 1 Comment »

Хинты по вёрстке. Для тех, кто не знал.

Вторник, Февраль 24th, 2009

Я иногда записываю какие-либо полезняшки для себя, чтобы не забыть что-то и чтобы они всегда под рукой были. Такие вот записочки. Решил вот выставить на всеобщее обозрение, я думаю пригодится эта информация:

  1. Если используется XHTML 1.1 Transitional в IE, а на странице есть таблица с height 100%, а в ней хедер и контент, и в контент-зоне еще одна таблица с высотой 100%, то вложенная таблица становится по высоте равной viewport’у браузера.
  2. -moz-box-sizing применяется только в случае, если страница рендерится в режиме совместимости. В остальных случаях это не дает эффекта, так как IE в режиме XHTML поддерживает блочную модель W3C. Подробнее о режиме совместимости здесь: Quirks_mode
  3. Если указываем в начале файла конструкцию, подобную <?xml version=”1.0″ encoding=”utf-8″?>, то IE работает в режиме совместимости, который нам нафиг не нужен (зачем, на самом деле?). Кроме того, если перед объявление DOCTYPE есть что-либо кроме пробелов, то IE будет работать в режиме совместимости! Но в этом случае пригодится -moz-box-sizing, чтобы сделать поведение блоков одинаковым в обоих браузерах (Опять же, это костыль, лучше использовать XHTML).
  4. Определить, находится ли браузер в режиме совместимости можно, запустив на странице Javascript код alert(document.compatMode). Если появится сообщение “BackCompat” - браузер в режиме совместимости.
  5. В блочной модели W3C к ширине блока прибавляются границы (margin), бордюр (border) и отступы (padding). Поэтому, при наличии бордюров, границ или отступов, если вы хотите, чтобы сохранилась старая ширина блока, нужно отнять эти границы, отступы и бордюры от ширины блока. То, что получится - будет новой шириной блока.
  6. Забиваем на IE 5.+, больше не понадобятся хаки типа w\idth:228px от Tantek Celik’a. Хватит уже поддерживать старые браузеры и тянуть за собой старое дерьмо.
  7. Если в родительском неплавающем блоке лежит плавающий блок, то, чтобы родительский блок растянулся по размерам дочернего блока, надо родительскому блоку установить overflow: hidden. В IE это лечится установкой родительскому блоку свойтва hasLayout ( zoom: 1 или height: 1%), или установкой родительскому блоку ширины (что тоже устанавливает блоку свойство hasLayout).
  8. Максимальную и минимальную ширину сайта в IE можно сделать так:
    width: expression((w = (document.documentElement.clientWidth || document.body.clientWidth) - 20) > 800 ? ‘800px’ : (w > 400 ? ‘auto’ : ‘400px’));
    /* Число “20″ в формуле - величина горизонтального padding’а document.body (если он есть) */
  9. Если что-то глючит в ИЕ - следует прочитать: http://cssing.org.ua/2005/11/11/ie-magic/ и глянуть http://www.positioniseverything.net/ie-primer.html а так же http://www.positioniseverything.net/articles/ie7-dehacker.html

Posted in вёрстка | No Comments »