HTML/CSS

Задаем вопросы по всему, что касается верстки: примеры решений, сложности, необычные решения обычных задач. Самые интересные вопросы будут добавляться прямо в статью. Большая просьба не задавать вопросов вроде «какую книгу по HTML советуете прочитать», «где найти уроки для начинающего кодера», «помогите найти ошибку в коде» и тому подобное — все это останется без ответа, по крайней мере с моей стороны.

Ответы

Хотелось бы узнать подробнее как растягивать фоновую картинку на все окно браузера (см. metrostroy.com).

Само растягивание картинки делается довольно просто:

	<img src="myimage.jpg" style="width:100%; height:auto;" />

Однако «боевое» применение этого метода куда сложнее и интереснее.

Почему это работает

В спецификации CSS есть такое понятие как replaced element – элементы, которые заменяются на внешние ресурсы. На таких элементах действуют специальные правила для расчетов размеров. В частности, если задан только один габарит (например, ширина), то другой габарит должен быть рассчитан исходя из пропорций исходных размеров и пиксельного значения первого габарита. В примере, указанном выше, браузер сначала высчитывает пиксельную ширину элемента, затем домножает его на пропорцию ширины и высоты — результатом является новая высота, которая указывается элементу.

Соответственно, можно сделать наоборот: указать только высоту картинки, а ширина посчитается автоматически.

Растягивание блоков

Еще есть способ пропорционально растягивать обычный HTML-блок. Он основан на том, как работают процентные значения верхнего и нижнего padding и margin. Их пиксельные значения считаются не от высоты, как это может показаться с первого раза, а от ширины контейнера. Поэтому из данного кода можно получить растягивающийся квадрат:

<div style="width:30%; padding-bottom: 30%; background: red"></div>

Сглаживание картинки в IE

Есть два способа сделать растягивающуюся картинку сглаженной. Самый простой способ: указать картинке CSS-свойство -ms-interpolation-mode:bicubic;, работает в IE7+. Но у него есть очень серьезный недостаток в виде резкого снижения производительности браузера.

Второй способ основан на использовании фильтра AlphaImageLoader (да, его можно применять не только для отображения полупрозрачных PNG). Для этого нужно сделать дополнительную прозрачную картинку по размерам оригинальной картинки, растянуть ее выше указанным способом, а оригинальную картинку наложить фильтром, указав в качестве параметра sizingMethod=scale.

<img src="stub.png" style="width:100%; height:auto;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='myimage.jpg', sizingMethod='scale');" />

Проблемы использования

Самой главной проблемой использования растягивающихся картинок — это очень сильное снижение производительности браузера (см. Производительность браузеров в зависимости от верстки). На том же МосМетроСтрое в FireFox 3 даже обычная прокрутка тормозила, не говоря уже о JS-анимации. От этого можно избавится, но довольно сложным способом. Я делал так: создавал <canvas>, в котором рисовал растянутую картинку, в этом случае ничего не тормозило. Во время растягивании окна браузера canvas меняется на растягивающуюся картинку, а после завершения ресайза заново отрисовываю canvas и меняю картинку на него.

Влияет ли валидная верстка (This document was successfully checked as XHTML 1.0 Strict!) на производительность (в огромных сайтах)? И хотелось бы получить парочку советов по ускорению загрузки сайта и рендеринга страницы. Какие вы используете техники в этом плане?

Каких-то интересных исследований на эту тему я не видел. В теории, XHTML-разметка должна парситься быстрее. Однако стоит помнить об одной очень важной вещи: чтобы включить настоящий XHTML, сервер должен послать заголовок Content-type: application/xhtml+xml (по умолчанию шлется Content-type: text/html) — только в этом случае современными браузерами будет использован XHTML-парсер. Однако следует помнить, что:

  • пользователи IE (как минимум 6 версии) вместо страницы увидят XML-дерево;
  • браузер станет чувствителен к ошибками: например, если кто-то напишет <br>, браузер вместо страницы отобразит парсерную ошибку (то есть все нахрен развалиться);
  • очень сильно поменяется работа с DOM; в частности, Джон Ресиг — разработчик jQuery — только планирует включить поддержку XHTML в jQuery, сейчас она в большинстве случаев будет выдавать ошибку.

Резюмируя вышесказанное: если вы просто поставите XHTML-доктайп, то сильного прироста в производительности не заметите, так как парсинг все равно будет работать по правилам HTML. Если хотите true XHTML, то готовьтесь к большим проблемам.

В верстке я пользуюсь в основном двумя правилами: использовать меньше элементов и делать неглубокую вложенность элементов. Это, как правило, влияет на JS-анимацию. Куда интереснее в этом плане выглядит написание CSS-правил, что действительно может повлиять на производительность на очень больших сайтах. Советую посмотреть выступление Дэвида Бэрона из Mozilla на эту тему.

240 комментариев

  1. Николай Коваленко
    13 августа 2009

    Зачем в сайтах указывать font-size:100.01%?

    SC: точно не помню, но вроде бы в Опере когда-то были проблемы с размером шрифтов, и именно такое решение их исправляло. Сейчас я этим не пользуюсь, так как в новых браузерах (особенно в Fx3 с его движком рендеринга шрифтов, и последних Операх) появляются проблемы: доходит до того, что накопленные таким образом доли процентов из-за большой вложенности элементов приводит к тому, что в одно строке слово, обрамленное обычным span’ом, становится крупнее, чем остальные слова.

  2. Николай Коваленко
    13 августа 2009

    На некоторых сайтах вижу css font-size:100.01%.
    Вопрос — для чего нужно добавлять одну сотую процента?

  3. 13 августа 2009

    вероятно, чтобы избежать глюков некоторых «вредных» браузеров/версий. список нужен?

  4. 13 августа 2009

    Ответ: для того, чтобы размер шрифта во всех браузерах был одинаков.

  5. Дмитрий Чаплинский
    13 августа 2009

    Небольшой баг на метрострое (Firefox 3.5.2, Mac OS X 10.5.7)  после пары ресайзов окна, контент уходит «вниз», и появляется свободное пространство над нижней частью сайта (лифт останавливается на отметке -36м, вместо 42).

  6. 13 августа 2009

    Добрый вечер.
    Должен ли футер быть прижат к низу страницы? Интересно Ваше мнение.
    Способы прижать футер фикс. высоты к низу всем известны, а как реализовать тоже самое не ограничивая высоту футера?

    Лично мне нравится, когда футер прижимается к низу страницы. Как прижать футер произвольной высоты — пока не знаю. Но у меня ни разу не было необходимости в этом. Как правило, футеры имеют фиксированную высоту, я выставляю их в em’ах.

  7. 13 августа 2009

    Неосновная форма поиска на сайте.
    На этом сайте и на artlebedev.ru отсутствует кнопка «искать».
    А как быть посетителям с мобильниками и т.п.? :)

    С айфона все замечательно ищется :) И, насколько я помню, дизайн сайта разрабатывался тогда, когда никто с мобильников в интернет не ходил.

  8. dom1n1k
    13 августа 2009

    Помнится, на сайте queengroup.ru черный квадрат со стилизованной буквой Q тянулся пропорционально, т.е. оставался всегда квадратом.
    Как это можно реализовать? Конечно же, речь идет о чистом HTML/CSS, без всяких там jQuery

    Выше уже написал

  9. iSergey
    14 августа 2009

    Добрый день, Сергей.

    Увеличение шрифта при растягивании окна браузера. Возможно?

    Могу сделать такое только с помощью JS.

    Спасибо.

    P. S. Спасибо за предыдущий ответ, очень познавательно, особенно часть про IE.

  10. 14 августа 2009

    Сергей, привет.

    Каким образом сверстана шапка на сайте Табака — http://www.tabak.ru/?agree=%C4%E0%2C+%EC%ED%E5+%E1%EE%EB%FC%F8%E5+18+%EB%E5%F2. — когда поиск, отборные сигары и колонки экспертов тянутся, а блок с библиотекой, эфиром и магазином фиксируются. При чем всё это дело сделано без использования таблиц.

    Можно открыть Firebug и посмотреть :). Поиск — одна растягивающаяся колонка, логотип, меню и отборные сигары — вторая, колонка экспертов — третья. Внутри второй колонки стоит блок с логотипом фиксированной ширины и float: left.

  11. 14 августа 2009

    И еще такой вопрос: как бороться с глюком бэкграунда при появлении горизонтальной полосы прокрутки. Пример: http://pics.livejournal.com/vadimgoncharov/pic/0001bkqk

    Это не глюк, это такая фича. Возникает тогда, когда есть два независимых блока и один из них не помещается в отведенную ширину. В этом случае сам контейнер остается прежнего размера, а все, что не помещается — выходит за его границы. Решение: либо запихнуть эти независимые блоки в таблицу (табличные ячейки не могут быть меньше размеров контента), либо прописать минимальную ширину у контейнера.

  12. 14 августа 2009

    Сергей, что думаете по поводу этого — http://dillerdesign.com/experiment/DD_belatedPNG/
    Стоит ли отказаться от АльфаИмейджЛоадера в пользу ВМЛ?

    VML, определенно, лучше и менее требователен к ресурсам системы, чем AlphaImageLoader. Но вот по скорости инициализации с VML у меня как-то не сложилась любовь. Буквально недавно переделывал раздел сайта, где было 200+ полупрозрачных PNG. Думал, что с VML все сработает очень быстро (написал свою библиотеку, где просто добавляется VML-объект, без всяких лишних расчетов как в DD_belatedPNG), ан нет — работало чуть быстрее фильтра, но все равно неприемлемо. В итоге переделал графику на полупрозрачность в палитре — в IE6 (на сайте их около 10%) смотрится немного корявенько, но не тормозит и не вешает браузер.

  13. 14 августа 2009

    В создание блоков со скругленными уголками (http://www.artlebedev.ru/tools/technogrette/html/rounded-corners/) приводите классный способ борьбы с однопиксельным багом в ИЕ:

    .rightCorner { width: 30px; left: -30px; margin-left: 100%; }

    А есть какие-нибудь идеи для прижатия элемента к низу контейнера без использования для этого же элемента еще одного контейнера? Вот это работает

    .bottomCorner { bottom: 0px; }

    но возникает однопиксельный баг.

    Пытался найти решение. В частности, прижимал блок к правому краю, а потом переворачивал с помощью хитрой конструкции CSS-свойства writing-mode. В итоге блок к низу прижал, но и текст писался не слева-направо, а сверху-вниз :)

  14. Vii
    15 августа 2009

    Как можно оптимально реализовать автоматическое обновление (сброс) кэша браузера на флешовом сайте (одна главная флешка подгружает остальные «части-компоненты») при изменении и перезаписи какого-то из компонентов, кроме подставления в имя каждого файла префикса с версией файла (на подобии module-0908142145.swf).

    Про флэш рассказать не могу, так как им очень мало занимаюсь. Мне кажется, что в данном случае кэшом управляет не браузер, а сам флэш-плагин. Еще иногда вот так сбрасывают кэш: module.swf?r=0908142145. В этом случае на стороне сервера ничего настраивать не нужно, но есть вероятность того, что на некоторых прокси-серверах кэш не сбросится.

    Как вообще в браузерах работает кэш? Почему если перезалить картинку она обновится легко, а если флеш-ролик — нет?

    Кэш в браузерах — довольно большая тема. В основном все сводится к определенному набору заголовков, которые управляют кэшированием ресурсов: Expires, Cache-control, Etag. Обычно, если вам не нужно кэшировать ресурсы вообще, ставится Expires с датой меньше текущей. C Etag немного сложнее — хоть он и рекомендуется для установки, на некоторых высоконагруженных сайтах (в частности, где используется балансировка нагрузки) его убирают, так как есть большая вероятность «промахнуться» мимо кэша (особенности стандартной генерации значения этого заголовка). Горячо рекомендую почитать Стива Саудерса из Google, у него есть очень много полезной информации по этой теме.

  15. 16 августа 2009

    Влияет ли валидная верстка (This document was successfully checked as XHTML 1.0 Strict!) на производительность (в огромных сайтах)? И хотелось бы получить парочку советов по ускорению загрузки сайта и рендеринга страницы. Какие вы используете техники в этом плане?

    Ответил выше

  16. Дмитрий Михайлов
    16 августа 2009

    Задача сделать padding-left у ячейки таблицы равным 2% от ширины body. Я задал ячейке padding-left: 2%. Firefox вычислил паддинг как 2% от ширины body (как и требовалось), IE высчитал паддинг как 2% от ширины таблицы, Opera определила паддинг как 2% от ширины столбца.

    Какой из браузеров верно определил ширину согласно стандартам? Можно ли решить эту задачу, не прибегая к различным стилям для разных браузеров?

    P. S. У таблицы и каждого из ее столбцов задана ширина в процентах.

    В спецификации CSS сказано:

    The percentage is calculated with respect to the width of the generated box’s
    containing block, even for ’padding-top’ and ’padding-bottom’. If the
    containing block’s width depends on this element, then the resulting layout is
    undefined in CSS 2.1.

    То есть если у containing block — в данном случае это <table> — явно указана ширина, то считаем от нее, если ширина не указана, то значение является неопределенным.

    Вы доктайп использовали? Можно посмотреть на сам код и на требуемый результат?

  17. Андрей
    17 августа 2009

    Про прижатый футер уже спрашивали, в xhtml способ один плюс 3-4 его вариации.. но вот в опере есть такая бага, при растягивании окна браузера за нижнюю границу, футер остается на месте, если тянуть за нижний угол, все относительно нормально. Надеялся на 10 версию, но в третьей бете все так же как много-много версий назад ) Пытались как-то решать?

    Про такой баг знаю, но решить не пытался. Тоже надеюсь, что Опера, наконец, начнет править баги, которым уже 200 лет.

  18. homonym
    18 августа 2009

    Сергей, что думаете по поводу технологий замены текста, например http://cufon.shoqolate.com/generate/ , sIFR и TypeKit ? Оправдано ли их применение?

    Мне, к счастью, не довелось ими воспользоваться, потому что работал с дизайнерами, которые не боятся написать текст текстом. Но в целом я считаю, что такие вещи лучше применять на домашних страничках, а не больших сайтах.

  19. Андрей
    21 августа 2009

    Расскажите пожалуйста о процессе написания кода. Есть ли принципы при выборе названий классов и какие-то правила которых придерживаетесь при организации HTML и CSS? Ведь при работе с большими сайтами это становится очень важно.

    Перед тем, как написать хотя бы одну строчку кода, я внимательно изучаю макеты и фиксирую хотелки дизайнера (будут ли анимации, какие именно, как должен вести себя макет на разных разрешениях и с разным контентом). Все это очень сильно влияет на саму верстку.

    Затем создаю проект в Eclipse и начитаю делать базовый шаблон, из которого потом делаю макеты отдельных страниц. При создании модульной сетки пользуюсь правилом неделимых сущностей (название сам придумал). Это означает, что некая сущность, например, шапка, меню, контент, футер, должны быть сосредоточены в одном элементе-контейнере, даже если выглядят так, будто смешаны друг с другом. Пример: галерея на сайте Imperia Private Banking. Даже несмотря на то, что картинки ездят под меню, а сама галерея растягивается на всю доступную ширину, меню и контент — разные блоки и всерстаны абсолютно одинаково на всех страницах, причем галерея находится именно в контентном блоке. Туда можно добавить текст, еще несколько галерей — все будет выглядеть так же, как и на других страницах.

    Насчет CSS. На небольших проектах пользуюсь каскадностью (типа #navigation li a {color: red}), активно пользуюсь id (если такой элемент один на странице). А вот для больших проектов все чаще и чаще смотрю в сторону идеологии YACF, один из принципов которого — избавление от каскадности. Несмотря на, казалось бы, такой странный подход, у этого способа есть очевидные плюсы при создании одинаковых конструкций на разных страницах. Сам это оценил, когда «неожиданно» пришлось перенести, казалось бы, очень контекстный элемент в другой блок, у которого с контекстом не было ничего общего.

    Насчет выбора имен селекторов. Никогда не описываю там презентационную составляющую, типа .right {float: right} или .red-header{color: red}, чтобы в один прекрасный момент не получилось вот таких забавных конструкций: .right {float: left}, .red-header{color: blue}.

    Иногда перед тем, как утвердить с клиентом макет и концепцию, делаю прототипы, вроде этих.

  20. Алексей
    24 августа 2009

    Здравствуйте Сергей. Не подскажите как с помощью html или js сделать флеш объект ссылкйо на другую страницу, пробовал прописать событию onclick=»window.location=’страница'», работает в FF, но в опере отказывается:(

    Попробуйте поставить флэшке атрибут wmode="transparent" и сделать и разместить поверх флэшки блок со ссылкой.

  21. Андрей
    25 августа 2009

    Очень хочется послушать Ваше мнение по многим вопросам :) но и по мелочам вроде отвлекать не хочется.. попробую списком :D

    — Влияет ли как-то на скорость рендеринга присвоение большого количества идентификаторов одному элементу?

    Имеется в виду несколько тэгов id у элемента, или несколько классов? Я не заню о таких исследованиях, но думаю, что если и влияют, то не сильно. Все зависит от того, как написаны селекторы в таблице стилей. Например, .item1 матчится быстрее, чем .parent *. Об этом стоит подробнее почитать в клубе YACF. Однако стоит помнить, что все эти оптимизации имеют смысл на огромных деревьях (несколько тысяч элементов).

    — Встречал обратный подход (на крупных между прочим сайтах), верстальщик использовал избыточные теги <a href=»/» rel=»nofollow»>Текст</a>.. видимо прозапас. Так оно конечно гибче получается, но как, опять же, с производительностью?

    Либо тэги съелись, либо это wordpress что-то доставил. Но rel="nowollow" указывает поисковикам, что по этой ссылке не стоит идти, что не индексировать ничего лишнего.

    — Выше Вы писали про каскадность.. от наследования может тоже стоит избавляться? Ластик долой, в body только margin:0 и background-color:#fff и т.д.

    Нет, от наследования не стоит избавляться, только от каскадности; чтобы сократить время матчинга селекторов и сделать блоки не зависимыми от контекста (чтобы можно было куда угодно вставлять их).

    — Зачем style.css в одну строку? :)

    Чтобы быстрее по сети загружался.

  22. Андрей
    25 августа 2009

    Андрей: Парсер съел теги.. но думаю понятно о чем речь.

  23. 28 августа 2009

    Попробуйте поставить флэшке атрибут wmode=»transparent» и сделать и разместить поверх флэшки блок со ссылкой.

    я бы рекомендовал wmode=»opaque»

  24. Шатов
    29 августа 2009

    Как вы тестируете сайты на различных браузерах? Есть ли программа, позволяющая тестить в одном окне?

    Есть Expression Web SuperPreview от Microsoft, который позволяет проверять сайты в нескольких браузерах. Но я им не пользуюсь, так как сижу на Маке. А проверяю просто: открываю страницу в каждом браузере по отдельности и смотрю, что не так.

  25. 29 августа 2009

    Захожу в ИЕ8, допустим, на http://www.felixzawojski.ru/. Всё нормально. Но если нажать F5 и перезагрузить страницу, то возникает жестокий баг — http://pics.livejournal.com/vadimgoncharov/pic/0001cqc6

    Не только с этим сайтом, а практически со всеми, где есть центрирование. Оно почему-то убивается браузером. Что делать? Сталкивались с таким?

    И в догонку — для чего нужен X-UA-Compatible?

    Про баг лучше написать ребятам, которые делали сайт. X-UA-Compatible нужен для того, чтобы выставить режим рендеринга в IE8 (подробности смотрите в гугле).

  26. Янис Прасол
    30 августа 2009

    Приходилось ли делать выравнивание в ячейках таблиц по разделителю (для финансовых данных)?

    В HTML 4 есть возможность сделать align=»char» char=».» для ячеек таблиц, но, как показали тесты, это не поддерживается ни одним браузером. Также в спецификации CSS 2 есть возможность установить text-align: «,», но это тоже почему-то не поддерживается ни одним браузером.

    Как вы полагаете, почему даже самые модные браузеры игнорируют спецификации CSS и HTML и есть ли красивое решение этой задачи без применения JS? Спасибо.

    Возможно, проблема с определением точной позиции в разных ячейках (и с разными данными). Возможно, скорость и качество работы такого механизма не устраивает разработчиков браузеров, поэтому они не включили их. Возможно, в спецификации этот момент точно не описан. Про красивое решение сказать не могу — никогда не было такой задачи. Думаю, вполне достаточно было бы форматировать данные перед выводом (добавлять недостающие нули) и выравнивать по правому краю.

  27. 30 августа 2009

    Расскажите, пожалуйста, про модульные сетки. Как правильно и красиво превращать PSD в html-страницу (особенно интересует, по какому принципу выставлять блоки, как задавать ширину и т.д.)?

    На эту тему я напишу отдельную большую статью.

  28. fekss
    31 августа 2009

    есть код Земля планета и еще куча option, можно ли сделать чтобы в код был таким, а в браузере показывалось «планета Земля». Для чего это нужно, список большой + там не только планеты, человек нажимает и начинает набирать на клавиатуре скажем «Земля», но его быстро не сможет переадресовать на элт. списка, примерно так )

    Не совсем понял задачу. Можете по почте прислать подробности?

  29. fekss
    31 августа 2009

    html порезался, вобщем там селект опшен «Земля планета»

  30. Шатов
    31 августа 2009

    Зачем на сайте Феликса (и не только) используются пустые классы?

    Похоже, особенности генерации шаблонов: по разным параметрам набирается значение класса и вставляется в атрибут class. Никакого скрытого смысла в этом нет :).

  31. set
    31 августа 2009

    *Насчет выбора имен селекторов. Никогда не описываю там презентационную составляющую, типа .right {float: right} *
    и тут же в примере http://imperia.rs.ru/press-center/photo/ видим именно .right {float: right} и .left , который почему-то совсем не описан :)

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

  32. Янис
    2 сентября 2009

    Почему для иконки «закрыть» в различных выпадающих и модальных окнах на сайтах студии используется изображение, а не символ × ?

    Не знаю. Наверно потому, что символ × не всегда похож на то, что хочет дизайнер.

  33. dom1n1k
    5 сентября 2009

    > Янис Прасол
    > Приходилось ли делать выравнивание в ячейках таблиц по разделителю (для финансовых данных)?
    > [...]
    > и есть ли красивое решение этой задачи без применения JS?

    Присоединяюсь к вопросу.

    От себя скажу, что задумывался над этой задачей, и мне в голову приходило только 2 обходных маневра:
    1) В каждую клетку вложить трёх-ячеечную таблицу под целое, точку и дробную часть. Можно и двух-, но если задавать разные цвета и т.д., то лучше трёх. По понятным причинам это невероятный изврат и использовать в реальной жизни я это не стал бы никогда.
    2) Добить каждое значение спереди/сзади ведущими/незначащими нулями, выровняв таким образом все ширины. А сами нули завернуть в прозрачные span-ы. Дальше выравниваем значения в любую сторону — точки выстроятся автоматом. Вариант тоже не идеальный, но уже гораздо лучше.

    Можно попробовать сделать так: число обрамить двумя span’ами, которым указать display: inline-block и указать необходимую ширину.

  34. Янис
    5 сентября 2009

    > dom1n1k

    Мы явно не первые, кто задается этим впоросом:
    http://krijnhoetmer.nl/stuff/javascript/table-align-char/

    Там есть несколько решений, из них наиболее приемлемое то, что с двумя float-блоками. Но в этом случае требуется указание фиксированной ширины, что не очень хорошо.

  35. Алексей
    6 сентября 2009

    Сидя под маком Сергей, как вы отлаживаете сайты под IE?

    У меня под каждую версию IE заведена отдельная виртуальная машина, в которой все проверяю.

  36. Стас
    7 сентября 2009

    Cергей, что меняется в свойствах блока когда ему добавляешь border, даже прозрачный?
    Пору раз сталкивался, что после удаления border появлялись глюки (например при скроллинге ul через jquery), после возвращения бордюра все нормально.

    С такими проблемами не сталкивался. Можете прислать пример?

  37. 12 сентября 2009

    «Захожу в ИЕ8, допустим, на http://www.felixzawojski.ru/. Всё нормально. Но если нажать F5 и перезагрузить страницу, то возникает жестокий баг — http://pics.livejournal.com/vadimgoncharov/pic/0001cqc6

    Не только с этим сайтом, а практически со всеми, где есть центрирование. Оно почему-то убивается браузером. Что делать? Сталкивались с таким?»

    Нашел решение проблемы. Всё из-за компонента Companion.JS, который идет вместе с DebugBar’ом для IE от Core Services.

    Решение: сервис -> надстройки -> панель инструментов и расширения -> companion.js -> отключить

  38. Артем
    16 сентября 2009

    вопрос такой: есть Div в котором на фоне стоит картинка. как сделать чтобы картинка была шириной в див (или просто фиксированного размера но меньшего), не прибегая к редактором изображения для уменьшения изображения?

  39. Марина
    18 сентября 2009

    Добрый день, Сергей. Сегодня столкнулась с такой проблемой (проблемой ли..). по пунктам что имеем в макете дизайна и что требуется:

    — обычный список логотипов или партнеров (float:left) как на куче сайтов.
    — ширина и высота у всех разная, но мы знаем максимально возможную высоту логотипа (60px)
    — сайт резинится, т.е. при ресайзе логотипы могут перескакивать
    — требуется: чтобы логотипы выравнивались по нижней своей границе.

    насколько я понимаю, решается это с помощью table-cell и vertical-align, но в ие 6/7 оно не работает.

    пробовала какие-то разные варианты, но ничего не получилось. но поскольку известна максимальная высота, то я при загрузке написала что-то вроде:
    $(‘.logotip img’).each (function() {
    var iHeight = 60 — $(this).attr(‘height’);
    $(this).css({ margin: iHeight + ‘px 0 0 0′});
    });

    Спасибо
    и вот вопрос:
    1. если бы не была известна макс. высота — как решать задачу?
    2. может есть какой-то давно всем известный способ?

  40. set
    18 сентября 2009

    Марина, позвольте мне предложить свой вариант:

    ul li {display: inline-block; vertical-align: bottom; *display: inline; zoom:1;}





  41. set
    18 сентября 2009

    не получается вставить код, потому привожу ссылку на код —
    http://dl.getdropbox.com/u/1034481/newhtml.html

  42. Игорь
    21 сентября 2009

    2set ещё есть ФФ2, для которого надо писать display: -moz-inline-box или -moz-inline-stack и, возможно, ещё в контейнер класть содержимое li (если там больше одного элемента, как правило).

  43. set
    21 сентября 2009

    2 Игорь
    знаю, раньше так и делал, но уже с пол года, как фф2 я сбросил со счетов, ибо процент пользователей, которые остались на версии фф меньше 3, стремится к нулю…

    если же не игнорить их, то в li надо вставить какой-нить блочный элемент, а в стиле для li дописать ещё display: -moz-inline-box

  44. Alexандр
    22 сентября 2009

    Сергей!

    В самом первом вопросе «..как растягивать фоновую картинку на все окно браузера» вы ведь описали работу с обычной картинкой — тегом IMG.
    А ведь, действительно, можно ли растягивать ИМЕННО ФОНОВУЮ картинку, т.е. заданную как бакграунд?
    Если такое кто-то может, то это и есть самое интересное.
    :-)

  45. Сергей Чикуенок
    22 сентября 2009

    Сафари такое может:
    -webkit-background-size: 50% 100%;
    Только я не вижу принципиальных причин не использовать <img> для таких задач.

  46. Alexандр
    23 сентября 2009

    Да, сафари это здорово! Но, увы, не очень востребованная бродилка.

    Вот, к примеру, одна из причин или случаев.
    Меню, основанное на списках UL или DD с динамически меняющемся количеством элементов этого меню. Фон такого меню в утвержденном (!) дизайне в виде «хитрого» градиента.

    Было бы приятно если бы фоновая картинка, заданная в стилевых правилах растягивалась по размеру блока меню.
    К сожаленимю, css в реализации браузеров MS и Mozilla не позволяет растягивать бакграунды.

  47. Alexандр
    25 сентября 2009

    Сергей!
    С вашей точки зрения — как решается проблема бакграундов в «эластичных» дизайнах?

    Ведь многие браузеры не изменяют фоновые изображения, заданные в виде параметра или стилевого правила.

    А о каких проблемах идет речь? Имеете в виду масштабирование фона через zoom?

  48. Alexандр
    29 сентября 2009

    1. Если элементы оформления, такие как бакграунды являются частью интерфейса, то в эластичных раскладках, когда все размеры элементов задаются через размерность «EM» раскладка «едет» при изменении базового размера шрифта в браузере. Т.е. элементы соразмерно тянутся, а фоновые изображения остаются прежними.

    2. Не уверен, что ZOOM «растягивает» бакграунды. Из описания свойства следует, что «тянутся» только элементы документа, те которым назначено правило с zoom.
    http://reference.sitepoint.com/css/zoom

    3. Стилевое свойство ZOOM (также как и background-size) не стандартное и применимо только в одном определенном семействе браузеров. Что совершенно неприемлемо. Разве что в качестве хака или «костыля».

    Переформулирую вопрос:
    Имеется ли у Вас метод (способ, подход, know how), позволяющий «стандартным» браузерам, растягивать фоновые изображения, заданные как параметры или стилевые правила? В том числе в эластичных раскладках, таких, в которых размеры элементов задаются через шрифтовую размерность «EM»?

    Знаю только одно решение: использовать вместо фоновой картинки тэг <img>. Тогда размеры можно задавать в любых единицах.

  49. Alexандр
    30 сентября 2009

    Я снимаю свой вопрос.
    Всем спасибо!

  50. bad1
    8 октября 2009

    Сергей, добрый день! Скажите, пожалуйста, а вот у этой проблемы (см. http://img28.imageshack.us/img28/4443/200910081456sc.png) существует решение?

    Я нагуглил ссылку http://szafranek.net/works/articles/font-smoothing-explained/ и, судя по ней, решения нет :( Но это сглаживание так ужасно выглядит, что я не мог у вас не спросить :)

    В любом случае, заранее большое спасибо!

    А в чем именно проблема? Нужно отключить сглаживание в IE, или включить в FF?

  51. bad1
    8 октября 2009

    Отключить в IE, но не локально для меня — а просто что бы его не было в принципе для всех, т.е. сделать так, что бы внешний вид текстовых элементов был представлен в IE так же, как он отображается в FF (и как он был задуман в макетах страниц). На маленьком куске изображения не сильно заметно, но при переходе от дизайна к свёрстанному макету угробилась масса положительных эмоций по поводу «аккуратности» страницы (ну, или это мой «бзик», но в любом случае, утверждался один вариант изображения, а в результате появляется совершенно другой, который мне совсем не нравится :( ).
    Спасибо!

    Я бы сказал, что это заморочки, на которые не стоит обращать внимания. В любом случае каждый пользователь увидит текст по-своему: кто-то включит принудительное сглаживание, кто-то отключит. Но если уж вам прям так надо для IE убрать сглаживание, то попробуйте блоку с текстом указать какой-нибудь фильтр, например: filter:alpha(opacity=99)

  52. bad1
    8 октября 2009

    Сергей, спасибо! :) Я уже был готов последовать вашему первому совету и смириться, но ваш второй совет сработал :) Ещё раз огромное спасибо!

  53. Станислав
    14 октября 2009

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

    Или качественная карта возможна только при вёрстке оной вручную?

    В гугле можно найти много сервисов по созданию карты сайта, но я ни одним из них не пользовался. Все карты сайта рисуются дизайнером и создаются из CMS автоматически.

  54. Никита
    20 октября 2009

    Сергей, здравствуйте.

    Подскажите, почему на сайтах, сделанных в студии, часто используют тег ins с бэкграундом, вместо простого img? Например, в лекарствах на coldrex.ru.

    img не удобен создания декораций, так как нужно указывать пути к картинкам в каждом элементе, и поменять через CSS не получится. Для решения подобных проблем решили выбрать редко используемый элемент (в данном случае ins) и управлять внешним видом через CSS

  55. junior
    27 октября 2009

    подскажите пжл.есть фо флеше меню как сделат ьчто бы оно было всегда на всю ширину экрана при любом разришении монитора.

    Нужно вставить флэшку на страницу как объект шириной 100%, а в самом флэше на событие onResize запускать перерисовку пунктов меню. Подробнее об этом вам расскажут на специализированных ресурсах по флэшу.

  56. Стас
    27 октября 2009

    Здраствуйте Сергей,
    делаю табы примерно такого вида http://img44.imageshack.us/img44/9741/tabss.png
    сейчас приходится у каждого элемента уменьшать z-index, потому что без этого правый край перекрывается.

    Делаю примерно так

    Раз
    Два
    Три

    и в сss
    .tab1 {z-index:3;}
    .tab2 {z-index:2;}
    .tab3 {z-index:1;}

    Есть нармальный способ верстки таких табов или только так?

    Сам задумывался, как такое сделать, но универсального решения придумать не смог. Можно попробовать извратиться и вывести меню в обратном порядке, расположив их с помощью float:right, можно попробовать некоторые декорации внутри пунктов меню вынести на задний план с помощью z-index: -1.

  57. Александр
    29 октября 2009

    Сергей, как бы Вы решили проблему резиновой верстки на дивах, когда нужно, чтобы один из рядом стоящих блоков растягивался в зависимости от контента, а второй занимал по ширине всё оставшееся пространство.

    Отличный пример — «Резиновое» поле ввода в форме на http://ya.ru, но там таблицы.
    Интересует решение для всех современных браузеров и IE6.

    Один блок — float: left, второй как есть с overflow:hidden. Начал бы от этого отталкиваться, точного решения пока показать не могу.

  58. Евгений
    29 октября 2009

    Сергей, здравствуйте.
    Есть список наименований товаров, в конце каждой строки после наименования проставлено количество товаров. Можно ли сделать так, чтобы это количество не переносилось в одиночестве на следующую строчку (при сжимании колонки)?

    Я делал так: наименование и количество обрамляю span’ом, ставлю у него правый margin примерно по размеру элемента с количеством. Само количество тоже обрамляю span’ом и говорю ему position:absolute. Можно попробовать количество вплотную прибить к наименованию и с помощью margin/padding сместить в сторону, но не уверен, что в каждом браузере не будет разрывов.

  59. Стас
    29 октября 2009

    2Евгений

    Поставьте неразрывный пробел

  60. Иван
    5 ноября 2009

    Сергей — есть ли ощутимая разница поведения в браузерах доктайпа HTML transitional с XHTML transitional? Или доктайп посути описывает только набор разрешенных элементов (обязательных аттрибутов)

    Самая заметная разница — это расположение картинки в ячейке таблицы. В Transitional картинка вплотную будет прилегать к границам ячейки, а в Strict снизу будет отступ. Всё потому, что картинка — инлайн-элемент, который по умолчанию выравнивается по базовой линии (а не по нижнему краю строки). Возможно, есть что-то ещё (где-то была ссылка с описанием), менее значимое и специфичное. Я всега использую Transitional.

  61. Кирилл
    9 ноября 2009

    Сергей, здравствуйте.
    У меня есть select с шириной в процентах.
    При изменении набора option из JS ширина select в IE меняется.
    Подозреваю, что Вы сталкивались с данной проблемой.
    Задавать ширину в пикселях не хочу.
    Существует ли какое-нибудь решение?
    Спасибо.

    Попробуйте временно сменить ширину селекта, например, 10px, потом убрать её. Возможно, IE прочухается и обновит блок.

  62. Кирилл
    10 ноября 2009

    Спасибо! Ваше решение устранило проблему.
    Вы, конечно, классно чувствуете IE :)

  63. Valera
    11 ноября 2009

    Очень давно сталкиваюсь с проблемой размещения absolute блоков внутри inline-block. Все чудно работает везде, кроме оперы 9.2 — блоки, cпозиционированные через абсолют куда-то пропадают. Подскажите пожалуйста, как это можно исправить?

    [div style="position: relative; display: inline-block;"]
    [div style="position: absolute; left: 0; top: 0;"]this block disappears under Opera 9.2[/div]
    some text
    [/div]

    Попробуйте внутреннему блоку тоже сказать display:inline-block

  64. Valera
    11 ноября 2009

    Сергей, не сработало.

    Как думаете, стоить ли поддерживать Opera 9.2?

  65. Роман
    12 ноября 2009

    Добрый вечер, Сергей.
    Существет ли способ располагать блоки равномерно по всей ширине экрана и чтобы количество блоков на строке менялось в зависимости от ширины экрана? Как например это сделано на странице результатов поиска картинок в Яндексе. В Яндексе, насколько я понял, используются таблицы, а возможно ли без них? Гугл на аналогичной странице использует js. Возможно ли без него?
    Причем нужно чтобы именно как у Яндекса — т.е. если количество картинок на последней строке меньше количества на других, то картинки выстраиваются по одной вертикали, а не растягивались на всю ширину.
    Т.е. вариант, когда получается так:
    O O O
    O O O
    O O
    известен.
    А хочется, чтобы так:
    O O O
    O O O
    O O

  66. GreLI
    13 ноября 2009

    Роман, в Яндексе используется JS. Я бы здесь отталкивался от display: inline-block и text-align: justify. Сложность с последним рядом, возможно, придётся вставить элемент, с 100% шириной и нулевой высотой, или сделать ряд «болванок», с заданной шириной, в зависимости от того что именно хотите там видеть.

  67. Роман
    13 ноября 2009

    Действительно и у Яндекса JS. Не заметил. Видимо все-таки без скриптового варианта не существует.
    Inline-block, justify и растягивающий спан дают такой эффект (в прошлый раз съелись пробелы):
    О_О_О
    О___О
    а желательно такой:
    О_О_О
    О_О
    Если использовать болванки, то по-помоему не получится сделать переменное число элементов в строке, либо опять же добавлять эти болванки JS`ом по мере необходимости.

  68. Сергей Чикуенок
    13 ноября 2009

    Для новых браузеров можно воспользоваться CSS media queries, чтобы динамически менять ширину внутренних блоков в зависимости от ширины контейнера

  69. GreLI
    21 ноября 2009

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

  70. iSergey
    27 ноября 2009

    Здравствуйте Сергей.

    Подскажите, решение, как сделать тень у блока, в котором содержится основной контент сайта с высотой 100%?

  71. GreLI
    1 декабря 2009

    iSergey, а фон на body (или каком-нибудь вреппере, если есть) с background-position: right bottom не устраивает? Если нет, то уточните в чём проблема.

  72. takobus
    1 декабря 2009

    Классика :) Как сделать резиновое горизонтальное меню на всю ширину? Количество пунктов может меняться, ширина пунктов по содержимому, отступы между пунктами одинаковые, первый пункт по левому краю, последний — по правому. Т.е. имитация text-align:justify для пунктов меню. Во всех известных мне решениях что-нибудь, да смущает. Сильно. Есть семантичное решение?

  73. iSergey
    2 декабря 2009

    GreLI, нужно чтобы растягивающийся блок был всегда по центру.
    сделал две обертки, внешнюю и внутреннюю, у каждой указал тень, но внутренняя не растягивается на 100% в высоту

    вот пример: http://webobjects.ru/

  74. Vii
    2 декабря 2009

    iSergey, а почему не сделать одну широкую картинку с тенью (на весь контентный блок) и репитеть (растягивать в IE6) ее вертикально? Контент же у вас фиксированный.

  75. iSergey
    2 декабря 2009

    Vii, нет, растягивающийся

  76. MaratCrash
    8 декабря 2009

    Здравствуйте, Сергей!
    Для проекта пользуюсь Вашим изобретением: rocon (js библиотека) .
    Цель — визуализировать скругленные уголки у textarea.
    Пишу так:

    .rc10{
    border: 1px solid #ccc;
    padding: 10px;
    }

    .comment_form .rounded_wrapper{
    width: 100%;
    }

    .comment_form textarea{
    width: 100%;
    overflow: hidden;
    border: none;
    }

    Не работает в Chrome, Safari, Opera. Работает, но выводит не нужные стрелочки.

  77. GreLI
    9 декабря 2009

    iSergey, а если внешним вреппером сделать <body>?

  78. Сергей Чикуенок
    10 декабря 2009

    MaratCrash, инпуты пока не поддерживаются, попробую что-нибудь придумать к следующей версии.

  79. MaratCrash
    10 декабря 2009

    Сергей, спасибо за ответ. Разобрался с ситуацией. textarea обернул в div, а див уже скруглил. У textarea padding проставил.

  80. EugenyK
    14 декабря 2009

    Многим известное решение для прикрепления footer’а к нижней границе окна браузера при недостатке контента.
    http://matthewjamestaylor.com/blog/bottom-footer-demo.htm

    Часто случается, что внутри элемента div#body контент имеет минимальную ширину, скажем, не жмётся меньше чем до 999px. Тогда при горизонтальной прокрутке фон шапки и подвала некрасиво заканчивается. Никак кроме как выставив для #header и #footer position:fixed, решить это не получается, что в большинстве случаев непригодно.
    Можно ли это как-то обойти?

    Обычно такие задачи решаются тем, что создаётся общая обёртка для всей страницы и ей указывается min-width.

  81. Артем
    15 декабря 2009

    Сергей, првиетствую. вопрос такой: как прилипить картинку в плотную к низу сайта, но так чтобы при малой информации она была снизу а посердине пустой экран, а при большой она не была видна в «первый» экран?

  82. Poluyanov
    15 декабря 2009

    Артем, Вам наверно подойдет вот это
    http://www.zakharov.ms/footer/

  83. MaratCrash
    16 декабря 2009

    Здравствуйте, Сергей!
    Такая ситуация. У меня img позициирован абсолютно (position: absolute). Изображение, прописанное в src — png формата.
    Почему-то, используя Ваш js скрипт (из Техногрета), в IE6 появляется косяк: изображение выводится с рамкой белой (пробовал убивать border и backgraund — не помогло).
    Посоветуйте, пожалуйста, как быть.
    Спасибо Вам за то, что Вы делаете!

    Хотелось бы увидеть пример, а также название скрипта, который используется

  84. EzheG
    20 декабря 2009

    Сергей, здравствуйте. Есть небольшая задачка. В текст необходимо вставлять маленькие картинки. Вместо многочисленных мелких картинок я решил использовать спойлер. Моя реализация проста, в код вставляю img тег с src на прозрачную картинку и с помощью стилей прописываю положение фоновой картинки. Способ работает вполне хорошо да только хотелось бы обойтись без прозрачной картинки. Можете ли вы предложить свой вариант решения этой задачи?
    Пример моей реализации: http://slil.ru/28373064

    Можно использовать элементы с display:inline-block; zoom:1. Тогда этим элементам можно задавать размеры и они будут выравниваться по базовой линии. Для Firefox 2 это не сработает, нужно указать display:-moz-inline-stack;.

  85. Роман
    5 января 2010

    Здравствуйте, Сергей.
    Хотел уточнить одну мелочь по работе с eclipse, раньше вы писали:

    Затем создаю проект в Eclipse и начитаю делать базовый шаблон, из которого потом делаю макеты отдельных страниц.

    Этот базовый шаблон имеет что-то общее с шаблонами dreamweaver’а?
    Как его создать?

    Это просто HTML-документ, в котором собраны все основные блоки и комментарии к ним. Просто все сайты, которые я делаю, используют CMS, поэтому при вёрстке нового макета приходится совершать много лишних телодвижений, чтобы можно было удобно работать и проверять в рамках CMS. Вместо этого я создаю новый статичный шаблон на основе базового и работаю с ним.

  86. MaratCrash
    9 января 2010

    Сергей, приветствую!
    С Новым годом Вас! Желаю реализации поставленных целей на этот год и личного счастья! =)

    Сергей, возник такой вопрос. Дизайнеры частенько рисуют текст с шрифтами, которые сложно выразить с помощью css.
    К примеру. В фотошопе текст со шрифтом Myriad Pro имеет свойства «плавно сглаженный» и «псевдополужирный».
    Как их выразить через css?

    Обычно этого говорит о том, что дизайнер работает на Маке и не пофиксил проблему со стандартными шрифтами (Arial, Verdana): они не показывают русские буквы. Поэтому он использует «нестандартный» Myriad Pro. Как правило, на это просто можно забивать. А настроек типа сглаживания нет в СSS, как и имитации полужирного начертания.

  87. 11 января 2010

    Сергей, сталкивались ли вы с такой проблемой:

    Есть блок-родитель — у него font-size:0
    Есть блоки-дети — у них display:inline-block (ну и различные хаки для неподдерживающих браузеров);width:25%;vertical-align:top;ну и font-size нужный

    Получается такая картина:
    если блоки-дети прописаны не впритык друг к другу (не , а перенос), то
    в опере 9/10, фф, ие8, сафари 3/4 всё в порядке
    в ие6/7 расстояние между детьми 1 пиксель — но *margin-right:-1px решает проблему
    а особняком стоит хром 3 — у него тоже получается одно-пиксельный отступ

    Единственное решение проблемы, которое я знаю — писать хтмл всплошную

    Сергей, сталкивались ли вы с этой проблемой и если да, то как её решали?

    С такой проблемой сталкивался, и решал её именно выводом блоков впритык :) Поиском обходных путей пока не занимался (font-size: 0 не устраивает, так как я все шрифты указываю в относительных единицах)

  88. 11 января 2010

    ошибка парсера, там в скобках:

    не , а перенос

  89. 11 января 2010

    ещё ошибка парсера, там в скобках:

    не </div><div>, а </div>перенос<div>

  90. Yrgl
    12 января 2010

    @Рустам, ещё одно решение писать вот так:
    .
    А отступ будет между элементами с display: inline-block во всех браузерах, если выводить их в DOMе с переносом на новую строку, это происходить также как и с display: inline элементами

  91. Yrgl
    12 января 2010

    Извиняюсь, код, который я хотел привести выше, вот такой:
    <div></div><!—
    —><div></div>

  92. Yrgl
    12 января 2010

    Эх, в общем, между дивами в примере идёт комментарий

  93. Стас
    15 января 2010

    Сергей, здравствуйте.
    Мне интересно как вы подгоняете верстку под макеты?

    Вроде все делаю правильно/считаю но в итоговой верстке то 1 то 2 пикселя не так как на макете, снимаю скриншот и полу прозрачностью ложу на макет, ну и так проверяю/подгоняю до полной идентичности.

    Или это лишнее задротство?

  94. 16 января 2010

    Стас, о том что это задротство говорит такой простой факт: вы не добьётесь попиксельной точности даже между браузерами. Этому будут препятствовать всякие мелкие баги и особенности рендеринга текста. Особенно хорошо это видно в IE8 при переключении режимов IE7/8.

  95. 29 января 2010

    Сергей,
    пытаюсь подогнать решение по борьбе с прыгающими блоками (http://www.artlebedev.ru/tools/technogrette/html/fix_floats_in_ie_by_padding/) для моей задачи — двухколоночный макет.
    Проблема в следующем: Колонки засовываю в div шириной 96%, отступами по 2% от краев. Несмотря на display: inline, между колонками появляется отступ, и распределены они слишком равномерно по экрану.
    Однако, если в IE Devbar поставить снова display: inline, проблема исчезает…
    В чем может быть причина?

  96. 5 февраля 2010

    Почему для картинки png8 c полупрозрачностью не срабатывает фильтр AlphaImageLoader или другие скрипты для отображениея полупрозрачности png в ie6?

    Такие особенности работы IE6. Для png8 можно вообще не использовать фильтры

  97. 5 февраля 2010

    ну а если сложилась такая ситуация, что я сохранил картинку в Fireworksе в формате PNG-8 с альфа-каналами и она весит напорядок меньше, чем таже картинка с тем же альфа-каналом в формате png24. Но в ie6 не получается заставить показать эту полупрозрачность через фильтр AlphaImageLoader или скрипты. Получается заставить увидеть полупрозрачность картинки в формате PNG-8 с альфа-каналами в браузере ie6 никак не получитсвя?

    Да, png8 с полупрозрачностью не получится увидеть в IE6. Многие разработчики специально переводят в PNG8, чтобы сэкономить ресурсы в IE6.

  98. White
    6 февраля 2010

    Коротко…
    Есть картинка, порезанная на 3 фрагмента…
    Центральная — размером примерно 900 пикс.
    по бокам две картинки примерно по 300 пикс. шириной.
    Задача — сделать верстку так, чтобы при уменьшении разрешения монитора, не появлялось полосы горизонтальной прокрутки, т.е., чтобы боковые картинки (фоном) скрывались по краям. Справа получается нормально, а вот слева картинка некорректно выравнивается по отношению к центральной.
    Код примерно такой:

    Что посоветуете? Спасибо!

  99. Игорь
    7 февраля 2010

    Привет.
    Ситуация такая. Внутри ячейки таблицы два div с CSS display:inlie-block. Ширина таблицы и ячейки не задана. Свободного места справа достаточно. Проблема в Опере (10, 9). Выглядит так, что этот браузер неверно посчитал необходимую ширину ячейки и поэтому второй див не встал справа от первого, но если убрать обрамляющую ячейку, то все в порядке. Я понимаю, что это можно рещить сменой способа html верстки, но интересно понять, что не так? Есть идеи?

  100. Кирилл
    12 февраля 2010

    Сергей, здравствуйте.
    Разбирался с методом «звёздочка» для создания закруглённых уголков и столкнулся с проблемой:
    если всё обернуть таблицей, то в ie7 свойство margin-left:100% для правых углов перестаёт работать.
    Проверил на Вашем примере из техногрета.
    Сталкивались с этим? Что посоветуете?
    Спасибо.

  101. Кирилл
    20 февраля 2010

    Нашёл ответ на свой вопрос в комментариях к одной из статей на Вашем сайте :)

  102. 25 февраля 2010

    Добрый день.

    Сергей, мне интересен следующий момент: сталкивались ли вы когда-нибудь с задачей оформления текста, подсвеченного фоном, но особенность в том, что текст курсивный, и фоновая заливка имеет края со скосом. Я делал реализацию такого текста по адресу http://goo.gl/GaTp. Реально ли сделать это без js и кроссбраузерно?

    Спасибо, надеюсь заинтересовал постановкой задачи.

  103. Neon
    3 марта 2010

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

    5 (или сколько угодно) вложенных друг друга дива должны растягиваться на минимальную высоту в 100% и при увеличении контента соответственно растягиваться дальше. Каждый див содержит фон — уголки и сторонки общей трехсторонней тени или любой другой сложно-накромсанный фон. Ширина дивов не фиксирована, тянется, т.е. обманный фон на фикс ширину не подложишь.

    Внешнему диву задано вертикальное растягивание
    html, body {height:100%}
    #wrapper {min-height:100%; height: auto !important; height:100%;}

    назначая такие свойства высоты внутренним врэпперам ничего не дает. Как задать свойства, чтобы внутренние тоже растягивались по высоте?

    content

    Есть ли какое-то универсальное решение? Уже совсем запутался.(((.

  104. Neon
    3 марта 2010

    Ой, тут тэги отключены?
    вот макет страницы для моего вопроса
    body
    div id=wrapper
    div id=wrapper2
    div id=wrapper3
    div id=wrapper4
    div id=wrapper5
    content
    /div
    /div
    /div
    /div
    /div
    div id=footer /div
    /body

  105. iSergey
    3 марта 2010

    2Neon.

    Извиняюсь, если я правильно понял, то вам нужно что-то вроде этого:

    http://webobjects.ru/test/

    P.S. Не помню где откопал это решение.

  106. 4 марта 2010

    Сергей, сталкивались с таким? http://fabrorum.ru/temp/iebgtest/

    Это нормльно? :D

  107. 4 марта 2010

    Подробнее о проблеме, пример которой я привел выше:

    Дело в том, что IE6 не матчит селектор id.class больше одного, но в то же время матчит дочерние селекторы через такие объявления.

    Как так? :D

    Это стандартная проблема IE6. Ещё он не понимает несколько сцепленных вместе классов, вроде .class1.class2.class3 {} (применяется только последний класс, то есть .class3). Решение — избегать таких конструкций, сводить всё к одному классу или id.

  108. 6 марта 2010

    Здравствуйте. Меня заинтересовало то, как организована верстка формы поиска на этом сайте. Форма абсолютно позиционируется относительно хедера — здесь все ясно. Форме задан отрицательный верхний margin и положительный padding, а input абсолютно позиционируется относительно формы. Скорее всего, это сделано во имя кроссбраузерности, но не могли бы вы рассказать подробнее, т. к. сам столкнулся с подобной задачей и ваше решение мне помогло избавиться от кое-каких нестыковок, но хотелось бы знать, как это работает.

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

  109. Neolord
    11 марта 2010

    Скажите пожалуйста, можно ли без JS сделать невозможным выделение текста в инлайн-элементе? Т.е. чтобы при наведении на него курсор не превращался в «редактировать текст» и чтобы сам текст не выделялся, а был как будто бы картинкой?

  110. GreLI
    18 марта 2010

    Neolord, вы не должны этого хотеть! Если серьёзно, то можно сделать через CSS стандартный курсор, а в новых браузерах сделать выделение таким же как и текст (то есть невидимым), но копировать это помешать не может. А также никто никогда не сможет запретить получить текст из исходников страницы.

  111. Neolord
    19 марта 2010

    А я и не собираюсь запрещать копирование, меня волнует исключительно эстетический момент. Чтобы при drag&dropе на странице не выделялся текст, или чтобы элемент выглядел как кнопка, не будучи ей.

  112. GreLI
    24 марта 2010

    Neolord, вспомнилось: есть ещё свойство мозиллы -moz-user-select, которое отключает выделение (на вид).

  113. 31 марта 2010

    Добрый день. Подскажите, пожалуйста: возможно ли вообще из браузера (например используя firebug в firefox) редактировать css файл на сервере?
    Я слышал, что есть дополнение к firefox для соединения по FTP, так же можно менять стили на странице в firebug, а нельзя ли их «совместить» — меняешь стили в firebug, а они меняются на сервере?
    Может кто слышал о таком чуде (не обязательно для firefox, вдруг для chrome есть такая штука).

  114. Дмитрий
    2 апреля 2010

    Valera, чтобы решить проблему с inline-block элементами в Опере 9.2 и Firefox 1-2, добавьте в блок с display:inline-block див с position:relative, а уже в него помещайте содержимое.

    [div style=display:-moz-inline-stack;display:inline-block;_display:inline;_zoom:1]
    [div style=position:relative]
    [div style=position:absolute]

    [/div]
    [/div]
    [/div]

  115. Олег
    8 апреля 2010

    Имеется таблица 2 строчки на 3 колонки, например. Нужно одну из строк и замостить текстурой.

    Проблема в том, что если в CSS прописать background для (или ), то в каждой ячейке этой строки создается своя копия текстуры (появляются швы между ячейками), а нужно, чтобы одна текстура была фоном для всей строки. Разбивать данные на несколько таблиц нельзя. Как поступить?

  116. Олег
    8 апреля 2010

    Имеется таблица 2 строчки на 3 колонки, например. Нужно одну из строк и замостить текстурой.

    Проблема в том, что если в CSS прописать background для TR (или BODY), то в каждой ячейке этой строки создается своя копия текстуры (появляются швы между ячейками), а нужно, чтобы одна текстура была фоном для всей строки. Разбивать данные на несколько таблиц нельзя. Как поступить?

    Есть вариант указать background-attachment: fixed для <tr>, но будет неприятный эффект при прокрутке. Я вижу два возможных способа. Первый: кладём в первую ячейку <div> с position: absolute; z-index: -1;и фоном. Если ширина и высота строки таблицы заранее известны, то указываем их для этого дива в CSS, иначи используем JS. Второй вариант: кладём фон на всю таблицу, а все строки, кроме подсвеченной, закрашиваем цветом фона страницы

  117. Денис
    13 апреля 2010

    Здравствуйте. Сергей, скажите, пожалуйста, зачем в примере, в техногрете (http://www.artlebedev.ru/tools/technogrette/html/rounded-corners/) папка __MACOSX?

    Это так Mac OS делает архивы :) Ничего важного там нет, просто временные ресурсы.

  118. Дмитрий
    24 апреля 2010

    Сергей, когда вы уже напишете книгу?

  119. 26 апреля 2010

    Сергей, а ты сталкивался с такой проблемой: обтекаемый блок слева (float:left), а справа блок с margin-left и overflow:hidden.
    значение margin-left равно ширине блока с float:left.
    При этом в опере 9 возникает определенная жесть, в опере 10 тоже.
    Решение которое я знаю — в правый блок внутрь вкладывается ещё блок и уже ему дается overflow:hidden. Не знаешь ли ты решения подобной проблемы без дополнительного блока?

    Нет, с таким не сталкивался. Попробуйте левому блоку указать отрицательный margin-right, равный ширине блока

  120. Елена
    6 мая 2010

    Привет!
    Нужно переверстать таблицу дивами. Количество строк не ограничено, как и столбцов, часть столбцов задаеться через пиксели, часть через проценты и есть один столбец с шириной и высотой авто, в который пользователь вводит текст.
    Короче, таблица из 5 столбцов: 20px, 13%, 456px, auto, 76px.
    Все бы ничего, но нужно чтоб показывалось прилюом разрешении монитора и даже на телефонах

  121. Anton Poleshchuk
    6 мая 2010

    как относишься к проектам less (less.app), sass и подобным? может быть используешь что то подобное?

    lass судя по документации достаточно удобная вещь для крупных проектов с большим кол-вом стилей

  122. 9 июня 2010

    Сергей, не сталкивался ли ты с подобным и не знаешь ли ты решение следующей задачи?
    http://savepic.ru/1256151.png

    Резиновая вёрстка. Есть блок-родитель (серый блок). Есть ребёнок (красный блок)

    У ребёнка есть минимальная ширина, меньше которой он не должен сужаться.
    Однако родитель может иметь ширину меньше — в этом случае происходит обрезка ребёнка, но обрезка таким образом, что отображается серединное содержание блока-ребёнка.
    При увеличении ширины окна браузера — блок-ребёнок логично растягивается по ширине родителя.

    Блок ребёнок не имеет фиксированной высоты и его высота должна зависеть от количества контента.

    Сложность в серединности обрезки.

  123. Денис
    14 июня 2010

    Здравствуйте, Сергей. http://grab.by/4VCp — сделал общий спрайт для сайта. Но столкнулся с такой проблемой: при увеличении масштаба в Chrome изображения уголков начинают «плыть» (появляются зазоры), а у иконок появляются различные артефакты (края соседних изображений). Я разнёс изображения — http://grab.by/4VFx. Картина стала лучше, но только местами.

    Сергей, подскажите, пожалуйста, решение проблемы.

  124. 4 июля 2010

    Рустам, насколько я знаю, такое можно решить только центрированием обёртки ребёнка с отрицателными отступами.

  125. 4 июля 2010

    GreLI, проблема возникает тогда, когда эти отрицательные маргины сочетаются с шириной больше минимальной

  126. Сергей Чикуенок
    5 июля 2010

    Рустам, такое можно легко реализовать в современных браузерах, которые поддерживают CSS Transforms: transform: translate(-50%, 0) (проценты считаются от самого блока, а не его родителя). Какое-то кроссбраузерное решение пока не придумал

  127. Сергей Чикуенок
    5 июля 2010

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

  128. Саша
    8 июля 2010

    Сергей, как бы Вы сверстали такой блок http://habreffect.ru/files/05f/1ed460bb3/form.png

    Если считаться с тем, что нарисовал дизайнер, то inline-block нам в помощь. Но хотелось бы бронебойности: вдруг размер шрифта изменят над полем ввода, или строка с ошибкой выростет до нескольких строк.

    Можно ли обойтись без таблиц для IE6+ и браузеров? Спасибо.

  129. Сергей Чикуенок
    9 июля 2010

    Посмотрите, как сделан вывод подписи «обычная цена» и «скидка» на бигбаззи: http://bigbuzzy.ru/
    В принципе, можно поступить точно так же, а изменившийся размер шрифта компенсировать отступами в em сверху и снизу.

    Второй вариант, которым я пользуюсь в таких случаях: http://media.chikuyonok.ru/form/

  130. Станислав
    12 июля 2010

    Сергей, здравствуйте.

    Расскажите, для чего пишется , ведь, насколько мне известно, второй значение через дефис пишется для уточнения языка. Как например для американского английского . Чем уточняется русский мне сложно представить :) Спрашиваю у вас, потому что встретил при развороте html:5 через ZenCoding, так что, наверное, вы в курсе.

    Спасибо.

  131. Станислав
    12 июля 2010

    UPD: парсер порезал код, поправил.

    Сергей, здравствуйте.

    Расскажите, для чего пишется , ведь, насколько мне известно, второe значение через дефис пишется для уточнения языка. Как например для американского английского. Чем уточняется русский мне сложно представить :) Спрашиваю у вас, потому что встретил при развороте html:5 через ZenCoding, так что, наверное, вы в курсе.

    Спасибо.

  132. Станислав
    12 июля 2010

    UPD 2: еще раз попправил, жаль нет превью комментариев :)

    Сергей, здравствуйте.

    Расскажите, для чего пишется , ведь, насколько мне известно, второe значение через дефис пишется для уточнения языка. Как например для американского английского. Чем уточняется русский мне сложно представить :) Спрашиваю у вас, потому что встретил при развороте html:5 через ZenCoding, так что, наверное, вы в курсе.

    Спасибо.

  133. Станислав
    12 июля 2010

    Всё, сдаюсь — Текст картинкой

  134. Владислав Шкодин
    20 июля 2010

    Сергей, скажите, что за странный div у вас всё время в вёрстке встречается по имени measurer?

  135. Иван
    20 июля 2010

    Владислав, отвечу за Сергея.

    Это линейка для измерения ширины документа для эмуляции min-width в IE6

  136. Владислав Шкодин
    21 июля 2010

    А зачем для этого создавать отдельный div? Почему не привязаться к какому-нибудь div#main или к тому же body?

  137. Сергей Чикуенок
    21 июля 2010

    Иван правильно сказал — это для измерения min-width (а ещё и 1em в пикселях) для IE6. К body или div#main привязаться нельзя, потому что #measurer должен быть независимым блоком и отражать текущий размер вьюпорта, который затем выставляется для #main

  138. 31 июля 2010

    Сергей здравствуйте, спасибо за подобранную и полезную информацию! посоветуйте плиз. Заказал дизайн, мои требования заключались в том, чтобы сайт был резиновым (подходил под разные разрешения), любой текст реальный и не картинками. Получил http://vkoss.ru Сайт оптимизирован под разршение 1024, если разрешение больше, верхние надписи сдвигаются влево. Вопрос. Дизайн нужно переделывать или с существующим дизайном возможно сделать так, чтобы сайт нормально отображался на разных разрешениях. Спасибо!

  139. Сергей Чикуенок
    2 августа 2010

    Денис, в целом можно и этот дизайн более-менее нормально растянуть, только шапку нужно подрисовать, чтобы она по краям нормально заканчивалась. Но сейчас вёрстка совсем ужасная, её нужно полностью менять. PS: в Москве уже давно не действует код 095

  140. 3 августа 2010

    Здравствуйте.
    У меня такой вопрос:
    Видел сайт на котором бекграунд на одной и той же страничке меняется рандомно. Тоесть зашел один раз на сайт бекграунд один,зашел второй раз уже другой бекграунд. :)
    Можете помочь? Буду очень благодарен :)

  141. 3 августа 2010

    ЗЫ, забыл сам вопрос. Как реализовать такое? :)

  142. Андрей
    16 августа 2010

    Здравствуйте Сергей.

    Подскажите пожалуйста, удалось ли найти «хорошее» решение проблемы position:fixed для мобильных браузеров или хотя бы для iPhone?

    Куда вообще двигается мобильный интернет? Многие устройства, даже телефоны, уже способны сносно отображать страницы сверстанные для настольных браузеров, но от мобильных версий сайтов никто пока не отказывается (http://m.yandex.ru/)

    При работе с мобильными браузерами обращаетесь к каким-то источникам или собственные шишки набиваете?

  143. Сергей Чикуенок
    16 августа 2010

    Подскажите пожалуйста, удалось ли найти “хорошее” решение проблемы position:fixed для мобильных браузеров или хотя бы для iPhone?

    Только всякими эмуляциями, которые мне не очень нравятся, вроде TouchScroll или iScroll

    Куда вообще двигается мобильный интернет? Многие устройства, даже телефоны, уже способны сносно отображать страницы сверстанные для настольных браузеров, но от мобильных версий сайтов никто пока не отказывается

    Всё дело в том, что эти устройства довольно маломощные и будут очень долго отображать тот контент, который быстро отображается на десктопе. Например, популярный jQuery на айфоне инициализируется (именно инициализируется, а не скачивается) примерно секунду, а на десктопе это делается где-то 50 мс. Также мобильная версия (по крайне мере в Сафари на айфоне) требует другого подхода к вёрстке опять же для увеличения быстродействия (об этом как-нибудь напишу). Да и мобильный траффик стоит недёшево, чтобы грузить полноценную версию сайта.

    Поэтому отдельная мобильная версия сайта — это не рудимент, а суровая реальность.

    При работе с мобильными браузерами обращаетесь к каким-то источникам или собственные шишки набиваете?

    Сейчас информации крайне мало (особенно по эффективной вёрстке), поэтому сам набиваю шишки

  144. Саша
    19 августа 2010

    Сергей и читатели, добрый вечер.
    Необходимо сделать «листалку» (при клике страница не перезагружается) вида:

    [prev] 1 of 30 [next]

    Проблема состоит в том, что при переходе с элемента 9 на эл. 10 кнопка [next] сдвигается вправо. Мы не знаем общее количество элементов. Их может быть единицы, десятки, сотни, а по дизайну, ширина «листалки» должна быть как можно меньше. Т.е. задать ширину всему блоку не получится. На данный момент я решил проблему вычисления необходимой ширины джаваскриптом (тем более, что он нужен для функциональной реализации «листалки»). Но хотелось бы обойтись CSS-ом.

  145. 19 августа 2010

    это наверно самый простой способ.

  146. Владислав Шкодин
    28 сентября 2010

    label.placeholder {
    color:#B2B2B2;
    cursor:text;
    font-size:105%;
    left:0.5ex;
    margin-top:-2px;
    position:absolute;
    text-transform:lowercase;
    top:0.2em;
    z-index:2;
    }

    Сергей, объясните пожалуйста эту магию с вашего сайта http://bigbuzzy.ru/. Почему для текста проценты, для марджина пиксели, для лефта ex, а для топа em. Спасибо.

  147. Алексей
    30 сентября 2010

    Здравстуйте, Сергей.

    Вот, нашел красивую галерею.
    http://leihu.com/art

    Мне нравится, как она выглядит, но интуитивно я чувствую, что блоки-картинки должны выводиться одним списком, а не четырьмя, как сделано в примере.

    Однако, выводя блоки одним списком столкнулся со сложностями —
    поскольку высота блоков произвольная, вертикальные отступы между ними тоже становятся произвольными.
    Попробовал зайти с другого конца — с абсолютного позиционирования — и тоже не преуспел.
    Задача оказалась сложнее, чем я думал.

    Как сверстать такие блоки?

  148. Сергей Чикуенок
    4 октября 2010

    Владислав Шкодин, всё это шаманство нужно для того, чтобы подпись более-менее прилично себя вела при изменении размера шрифта. Проценты в шрифтах — то же самое, что и em, просто так привычней было. Единица ex наиболее близко по значению подходит к средней ширине буквы, поэтому используется для горизонтального смещения, а em, соответственно, для вертикального смещения.

    Алексей, для такой задачи вёрстка в 4 колонки — абсолютно нормальное решение, если у элементов контента заранее неизвестна высота. Можно, конечно, и одним списком вывести, тогда вам на стороне сервера нужно высчитать минимальный размер блока в ряду и с помощью отрицательного margin-bottom у каждой картинки подтягивать нижний край. Но я считаю, что оно того не стоит.

  149. 26 октября 2010

    Сергей, мне дизайнер нарисовал макеты в которых блоки (назовем их «A», «B» и «С») расположены как на схеме http://img.picsa.ru/pictures/0/000/062/190/62190.png
    В HTML они должны следовать в алфавитном порядке друг за другом (можно, наверное, сделать какие-то дополнительные обертки, если нужно). Для случая, когда высота «C» меньше чем «A» можно оставить свободное пространство и потом впихнуть «C» через «position: absolute». Так я, собственно, и сделал, потому что это было известно заранее. А потом задумался над универсальным решением, которое бы позволяло разместить блок «В» в зависимости от максимальной высоты блоков «А» и «С». В результате экспериментов пришел к выводу, что это вроде как не получится сделать без JS.

    Сталкивался-ли ты с такими случаями?

    display: inline-block;

  150. 27 октября 2010

    Хотел спросить, а как можно вписать текст в круг?
    Я пришел к самому простому но не очень красивому решению, оно вот тут, но хотелось бы изящнее.

    Я бы эту задачу решал точно так же. К сожалению, не знаю другого способа. Возможно, в SVG что-то есть/будет для решения таких задач.

  151. Ирина
    10 ноября 2010

    Здравствуйте! Столкнулась с проблемой при отображении тени у блока с картинкой. Различные варианты использования box-shadow не устраивают, так как не все браузеры поддерживают (опера, например, поддерживает это свойство только с версии 10.5 и выше). Использование фоновой картинки с тенью не подходит, так как изображений много и они разного размера. Как бы вы посоветовали решить эту проблему? Спасибо.

    Я думаю, вам подойдёт этот способ: http://chikuyonok.ru/2009/10/decor/

  152. Владислав Шкодин
    30 ноября 2010

    Сергей, скажите пожалуйста, почему на сайте МосМетроСтроя размер бэкграундной картинки именно 1203 на 1190. В этом есть какой-то сакральный смысл или просто «такие были картинки»?

  153. EzheG
    4 декабря 2010

    Сергей, подскажите пожалуйста как вы обычно решаете такую проблему с позиционированием в ИЕ6?
    http://savepic.ru/2009173.png
    Мне кажется, самое простое это:
    bottom:0;
    _bottom:-1px;

  154. Роман
    4 декабря 2010

    Вот здесь Сергей упоминает про тему абсолютного позиционирования right/bottom в IE6.

    http://chikuyonok.ru/2009/10/decor/

    Если лень изворачиваться, можно сделать с помощью «expression». Но лучше уже сделать с таким «багом» либо сделать для IE отдельную версию без закругления, чем использовать expression.
    Expression подходит скорее для заказчиков, которым можно сказать: «Вот смотрите, всё идеально в IE6, вы только страничку не прокручивайте, а то лагает».

  155. Михаил
    20 декабря 2010

    Можно ли сделать так, чтобы абсолютно позиционированный блок — раздвигал внешний блок?

    Hello world

  156. GreLI
    27 декабря 2010

    EzheG, проблему с неточным bottom:0 можно обойти воспользовавшись тем что позиционированный элемент без указания координат находится примерно там, где бы он был без позиционирования. В случае нижних уголков можно просто поместить их в конец родительского элемента и уточнить положение с помощью margin. При этом желательно, чтобы последний элемент, который перед уголками, был блочным, и если есть текст, то он был бы в нём, и с margin-bottom:0, иначе может глючить по разному в разных браузерах. Сама эта неточность возникает при нечётных значениях высоты или ширины (right:0).
    Михаил, абсолютно позиционированный блок никак не может влиять на внешний блок, единственный результат его присутствия может быть в увеличении области прокрутки страницы или блока с overflow: scroll или auto при выходе за границы.

  157. MaratCrash
    6 января 2011

    Добрый вечер, Сергей =)
    Скажите пожалуйста, что лучше использовать в стилях и скриптах — id или класс, если возможно использование как id, так и class? Что будет быстрее работать в целом для всех браузеров?

  158. Sasha
    13 января 2011

    Сергей, если какие-то интсрументы для реалтайм верстки, как в файрбаг, только посерьезнее.

  159. Дмитрий
    24 января 2011

    Скажите, при использование спрайтов размеров с этот из-за каждого используемого div’а (спрайта) браузер будет жрать памяти размером с величину картинки? Или же браузер обрезает ненужную часть для экономии оперативки? (Пример взят с artlebedev.ru.

  160. Сергей Чикуенок
    26 января 2011

    Sasha, про существование таких инструментов не знаю, потому что есть ряд технических сложностей с их правильной работой. Но недавно меня посетила одна идея, как это можно реализовать, и, возможно, скоро представлю прототип.

    Дмитрий, браузер не должен дублировать в памяти весь спрайт для отображения его фрагмента, хотя с уверенностью сказать не могу. Но точно знаю, что такие большие спрайты очень плохо сказываются на производительности и потреблении памяти. Можно чуть подробнее об этом почитать. Лично я решал бы такую задачу через SVG/VML, двадцать первый век на дворе всё-таки.

  161. Sasha
    26 января 2011

    мечта, поставить N мониторов под каждый браузер, виртуальную машину как в этом топике http://habrahabr.ru/blogs/javascript/99816/ и инструмент реалтайм верстки)

  162. Саша
    4 февраля 2011

    Привет, Сергей и читатели!

    Дизайнеры нарисовали такой http://dl.dropbox.com/u/13515720/list.png макет. Т.е. все эл-ты списка должны быть вертикально выравненные по некой осевой линии, а высота контента выше и ниже этой осевой может быть различной.

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

    .list-item {display:inline-block; vertical-align:baseline;}
    .list-item .under-waterline {float:left}

    Таким образом контент под осевой (.under-waterline) влияет на размер блока, но опускается под неё.

    Но ребята из Редмонда не могли пройти мимо такой халявы © и в IE6/7 такой подход не работает, видимо из-за отсутствия поддержки inline-block.

    Есть ли идеи по фиксу/хаку этой реализации или идеи по реализации другой?

  163. Сергей Чикуенок
    4 февраля 2011

    .list-item{ zoom:1; }

  164. Александр
    5 февраля 2011

    Что вы думаете о http://ru.html5boilerplate.com/ ?

  165. Саша
    7 февраля 2011


    .list-item{ zoom:1; }

    К сожалению, СамыйлюбимыйфиксIE6 не помог.

    На всякий случай (вдруг кому тоже станет интересно), выкладываю свёрстанный пример
    http://dl.dropbox.com/u/13515720/waterline.htm

  166. Сергей Чикуенок
    7 февраля 2011

    Для IE6 нужно принудительно указать display:inline; и всё будет работать

  167. 9 февраля 2011

    Здравствуйте,установил на блоге плагин по созданию таблиц:WP-Table Reloaded,все нормально,только таблица заходит на боковое меню и сливается с ним,изменял в CSS стилях плагина отступы,ширину и никакой реакции.Скорей всего надо прописывать что то в css стилях самого шаблона.Подскажите,если сможете.Вот моя страница с таблицей:http://ugristop.ru/moya-naturalnaya-effektivnaya-kosmetika/ovante-effektivnyj-krem-ot-ugrejpryshhejugrevoj-sypiakne.html Я там таблицу специально опустил в самый низ,чтоб не налезала на боковую менюшку,ну и так видно, что она чуть чуть залазит за край.

  168. kozubas
    11 февраля 2011

    Привет, Сергей. Существует ли какой-то универсальный способ верстки растягивающегося горизонтального меню, расстояния между пунктами которого одинаковы?

  169. 18 февраля 2011

    Сергей, объясните причину странного поведения браузеров в этом примере: http://htc-cs.ru/_common/test/border.htm

    Если на странице есть два блока (один вложен в другой), между их открывающими тегами нет другого контента и у вложенного стоит margin-top, то блок-потомок сдвигает блок родителя на расстояние margin, а не сдвигается на это расстояние внутри родителя.

  170. Сергей Чикуенок
    18 февраля 2011

    Почитайте про collapsing margins: http://www.w3.org/TR/2008/REC-CSS2-20080411/box.html#collapsing-margins

  171. MaratCrash
    20 февраля 2011

    Сергей, приветствую!
    Очень нужен совет аксакала в клиентской оптимизации =)
    Делаю сайт. Фон сайта представляет из себя большую картинку (1856*1230px).
    Если этот фон сохранить в jpg (качество 65), то она весит 250 кБ. Меньше не ужимается — качество хуже становится резко.
    Как думаешь, стоит ли ее резать на несколько картинок и из них стыковать фон? Или ее одну цельную показать (через background)?
    Просто не хочется резать, т.к. будет больше число запросов http и время загрузки, ИМХО, будет больше.
    Сергей, пожалуйста, подскажи как быть.

  172. subliminator)
    20 февраля 2011

    @MaratCrash
    Можно поизвращаться с selective quality для jpeg в fireworks, например.
    Либо сделать фон из и jpeg ( progressive )
    Или даже какой-нибудь lowsrc для img прописать с еще худшим качеством картинки

    А можно и не замарачиваться. 250кб — это у большинства меньше секунды ;)

  173. subliminator)
    20 февраля 2011

    Либо сделать фон тэгом IMG и использовать jpeg ( progressive )

  174. MaratCrash
    20 февраля 2011

    subliminator, спасибо за ответ! Приму к сведению.
    Сергей, если увидишь мое сообщение, пожалуйста ответь — ценю твое слово особенно.

  175. Виталий
    23 февраля 2011

    Здравстуйте, Сергей.

    Не можете подсказать ответ на такой вопрос. Использую расширения гуглхром при верстке если их юзать на онлайн сайте, то все нормально работает, линейка, colorPicker, скриншотсайта + публикация его где-то на их хостинге. Но если взять зарузить офлайн верстку то все плагины отказываются просто работать.

    Пишут такое или вообще не работаю, ка заблокированные
    Sorry! You can’t use this extension on local or special Chrome pages.

    как это можно обойти, или почему так происходит, непонятно почему простая линейка например не может работать локально(

    Заранее спасибо!

  176. Сергей Чикуенок
    24 февраля 2011

    В настройках расширения укажите Allow access to file URLs

  177. Виталий
    25 февраля 2011

    Благодарен Сергей что откликнулись, но простите за тупость не могу найти как это сделать(

    У меня есть список моих расширений
    https://dl.dropbox.com/u/17626502/screen/img1.jpg
    И настройки первого
    https://dl.dropbox.com/u/17626502/screen/img2.jpg

    такой настройки не видно. Что делать? Может только некоторые расширения имеют настройку которую Вы указали

  178. Сергей Чикуенок
    27 февраля 2011

    Виталий, попробуйте добавить паттерн file://*/* в секцию content_scripts манифеста плагина, как здесь: https://github.com/sergeche/xmlview/blob/master/extensions/chrome/manifest.json

    Сам manifest.json вы можете найти в распакованной версии нужного плагина, где-то в папке с пользовательским профилем

  179. Виталий
    28 февраля 2011

    Попробовал, пока без результата.

    На странице разработчика расширения web developer(тоже не работает)вот что написано
    http://chrispederick.com/work/web-developer/help/#local-files-gallery

    Возможно это заморочки самого браузера, а отключить или разрешить в настройках браузера ничего такого не видно.(

    Есть еще вариант рабоать на веб-сервере и оттуда запускать. При таком подходе работают все расширения, кроме линейки. Только это нормально например просто верстку делать на веб-сервере? или сверх идиотизма, на данный момент использовал просто папку в которой работал…

    что скажите?

  180. Сергей Чикуенок
    28 февраля 2011

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

  181. Ярослава
    10 марта 2011

    Здравствуйте Сергей. Задача. Сверстать 3-х колончатый сайт так, чтобы центральная колонка была первой (заказчик требует для СЕО), футер прижат внизу, кроссбраузерность.

    Искала варианты, пока вот такой нашла http://htmltricks.ru/archives/3 — проблема с ИЕ7 падает правая колонка.

  182. Сергей Чикуенок
    10 марта 2011

    Ярослава, почитайте http://chikuyonok.ru/2010/01/liquid-site-markup/

  183. MaratCrash
    12 марта 2011

    Сергей, добрый день.
    Спасибо Вам за то, что Вы делаете!
    Сергей, в статье про блоки с тенями, Вы описали свой универсальный метод. Я его сейчас пытаюсь применить, но вот что не получается. У меня в нижних частях блока узор и нужно, чтобы контентная часть была поверх этого узора. В данном случае Ваш метод не подходит. Посоветуйте пожалуйста что-нибудь.

  184. Armen
    23 марта 2011

    Здравствуйте Сергей.
    Скажите пожалуйста, используете ли вы при верстке фреймворки типа http://960.gs/ или какой-нибудь другой ?
    Стоит ли их вообще использовать, если да то зачем, если нет, то почему ?

  185. 23 марта 2011

    Здравствйте,у меня верхнее горизонтальное меню в Hedere идет одной строкой,соответственно там все категории сайта не убираются,как сделать под ним продолжение строк,чтоб все категории отображались.
    Вот код самого меню:

  186. Станислав
    24 марта 2011

    Приветствую.

    Столкнулся с проблемой вложенных флоатов в ie6-7.
    Когда во флоате лежат 2 флоата и прижаты по краям через float: left, float: right, то родительский элемент в ie6-7 разносит на всю ширину пра-родителя.
    В остальных браузерах просто идут друг за другом и ширина родителя адекватна.
    Анологичная ситуация, если родительский элемент абсолютно спозиционирован.

    Красноречивее слов будет пример — http://db.tt/o9IOjrZ.

    Заранее благодарю за советы.

  187. kozubas
    25 марта 2011

    Станислав, почему не поменять у блока holderR float:right на float:left?

  188. Станислав
    25 марта 2011

    kozubas, потому, что если в родительском блоке будет лежать, к примеру, картинка, то зафлоаченные блоки должны прижиматься к разным сторонам родительского блока, ширина которого будет равной ширине картинки.

  189. Сергей Чикуенок
    28 марта 2011

    Станислав, попробуйте вместо правого флоата использовать display: inline-block и text-align: right

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

  190. kozubas
    28 марта 2011

    Еще можно попробовать установить блоку .holderR атрибут align (фу-у-у) в значение right. Будет несколько иное поведение.

    Сергей, а где можно посмотреть ваши последние работы как верстальщика/javascript-программиста?

  191. Сергей Чикуенок
    28 марта 2011

    kozubas, когда (надеюсь) запустим новый проект — покажу.
    А так мои работы можно увидеть на гитхабе: https://github.com/sergeche

  192. Александр
    28 марта 2011

    В процессе своего webdev-самообразования много раз слышал мантру «table только для таблиц, верстка только блоками, только так». Однако изучив на практике несколько сайтов Студии и не только я обнаружил эпизодическое использование таблиц для вёрстки(понятное дело, что в основе страницы всё же блоки, а таблицы для суб-элементов).
    Тогда я понял, что важно лишь корректное отображение сайта браузерами и «браузер — лучший валидатор», а мантра выше — полный бред. Не могли бы вы привести примеры случаев, когда таблицы в качестве помошника блоков оптимальны или даже необходимы?

  193. MaratMarat
    9 апреля 2011

    Сергей, привет.
    Накопилось ряд вопросов — пожалуйста помоги )
    1. Часто приходиться в ходе поддержке проекта прописывать в html свойства css (через style). Насколько это правильно? Не нужно ведь всегде создавать классы или id, когда это единичный случай, я правильно понимаю? Как ты обычно поступаешь/поступал?
    2. Что лучше использовать — class/id? К примеру, если блок используется только один раз на странице. Как лучше в плане производительности?
    3. Что лучше: cufon или font-face?
    4. Сергей, можешь что-нибудь посоветовать почитать по оптимизации клиентской части? Я прочитал отсюда все — webo.in. Есть еще что-нибудь в сети?
    Сергей, Спасибо тебе за то, что делаешь!

  194. Vladimir
    10 апреля 2011

    Здравствуйте, Сергей! Прочитал множество Ващих статей и много полезного для себя подчерпнул. Большое спасибо труды!

    Уже очень давно ломаю глову (а судя по результатам поисков не только я) над одной непростой, на мой взгляд, задачей, которая касается резиновой верстки на div’ax.
    Возможно Вы, как любитель решать сложные задачи, поможете разрешить эту проблему, ломающую мозг многим верстальщикам, как начинающим так и продвинутым.

    Нужно сверстать макет, состоящих из двух колонок. Одна из них фиксированной ширины (допустим левая), а правая растягивается во всю ширину. Минимальная высота 100%. Но необходимо, чтобы при переполнении одной из колонок обе колонки растягивались на одинаковую высоту.
    (Я пробовал адаптировать Ваш пример «Два float-блока с одинаковой высотой», но не получилось)

    Требования следующие:
    1. Исключительно DIV + SCC, никаких таблиц.
    2. Не использовать Java Script
    3. Не использовать картинку для заливки фоном одной из колонок.
    4. У каждой колонки свой цвет (отличный от цвета body например)

    Ну и картинка, если я вдруг что-то непонятно объяснил:
    http://img233.imageshack.us/img233/4886/100utb.jpg

  195. Владислав
    10 апреля 2011

    Vladimir, самый простой способ это сделать это поставить первому блоку float: left и фиксированную ширину, второму — overflow: hidden. Затем каждому из блоков задать padding-bottom: 10000px; margin-bottom: -10000px; А родительскому блоку (в котором обе эти колонки находятся) тоже overflow: hidden (ну и для ie — width: 100%); У этого способа есть определенные ограничения, но он совершенно железный.

  196. Ярослава
    14 апреля 2011

    Вопрос еще один, в последнее время необходимо верстать рассылки, не подскажите как сделана рассылка на Аймобилко, если это не секрет конечно. Принцип замены изображений текстами, и при клике отображать они отображаются. Или более универсальный метод?
    Заранее спасибо.

  197. 15 апреля 2011

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

    текст

    текст
    текст

    И что вы думаете по поводу вкрапления html5 тегов например на страницы с доктайпом XHTML 1.0 или HTML 4.01? Повлияет ли это на выдачу в поисковиках, есть ли вообще смысл использовать их в этих доктайпах, например в качестве дополнительной обертки, которая ИЕ6-8 будет просто игнорироваться?

  198. 15 апреля 2011

    Продублирую первый вопрос :)
    Как вы относитесь к стоящим p рядом с div? С точки зрения семантики, как я понял, это не совсем верно. Пример:

    p текст /p
    div
    p текст /p
    p текст /p
    /div

  199. 15 апреля 2011

    MaratMarat,
    1.Это не правильно, собственно для того чтобы отделить содержание от представления и был придуман CSS. Даже если это единичный случая, имения проще вносить через css.
    2.В плане производительности лучше class, но реально это заметно только на больших деревьях тегов. Об этом можно почитать в клубе БЭМ, где пишет Харисов(руководитель Яндекс верстки кажется).
    3.В каком плане лучше? Cufon использует js, для нормальных браузеров он например будет генерить canvas, для ИЕ svg итд. Это не очень гибкое решение. Я поставлю на первое место font-face, на второе Cufon. Попробуйте поюзать то и то, увидите разницу.
    4.тут я не подскажу :)

  200. Vladimir
    18 апреля 2011

    Владислав,
    спасибо за интресное предложение решения задачи!
    Ограничение контента по высоте повлечет его обрезание когда сам контент достигнет большей высоты нежели его контейнер :) Конечно такое колличество контента на одну страницу (чтобы он превысил 10000 по высоте) случай редкий да и это всегда считалось занком дурного тона.
    Т.е., судя повсему, в рассмотренном мною случае все-таки можно сказать «невозможно» )

  201. Виталий
    18 апреля 2011

    Не понимаю, зачем такую ерунду писать что обсуждалось уже 100500+ раз и каждый думает что он спрашивает что-то уникальное, из интересного блога где есть возможность что-то спросить у профессионала, сделали песочницу форума html/css… Я уверен что не один такой недовольный подписчик который заходит сюда по рассылке и видит тут эти нубацкие вопросы.. обиднотоварищи

  202. 24 апреля 2011

    Сергей, а какое значение font-size вы используете для body (html), чтобы во всех браузерах размер шрифта выглядел примерно одинаково?

    Что думаете по поводу следующего способа для задания базого значения шрифта: http://www.alistapart.com/d/howtosizetextincss/ss-test-6.html (задаем для ИЕ значения в em, а для остальных браузеров в пикселях)?

  203. 7 мая 2011

    Сергей, привет!
    Как сверстать центрированный блок с картинкой и подписью?
    http://oleggromov.com/upload/centered-image.jpg

    — Картинка может быть произвольной в ширину, выровненной по центру.
    — Подпись должна быть шириной с картинку, прижатой к её левому краю.

    Проблема в том, что подпись растягивает и инлайн-блок, и таблицу — нужно как-то ограничить её ширину шириной картинки, которая заранее неизвестна :-)

  204. kozubas
    7 мая 2011

    Если таблице указать ширину в 1 пиксел, то будет, что надо.

  205. 7 мая 2011

    kozubas, помогло.

    Сделал контейнер с display:inline-table, чтобы он выравнивался по центру, ему задал ширину 1px, а внутри разместил два div с картинкой и подписью с display:table-row. Ведёт себя как надо, только в IE7 небольшие глюки — разберусь. Поддержка IE6 не нужна.

    Спасибо!

  206. Антон
    9 мая 2011

    Сергей, здравствуйте!

    Столкнулся с неожиданной проблемой, связанной с большими значениями ширины у блоков. Заметил, что по крайней мере на MacOS в WebKit браузерах появляется странное поведение при ширине от 167772 до примерно 336500 (самый наглядный способ убедиться — поставить бэкграунд-колор черного цвета у блока).

    Вопрос в следующем: существуют ли какие–либо ограничения на значения для ширин и отступов, и как с этим бороться?

  207. Сергей Чикуенок
    10 мая 2011

    Антон, да, в некоторых браузерах существуют ограничения по размерам блоков, наверно, это как-то связано с памятью и возможностями отрисовки. А если применяете 3D-трансформации, то ограничения будут ещё меньше: около 2048 пикселей (связано с размером текстуры).

    Единственный способ борьбы с этим, который я знаю — вместо одного большого блока делать несколько небольших

  208. Сергей Чикуенок
    10 мая 2011

    Вадим Гончаров, я обычно ставлю 10px у body, так считать потому удобнее.

  209. Yrgl
    13 мая 2011

    Сергей, подскажите где семантически правильно разместить картинку в блоке, где под/справа от неё распологается заголовок-ссылка, при этом сама картинка тоже должна быть кликабельной? Внутри ссылки в заголовке — <h3><a href=»»><img src=»» alt=»» />Текст заголовка</a></h3> или же идти как отдельный элемент — <a href=»»><img src=»» alt=»» /></a><h3><a href=»#»>Текст заголовка</a></h3>?

  210. Александр
    19 мая 2011

    На айМобилко используется доктайп html:xt, а на BigBuzzy — html:5. Для примера — чем руководствовались в данном случае?

  211. Василий
    12 июля 2011

    Приветствую!
    Столкнулся с проблемой, описанной в следующем абзаце:
    «Примечательно, что свойства видимости распространяются не только на сам блок-контейнер, но и на все вложенные в него элементы. Т.е. вам достаточно менять видимость только контейнера не заботясь о содержимом. Однако будьте аккуратны: в некоторых браузерах существуют отклонения от стандартных правил и спецификации. Например, рассмотренный код не всегда срабатывает в Internet Explorer вплоть до версии 7 в случае, когда вложенным элементом является картинка: блок исчезает, а картинка остаётся видимой.» (у меня вплоть до 9)

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

  212. Станислав
    8 августа 2011

    Приветствую.

    Возможно ли написать такой селектор, который будет соответствовать только первому ребенку родителя определенного типа?

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

  213. Станислав
    8 августа 2011

    Сам спросил — сам нашел. Это можно сделать псевдоклассом :nth-of-type.

  214. kozubas
    8 августа 2011

    Станислав, а просто h2:first-child не поможет?

  215. Станислав
    8 августа 2011

    kozubas, да, действительно. Почему-то решил, что first-child выберет просто первый определенный тэг, даже если он не первый ребенок.

  216. 16 августа 2011

    Подписался на комментарии.

  217. 22 августа 2011

    Каким тегом лучше всего заменить тег font?
    Очень удобен, а span почему то писать долго?

  218. JeyKey
    20 сентября 2011

    Здравствуйте Сергей!

    Подскажите, пожалуйста, есть ли решение у следующей задачи:

    есть список определений, в котором блоки должны «плавать» справа, что легко решается добавлением им float: right и поля блокам — margin-right: 250px;

    Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
    Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor

    Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
    Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor

    Но проблема в том, что заголовки встречаются достаточно длинные и хотелось бы растянуть их на всю доступную ширину списка, так, чтобы они «столкнули» вниз плавающие справа блоки с картинкой, а не упирались в них…

    Требуемого эффекта пока удалось достичь только с абсолютным позиционированием и , c переносом под , но такое решение не приемлемо, поскольку следующий «комплект» и будет накладываться на предыдущий…

  219. JeyKey
    20 сентября 2011

    Э… Теги съелись… Речь про dl, dt и dd. В dt вложены картинки, в dd — заголовки и параграфы…

  220. Jey Key
    21 сентября 2011

    Отвечу на свой вопрос — решение есть (-:
    Для этого нужно разместить dt под dd, сделать ему float: right и втянуть отрицательным левым полем, а dd сделать float: left и задать отступ, равный ширине dt.

  221. Neodecvat
    4 октября 2011

    Добрый день!
    Помогите разобраться с css меню для Народ.ру
    1.Есть код самого css меню
    2.Есть папка Images
    Что нужно сделать чтоб меню корректно отражалось??
    мною уже сделано, но всё-равно не работает
    а).Создан hml документ в таком виде и помещен в файлы на Народе

    б)загружены все файлы Images и файл меню.css
    НЕ РАБОТАЕТ-отражаются только ссылки

  222. Миша Малыга
    9 ноября 2011

    Здравствуйте, Сергей!
    Хотелось бы узнать как на странице поставить два (или больше) фоновых изображений. Например, наложить полупрозрачный градиент на текстуру.

    На http://htmlbook.ru/faq/kak-dobavit-dve-fonovye-kartinki-na-veb-stranitsu используются фоновые картинки для HEAD и BODY, но если на странице есть вертикальное прокручивание, то одна картинка обрезается по высоте окна.

    Большое спасибо.

  223. Артур
    15 ноября 2011

    Можно ли сделать, чтобы длинные строки в Очень очень очень очень очень очень очень очень очень очень очень очень очень длинная строка показывались не в одну строку, а в две-три (в зависимости от длины строки) и вписывались в заданную ширину select-a?

    Ставил ширину для option через CSS — не помогает. А вариант списка с радио-батонами некрасиво смотрится и много места занимает.

  224. Артур
    15 ноября 2011

    Так. Теги стёрлись…

    Тогда ещё раз.

    Можно ли сделать, чтобы длинные строки в
    select
    option
    Очень очень очень очень очень очень очень очень очень очень очень очень очень длинная строка

    показывались не в одну строку, а в две-три (в зависимости от длины строки) и вписывались в заданную ширину select-a?

    Ставил ширину для option через CSS — не помогает. А вариант списка с радио-батонами некрасиво смотрится и много места занимает.

  225. Станислав
    15 ноября 2011

    Артур, это невозможно сделать стандартным контролом. Либо самописный, либо, как вы уже упомянули, через радио-батоны.

  226. Noodles
    21 ноября 2011

    Всем привет!
    Меня интересует, как происходит процесс разрезания и измерения длины/ширины макета в фотошопе.

    Например я делаю так: ставлю линейки за тем между ними делаю crop и измеряю размера холста (ctrl+alt+c) на горячих клавишах достаточно быстро все происходит, также поступаю при отрезании отдельных элементов на которые не влияют фильтры, тени, градиенты заданные в фотошопе для этого элемента. А остальные детали режу слайсом.

    Может кто что посоветует какие нибудь инструменты или способы?
    Хотелось бы узнать как это делает автор данного блога.

  227. Александр
    13 января 2012

    Сергей, добрый день!
    Интересует следующий вопрос: возможно ли поделить страницу по ширине на 3 равные части (по 33.(3)% каждая) на чистом CSS? И если да, то каким образом это можно сделать?

  228. 28 февраля 2012

    Здравсвуйте!
    Каким образом «быстро и красиво» отцентровать (по горизонтали и вертикали) картинку внутри блока?

  229. Александр
    4 апреля 2012

    Здравствуйте Сергей!
    Такое дело…
    Вот уже некоторое время на начальном уровне занимаюсь версткой страничек. С самого начала делал это в случайно установленном на то время NeonHTML 4.5 , но позднее узнал про IDE, после чего внимательно изучал и настраивал Eclipse по Вашей теме «Веб-разработка в Eclipse: HTML и CSS». Но в силу привычки или собственной лени так и не могу перейти в интегрированную среду окончательно…
    Собственно причиной поиска альтернатив Neon’у стало его очень давнее обновление, — автор попросту на проект забил! И из-за этого многие функции расходятся с действительностью, что очень огорчает, ведь программка достаточно удобная в работе по созданию web контента. Что касается аналогов, то установив «свеженький» столь хвалёный Notepad++ очень удивился, ведь его функционал и половины не тянет по возможностям для HTML разметки…
    В общем вопрос:
    Как Вы оцениваете возможность и целесообразность доработки редактора NeonHTML? И возможно ли это вообще с технической точки зрения, ведь я пока абсолютно не разбираюсь в исходном коде софтверных продуктов???

  230. Сергей Чикуенок
    4 апреля 2012

    Александр, если вы никогда не занимались разработкой приложений, то нет смысла что-то делать с NeonHTML, особенно учитывая, что у редактора нет открытого исходного кода (или я его не нашёл). Посмотрите в сторону Sublime Text 2, он прекрасно расширяется за счёт плагинов на Python.

  231. Айзек
    13 апреля 2012

    Здравствуйте.
    Подскажите пожалуйста.
    Есть основной елемент, который отпозиционирован абсолютно и его высота(top) меняется, то есть он едет вниз-вверх. Внутри него есть другой элемент, который так же отпозиционирован абсолютно, но у него есть координаты слева и сверху.
    Вопрос: как сделать так, чтоб изменения внешнего элемента, то есть его изменения координат сверху(top) не отоюражались на внутренем елементе, чтоб несмотря на то, что основной элемент меняет свое положение, — внутренний оставался постоянно на заданных координатах?

    #main { position: absolute; width: 400px; }
    #elem { background: red; height: 100px; position: absolute; top: 300px; width: 100px; }


    Внутренний элемент

  232. Диана
    14 мая 2012

    Здравствуйте Сергей. Такая проблемка, не работаетв NotePad ++ —> Zen Coding.
    При попытке нажать ctrl+E выдает —>ENG

    Заранее спасибо

  233. Сергей Чикуенок
    14 мая 2012

    Диана, попробуйте поставить Python-версию плагина: http://sourceforge.net/projects/npppythonscript/files/

  234. 3 июля 2012

    Здравствуйте!
    Каким образом “быстро и красиво” от центровать (по горизонтали и вертикали) картинку внутри блока?

  235. Антон
    14 августа 2012

    Сергей, зачем в css сбрасывают и переопределяют свойства font-style и font-weight для тегов b,strong,em,i? Существуют и такие браузеры, которые по умолчанию отображают их неправильно?

  236. Сергей Чикуенок
    14 августа 2012

    Антон, это вопрос семантики. Тэги <em> и <strong> означают не курсивный или жирный, а акцент (emphasis) и сильный акцент (strong emphasis). А как они должны визуально выделяться — курсивом, жирным, цветом фона, подчёркиванием, размером и т.д. — вопрос каждого дизайна в отдельности. Вот их и сбрасывают, чтобы разработчик делал оформление «с чистого листа». Хотя сейчас модным стало не сбрасывать стили, а нормализовать их.

  237. Клинтон
    6 октября 2012

    Привет, Сергей! Замечал ли ты, что Опера через раз отображает подгружаемые с помощью @font-face шрифты абы как (очень некрасиво). Происходит это, если в списке шрифтов .woff шрифт стоит перед ttf (или svg). Куда копать? В сторону http заголовков?
    P.S. Ну, почему она такая тупая?..

  238. 4 ноября 2012

    Потрясающая подборка вопросов и ответов!Лет пять бы назад найти что-то подобное.

  239. Денис
    21 ноября 2012

    Ok

  240. рома
    13 февраля 2013

    Привет, Сергей! поставил твой плагин zen-coding под коду. у меня стоит ломанная 2.0.6 так и не нашел, как преобразовать ul>li*3 и все прочие в то, во что оно должно. может быть ты подскажешь как настроить или какие горячие клавиши в кода мак. может и не к месту, но я запарился уже. спасибо

Комментировать

Powered by Zen Coding

(Spamcheck Enabled)