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. Работает, но выводит не нужные стрелочки.
MaratCrash, инпуты пока не поддерживаются, попробую что-нибудь придумать к следующей версии.
iSergey, а если внешним вреппером сделать
<body>?Сергей, спасибо за ответ. Разобрался с ситуацией. 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 абсолютно позиционируется относительно формы. Скорее всего, это сделано во имя кроссбраузерности, но не могли бы вы рассказать подробнее, т. к. сам столкнулся с подобной задачей и ваше решение мне помогло избавиться от кое-каких нестыковок, но хотелось бы знать, как это работает.
Я это сделал для того, чтобы выровнять форму по центру шапки, и чтобы при увеличении размера шрифта она оставалась на месте. Всякие отрицательные марджины и абсолюты сделаны для того, чтобы снизить влияние элементов на позицию, а также для различных компенсаций при изменении размера шрифта.
Скажите пожалуйста, можно ли без JS сделать невозможным выделение текста в инлайн-элементе? Т.е. чтобы при наведении на него курсор не превращался в «редактировать текст» и чтобы сам текст не выделялся, а был как будто бы картинкой?
Neolord, вы не должны этого хотеть! Если серьёзно, то можно сделать через CSS стандартный курсор, а в новых браузерах сделать выделение таким же как и текст (то есть невидимым), но копировать это помешать не может. А также никто никогда не сможет запретить получить текст из исходников страницы.
А я и не собираюсь запрещать копирование, меня волнует исключительно эстетический момент. Чтобы при drag&dropе на странице не выделялся текст, или чтобы элемент выглядел как кнопка, не будучи ей.
Neolord, вспомнилось: есть ещё свойство мозиллы -moz-user-select, которое отключает выделение (на вид).
Добрый день. Подскажите, пожалуйста: возможно ли вообще из браузера (например используя firebug в firefox) редактировать css файл на сервере?
Я слышал, что есть дополнение к firefox для соединения по FTP, так же можно менять стили на странице в firebug, а нельзя ли их «совместить» — меняешь стили в firebug, а они меняются на сервере?
Может кто слышал о таком чуде (не обязательно для firefox, вдруг для chrome есть такая штука).
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]
Имеется таблица 2 строчки на 3 колонки, например. Нужно одну из строк и замостить текстурой.
Проблема в том, что если в CSS прописать background для (или ), то в каждой ячейке этой строки создается своя копия текстуры (появляются швы между ячейками), а нужно, чтобы одна текстура была фоном для всей строки. Разбивать данные на несколько таблиц нельзя. Как поступить?
Имеется таблица 2 строчки на 3 колонки, например. Нужно одну из строк и замостить текстурой.
Проблема в том, что если в CSS прописать background для TR (или BODY), то в каждой ячейке этой строки создается своя копия текстуры (появляются швы между ячейками), а нужно, чтобы одна текстура была фоном для всей строки. Разбивать данные на несколько таблиц нельзя. Как поступить?
Есть вариант указать
background-attachment: fixedдля<tr>, но будет неприятный эффект при прокрутке. Я вижу два возможных способа. Первый: кладём в первую ячейку<div>сposition: absolute; z-index: -1;и фоном. Если ширина и высота строки таблицы заранее известны, то указываем их для этого дива в CSS, иначи используем JS. Второй вариант: кладём фон на всю таблицу, а все строки, кроме подсвеченной, закрашиваем цветом фона страницыЗдравствуйте. Сергей, скажите, пожалуйста, зачем в примере, в техногрете (http://www.artlebedev.ru/tools/technogrette/html/rounded-corners/) папка __MACOSX?
Это так Mac OS делает архивы 🙂 Ничего важного там нет, просто временные ресурсы.
Сергей, когда вы уже напишете книгу?
Сергей, а ты сталкивался с такой проблемой: обтекаемый блок слева (float:left), а справа блок с margin-left и overflow:hidden.
значение margin-left равно ширине блока с float:left.
При этом в опере 9 возникает определенная жесть, в опере 10 тоже.
Решение которое я знаю — в правый блок внутрь вкладывается ещё блок и уже ему дается overflow:hidden. Не знаешь ли ты решения подобной проблемы без дополнительного блока?
Нет, с таким не сталкивался. Попробуйте левому блоку указать отрицательный margin-right, равный ширине блока
Привет!
Нужно переверстать таблицу дивами. Количество строк не ограничено, как и столбцов, часть столбцов задаеться через пиксели, часть через проценты и есть один столбец с шириной и высотой авто, в который пользователь вводит текст.
Короче, таблица из 5 столбцов: 20px, 13%, 456px, auto, 76px.
Все бы ничего, но нужно чтоб показывалось прилюом разрешении монитора и даже на телефонах
как относишься к проектам less (less.app), sass и подобным? может быть используешь что то подобное?
lass судя по документации достаточно удобная вещь для крупных проектов с большим кол-вом стилей
Сергей, не сталкивался ли ты с подобным и не знаешь ли ты решение следующей задачи?
http://savepic.ru/1256151.png
Резиновая вёрстка. Есть блок-родитель (серый блок). Есть ребёнок (красный блок)
У ребёнка есть минимальная ширина, меньше которой он не должен сужаться.
Однако родитель может иметь ширину меньше — в этом случае происходит обрезка ребёнка, но обрезка таким образом, что отображается серединное содержание блока-ребёнка.
При увеличении ширины окна браузера — блок-ребёнок логично растягивается по ширине родителя.
Блок ребёнок не имеет фиксированной высоты и его высота должна зависеть от количества контента.
Сложность в серединности обрезки.
Здравствуйте, Сергей. http://grab.by/4VCp — сделал общий спрайт для сайта. Но столкнулся с такой проблемой: при увеличении масштаба в Chrome изображения уголков начинают «плыть» (появляются зазоры), а у иконок появляются различные артефакты (края соседних изображений). Я разнёс изображения — http://grab.by/4VFx. Картина стала лучше, но только местами.
Сергей, подскажите, пожалуйста, решение проблемы.
Рустам, насколько я знаю, такое можно решить только центрированием обёртки ребёнка с отрицателными отступами.
GreLI, проблема возникает тогда, когда эти отрицательные маргины сочетаются с шириной больше минимальной
Рустам, такое можно легко реализовать в современных браузерах, которые поддерживают CSS Transforms:
transform: translate(-50%, 0)(проценты считаются от самого блока, а не его родителя). Какое-то кроссбраузерное решение пока не придумалДенис, я пока сильно не вдавался в детали зума и как избавиться от артефактов, поэтому, к сожалению, ничего посоветовать не могу. Обычно ребята предлагают делать зазоры по-больше между элементами, может быть сами объекты чуть дорисовать (касается круглых уголков в вашем спрайте)
Сергей, как бы Вы сверстали такой блок http://habreffect.ru/files/05f/1ed460bb3/form.png
Если считаться с тем, что нарисовал дизайнер, то inline-block нам в помощь. Но хотелось бы бронебойности: вдруг размер шрифта изменят над полем ввода, или строка с ошибкой выростет до нескольких строк.
Можно ли обойтись без таблиц для IE6+ и браузеров? Спасибо.
Посмотрите, как сделан вывод подписи «обычная цена» и «скидка» на бигбаззи: http://bigbuzzy.ru/
В принципе, можно поступить точно так же, а изменившийся размер шрифта компенсировать отступами в
emсверху и снизу.Второй вариант, которым я пользуюсь в таких случаях: http://media.chikuyonok.ru/form/
Сергей, здравствуйте.
Расскажите, для чего пишется , ведь, насколько мне известно, второй значение через дефис пишется для уточнения языка. Как например для американского английского . Чем уточняется русский мне сложно представить 🙂 Спрашиваю у вас, потому что встретил при развороте html:5 через ZenCoding, так что, наверное, вы в курсе.
Спасибо.
UPD: парсер порезал код, поправил.
Сергей, здравствуйте.
Расскажите, для чего пишется
, ведь, насколько мне известно, второe значение через дефис пишется для уточнения языка. Как напримердля американского английского. Чем уточняется русский мне сложно представить 🙂 Спрашиваю у вас, потому что встретил при разворотеhtml:5через ZenCoding, так что, наверное, вы в курсе.Спасибо.
UPD 2: еще раз попправил, жаль нет превью комментариев 🙂
Сергей, здравствуйте.
Расскажите, для чего пишется
, ведь, насколько мне известно, второe значение через дефис пишется для уточнения языка. Как напримердля американского английского. Чем уточняется русский мне сложно представить 🙂 Спрашиваю у вас, потому что встретил при развороте html:5 через ZenCoding, так что, наверное, вы в курсе.Спасибо.
Всё, сдаюсь — Текст картинкой
Сергей, скажите, что за странный div у вас всё время в вёрстке встречается по имени measurer?
Владислав, отвечу за Сергея.
Это линейка для измерения ширины документа для эмуляции min-width в IE6
А зачем для этого создавать отдельный div? Почему не привязаться к какому-нибудь div#main или к тому же body?
Иван правильно сказал — это для измерения min-width (а ещё и 1em в пикселях) для IE6. К body или div#main привязаться нельзя, потому что #measurer должен быть независимым блоком и отражать текущий размер вьюпорта, который затем выставляется для #main
Сергей здравствуйте, спасибо за подобранную и полезную информацию! посоветуйте плиз. Заказал дизайн, мои требования заключались в том, чтобы сайт был резиновым (подходил под разные разрешения), любой текст реальный и не картинками. Получил http://vkoss.ru Сайт оптимизирован под разршение 1024, если разрешение больше, верхние надписи сдвигаются влево. Вопрос. Дизайн нужно переделывать или с существующим дизайном возможно сделать так, чтобы сайт нормально отображался на разных разрешениях. Спасибо!
Денис, в целом можно и этот дизайн более-менее нормально растянуть, только шапку нужно подрисовать, чтобы она по краям нормально заканчивалась. Но сейчас вёрстка совсем ужасная, её нужно полностью менять. PS: в Москве уже давно не действует код 095
Здравствуйте.
У меня такой вопрос:
Видел сайт на котором бекграунд на одной и той же страничке меняется рандомно. Тоесть зашел один раз на сайт бекграунд один,зашел второй раз уже другой бекграунд. 🙂
Можете помочь? Буду очень благодарен 🙂
ЗЫ, забыл сам вопрос. Как реализовать такое? 🙂
Здравствуйте Сергей.
Подскажите пожалуйста, удалось ли найти «хорошее» решение проблемы position:fixed для мобильных браузеров или хотя бы для iPhone?
Куда вообще двигается мобильный интернет? Многие устройства, даже телефоны, уже способны сносно отображать страницы сверстанные для настольных браузеров, но от мобильных версий сайтов никто пока не отказывается (http://m.yandex.ru/)
При работе с мобильными браузерами обращаетесь к каким-то источникам или собственные шишки набиваете?
Только всякими эмуляциями, которые мне не очень нравятся, вроде TouchScroll или iScroll
Всё дело в том, что эти устройства довольно маломощные и будут очень долго отображать тот контент, который быстро отображается на десктопе. Например, популярный jQuery на айфоне инициализируется (именно инициализируется, а не скачивается) примерно секунду, а на десктопе это делается где-то 50 мс. Также мобильная версия (по крайне мере в Сафари на айфоне) требует другого подхода к вёрстке опять же для увеличения быстродействия (об этом как-нибудь напишу). Да и мобильный траффик стоит недёшево, чтобы грузить полноценную версию сайта.
Поэтому отдельная мобильная версия сайта — это не рудимент, а суровая реальность.
Сейчас информации крайне мало (особенно по эффективной вёрстке), поэтому сам набиваю шишки
Сергей и читатели, добрый вечер.
Необходимо сделать «листалку» (при клике страница не перезагружается) вида:
[prev] 1 of 30 [next]
Проблема состоит в том, что при переходе с элемента 9 на эл. 10 кнопка [next] сдвигается вправо. Мы не знаем общее количество элементов. Их может быть единицы, десятки, сотни, а по дизайну, ширина «листалки» должна быть как можно меньше. Т.е. задать ширину всему блоку не получится. На данный момент я решил проблему вычисления необходимой ширины джаваскриптом (тем более, что он нужен для функциональной реализации «листалки»). Но хотелось бы обойтись CSS-ом.
это наверно самый простой способ.
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. Спасибо.
Здравстуйте, Сергей.
Вот, нашел красивую галерею.
http://leihu.com/art
Мне нравится, как она выглядит, но интуитивно я чувствую, что блоки-картинки должны выводиться одним списком, а не четырьмя, как сделано в примере.
Однако, выводя блоки одним списком столкнулся со сложностями —
поскольку высота блоков произвольная, вертикальные отступы между ними тоже становятся произвольными.
Попробовал зайти с другого конца — с абсолютного позиционирования — и тоже не преуспел.
Задача оказалась сложнее, чем я думал.
Как сверстать такие блоки?
Владислав Шкодин, всё это шаманство нужно для того, чтобы подпись более-менее прилично себя вела при изменении размера шрифта. Проценты в шрифтах — то же самое, что и
em, просто так привычней было. Единицаexнаиболее близко по значению подходит к средней ширине буквы, поэтому используется для горизонтального смещения, аem, соответственно, для вертикального смещения.Алексей, для такой задачи вёрстка в 4 колонки — абсолютно нормальное решение, если у элементов контента заранее неизвестна высота. Можно, конечно, и одним списком вывести, тогда вам на стороне сервера нужно высчитать минимальный размер блока в ряду и с помощью отрицательного
margin-bottomу каждой картинки подтягивать нижний край. Но я считаю, что оно того не стоит.Сергей, мне дизайнер нарисовал макеты в которых блоки (назовем их «A», «B» и «С») расположены как на схеме http://img.picsa.ru/pictures/0/000/062/190/62190.png
В HTML они должны следовать в алфавитном порядке друг за другом (можно, наверное, сделать какие-то дополнительные обертки, если нужно). Для случая, когда высота «C» меньше чем «A» можно оставить свободное пространство и потом впихнуть «C» через «position: absolute». Так я, собственно, и сделал, потому что это было известно заранее. А потом задумался над универсальным решением, которое бы позволяло разместить блок «В» в зависимости от максимальной высоты блоков «А» и «С». В результате экспериментов пришел к выводу, что это вроде как не получится сделать без JS.
Сталкивался-ли ты с такими случаями?
display: inline-block;
Хотел спросить, а как можно вписать текст в круг?
Я пришел к самому простому но не очень красивому решению, оно вот тут, но хотелось бы изящнее.
Я бы эту задачу решал точно так же. К сожалению, не знаю другого способа. Возможно, в SVG что-то есть/будет для решения таких задач.
Здравствуйте! Столкнулась с проблемой при отображении тени у блока с картинкой. Различные варианты использования box-shadow не устраивают, так как не все браузеры поддерживают (опера, например, поддерживает это свойство только с версии 10.5 и выше). Использование фоновой картинки с тенью не подходит, так как изображений много и они разного размера. Как бы вы посоветовали решить эту проблему? Спасибо.
Я думаю, вам подойдёт этот способ: http://chikuyonok.ru/2009/10/decor/
Сергей, скажите пожалуйста, почему на сайте МосМетроСтроя размер бэкграундной картинки именно 1203 на 1190. В этом есть какой-то сакральный смысл или просто «такие были картинки»?
Сергей, подскажите пожалуйста как вы обычно решаете такую проблему с позиционированием в ИЕ6?
http://savepic.ru/2009173.png
Мне кажется, самое простое это:
bottom:0;
_bottom:-1px;
Вот здесь Сергей упоминает про тему абсолютного позиционирования right/bottom в IE6.
http://chikuyonok.ru/2009/10/decor/
Если лень изворачиваться, можно сделать с помощью «expression». Но лучше уже сделать с таким «багом» либо сделать для IE отдельную версию без закругления, чем использовать expression.
Expression подходит скорее для заказчиков, которым можно сказать: «Вот смотрите, всё идеально в IE6, вы только страничку не прокручивайте, а то лагает».
Можно ли сделать так, чтобы абсолютно позиционированный блок — раздвигал внешний блок?
Hello world
EzheG, проблему с неточным bottom:0 можно обойти воспользовавшись тем что позиционированный элемент без указания координат находится примерно там, где бы он был без позиционирования. В случае нижних уголков можно просто поместить их в конец родительского элемента и уточнить положение с помощью
margin. При этом желательно, чтобы последний элемент, который перед уголками, был блочным, и если есть текст, то он был бы в нём, и сmargin-bottom:0, иначе может глючить по разному в разных браузерах. Сама эта неточность возникает при нечётных значениях высоты или ширины (right:0).Михаил, абсолютно позиционированный блок никак не может влиять на внешний блок, единственный результат его присутствия может быть в увеличении области прокрутки страницы или блока с overflow: scroll или auto при выходе за границы.
Добрый вечер, Сергей =)
Скажите пожалуйста, что лучше использовать в стилях и скриптах — id или класс, если возможно использование как id, так и class? Что будет быстрее работать в целом для всех браузеров?
Сергей, если какие-то интсрументы для реалтайм верстки, как в файрбаг, только посерьезнее.
Скажите, при использование спрайтов размеров с этот из-за каждого используемого div’а (спрайта) браузер будет жрать памяти размером с величину картинки? Или же браузер обрезает ненужную часть для экономии оперативки? (Пример взят с artlebedev.ru.
Sasha, про существование таких инструментов не знаю, потому что есть ряд технических сложностей с их правильной работой. Но недавно меня посетила одна идея, как это можно реализовать, и, возможно, скоро представлю прототип.
Дмитрий, браузер не должен дублировать в памяти весь спрайт для отображения его фрагмента, хотя с уверенностью сказать не могу. Но точно знаю, что такие большие спрайты очень плохо сказываются на производительности и потреблении памяти. Можно чуть подробнее об этом почитать. Лично я решал бы такую задачу через SVG/VML, двадцать первый век на дворе всё-таки.
мечта, поставить N мониторов под каждый браузер, виртуальную машину как в этом топике http://habrahabr.ru/blogs/javascript/99816/ и инструмент реалтайм верстки)
Привет, Сергей и читатели!
Дизайнеры нарисовали такой 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.
Есть ли идеи по фиксу/хаку этой реализации или идеи по реализации другой?
.list-item{ zoom:1; }
Что вы думаете о http://ru.html5boilerplate.com/ ?
.list-item{ zoom:1; }
К сожалению, СамыйлюбимыйфиксIE6 не помог.
На всякий случай (вдруг кому тоже станет интересно), выкладываю свёрстанный пример
http://dl.dropbox.com/u/13515720/waterline.htm
Для IE6 нужно принудительно указать
display:inline;и всё будет работатьЗдравствуйте,установил на блоге плагин по созданию таблиц:WP-Table Reloaded,все нормально,только таблица заходит на боковое меню и сливается с ним,изменял в CSS стилях плагина отступы,ширину и никакой реакции.Скорей всего надо прописывать что то в css стилях самого шаблона.Подскажите,если сможете.Вот моя страница с таблицей:http://ugristop.ru/moya-naturalnaya-effektivnaya-kosmetika/ovante-effektivnyj-krem-ot-ugrejpryshhejugrevoj-sypiakne.html Я там таблицу специально опустил в самый низ,чтоб не налезала на боковую менюшку,ну и так видно, что она чуть чуть залазит за край.
Привет, Сергей. Существует ли какой-то универсальный способ верстки растягивающегося горизонтального меню, расстояния между пунктами которого одинаковы?
Сергей, объясните причину странного поведения браузеров в этом примере: http://htc-cs.ru/_common/test/border.htm
Если на странице есть два блока (один вложен в другой), между их открывающими тегами нет другого контента и у вложенного стоит margin-top, то блок-потомок сдвигает блок родителя на расстояние margin, а не сдвигается на это расстояние внутри родителя.
Почитайте про collapsing margins: http://www.w3.org/TR/2008/REC-CSS2-20080411/box.html#collapsing-margins
Сергей, приветствую!
Очень нужен совет аксакала в клиентской оптимизации =)
Делаю сайт. Фон сайта представляет из себя большую картинку (1856*1230px).
Если этот фон сохранить в jpg (качество 65), то она весит 250 кБ. Меньше не ужимается — качество хуже становится резко.
Как думаешь, стоит ли ее резать на несколько картинок и из них стыковать фон? Или ее одну цельную показать (через background)?
Просто не хочется резать, т.к. будет больше число запросов http и время загрузки, ИМХО, будет больше.
Сергей, пожалуйста, подскажи как быть.
@MaratCrash
Можно поизвращаться с selective quality для jpeg в fireworks, например.
Либо сделать фон из и jpeg ( progressive )
Или даже какой-нибудь lowsrc для img прописать с еще худшим качеством картинки
А можно и не замарачиваться. 250кб — это у большинства меньше секунды 😉
Либо сделать фон тэгом IMG и использовать jpeg ( progressive )
subliminator, спасибо за ответ! Приму к сведению.
Сергей, если увидишь мое сообщение, пожалуйста ответь — ценю твое слово особенно.
Здравстуйте, Сергей.
Не можете подсказать ответ на такой вопрос. Использую расширения гуглхром при верстке если их юзать на онлайн сайте, то все нормально работает, линейка, colorPicker, скриншотсайта + публикация его где-то на их хостинге. Но если взять зарузить офлайн верстку то все плагины отказываются просто работать.
Пишут такое или вообще не работаю, ка заблокированные
Sorry! You can’t use this extension on local or special Chrome pages.
как это можно обойти, или почему так происходит, непонятно почему простая линейка например не может работать локально(
Заранее спасибо!
В настройках расширения укажите Allow access to file URLs
Благодарен Сергей что откликнулись, но простите за тупость не могу найти как это сделать(
У меня есть список моих расширений
https://dl.dropbox.com/u/17626502/screen/img1.jpg
И настройки первого
https://dl.dropbox.com/u/17626502/screen/img2.jpg
такой настройки не видно. Что делать? Может только некоторые расширения имеют настройку которую Вы указали
Виталий, попробуйте добавить паттерн
file://*/*в секциюcontent_scriptsманифеста плагина, как здесь: https://github.com/sergeche/xmlview/blob/master/extensions/chrome/manifest.jsonСам manifest.json вы можете найти в распакованной версии нужного плагина, где-то в папке с пользовательским профилем
Попробовал, пока без результата.
На странице разработчика расширения web developer(тоже не работает)вот что написано
http://chrispederick.com/work/web-developer/help/#local-files-gallery
Возможно это заморочки самого браузера, а отключить или разрешить в настройках браузера ничего такого не видно.(
Есть еще вариант рабоать на веб-сервере и оттуда запускать. При таком подходе работают все расширения, кроме линейки. Только это нормально например просто верстку делать на веб-сервере? или сверх идиотизма, на данный момент использовал просто папку в которой работал…
что скажите?
Возможно, это было справедливо для старых версий Хрома, но сейчас доступ к локальным файлам работает. Есть ещё всякие заморочки при загрузке внешних файлов, возможно, они загружаются из
content_script, а нужно грузить с фоновой страницы. Нужно смотреть на реализацию расширения.Здравствуйте Сергей. Задача. Сверстать 3-х колончатый сайт так, чтобы центральная колонка была первой (заказчик требует для СЕО), футер прижат внизу, кроссбраузерность.
Искала варианты, пока вот такой нашла http://htmltricks.ru/archives/3 — проблема с ИЕ7 падает правая колонка.
Ярослава, почитайте http://chikuyonok.ru/2010/01/liquid-site-markup/
Сергей, добрый день.
Спасибо Вам за то, что Вы делаете!
Сергей, в статье про блоки с тенями, Вы описали свой универсальный метод. Я его сейчас пытаюсь применить, но вот что не получается. У меня в нижних частях блока узор и нужно, чтобы контентная часть была поверх этого узора. В данном случае Ваш метод не подходит. Посоветуйте пожалуйста что-нибудь.
Здравствуйте Сергей.
Скажите пожалуйста, используете ли вы при верстке фреймворки типа http://960.gs/ или какой-нибудь другой ?
Стоит ли их вообще использовать, если да то зачем, если нет, то почему ?
Здравствйте,у меня верхнее горизонтальное меню в Hedere идет одной строкой,соответственно там все категории сайта не убираются,как сделать под ним продолжение строк,чтоб все категории отображались.
Вот код самого меню:
Приветствую.
Столкнулся с проблемой вложенных флоатов в ie6-7.
Когда во флоате лежат 2 флоата и прижаты по краям через float: left, float: right, то родительский элемент в ie6-7 разносит на всю ширину пра-родителя.
В остальных браузерах просто идут друг за другом и ширина родителя адекватна.
Анологичная ситуация, если родительский элемент абсолютно спозиционирован.
Красноречивее слов будет пример — http://db.tt/o9IOjrZ.
Заранее благодарю за советы.
Станислав, почему не поменять у блока holderR float:right на float:left?
kozubas, потому, что если в родительском блоке будет лежать, к примеру, картинка, то зафлоаченные блоки должны прижиматься к разным сторонам родительского блока, ширина которого будет равной ширине картинки.
Станислав, попробуйте вместо правого флоата использовать
display: inline-blockиtext-align: rightArmen, такие фреймворки не использую, и считаю, что это полнейшая чушь. Во-первых, я делаю только растягивающиеся сайты (а большинство таких фрэймворков используют либо фиксированную ширину, либо не учитывают неспособность Оперы в 2011 году не понимать дробные проценты). Во-вторых, мне не нравится принцип организации классов, когда нужно чуть ли не конечный размер указывать у блока (что ломает принципы разделения данных и представления). С таким фрэйворком вёрстка особо ни чем не отличается от табличной.
Еще можно попробовать установить блоку .holderR атрибут align (фу-у-у) в значение right. Будет несколько иное поведение.
Сергей, а где можно посмотреть ваши последние работы как верстальщика/javascript-программиста?
kozubas, когда (надеюсь) запустим новый проект — покажу.
А так мои работы можно увидеть на гитхабе: https://github.com/sergeche
В процессе своего webdev-самообразования много раз слышал мантру «table только для таблиц, верстка только блоками, только так». Однако изучив на практике несколько сайтов Студии и не только я обнаружил эпизодическое использование таблиц для вёрстки(понятное дело, что в основе страницы всё же блоки, а таблицы для суб-элементов).
Тогда я понял, что важно лишь корректное отображение сайта браузерами и «браузер — лучший валидатор», а мантра выше — полный бред. Не могли бы вы привести примеры случаев, когда таблицы в качестве помошника блоков оптимальны или даже необходимы?
Сергей, привет.
Накопилось ряд вопросов — пожалуйста помоги )
1. Часто приходиться в ходе поддержке проекта прописывать в html свойства css (через style). Насколько это правильно? Не нужно ведь всегде создавать классы или id, когда это единичный случай, я правильно понимаю? Как ты обычно поступаешь/поступал?
2. Что лучше использовать — class/id? К примеру, если блок используется только один раз на странице. Как лучше в плане производительности?
3. Что лучше: cufon или font-face?
4. Сергей, можешь что-нибудь посоветовать почитать по оптимизации клиентской части? Я прочитал отсюда все — webo.in. Есть еще что-нибудь в сети?
Сергей, Спасибо тебе за то, что делаешь!
Здравствуйте, Сергей! Прочитал множество Ващих статей и много полезного для себя подчерпнул. Большое спасибо труды!
Уже очень давно ломаю глову (а судя по результатам поисков не только я) над одной непростой, на мой взгляд, задачей, которая касается резиновой верстки на div’ax.
Возможно Вы, как любитель решать сложные задачи, поможете разрешить эту проблему, ломающую мозг многим верстальщикам, как начинающим так и продвинутым.
Нужно сверстать макет, состоящих из двух колонок. Одна из них фиксированной ширины (допустим левая), а правая растягивается во всю ширину. Минимальная высота 100%. Но необходимо, чтобы при переполнении одной из колонок обе колонки растягивались на одинаковую высоту.
(Я пробовал адаптировать Ваш пример «Два float-блока с одинаковой высотой», но не получилось)
Требования следующие:
1. Исключительно DIV + SCC, никаких таблиц.
2. Не использовать Java Script
3. Не использовать картинку для заливки фоном одной из колонок.
4. У каждой колонки свой цвет (отличный от цвета body например)
Ну и картинка, если я вдруг что-то непонятно объяснил:
http://img233.imageshack.us/img233/4886/100utb.jpg
Vladimir, самый простой способ это сделать это поставить первому блоку float: left и фиксированную ширину, второму — overflow: hidden. Затем каждому из блоков задать padding-bottom: 10000px; margin-bottom: -10000px; А родительскому блоку (в котором обе эти колонки находятся) тоже overflow: hidden (ну и для ie — width: 100%); У этого способа есть определенные ограничения, но он совершенно железный.
Вопрос еще один, в последнее время необходимо верстать рассылки, не подскажите как сделана рассылка на Аймобилко, если это не секрет конечно. Принцип замены изображений текстами, и при клике отображать они отображаются. Или более универсальный метод?
Заранее спасибо.
Сергей, подскажите, а как вы относитесь к стоящим рядом с ? С точки зрения семантики, как я понял, это не совсем верно. Пример:
текст
текст
текст
И что вы думаете по поводу вкрапления html5 тегов например на страницы с доктайпом XHTML 1.0 или HTML 4.01? Повлияет ли это на выдачу в поисковиках, есть ли вообще смысл использовать их в этих доктайпах, например в качестве дополнительной обертки, которая ИЕ6-8 будет просто игнорироваться?
Продублирую первый вопрос 🙂
Как вы относитесь к стоящим p рядом с div? С точки зрения семантики, как я понял, это не совсем верно. Пример:
p текст /p
div
p текст /p
p текст /p
/div
MaratMarat,
1.Это не правильно, собственно для того чтобы отделить содержание от представления и был придуман CSS. Даже если это единичный случая, имения проще вносить через css.
2.В плане производительности лучше class, но реально это заметно только на больших деревьях тегов. Об этом можно почитать в клубе БЭМ, где пишет Харисов(руководитель Яндекс верстки кажется).
3.В каком плане лучше? Cufon использует js, для нормальных браузеров он например будет генерить canvas, для ИЕ svg итд. Это не очень гибкое решение. Я поставлю на первое место font-face, на второе Cufon. Попробуйте поюзать то и то, увидите разницу.
4.тут я не подскажу 🙂
Владислав,
спасибо за интресное предложение решения задачи!
Ограничение контента по высоте повлечет его обрезание когда сам контент достигнет большей высоты нежели его контейнер 🙂 Конечно такое колличество контента на одну страницу (чтобы он превысил 10000 по высоте) случай редкий да и это всегда считалось занком дурного тона.
Т.е., судя повсему, в рассмотренном мною случае все-таки можно сказать «невозможно» )
Не понимаю, зачем такую ерунду писать что обсуждалось уже 100500+ раз и каждый думает что он спрашивает что-то уникальное, из интересного блога где есть возможность что-то спросить у профессионала, сделали песочницу форума html/css… Я уверен что не один такой недовольный подписчик который заходит сюда по рассылке и видит тут эти нубацкие вопросы.. обиднотоварищи
Сергей, а какое значение font-size вы используете для body (html), чтобы во всех браузерах размер шрифта выглядел примерно одинаково?
Что думаете по поводу следующего способа для задания базого значения шрифта: http://www.alistapart.com/d/howtosizetextincss/ss-test-6.html (задаем для ИЕ значения в em, а для остальных браузеров в пикселях)?
Вадим Гончаров, я обычно ставлю 10px у body, так считать потому удобнее.
Сергей, привет!
Как сверстать центрированный блок с картинкой и подписью?
http://oleggromov.com/upload/centered-image.jpg
— Картинка может быть произвольной в ширину, выровненной по центру.
— Подпись должна быть шириной с картинку, прижатой к её левому краю.
Проблема в том, что подпись растягивает и инлайн-блок, и таблицу — нужно как-то ограничить её ширину шириной картинки, которая заранее неизвестна 🙂
Если таблице указать ширину в 1 пиксел, то будет, что надо.
kozubas, помогло.
Сделал контейнер с display:inline-table, чтобы он выравнивался по центру, ему задал ширину 1px, а внутри разместил два div с картинкой и подписью с display:table-row. Ведёт себя как надо, только в IE7 небольшие глюки — разберусь. Поддержка IE6 не нужна.
Спасибо!
Сергей, здравствуйте!
Столкнулся с неожиданной проблемой, связанной с большими значениями ширины у блоков. Заметил, что по крайней мере на MacOS в WebKit браузерах появляется странное поведение при ширине от 167772 до примерно 336500 (самый наглядный способ убедиться — поставить бэкграунд-колор черного цвета у блока).
Вопрос в следующем: существуют ли какие–либо ограничения на значения для ширин и отступов, и как с этим бороться?
Антон, да, в некоторых браузерах существуют ограничения по размерам блоков, наверно, это как-то связано с памятью и возможностями отрисовки. А если применяете 3D-трансформации, то ограничения будут ещё меньше: около 2048 пикселей (связано с размером текстуры).
Единственный способ борьбы с этим, который я знаю — вместо одного большого блока делать несколько небольших
Сергей, подскажите где семантически правильно разместить картинку в блоке, где под/справа от неё распологается заголовок-ссылка, при этом сама картинка тоже должна быть кликабельной? Внутри ссылки в заголовке — <h3><a href=»»><img src=»» alt=»» />Текст заголовка</a></h3> или же идти как отдельный элемент — <a href=»»><img src=»» alt=»» /></a><h3><a href=»#»>Текст заголовка</a></h3>?
На айМобилко используется доктайп html:xt, а на BigBuzzy — html:5. Для примера — чем руководствовались в данном случае?
Приветствую!
Столкнулся с проблемой, описанной в следующем абзаце:
«Примечательно, что свойства видимости распространяются не только на сам блок-контейнер, но и на все вложенные в него элементы. Т.е. вам достаточно менять видимость только контейнера не заботясь о содержимом. Однако будьте аккуратны: в некоторых браузерах существуют отклонения от стандартных правил и спецификации. Например, рассмотренный код не всегда срабатывает в Internet Explorer вплоть до версии 7 в случае, когда вложенным элементом является картинка: блок исчезает, а картинка остаётся видимой.» (у меня вплоть до 9)
что происходит у меня, для картинок с абсолютным выравниванием в блоках с относительным выравниванием. Возможно ли, не переходя на бэкграунды, излечить пациента?
Приветствую.
Возможно ли написать такой селектор, который будет соответствовать только первому ребенку родителя определенного типа?
К примеру для всех заголовков второго уровня задан верхний отступ, я хочу чтобы если такой заголовок был первым ребенком своего родителя, то верхнего отступа не было.
Сам спросил — сам нашел. Это можно сделать псевдоклассом :nth-of-type.
Станислав, а просто h2:first-child не поможет?
kozubas, да, действительно. Почему-то решил, что first-child выберет просто первый определенный тэг, даже если он не первый ребенок.
Подписался на комментарии.
Каким тегом лучше всего заменить тег font?
Очень удобен, а span почему то писать долго?
Здравствуйте Сергей!
Подскажите, пожалуйста, есть ли решение у следующей задачи:
есть список определений, в котором блоки должны «плавать» справа, что легко решается добавлением им 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 переносом под , но такое решение не приемлемо, поскольку следующий «комплект» и будет накладываться на предыдущий…
Э… Теги съелись… Речь про dl, dt и dd. В dt вложены картинки, в dd — заголовки и параграфы…
Отвечу на свой вопрос — решение есть (-:
Для этого нужно разместить dt под dd, сделать ему float: right и втянуть отрицательным левым полем, а dd сделать float: left и задать отступ, равный ширине dt.
Добрый день!
Помогите разобраться с css меню для Народ.ру
1.Есть код самого css меню
2.Есть папка Images
Что нужно сделать чтоб меню корректно отражалось??
мною уже сделано, но всё-равно не работает
а).Создан hml документ в таком виде и помещен в файлы на Народе
б)загружены все файлы Images и файл меню.css
НЕ РАБОТАЕТ-отражаются только ссылки
Здравствуйте, Сергей!
Хотелось бы узнать как на странице поставить два (или больше) фоновых изображений. Например, наложить полупрозрачный градиент на текстуру.
На http://htmlbook.ru/faq/kak-dobavit-dve-fonovye-kartinki-na-veb-stranitsu используются фоновые картинки для HEAD и BODY, но если на странице есть вертикальное прокручивание, то одна картинка обрезается по высоте окна.
Большое спасибо.
Можно ли сделать, чтобы длинные строки в Очень очень очень очень очень очень очень очень очень очень очень очень очень длинная строка показывались не в одну строку, а в две-три (в зависимости от длины строки) и вписывались в заданную ширину select-a?
Ставил ширину для option через CSS — не помогает. А вариант списка с радио-батонами некрасиво смотрится и много места занимает.
Так. Теги стёрлись…
Тогда ещё раз.
Можно ли сделать, чтобы длинные строки в
select
option
Очень очень очень очень очень очень очень очень очень очень очень очень очень длинная строка
показывались не в одну строку, а в две-три (в зависимости от длины строки) и вписывались в заданную ширину select-a?
Ставил ширину для option через CSS — не помогает. А вариант списка с радио-батонами некрасиво смотрится и много места занимает.
Артур, это невозможно сделать стандартным контролом. Либо самописный, либо, как вы уже упомянули, через радио-батоны.
Всем привет!
Меня интересует, как происходит процесс разрезания и измерения длины/ширины макета в фотошопе.
Например я делаю так: ставлю линейки за тем между ними делаю crop и измеряю размера холста (ctrl+alt+c) на горячих клавишах достаточно быстро все происходит, также поступаю при отрезании отдельных элементов на которые не влияют фильтры, тени, градиенты заданные в фотошопе для этого элемента. А остальные детали режу слайсом.
Может кто что посоветует какие нибудь инструменты или способы?
Хотелось бы узнать как это делает автор данного блога.
Сергей, добрый день!
Интересует следующий вопрос: возможно ли поделить страницу по ширине на 3 равные части (по 33.(3)% каждая) на чистом CSS? И если да, то каким образом это можно сделать?
Здравсвуйте!
Каким образом «быстро и красиво» отцентровать (по горизонтали и вертикали) картинку внутри блока?
Здравствуйте Сергей!
Такое дело…
Вот уже некоторое время на начальном уровне занимаюсь версткой страничек. С самого начала делал это в случайно установленном на то время NeonHTML 4.5 , но позднее узнал про IDE, после чего внимательно изучал и настраивал Eclipse по Вашей теме «Веб-разработка в Eclipse: HTML и CSS». Но в силу привычки или собственной лени так и не могу перейти в интегрированную среду окончательно…
Собственно причиной поиска альтернатив Neon’у стало его очень давнее обновление, — автор попросту на проект забил! И из-за этого многие функции расходятся с действительностью, что очень огорчает, ведь программка достаточно удобная в работе по созданию web контента. Что касается аналогов, то установив «свеженький» столь хвалёный Notepad++ очень удивился, ведь его функционал и половины не тянет по возможностям для HTML разметки…
В общем вопрос:
Как Вы оцениваете возможность и целесообразность доработки редактора NeonHTML? И возможно ли это вообще с технической точки зрения, ведь я пока абсолютно не разбираюсь в исходном коде софтверных продуктов???
Александр, если вы никогда не занимались разработкой приложений, то нет смысла что-то делать с NeonHTML, особенно учитывая, что у редактора нет открытого исходного кода (или я его не нашёл). Посмотрите в сторону Sublime Text 2, он прекрасно расширяется за счёт плагинов на Python.
Здравствуйте.
Подскажите пожалуйста.
Есть основной елемент, который отпозиционирован абсолютно и его высота(top) меняется, то есть он едет вниз-вверх. Внутри него есть другой элемент, который так же отпозиционирован абсолютно, но у него есть координаты слева и сверху.
Вопрос: как сделать так, чтоб изменения внешнего элемента, то есть его изменения координат сверху(top) не отоюражались на внутренем елементе, чтоб несмотря на то, что основной элемент меняет свое положение, — внутренний оставался постоянно на заданных координатах?
#main { position: absolute; width: 400px; }
#elem { background: red; height: 100px; position: absolute; top: 300px; width: 100px; }
Внутренний элемент
Здравствуйте Сергей. Такая проблемка, не работаетв NotePad ++ —> Zen Coding.
При попытке нажать ctrl+E выдает —>ENG
Заранее спасибо
Диана, попробуйте поставить Python-версию плагина: http://sourceforge.net/projects/npppythonscript/files/
Здравствуйте!
Каким образом “быстро и красиво” от центровать (по горизонтали и вертикали) картинку внутри блока?
Сергей, зачем в css сбрасывают и переопределяют свойства font-style и font-weight для тегов b,strong,em,i? Существуют и такие браузеры, которые по умолчанию отображают их неправильно?
Антон, это вопрос семантики. Тэги
<em>и<strong>означают не курсивный или жирный, а акцент (emphasis) и сильный акцент (strong emphasis). А как они должны визуально выделяться — курсивом, жирным, цветом фона, подчёркиванием, размером и т.д. — вопрос каждого дизайна в отдельности. Вот их и сбрасывают, чтобы разработчик делал оформление «с чистого листа». Хотя сейчас модным стало не сбрасывать стили, а нормализовать их.Привет, Сергей! Замечал ли ты, что Опера через раз отображает подгружаемые с помощью @font-face шрифты абы как (очень некрасиво). Происходит это, если в списке шрифтов .woff шрифт стоит перед ttf (или svg). Куда копать? В сторону http заголовков?
P.S. Ну, почему она такая тупая?..
Потрясающая подборка вопросов и ответов!Лет пять бы назад найти что-то подобное.
Ok
Привет, Сергей! поставил твой плагин zen-coding под коду. у меня стоит ломанная 2.0.6 так и не нашел, как преобразовать ul>li*3 и все прочие в то, во что оно должно. может быть ты подскажешь как настроить или какие горячие клавиши в кода мак. может и не к месту, но я запарился уже. спасибо