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 на эту тему.
Зачем в сайтах указывать font-size:100.01%?
SC: точно не помню, но вроде бы в Опере когда-то были проблемы с размером шрифтов, и именно такое решение их исправляло. Сейчас я этим не пользуюсь, так как в новых браузерах (особенно в Fx3 с его движком рендеринга шрифтов, и последних Операх) появляются проблемы: доходит до того, что накопленные таким образом доли процентов из-за большой вложенности элементов приводит к тому, что в одно строке слово, обрамленное обычным span’ом, становится крупнее, чем остальные слова.
На некоторых сайтах вижу css font-size:100.01%.
Вопрос — для чего нужно добавлять одну сотую процента?
вероятно, чтобы избежать глюков некоторых “вредных” браузеров/версий. список нужен?
Ответ: для того, чтобы размер шрифта во всех браузерах был одинаков.
Небольшой баг на метрострое (Firefox 3.5.2, Mac OS X 10.5.7) после пары ресайзов окна, контент уходит «вниз», и появляется свободное пространство над нижней частью сайта (лифт останавливается на отметке -36м, вместо 42).
Добрый вечер.
Должен ли футер быть прижат к низу страницы? Интересно Ваше мнение.
Способы прижать футер фикс. высоты к низу всем известны, а как реализовать тоже самое не ограничивая высоту футера?
Лично мне нравится, когда футер прижимается к низу страницы. Как прижать футер произвольной высоты — пока не знаю. Но у меня ни разу не было необходимости в этом. Как правило, футеры имеют фиксированную высоту, я выставляю их в em’ах.
Неосновная форма поиска на сайте.
На этом сайте и на artlebedev.ru отсутствует кнопка “искать”.
А как быть посетителям с мобильниками и т.п.?
С айфона все замечательно ищется
И, насколько я помню, дизайн сайта разрабатывался тогда, когда никто с мобильников в интернет не ходил.
Помнится, на сайте queengroup.ru черный квадрат со стилизованной буквой Q тянулся пропорционально, т.е. оставался всегда квадратом.
Как это можно реализовать? Конечно же, речь идет о чистом HTML/CSS, без всяких там jQuery
Выше уже написал
Добрый день, Сергей.
Увеличение шрифта при растягивании окна браузера. Возможно?
Могу сделать такое только с помощью JS.
Спасибо.
P. S. Спасибо за предыдущий ответ, очень познавательно, особенно часть про IE.
Сергей, привет.
Каким образом сверстана шапка на сайте Табака — http://www.tabak.ru/?agree=%C4%E0%2C+%EC%ED%E5+%E1%EE%EB%FC%F8%E5+18+%EB%E5%F2. — когда поиск, отборные сигары и колонки экспертов тянутся, а блок с библиотекой, эфиром и магазином фиксируются. При чем всё это дело сделано без использования таблиц.
Можно открыть Firebug и посмотреть :). Поиск — одна растягивающаяся колонка, логотип, меню и отборные сигары — вторая, колонка экспертов — третья. Внутри второй колонки стоит блок с логотипом фиксированной ширины и
float: left.И еще такой вопрос: как бороться с глюком бэкграунда при появлении горизонтальной полосы прокрутки. Пример: http://pics.livejournal.com/vadimgoncharov/pic/0001bkqk
Это не глюк, это такая фича. Возникает тогда, когда есть два независимых блока и один из них не помещается в отведенную ширину. В этом случае сам контейнер остается прежнего размера, а все, что не помещается — выходит за его границы. Решение: либо запихнуть эти независимые блоки в таблицу (табличные ячейки не могут быть меньше размеров контента), либо прописать минимальную ширину у контейнера.
Сергей, что думаете по поводу этого — http://dillerdesign.com/experiment/DD_belatedPNG/
Стоит ли отказаться от АльфаИмейджЛоадера в пользу ВМЛ?
VML, определенно, лучше и менее требователен к ресурсам системы, чем AlphaImageLoader. Но вот по скорости инициализации с VML у меня как-то не сложилась любовь. Буквально недавно переделывал раздел сайта, где было 200+ полупрозрачных PNG. Думал, что с VML все сработает очень быстро (написал свою библиотеку, где просто добавляется VML-объект, без всяких лишних расчетов как в DD_belatedPNG), ан нет — работало чуть быстрее фильтра, но все равно неприемлемо. В итоге переделал графику на полупрозрачность в палитре — в IE6 (на сайте их около 10%) смотрится немного корявенько, но не тормозит и не вешает браузер.
В создание блоков со скругленными уголками (http://www.artlebedev.ru/tools/technogrette/html/rounded-corners/) приводите классный способ борьбы с однопиксельным багом в ИЕ:
.rightCorner { width: 30px; left: -30px; margin-left: 100%; }
А есть какие-нибудь идеи для прижатия элемента к низу контейнера без использования для этого же элемента еще одного контейнера? Вот это работает
.bottomCorner { bottom: 0px; }
но возникает однопиксельный баг.
Пытался найти решение. В частности, прижимал блок к правому краю, а потом переворачивал с помощью хитрой конструкции CSS-свойства
writing-mode. В итоге блок к низу прижал, но и текст писался не слева-направо, а сверху-внизКак можно оптимально реализовать автоматическое обновление (сброс) кэша браузера на флешовом сайте (одна главная флешка подгружает остальные “части-компоненты”) при изменении и перезаписи какого-то из компонентов, кроме подставления в имя каждого файла префикса с версией файла (на подобии module-0908142145.swf).
Про флэш рассказать не могу, так как им очень мало занимаюсь. Мне кажется, что в данном случае кэшом управляет не браузер, а сам флэш-плагин. Еще иногда вот так сбрасывают кэш:
module.swf?r=0908142145. В этом случае на стороне сервера ничего настраивать не нужно, но есть вероятность того, что на некоторых прокси-серверах кэш не сбросится.Как вообще в браузерах работает кэш? Почему если перезалить картинку она обновится легко, а если флеш-ролик — нет?
Кэш в браузерах — довольно большая тема. В основном все сводится к определенному набору заголовков, которые управляют кэшированием ресурсов:
Expires, Cache-control, Etag. Обычно, если вам не нужно кэшировать ресурсы вообще, ставитсяExpiresс датой меньше текущей. CEtagнемного сложнее — хоть он и рекомендуется для установки, на некоторых высоконагруженных сайтах (в частности, где используется балансировка нагрузки) его убирают, так как есть большая вероятность «промахнуться» мимо кэша (особенности стандартной генерации значения этого заголовка). Горячо рекомендую почитать Стива Саудерса из Google, у него есть очень много полезной информации по этой теме.Влияет ли валидная верстка (This document was successfully checked as XHTML 1.0 Strict!) на производительность (в огромных сайтах)? И хотелось бы получить парочку советов по ускорению загрузки сайта и рендеринга страницы. Какие вы используете техники в этом плане?
Ответил выше
Задача сделать padding-left у ячейки таблицы равным 2% от ширины body. Я задал ячейке padding-left: 2%. Firefox вычислил паддинг как 2% от ширины body (как и требовалось), IE высчитал паддинг как 2% от ширины таблицы, Opera определила паддинг как 2% от ширины столбца.
Какой из браузеров верно определил ширину согласно стандартам? Можно ли решить эту задачу, не прибегая к различным стилям для разных браузеров?
P. S. У таблицы и каждого из ее столбцов задана ширина в процентах.
В спецификации CSS сказано:
То есть если у containing block — в данном случае это
<table>— явно указана ширина, то считаем от нее, если ширина не указана, то значение является неопределенным.Вы доктайп использовали? Можно посмотреть на сам код и на требуемый результат?
Про прижатый футер уже спрашивали, в xhtml способ один плюс 3-4 его вариации.. но вот в опере есть такая бага, при растягивании окна браузера за нижнюю границу, футер остается на месте, если тянуть за нижний угол, все относительно нормально. Надеялся на 10 версию, но в третьей бете все так же как много-много версий назад ) Пытались как-то решать?
Про такой баг знаю, но решить не пытался. Тоже надеюсь, что Опера, наконец, начнет править баги, которым уже 200 лет.
Сергей, что думаете по поводу технологий замены текста, например http://cufon.shoqolate.com/generate/ , sIFR и TypeKit ? Оправдано ли их применение?
Мне, к счастью, не довелось ими воспользоваться, потому что работал с дизайнерами, которые не боятся написать текст текстом. Но в целом я считаю, что такие вещи лучше применять на домашних страничках, а не больших сайтах.
Расскажите пожалуйста о процессе написания кода. Есть ли принципы при выборе названий классов и какие-то правила которых придерживаетесь при организации 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}.Иногда перед тем, как утвердить с клиентом макет и концепцию, делаю прототипы, вроде этих.
Здравствуйте Сергей. Не подскажите как с помощью html или js сделать флеш объект ссылкйо на другую страницу, пробовал прописать событию onclick=”window.location=’страница’”, работает в FF, но в опере отказывается:(
Попробуйте поставить флэшке атрибут
wmode="transparent"и сделать и разместить поверх флэшки блок со ссылкой.Очень хочется послушать Ваше мнение по многим вопросам
но и по мелочам вроде отвлекать не хочется.. попробую списком 
- Влияет ли как-то на скорость рендеринга присвоение большого количества идентификаторов одному элементу?
Имеется в виду несколько тэгов id у элемента, или несколько классов? Я не заню о таких исследованиях, но думаю, что если и влияют, то не сильно. Все зависит от того, как написаны селекторы в таблице стилей. Например,
.item1матчится быстрее, чем.parent *. Об этом стоит подробнее почитать в клубе YACF. Однако стоит помнить, что все эти оптимизации имеют смысл на огромных деревьях (несколько тысяч элементов).- Встречал обратный подход (на крупных между прочим сайтах), верстальщик использовал избыточные теги <a href=”/” rel=”nofollow”>Текст</a>.. видимо прозапас. Так оно конечно гибче получается, но как, опять же, с производительностью?
Либо тэги съелись, либо это wordpress что-то доставил. Но
rel="nowollow"указывает поисковикам, что по этой ссылке не стоит идти, что не индексировать ничего лишнего.- Выше Вы писали про каскадность.. от наследования может тоже стоит избавляться? Ластик долой, в body только margin:0 и background-color:#fff и т.д.
Нет, от наследования не стоит избавляться, только от каскадности; чтобы сократить время матчинга селекторов и сделать блоки не зависимыми от контекста (чтобы можно было куда угодно вставлять их).
- Зачем style.css в одну строку?
Чтобы быстрее по сети загружался.
Андрей: Парсер съел теги.. но думаю понятно о чем речь.
Попробуйте поставить флэшке атрибут wmode=”transparent” и сделать и разместить поверх флэшки блок со ссылкой.
я бы рекомендовал wmode=”opaque”
Как вы тестируете сайты на различных браузерах? Есть ли программа, позволяющая тестить в одном окне?
Есть Expression Web SuperPreview от Microsoft, который позволяет проверять сайты в нескольких браузерах. Но я им не пользуюсь, так как сижу на Маке. А проверяю просто: открываю страницу в каждом браузере по отдельности и смотрю, что не так.
Захожу в ИЕ8, допустим, на http://www.felixzawojski.ru/. Всё нормально. Но если нажать F5 и перезагрузить страницу, то возникает жестокий баг — http://pics.livejournal.com/vadimgoncharov/pic/0001cqc6
Не только с этим сайтом, а практически со всеми, где есть центрирование. Оно почему-то убивается браузером. Что делать? Сталкивались с таким?
И в догонку — для чего нужен X-UA-Compatible?
Про баг лучше написать ребятам, которые делали сайт. X-UA-Compatible нужен для того, чтобы выставить режим рендеринга в IE8 (подробности смотрите в гугле).
Приходилось ли делать выравнивание в ячейках таблиц по разделителю (для финансовых данных)?
В HTML 4 есть возможность сделать align=”char” char=”.” для ячеек таблиц, но, как показали тесты, это не поддерживается ни одним браузером. Также в спецификации CSS 2 есть возможность установить text-align: “,”, но это тоже почему-то не поддерживается ни одним браузером.
Как вы полагаете, почему даже самые модные браузеры игнорируют спецификации CSS и HTML и есть ли красивое решение этой задачи без применения JS? Спасибо.
Возможно, проблема с определением точной позиции в разных ячейках (и с разными данными). Возможно, скорость и качество работы такого механизма не устраивает разработчиков браузеров, поэтому они не включили их. Возможно, в спецификации этот момент точно не описан. Про красивое решение сказать не могу — никогда не было такой задачи. Думаю, вполне достаточно было бы форматировать данные перед выводом (добавлять недостающие нули) и выравнивать по правому краю.
Расскажите, пожалуйста, про модульные сетки. Как правильно и красиво превращать PSD в html-страницу (особенно интересует, по какому принципу выставлять блоки, как задавать ширину и т.д.)?
На эту тему я напишу отдельную большую статью.
есть код Земля планета и еще куча option, можно ли сделать чтобы в код был таким, а в браузере показывалось “планета Земля”. Для чего это нужно, список большой + там не только планеты, человек нажимает и начинает набирать на клавиатуре скажем “Земля”, но его быстро не сможет переадресовать на элт. списка, примерно так )
Не совсем понял задачу. Можете по почте прислать подробности?
html порезался, вобщем там селект опшен “Земля планета”
Зачем на сайте Феликса (и не только) используются пустые классы?
Похоже, особенности генерации шаблонов: по разным параметрам набирается значение класса и вставляется в атрибут class. Никакого скрытого смысла в этом нет :).
*Насчет выбора имен селекторов. Никогда не описываю там презентационную составляющую, типа .right {float: right} *
и тут же в примере http://imperia.rs.ru/press-center/photo/ видим именно .right {float: right} и .left , который почему-то совсем не описан
Да, был грех
В свое оправдание могу сказать, что презентационные названия я пишу только для декоративных (типа скругленные уголки и тени), а не для логических элементов.
Почему для иконки “закрыть” в различных выпадающих и модальных окнах на сайтах студии используется изображение, а не символ × ?
Не знаю. Наверно потому, что символ × не всегда похож на то, что хочет дизайнер.
> Янис Прасол
> Приходилось ли делать выравнивание в ячейках таблиц по разделителю (для финансовых данных)?
> [...]
> и есть ли красивое решение этой задачи без применения JS?
Присоединяюсь к вопросу.
От себя скажу, что задумывался над этой задачей, и мне в голову приходило только 2 обходных маневра:
1) В каждую клетку вложить трёх-ячеечную таблицу под целое, точку и дробную часть. Можно и двух-, но если задавать разные цвета и т.д., то лучше трёх. По понятным причинам это невероятный изврат и использовать в реальной жизни я это не стал бы никогда.
2) Добить каждое значение спереди/сзади ведущими/незначащими нулями, выровняв таким образом все ширины. А сами нули завернуть в прозрачные span-ы. Дальше выравниваем значения в любую сторону - точки выстроятся автоматом. Вариант тоже не идеальный, но уже гораздо лучше.
Можно попробовать сделать так: число обрамить двумя span’ами, которым указать display: inline-block и указать необходимую ширину.
> dom1n1k
Мы явно не первые, кто задается этим впоросом:
http://krijnhoetmer.nl/stuff/javascript/table-align-char/
Там есть несколько решений, из них наиболее приемлемое то, что с двумя float-блоками. Но в этом случае требуется указание фиксированной ширины, что не очень хорошо.
Сидя под маком Сергей, как вы отлаживаете сайты под IE?
У меня под каждую версию IE заведена отдельная виртуальная машина, в которой все проверяю.
Cергей, что меняется в свойствах блока когда ему добавляешь border, даже прозрачный?
Пору раз сталкивался, что после удаления border появлялись глюки (например при скроллинге ul через jquery), после возвращения бордюра все нормально.
С такими проблемами не сталкивался. Можете прислать пример?
«Захожу в ИЕ8, допустим, на http://www.felixzawojski.ru/. Всё нормально. Но если нажать F5 и перезагрузить страницу, то возникает жестокий баг — http://pics.livejournal.com/vadimgoncharov/pic/0001cqc6
Не только с этим сайтом, а практически со всеми, где есть центрирование. Оно почему-то убивается браузером. Что делать? Сталкивались с таким?»
Нашел решение проблемы. Всё из-за компонента Companion.JS, который идет вместе с DebugBar’ом для IE от Core Services.
Решение: сервис -> надстройки -> панель инструментов и расширения -> companion.js -> отключить
вопрос такой: есть Div в котором на фоне стоит картинка. как сделать чтобы картинка была шириной в див (или просто фиксированного размера но меньшего), не прибегая к редактором изображения для уменьшения изображения?
Добрый день, Сергей. Сегодня столкнулась с такой проблемой (проблемой ли..). по пунктам что имеем в макете дизайна и что требуется:
- обычный список логотипов или партнеров (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. может есть какой-то давно всем известный способ?
Марина, позвольте мне предложить свой вариант:
ul li {display: inline-block; vertical-align: bottom; *display: inline; zoom:1;}
не получается вставить код, потому привожу ссылку на код -
http://dl.getdropbox.com/u/1034481/newhtml.html
2set ещё есть ФФ2, для которого надо писать display: -moz-inline-box или -moz-inline-stack и, возможно, ещё в контейнер класть содержимое li (если там больше одного элемента, как правило).
2 Игорь
знаю, раньше так и делал, но уже с пол года, как фф2 я сбросил со счетов, ибо процент пользователей, которые остались на версии фф меньше 3, стремится к нулю…
если же не игнорить их, то в li надо вставить какой-нить блочный элемент, а в стиле для li дописать ещё display: -moz-inline-box
Сергей!
В самом первом вопросе “..как растягивать фоновую картинку на все окно браузера” вы ведь описали работу с обычной картинкой - тегом IMG.
А ведь, действительно, можно ли растягивать ИМЕННО ФОНОВУЮ картинку, т.е. заданную как бакграунд?
Если такое кто-то может, то это и есть самое интересное.
Сафари такое может:
-webkit-background-size: 50% 100%;Только я не вижу принципиальных причин не использовать
<img>для таких задач.Да, сафари это здорово! Но, увы, не очень востребованная бродилка.
Вот, к примеру, одна из причин или случаев.
Меню, основанное на списках UL или DD с динамически меняющемся количеством элементов этого меню. Фон такого меню в утвержденном (!) дизайне в виде “хитрого” градиента.
Было бы приятно если бы фоновая картинка, заданная в стилевых правилах растягивалась по размеру блока меню.
К сожаленимю, css в реализации браузеров MS и Mozilla не позволяет растягивать бакграунды.
Сергей!
С вашей точки зрения - как решается проблема бакграундов в “эластичных” дизайнах?
Ведь многие браузеры не изменяют фоновые изображения, заданные в виде параметра или стилевого правила.
А о каких проблемах идет речь? Имеете в виду масштабирование фона через zoom?
1. Если элементы оформления, такие как бакграунды являются частью интерфейса, то в эластичных раскладках, когда все размеры элементов задаются через размерность “EM” раскладка “едет” при изменении базового размера шрифта в браузере. Т.е. элементы соразмерно тянутся, а фоновые изображения остаются прежними.
2. Не уверен, что ZOOM “растягивает” бакграунды. Из описания свойства следует, что “тянутся” только элементы документа, те которым назначено правило с zoom.
http://reference.sitepoint.com/css/zoom
3. Стилевое свойство ZOOM (также как и background-size) не стандартное и применимо только в одном определенном семействе браузеров. Что совершенно неприемлемо. Разве что в качестве хака или “костыля”.
Переформулирую вопрос:
Имеется ли у Вас метод (способ, подход, know how), позволяющий “стандартным” браузерам, растягивать фоновые изображения, заданные как параметры или стилевые правила? В том числе в эластичных раскладках, таких, в которых размеры элементов задаются через шрифтовую размерность “EM”?
Знаю только одно решение: использовать вместо фоновой картинки тэг
<img>. Тогда размеры можно задавать в любых единицах.Я снимаю свой вопрос.
Всем спасибо!
Сергей, добрый день! Скажите, пожалуйста, а вот у этой проблемы (см. http://img28.imageshack.us/img28/4443/200910081456sc.png) существует решение?
Я нагуглил ссылку http://szafranek.net/works/articles/font-smoothing-explained/ и, судя по ней, решения нет
Но это сглаживание так ужасно выглядит, что я не мог у вас не спросить 
В любом случае, заранее большое спасибо!
А в чем именно проблема? Нужно отключить сглаживание в IE, или включить в FF?
Отключить в IE, но не локально для меня - а просто что бы его не было в принципе для всех, т.е. сделать так, что бы внешний вид текстовых элементов был представлен в IE так же, как он отображается в FF (и как он был задуман в макетах страниц). На маленьком куске изображения не сильно заметно, но при переходе от дизайна к свёрстанному макету угробилась масса положительных эмоций по поводу “аккуратности” страницы (ну, или это мой “бзик”, но в любом случае, утверждался один вариант изображения, а в результате появляется совершенно другой, который мне совсем не нравится
).
Спасибо!
Я бы сказал, что это заморочки, на которые не стоит обращать внимания. В любом случае каждый пользователь увидит текст по-своему: кто-то включит принудительное сглаживание, кто-то отключит. Но если уж вам прям так надо для IE убрать сглаживание, то попробуйте блоку с текстом указать какой-нибудь фильтр, например:
filter:alpha(opacity=99)Сергей, спасибо!
Я уже был готов последовать вашему первому совету и смириться, но ваш второй совет сработал 
Ещё раз огромное спасибо!
Сергей, здравствуйте. Подскажите, есть ли какой-либо вариант автоматического создания карты сайта.
Или качественная карта возможна только при вёрстке оной вручную?
В гугле можно найти много сервисов по созданию карты сайта, но я ни одним из них не пользовался. Все карты сайта рисуются дизайнером и создаются из CMS автоматически.
Сергей, здравствуйте.
Подскажите, почему на сайтах, сделанных в студии, часто используют тег ins с бэкграундом, вместо простого img? Например, в лекарствах на coldrex.ru.
img не удобен создания декораций, так как нужно указывать пути к картинкам в каждом элементе, и поменять через CSS не получится. Для решения подобных проблем решили выбрать редко используемый элемент (в данном случае ins) и управлять внешним видом через CSS
подскажите пжл.есть фо флеше меню как сделат ьчто бы оно было всегда на всю ширину экрана при любом разришении монитора.
Нужно вставить флэшку на страницу как объект шириной 100%, а в самом флэше на событие onResize запускать перерисовку пунктов меню. Подробнее об этом вам расскажут на специализированных ресурсах по флэшу.
Здраствуйте Сергей,
делаю табы примерно такого вида 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.Сергей, как бы Вы решили проблему резиновой верстки на дивах, когда нужно, чтобы один из рядом стоящих блоков растягивался в зависимости от контента, а второй занимал по ширине всё оставшееся пространство.
Отличный пример — «Резиновое» поле ввода в форме на http://ya.ru, но там таблицы.
Интересует решение для всех современных браузеров и IE6.
Один блок —
float: left, второй как есть сoverflow:hidden. Начал бы от этого отталкиваться, точного решения пока показать не могу.Сергей, здравствуйте.
Есть список наименований товаров, в конце каждой строки после наименования проставлено количество товаров. Можно ли сделать так, чтобы это количество не переносилось в одиночестве на следующую строчку (при сжимании колонки)?
Я делал так: наименование и количество обрамляю span’ом, ставлю у него правый margin примерно по размеру элемента с количеством. Само количество тоже обрамляю span’ом и говорю ему
position:absolute. Можно попробовать количество вплотную прибить к наименованию и с помощью margin/padding сместить в сторону, но не уверен, что в каждом браузере не будет разрывов.2Евгений
Поставьте неразрывный пробел
Сергей - есть ли ощутимая разница поведения в браузерах доктайпа HTML transitional с XHTML transitional? Или доктайп посути описывает только набор разрешенных элементов (обязательных аттрибутов)
Самая заметная разница — это расположение картинки в ячейке таблицы. В Transitional картинка вплотную будет прилегать к границам ячейки, а в Strict снизу будет отступ. Всё потому, что картинка — инлайн-элемент, который по умолчанию выравнивается по базовой линии (а не по нижнему краю строки). Возможно, есть что-то ещё (где-то была ссылка с описанием), менее значимое и специфичное. Я всега использую Transitional.
Сергей, здравствуйте.
У меня есть select с шириной в процентах.
При изменении набора option из JS ширина select в IE меняется.
Подозреваю, что Вы сталкивались с данной проблемой.
Задавать ширину в пикселях не хочу.
Существует ли какое-нибудь решение?
Спасибо.
Попробуйте временно сменить ширину селекта, например, 10px, потом убрать её. Возможно, IE прочухается и обновит блок.
Спасибо! Ваше решение устранило проблему.
Вы, конечно, классно чувствуете IE
Очень давно сталкиваюсь с проблемой размещения 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Сергей, не сработало.
Как думаете, стоить ли поддерживать Opera 9.2?
Добрый вечер, Сергей.
Существет ли способ располагать блоки равномерно по всей ширине экрана и чтобы количество блоков на строке менялось в зависимости от ширины экрана? Как например это сделано на странице результатов поиска картинок в Яндексе. В Яндексе, насколько я понял, используются таблицы, а возможно ли без них? Гугл на аналогичной странице использует js. Возможно ли без него?
Причем нужно чтобы именно как у Яндекса - т.е. если количество картинок на последней строке меньше количества на других, то картинки выстраиваются по одной вертикали, а не растягивались на всю ширину.
Т.е. вариант, когда получается так:
O O O
O O O
O O
известен.
А хочется, чтобы так:
O O O
O O O
O O
Роман, в Яндексе используется JS. Я бы здесь отталкивался от display: inline-block и text-align: justify. Сложность с последним рядом, возможно, придётся вставить элемент, с 100% шириной и нулевой высотой, или сделать ряд «болванок», с заданной шириной, в зависимости от того что именно хотите там видеть.
Действительно и у Яндекса JS. Не заметил. Видимо все-таки без скриптового варианта не существует.
Inline-block, justify и растягивающий спан дают такой эффект (в прошлый раз съелись пробелы):
О_О_О
О___О
а желательно такой:
О_О_О
О_О
Если использовать болванки, то по-помоему не получится сделать переменное число элементов в строке, либо опять же добавлять эти болванки JS`ом по мере необходимости.
Для новых браузеров можно воспользоваться CSS media queries, чтобы динамически менять ширину внутренних блоков в зависимости от ширины контейнера
Роман, поэтому я и предложил сделать несколько болванок со стандартной шириной, нулевой высотой и без отступов. Количество зависит от того сколько у вас может получиться элементов в ряд.
Здравствуйте Сергей.
Подскажите, решение, как сделать тень у блока, в котором содержится основной контент сайта с высотой 100%?
iSergey, а фон на body (или каком-нибудь вреппере, если есть) с background-position: right bottom не устраивает? Если нет, то уточните в чём проблема.
Классика
Как сделать резиновое горизонтальное меню на всю ширину? Количество пунктов может меняться, ширина пунктов по содержимому, отступы между пунктами одинаковые, первый пункт по левому краю, последний — по правому. Т.е. имитация text-align:justify для пунктов меню. Во всех известных мне решениях что-нибудь, да смущает. Сильно. Есть семантичное решение?
GreLI, нужно чтобы растягивающийся блок был всегда по центру.
сделал две обертки, внешнюю и внутреннюю, у каждой указал тень, но внутренняя не растягивается на 100% в высоту
вот пример: http://webobjects.ru/
iSergey, а почему не сделать одну широкую картинку с тенью (на весь контентный блок) и репитеть (растягивать в IE6) ее вертикально? Контент же у вас фиксированный.
Vii, нет, растягивающийся
Здравствуйте, Сергей!
Для проекта пользуюсь Вашим изобретением: 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. Работает, но выводит не нужные стрелочки.
iSergey, а если внешним вреппером сделать
<body>?MaratCrash, инпуты пока не поддерживаются, попробую что-нибудь придумать к следующей версии.
Сергей, спасибо за ответ. Разобрался с ситуацией. textarea обернул в div, а див уже скруглил. У textarea padding проставил.
Многим известное решение для прикрепления footer’а к нижней границе окна браузера при недостатке контента.
http://matthewjamestaylor.com/blog/bottom-footer-demo.htm
Часто случается, что внутри элемента div#body контент имеет минимальную ширину, скажем, не жмётся меньше чем до 999px. Тогда при горизонтальной прокрутке фон шапки и подвала некрасиво заканчивается. Никак кроме как выставив для #header и #footer position:fixed, решить это не получается, что в большинстве случаев непригодно.
Можно ли это как-то обойти?
Обычно такие задачи решаются тем, что создаётся общая обёртка для всей страницы и ей указывается
min-width.Сергей, првиетствую. вопрос такой: как прилипить картинку в плотную к низу сайта, но так чтобы при малой информации она была снизу а посердине пустой экран, а при большой она не была видна в «первый» экран?
Артем, Вам наверно подойдет вот это
http://www.zakharov.ms/footer/
Здравствуйте, Сергей!
Такая ситуация. У меня img позициирован абсолютно (position: absolute). Изображение, прописанное в src - png формата.
Почему-то, используя Ваш js скрипт (из Техногрета), в IE6 появляется косяк: изображение выводится с рамкой белой (пробовал убивать border и backgraund - не помогло).
Посоветуйте, пожалуйста, как быть.
Спасибо Вам за то, что Вы делаете!
Хотелось бы увидеть пример, а также название скрипта, который используется
Сергей, здравствуйте. Есть небольшая задачка. В текст необходимо вставлять маленькие картинки. Вместо многочисленных мелких картинок я решил использовать спойлер. Моя реализация проста, в код вставляю img тег с src на прозрачную картинку и с помощью стилей прописываю положение фоновой картинки. Способ работает вполне хорошо да только хотелось бы обойтись без прозрачной картинки. Можете ли вы предложить свой вариант решения этой задачи?
Пример моей реализации: http://slil.ru/28373064
Можно использовать элементы с
display:inline-block; zoom:1. Тогда этим элементам можно задавать размеры и они будут выравниваться по базовой линии. Для Firefox 2 это не сработает, нужно указатьdisplay:-moz-inline-stack;.Здравствуйте, Сергей.
Хотел уточнить одну мелочь по работе с eclipse, раньше вы писали:
Затем создаю проект в Eclipse и начитаю делать базовый шаблон, из которого потом делаю макеты отдельных страниц.
Этот базовый шаблон имеет что-то общее с шаблонами dreamweaver’а?
Как его создать?
Это просто HTML-документ, в котором собраны все основные блоки и комментарии к ним. Просто все сайты, которые я делаю, используют CMS, поэтому при вёрстке нового макета приходится совершать много лишних телодвижений, чтобы можно было удобно работать и проверять в рамках CMS. Вместо этого я создаю новый статичный шаблон на основе базового и работаю с ним.
Сергей, приветствую!
С Новым годом Вас! Желаю реализации поставленных целей на этот год и личного счастья! =)
Сергей, возник такой вопрос. Дизайнеры частенько рисуют текст с шрифтами, которые сложно выразить с помощью css.
К примеру. В фотошопе текст со шрифтом Myriad Pro имеет свойства “плавно сглаженный” и “псевдополужирный”.
Как их выразить через css?
Обычно этого говорит о том, что дизайнер работает на Маке и не пофиксил проблему со стандартными шрифтами (Arial, Verdana): они не показывают русские буквы. Поэтому он использует «нестандартный» Myriad Pro. Как правило, на это просто можно забивать. А настроек типа сглаживания нет в СSS, как и имитации полужирного начертания.
Сергей, сталкивались ли вы с такой проблемой:
Есть блок-родитель - у него 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не устраивает, так как я все шрифты указываю в относительных единицах)ошибка парсера, там в скобках:
не , а перенос
ещё ошибка парсера, там в скобках:
не </div><div>, а </div>перенос<div>
@Рустам, ещё одно решение писать вот так:
.
А отступ будет между элементами с display: inline-block во всех браузерах, если выводить их в DOMе с переносом на новую строку, это происходить также как и с display: inline элементами
Извиняюсь, код, который я хотел привести выше, вот такой:
<div></div><!–
–><div></div>
Эх, в общем, между дивами в примере идёт комментарий
Сергей, здравствуйте.
Мне интересно как вы подгоняете верстку под макеты?
Вроде все делаю правильно/считаю но в итоговой верстке то 1 то 2 пикселя не так как на макете, снимаю скриншот и полу прозрачностью ложу на макет, ну и так проверяю/подгоняю до полной идентичности.
Или это лишнее задротство?
Стас, о том что это задротство говорит такой простой факт: вы не добьётесь попиксельной точности даже между браузерами. Этому будут препятствовать всякие мелкие баги и особенности рендеринга текста. Особенно хорошо это видно в IE8 при переключении режимов IE7/8.
Сергей,
пытаюсь подогнать решение по борьбе с прыгающими блоками (http://www.artlebedev.ru/tools/technogrette/html/fix_floats_in_ie_by_padding/) для моей задачи - двухколоночный макет.
Проблема в следующем: Колонки засовываю в div шириной 96%, отступами по 2% от краев. Несмотря на display: inline, между колонками появляется отступ, и распределены они слишком равномерно по экрану.
Однако, если в IE Devbar поставить снова display: inline, проблема исчезает…
В чем может быть причина?
Почему для картинки png8 c полупрозрачностью не срабатывает фильтр AlphaImageLoader или другие скрипты для отображениея полупрозрачности png в ie6?
Такие особенности работы IE6. Для png8 можно вообще не использовать фильтры
ну а если сложилась такая ситуация, что я сохранил картинку в Fireworksе в формате PNG-8 с альфа-каналами и она весит напорядок меньше, чем таже картинка с тем же альфа-каналом в формате png24. Но в ie6 не получается заставить показать эту полупрозрачность через фильтр AlphaImageLoader или скрипты. Получается заставить увидеть полупрозрачность картинки в формате PNG-8 с альфа-каналами в браузере ie6 никак не получитсвя?
Да, png8 с полупрозрачностью не получится увидеть в IE6. Многие разработчики специально переводят в PNG8, чтобы сэкономить ресурсы в IE6.
Коротко…
Есть картинка, порезанная на 3 фрагмента…
Центральная - размером примерно 900 пикс.
по бокам две картинки примерно по 300 пикс. шириной.
Задача - сделать верстку так, чтобы при уменьшении разрешения монитора, не появлялось полосы горизонтальной прокрутки, т.е., чтобы боковые картинки (фоном) скрывались по краям. Справа получается нормально, а вот слева картинка некорректно выравнивается по отношению к центральной.
Код примерно такой:
Что посоветуете? Спасибо!
Привет.
Ситуация такая. Внутри ячейки таблицы два div с CSS display:inlie-block. Ширина таблицы и ячейки не задана. Свободного места справа достаточно. Проблема в Опере (10, 9). Выглядит так, что этот браузер неверно посчитал необходимую ширину ячейки и поэтому второй див не встал справа от первого, но если убрать обрамляющую ячейку, то все в порядке. Я понимаю, что это можно рещить сменой способа html верстки, но интересно понять, что не так? Есть идеи?
Сергей, здравствуйте.
Разбирался с методом “звёздочка” для создания закруглённых уголков и столкнулся с проблемой:
если всё обернуть таблицей, то в ie7 свойство margin-left:100% для правых углов перестаёт работать.
Проверил на Вашем примере из техногрета.
Сталкивались с этим? Что посоветуете?
Спасибо.
Нашёл ответ на свой вопрос в комментариях к одной из статей на Вашем сайте
Добрый день.
Сергей, мне интересен следующий момент: сталкивались ли вы когда-нибудь с задачей оформления текста, подсвеченного фоном, но особенность в том, что текст курсивный, и фоновая заливка имеет края со скосом. Я делал реализацию такого текста по адресу http://goo.gl/GaTp. Реально ли сделать это без js и кроссбраузерно?
Спасибо, надеюсь заинтересовал постановкой задачи.
Добрый день, у меня скорее такая же проблема, которая здесь уже была описана про вложенные дивы со 100% высоты. В гугле особых стандартных решений не нахожу, да и в разобранном случае выше не особо что-то получается.
5 (или сколько угодно) вложенных друг друга дива должны растягиваться на минимальную высоту в 100% и при увеличении контента соответственно растягиваться дальше. Каждый див содержит фон - уголки и сторонки общей трехсторонней тени или любой другой сложно-накромсанный фон. Ширина дивов не фиксирована, тянется, т.е. обманный фон на фикс ширину не подложишь.
Внешнему диву задано вертикальное растягивание
html, body {height:100%}
#wrapper {min-height:100%; height: auto !important; height:100%;}
назначая такие свойства высоты внутренним врэпперам ничего не дает. Как задать свойства, чтобы внутренние тоже растягивались по высоте?
content
Есть ли какое-то универсальное решение? Уже совсем запутался.(((.
Ой, тут тэги отключены?
вот макет страницы для моего вопроса
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
2Neon.
Извиняюсь, если я правильно понял, то вам нужно что-то вроде этого:
http://webobjects.ru/test/
P.S. Не помню где откопал это решение.
Сергей, сталкивались с таким? http://fabrorum.ru/temp/iebgtest/
Это нормльно?
Подробнее о проблеме, пример которой я привел выше:
Дело в том, что IE6 не матчит селектор id.class больше одного, но в то же время матчит дочерние селекторы через такие объявления.
Как так?
Это стандартная проблема IE6. Ещё он не понимает несколько сцепленных вместе классов, вроде
.class1.class2.class3 {}(применяется только последний класс, то есть.class3). Решение — избегать таких конструкций, сводить всё к одному классу или id.Здравствуйте. Меня заинтересовало то, как организована верстка формы поиска на этом сайте. Форма абсолютно позиционируется относительно хедера - здесь все ясно. Форме задан отрицательный верхний margin и положительный padding, а input абсолютно позиционируется относительно формы. Скорее всего, это сделано во имя кроссбраузерности, но не могли бы вы рассказать подробнее, т. к. сам столкнулся с подобной задачей и ваше решение мне помогло избавиться от кое-каких нестыковок, но хотелось бы знать, как это работает.
Я это сделал для того, чтобы выровнять форму по центру шапки, и чтобы при увеличении размера шрифта она оставалась на месте. Всякие отрицательные марджины и абсолюты сделаны для того, чтобы снизить влияние элементов на позицию, а также для различных компенсаций при изменении размера шрифта.