Ниже приведено 8 простых правил, при верстке логотипа. Итак поехали.

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

Правило номер 1: никогда не брать логотип в тег h1. Лучше обернуть просто в div с классом logo.

Дочитать »

Наткнулся только что на весьма забавный баг в firefox'е вплоть до 3ей версии. CSS свойство min-height не дружит с HTML тегом fieldset. Надеюсь в 3.1 этот баг поправят.

Некоторое время назад наткнулся на оригинальную реализацию фотогаллеерей на флэше под названием Polaroid Gallery. И задумался а можно ли реализовать все это с помощью Javascript'a. Единственная загвоздка была в повороте картинок.

В последней версии браузера Safari, а также в Firefox'e с версии 3.1 ввели CSS своиство Transforms. В этом свойстве, есть замечательная функция rotate, которая позволяет поворачивать блоки. Но к сожалению ни в Opera, ни в Firefox 2,3, ни конечно же в IE свойство Transforms не реализовано. Так что проблема с поворот картинок осталась.

Немного погуглив и почитав документацию, нашел что в SVG есть атрибут transform, и в этом атрибуте присутствует команда rotate, которая собственна и поворачивает блок на заданый угол. Давайте попробуем все это реализовать на примере.

Дочитать »

Часто приходится позиционировать элементы внутри блоков относительно левого или правого края. Для этого используется свойство float.
Рассмотрим пример:

1. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
2. <style type="text/css">
3. .block {padding: 20px; border: 1px solid #999; width: 200px;}
4. .block div {float: left; width: 100px; border: 1px solid #6FBEFF; padding: 10px;}
5. </style>
6. <div class="block">
7. <div>Блок с голубым обрамлением, должен находиться в блоке с серым обрамлением</div>
8. </div>

Что же мы видим, элемент div с заданым значением float выходит за рамки родительского элемента. Как же это поправить?

Дочитать »

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

1. <input type="button" style="padding: 3px 10px; font-size: 12px; font-family: Arial;" value="Сохранить?" />

В IE появляются лишние отступы у кнопок:

Исправляется этот баг CSS свойством overflow: visible

1. <input type="button" style="padding: 3px 10px; font-size: 12px; font-family: Arial; overflow: visible;" value="Сохранить?" />