Bassline

Сверстал еще одну страницу. Макет небольшой, но с кучей декоративных элементов. Что-то здесь не так: Вся графика посажена на z-index с помощью псевдоэлементов, чтобы не создавать лишних пустых тэгов в разметке. Под конец полностью запутался в этих индексах и в том, что относительно чего спозиционированно, особенно когда открыл все это дело в IE8. Есть ли более оптимальные решения или так тоже сойдет? Из-за пункта выше в IE7 пришлось посадить целый огород из хаков. В IE Tester все жутко тормозит, в IE 10 в режиме совместимости все нормально (у кого есть виртуалка, пожалуйста, посмотрите как там). Как с этим всем быть? Два белых круга на заднем плане в области шапки. Разместил их с помощью одного большого прозрачного изображения (>2000px) в абсолютно спозиционированном блоке, который в свою очередь отцентрирован относительно body. А все это потому, что нужно было как-то прибить изображения к краям макета, что бы при изменении размеров окна круги не сдвигались отностиельно самого макета. Есть ли другие варианты? Блок с заголовком Knowledge. Реализовал его с помощью трех вырезанных картинок, тянется только по вертикали. Можно ли его как-нибудь сделать на CSS3? HTML5 тэги в блоках с новостями. Сам блок обернул в section, а каждую новость в article. Но дело в том, что у новостей нет заголовков. Как здесь быть?

Что за мода на гигантизм пошла. Все такое огромное: картинки, шрифты, расстояние между блоками. Даже на 22 дюймовом мониторе, с развернутым на весь экран браузером, плотность информации никакая, зато пустого места навалом. Только и успевай скроллить. Ориентироваться тяжело, внимание рассеивается. Может это только у меня так.

Можно задать float:left или position:absolute, или display:inline-block.

В смысле overflow:hidden? Так ведь у родителя фиксированная ширина, блок исчезнет совсем, хоть расширяй, хоть нет.

Есть такой код http://jsfiddle.net/s7EmS/2/ Вопрос: почему появляется горизонтальный скролл, когда абсолютно спозиционированному блоку (относительно родителя) задается отрицательный отступ, загоняющий его за пределы страницы? Можно ли это как-то обойти? Только без обрезания. Нужно, что бы он ушел за пределы, но при этом не исчез совсем и не появился скролл, в смысле чтобы, например, при расширении окна браузера его было видно.

У меня такого нет. Может плагин какой стоит? Локализация будет скорей всего к оф. релизу в марте.

Ну, не знаю. Я большое количество вкладок терпеть не могу, максимум 10, остальные периодически закрываю. Как можно ориентироваться в 50 вкладках?)

Поставил себе Firefox 29 (Nightly) с новым интерфейсом, теперь минимализма и няшности больше, чем в хроме. По поводу тормозов, открыл 13 вкладок в обеих браузерах - Firefox c 10 плагинами потреблял 370мб, а Chrome с 2 плагинами 360мб. Разницы практически нет.

Этого сайта уже давно нет, остались только файлы в веб-архиве. Вот ссылка, если нужно https://web.archive.org/web/20130306030843/http://divhack.com/downloads/study/9/9.zip

Зачетный супер прием. Только одного не могу понять, каким образом span оказывается в центре ссылки? Спасибо за советы! *кажется понял в чем дело, это благодаря пробелам нулевой ширины, которые были добавлены с помощью псевдоэлемнтов.

Да. наверное, стоит. Читал об этом, но тоже думаю, что пока рано. Вроде бы тэг p предназначен для разбиения текста на абзацы, а на этой станице нечего разбивать, здесь одна сточка, там одна строчка. То есть взять и поместить ссылку с картинкой или словом в h1? Разве так можно делать? В смысле столько статей (особенно сеошных) не рекомендовали ни сам тэг ссылкой оборачивать, ни внутрь вставлять. Просто не хотелось увеличивать вложенность в этом блоке, она там и так немаленькая. Где-то читал, что большая вложенность - плохо. Все дело в разделителях, которые должны распологаться на одинаковом расстоянии слева и справа от ссылки в каждом пункте меню. Либо задавать паддинги для каждой ссылки, либо указавыть для каждой ссылки ширину. Оба варианта прибивают гвоздями меню к макету. Попробую с таблицами. Так не люблю использовать эти обертки, прямо от сердца отрываю каждый раз.)) Хочется сделать все с минимальным количеством тегов. Системы нет. Сначала хотел сверстать всю страницу по БЭМу, но под конец стало тяжело ориентироваться в этой каше из классов у каждого элемента, да и просто прописывать имена самим классам по возрастающей от имени блока задолбался, здесь без бэмовский тулсов не обойтись. В итоге удалил большинство классов у элементов и дал им простые имена. Оставил только названия блоков спрефиксом b-, чтобы легче было визуально находить начало блока в коде, и отличать контейнеры блоков от их элементов. Чтобы хоть как-то ограничить радиус действия стилей внутри блока - начинаю каждый селектор в таблице стилей с имени блока, и визуально тоже легче ориентироваться. Ну и модификаторам дал префикс m-, например, вместо "b-menu_main" будет "m-main", чтобы короче было. Сначала хотел вообще этот макет забросить и никому не показывать, но потом стало жалко времени, которое я на него угробил.

Сверстал страницу девятого уровня, по одному небезызвестному макету. Проверял пиксель перфектом, в пределах одного метра все более-менее сходится. Больше интересует кривость реализации. Особо безнадежные моменты: 1. HTML5 теги. Что не на своем месте? 2. Квадратная деградация в IE. Можно ли ее назвать изящной или нужно поизвращаться? 3. Тег h1. Так и не придумал куда его воткнуть. 4. Форма с чекбоксами и горизонтальные менюшки. Кажется, что все сделано через одно место. Большая просьба оценить все это безобразие.

Можно посмотреть на эту ситуацию с точки зрения SEO. Обычно стронгом выделяют ключевые слова, выражающие основной смысл текста, слова, по которым поисковая система нашла для пользователя нужный сайт, слова, по которым пользователь, окинув взглядом страницу, понимает, что он попал куда надо. Вряд ли фраза "100% конфиденциальность..." являетя основной сутью статьи, и соответсвенно самой страницы. Выделив стронгом эти слова, можно сбить поисковую систему с толку.

А как быть с этой статьей http://www.xiper.net/collect/weekdays-front-end-dev/the-work-in-general/tehnicheskoe-zadanie-na-verstku.html А именно с этим пунктом: Масштабирование страниц: страницы при масштабировании страницы в диапазоне 70-150% в браузерах IE9, Chrome 15+, Opera 12+, Safari 5, FF15+ должны выглядеть так же как и при 100%. Допускаются не большие погрешности, которые возникают из-за неправильных округлений координат браузеров. Масштаб в IE7-8 не проверяется.

Есть два блока фиксированной ширины, содержащие текст. В одном блоке тексту задан тип шрифта Arial, в другом Times New Roman. Firefox Если уменьшить масштаб (ctrl+- или колесо) на один пункт, то в первом блоке текст вплотную прижмется к правому краю (при увеличении тоже самое), тогда как во втором блоке расстояние до правого края останется как было при 100%. Если еще на один пункт уменьшить, то в первом блоке последнее слово вообще перенесется на другую строку, во втором блоке снова останется все как есть. Chrome Почти тоже самое. IE10 Идеально. Как бы не уменьшал или увеличивал масштаб, текст в обоих блоках всегда изменяется пропорционально ширине самого блока. http://jsfiddle.net/ZQ6LR/1/ Что все это значит? И как с этим бороться, ведь верстка в некоторых случаях может ехать при зумировании.

Везде рекомендуется давать классам осмысленные имена. Что конкретно имеется в виду? 1. В соотвествии с содержимым? Тогда, на примере списка, получается так: <ul class="items"> <li class="link"> <a class="text" href="">Текст</a> </li> <li class="link"> <a class="text" href="">Текст</a> </li> <li class="link"> <a class="text" href="">Текст</a> </li> <li class="link"> <a class="text" href="">Текст</a> </li> </ul>2. В соответствии с тем, чем являются? Тогда так: <ul class="list"> <li class="item"> <a class="link" href="">Текст</a> </li> <li class="item"> <a class="link" href="">Текст</a> </li> <li class="item"> <a class="link" href="">Текст</a> </li> <li class="item"> <a class="link" href="">Текст</a> </li> </ul>Кроме того, не рекомендуется давать классам имена типа: link-1, red, left, 200, margin, width и т.д. Но есть, например, сайт о клоунах, оформление там соответствующее. И пункты меню имеют разный цвет или размер шрифта, или отступы, или все сразу. Как быть с именами в таком случае?

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

http://habrahabr.ru/post/203440/ - обрати внимание на структуру странички, которую автор разбирает в примере. Это и есть независимые блоки. Все флоаты, абсолюты (все, что влияет на положение в потоке) вешаются не на сам блок, а на его обертку, которая в свою очередь является элементом внешнего блока. Воссоздается что-то наподобии таблицы, в содержимое ячеек и вкладываются независимые блоки(со своим уникальным набором стилей, завязанных на имени блока).

Вот еще: Как оказалось, он имеет в виду, что раз уж решил использовать флоат, то позаботься о нейтрализации последствий, которые он может вызвать. Ну и по возможности стараться заменять его другими способами. P.S. Наверное он это имел в виду.))

Вот этот момент задевает очень сильно. Что же плохого в такой верстке? Возвращаешь элемент в поток и все. Может кто подробно объяснить, что же здесь ужасного в такой верстке? На практике что плохого может произойти от нее? И чем заменить такие элементы? Есть еще одна статья от этого автора с теми же утверждениями http://habrahabr.ru/post/25680/ В комментариях с ним были не все согласны.. и вот некоторые из его ответов:

Верстаю сейчас макет, в котором горизонтальное меню забито текстом под завязку. Масштаб шрифтов в винде выставлен в 125%, так как монитор большой, и мне не нравится узенькая панель задач и мизерные значки при 100%. Так вот, в IE и Firefox меню просто разваливается, поскольку эти браузеры принудительно делают шрифт жирным, и пункты меню просто не помещаются по ширине. Радует только Хром и Опера. Для себя в Firefox проблему решил через about:config, как сделать такое в IE не знаю. Как с этим бороться? Ведь у кого-то из пользователей тоже могут быть увеличенные шрифты в системе.

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

А кодировки по-умолчанию корректно настроены? зайди в Preferences -> Settings - User И добавь строчки: "default_encoding": "UTF-8","fallback_encoding": "Cyrillic (Windows 1251)" Нашел эти строки в дефолтных настройках, значения такие же. На всякий случай заменил и 1251 на utf-8. Увы, не помогло. Может сам плагин глючит. В твоей программе подобного не наблюдается? Как вообще с кодировками работаешь?

Тоже самое. В NP кодировка изначально в статусной строке отображается, для ST пришлось плагин status bar ставить, но это все мелочи. Открываю html файл, сохраняю в кодировке utf-8, статус бар показывает utf-8, закрываю, снова открываю, статус бар показывает ANSII. Повторяю операцию - таже песня. В общем забил и вернулся в NP. А так да, интерфейс приятный, руки так и чешутся поработать.

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