Как стать автором
Обновить
  • по релевантности
  • по времени
  • по рейтингу

Выравнивание блоков по высоте (Баг в Safari) HTML+jQuery

Чулан
Доброго времени суток, всем харбапользователям!

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

Для этого я решил юзать jQuery:

<script type="text/javascript">
jQuery(document).ready(function (){
var ee = jQuery('.same_column');
var div1 = jQuery(ee[0]).height();
var div2 = jQuery(ee[1]).height();
if(div1 > div2) {
jQuery(ee[1]).height(div1);
}
else {
jQuery(ee[0]).height(div2);
}
});
</script>


Все работало идеально во всех браузерах, но при дальнейшей разработке появился странный баг в Safari:
Если внутри блока, к которому обращается скрипт есть любое изображение, то сафари глючит.

Скрины:
Скрин из Mozilla
Mozilla

Скрин из Safari
Safari
Всего голосов 9: ↑3 и ↓6 -3
Просмотры 303
Комментарии 10

Бесплатная лекция по HTML-верстке в Минске. 23 апреля, четверг

Социальные сети и сообщества
В четверг, в 17.30, маэстро zigzag (член, между прочим, Web Standards Group Russia) прочитает лекцию "Современный подход к HTML-верстке"
Мероприятие пройдет в рамках образовательной программы белорусского портала IT-JOB.BY.

Тезисы:
Читать дальше →
Всего голосов 42: ↑36 и ↓6 +30
Просмотры 704
Комментарии 27

ModularGrid — модульная сетка в браузере (и не только сетка)

Разработка веб-сайтов *
ModularGrid — это небольшая программка на javascript (около 30 КБ), которая облегчает труд HTML-верстальщика.


Основные возможности ModularGrid


  • показ направляющих поверх страницы
  • показ модульной сетки поверх страницы
  • показ отдельно шрифтовой сетки, горизонтальной или вертикальной модульной сетки поверх страницы
  • показ изображения-макета поверх страницы
  • изменение размера окна браузера под указанные верстальщиком разрешения
  • изменение прозрачности модульной сетки и изображения-макета

подробности
Всего голосов 120: ↑108 и ↓12 +96
Просмотры 8.7K
Комментарии 65

Генерирование изображений-заглушек

Разработка веб-сайтов *
Сегодня мне кинули ссылку на прикольный сервис для быстрого генерирования изображений-заглушек. Может пригодиться для html-верстки. На мой взгляд, это удобно тем, кто и так использует заглушки — экономит время при вёрстке, т.к. сами заглушки уже готовы. Можно цвета/размеры подбирать, меняя только числа/буквы в коде, не отвлекаясь на сам файл картинки — и сразу видеть эффект. И сами размеры видеть написанными, если нужно, чтоб к коду не возвращаться для проверки. Или вместо размеров можно текст добавить, чтоб всегда знать, для чего эта заглушка (типа «Бан(н)ер» или там «Лого», или «Фотография»).

На сервисе не нужна регистрация — и вообще на сайт можно не заходить, чтобы его использовать. Пишете сразу у себя в коде, например:
<img src="http://placehold.it/350x50" />
и получаете:


Update. Благодаря усилиям k0rv1n, найден вариант этого сервиса, только лучше :)
Во-первых, там поддерживается кириллица. Во-вторых, там даны ссылки на исходники для разных языков.
Автор dummyimage.com — тот же Russell Heimlich, что и у placehold.it. У placehold.it есть ещё один автор, но будем считать, что он делал дизайн (дизайн там правда круче, но видимо как раз из-за понтового шрифта Unicode и не выходил).

Примеры (см. под хабракатом) я поменял с placehold.it на dummyimage.com, раз уж он функциональнее…
Ещё насколько примеров под катом
Всего голосов 287: ↑276 и ↓11 +265
Просмотры 46K
Комментарии 119

Генерирование баннеров-заглушек

PHP *

Есть такой отличный сервис placehold.it. Он позволяет легко генерировать изображения-заглушки для баннеров. Не так давно о нем писали на хабре, и с тех пор я им активно пользовался, пока он не начал периодически падать. Вечером на коленке был написан аналогичный сервис, может быть кому-нибудь пригодится.
Читать дальше →
Всего голосов 23: ↑14 и ↓9 +5
Просмотры 4.7K
Комментарии 12

WYSIWYG HTML редактор в браузере. Часть 1

Разработка веб-сайтов *
Перевод
Это первая часть перевода статьи о свойствах designMode и contentEditable, их поведении и особенностях.

В статье рассматриваются базовые принципы и проблемы унификации особенностей редактирования в современных браузерах. Темы рассматриваемые в статье:
  • Различные методы включения режима редактирования
  • Команды редактирования
  • HTML генерируемый в процессе редактирования
  • Взаимодействие с DOM
Читать дальше →
Всего голосов 54: ↑49 и ↓5 +44
Просмотры 17K
Комментарии 11

WYSIWYG HTML редактор в браузере. Часть 2

Разработка веб-сайтов *
Перевод
Это вторая часть перевода статьи о свойствах designMode и contentEditable, их поведении и особенностях.

В статье рассматриваются базовые принципы и проблемы унификации особенностей редактирования в современных браузерах. Темы рассматриваемые в статье:
  • Различные методы включения режима редактирования
  • Команды редактирования
  • HTML генерируемый в процессе редактирования
  • Взаимодействие с DOM
Читать дальше →
Всего голосов 50: ↑45 и ↓5 +40
Просмотры 12K
Комментарии 46

WYSIWYG HTML редактор в браузере. Часть 3

Разработка веб-сайтов *
Перевод
В статье описана практика использования свойств designMode и contentEditable, а так же сопутствующих API на примере создания простого текстового редактора.
Читать дальше →
Всего голосов 32: ↑29 и ↓3 +26
Просмотры 9.4K
Комментарии 18

Обновлён ModularGrid — удобный инструмент для HTML-верстальщиков

Разработка веб-сайтов *
Демо-страница
Спешу сообщить, что наконец-то обновил ModularGrid — небольшой javascript, который рисует гайды и модульную сетку поверх вёрстки:
  • появилась панель с контролами для тех, кто не любит хоткеи;
  • состояние сетки теперь сохраняется в cookie;
  • было исправлено несколько досадных ошибок.

Демо-страница | проект на GitHub | предыдущая статья
Всего голосов 72: ↑66 и ↓6 +60
Просмотры 2.5K
Комментарии 44

Рекомендации по написанию HTML-кода начинающим web-разработчикам

Разработка веб-сайтов *
Из песочницы
Очевидные вещи, которые выделил для себя. Хотелось бы, чтоб грамотные люди дополнили этот небольшой список. Цель — сделать код и свой, и других — более красивым, валидным, легко понимаемым и семантически грамотным.

Использование тега <br />

В основном это бывает нужно, для улучшения восприятия текста, точнее для форматирования одного элемента. Поэтому, когда нам нужно разделить несколько элементов или просто, чтоб новый элемент был в новой строчке, нужно использовать блочный элемент (div, p, h1..., у которых по умолчанию css-свойство display:block, но при этом, старайтесь не плодить лишних элементов). И если нужно сделать отступ, не нужно вставлять десять <br>, а нужно описать в css свойство margin.

Использование атрибута style и свойство !important

Это нужно в исключительных случаях, когда место уникальное. Почти всегда нужно использовать css-класс со свойствами вынесенными в css-файл. И даже если вам нужно спрятать элемент (display:none), лучше создать универсальный класс, (например css: .hidden {display:none;}), и писать <span class=”error hidden”>.
В описании класса, если у вас не применяется какое-то свойство, не нужно писать !important, чаще всего достаточно впереди дописать родительский селектор, и желательно — class, а не id.
Читать дальше →
Всего голосов 54: ↑27 и ↓27 0
Просмотры 4.1K
Комментарии 12

Вкладки с внешними скруглениями

Разработка веб-сайтов *
Перевод
Скругленные уголки на сегодняшний день делаются тривиально с помощью border-radius. Благодаря border-radius мы можем «обрезать» блоки сообразно необходимости, но что делать, если нам нужно скруглить «внешний» угол? Проблему проще пояснить графически:

На этой картинке показано о чем вообще идет речь
Верхние уголки сделать не проблема, а вот нижние — посложнее. Под катом поясняем как.
Читать дальше →
Всего голосов 195: ↑177 и ↓18 +159
Просмотры 10K
Комментарии 104

Новый метод замены текста картинкой, или избавляемся от -9999px

CSS *
Хотелось бы поговорить о техниках замены текста изображением. Думаю, практически все сталкивались с моментами в верстке, когда, к примеру, для заголовка страницы нужно использовать графический объект, при этом сохранив под ним текст и для поисковых роботов, и для печатной версии. Да и в принципе, никогда не хочется ломать семантинку страницы.



Немного об истории решения этого вопроса.


Самой первой популярной техникой была так называемая FIR (она же — Fahrner Image Replacement), которая появилась в 2003-м году. Она проста как пень, и многие начинающие верстальщики ее до сих пор используют:
Читать дальше →
Всего голосов 108: ↑100 и ↓8 +92
Просмотры 35K
Комментарии 87

Создаём parallax scrolling эффект с помощью jQuery и CSS

Разработка веб-сайтов *CSS *jQuery *
Перевод
В последнее время, сайты с parallax scrolling эффектом стали появляться повсюду. Я не хотел это пропускать, поэтому я создал демонстрационную страницу с parallax scrolling эффектом с помощью jQuery и CSS.


Читать дальше →
Всего голосов 66: ↑58 и ↓8 +50
Просмотры 130K
Комментарии 31

Простой универсальный переключатель на JavaScript

Блог компании Badoo Разработка веб-сайтов *JavaScript *
При разработке сайтов нередко возникает необходимость в каком-либо переключении их состояния, обычно для этого используются псевдоссылки: скрыть или показать подсказку, поле ввода, другую часть страницы.

Можно каждый раз писать JavaScript-код и стили к нему, но со временем это приводит к разрастанию кода, с чем в определенный момент мы и столкнулись.

Однако проблему можно решить гораздо элегантнее. Рассматриваемое ниже решение отличается простотой и не требует последующего участия JavaScript-программиста, так как верстальщик сможет самостоятельно вносить нужные изменения в стили.
Читать дальше →
Всего голосов 107: ↑91 и ↓16 +75
Просмотры 47K
Комментарии 64

CSS слайдер

Разработка веб-сайтов *CSS *HTML *
С развитием CSS3, возможности верстки растут экспоненциально. Всё больше функционала можно реализовать на «чистом» CSS. В этом посте показан процесс разработки интерактивного циклического слайдера без единой строчки JavaScript. Автоматическая ротация, выбор любого слайда с плавным переходом – на «чистом» CSS. Пример в действии



Под катом пошаговое описание реализации
Всего голосов 58: ↑48 и ↓10 +38
Просмотры 143K
Комментарии 45

Вышел WebStorm 5 — станьте еще продуктивнее

Блог компании JetBrains JavaScript *
Картинка стоит тысячи слов — мы же предлагаем взлянуть на скринкаст:



Засветились:
  • LiveEdit — обновляет фрагменты страницы без перезагрузки, включая javascript
  • ZenCoding — мгновенная генерация сложных конструкций из соответствующих CSS-селекторов
  • AceJump — навигация по видимому участку кода

Разумеется мы умеем гораздо больше
Загрузить последнюю версию для вашей платформы
Всего голосов 87: ↑80 и ↓7 +73
Просмотры 28K
Комментарии 79

SCSS и кросплатформенный градиент (ну почти)

Разработка веб-сайтов *CSS *
Из песочницы
Всем доброго времени суток.
Хочу поделиться одной наработкой с использованием SCSS. Нужно было мне (кстати не однократно, но как то руки не доходили сделать как надо) сделать универсальную генерацию градиента. Универсальную, это возможность задавать несколько градиентов подряд, и должны были поддерживаться префиксы для браузеров (делать так делать).
Поиск подобного рода решения по хабру и гуглу результата не дал, поэтому пришлось справляться своими силами. Далее подробнее по делу.
Читать дальше →
Всего голосов 5: ↑3 и ↓2 +1
Просмотры 4.1K
Комментарии 9

Webfonts — разбираемся с антиалиасингом под Windows (UPD)

Разработка веб-сайтов *CSS *
Tutorial
Думаю, что не только я, но и другие пользователи Chrome под Windows, на многих сайтах замечали проблемы c отображением нестандартных шрифтов. Читать текст на таких сайтах можно, но глазам больно. Я бы так все это и продолжал терпеть, но на одном из недавних собственных проектов этот вопрос встал буквально ребром. Решил разобраться во всем досконально.

Разница в этих двух фрагментах очевидна. Первый сделан со случайно выбранного сайта adaptive-images, а второй с его локальной копии, в css которой была изменена буквально одна строчка.

(Читавшие первую версию статьи могут сразу перейти к UPD, где приведено работающее альтернативное решение проблемы для Chrome)


И в чем же там дело?
Всего голосов 78: ↑74 и ↓4 +70
Просмотры 69K
Комментарии 35

Frontender Magazine: давайте поговорим о фронтенде

Я пиарюсь
Перед вами — русскоязычный журнал посвященный фронтенду и публикующий новые материалы два раза в неделю. Интересно?
Читать дальше →
Всего голосов 56: ↑52 и ↓4 +48
Просмотры 7.7K
Комментарии 43

За что HTML-верстальщики так не любят веб-дизайнеров

Веб-дизайн *
Из песочницы
За время своей работы верстальщиком, мне довелось иметь дело с кучей разных макетов как от новичков дизайна (или порой просто левых людей), так и до профессионалов. И за это время я успел набрать приличную выборку наиболее типичных багов в макетах, которых не в состоянии избежать даже маститые специалисты. Сразу оговорюсь — в некоторых организациях есть внутренние «требования к дизайн-макетам», и по идее, при несоответствии дизайна этим требованиям, он должен без вопросов отправляться на доработку, но реалии таковы, что зачастую проще самому внести нужные правки, чем гонять документ туда-сюда по трекеру. Но даже в этих «требованиях» упомянуты далеко не все очевидно возможные «косяки». Постараюсь привести наиболее популярные и универсальные (без личностной привязки). Да, кстати, все баги привожу под использование фотошопных psd — ну уж де-факто это стандарт в веб-макетах. Да и не попадались мне ещё макеты в векторе (и надо сказать, слава богу).
Читать дальше →
Всего голосов 149: ↑128 и ↓21 +107
Просмотры 115K
Комментарии 273