Nanto

Яндекс - крупный проект? И с их "минималистичной" вёрсткой вполне... То-то автор упирает на ПЕРЕМЕЩЕНИЕ блоков (по сути вся вёрстка Яндекса); но обычно менеджер не просит переместит блок, а просит перелопатить все стили в этом блоке (шрифт другой, отступы изменить, картинки добавить частично и т.д.) - чем тут полезен БЭМ? Перенавешивать все классы? Менять все правила для конкретного блока? Думаю всё же второе... И БЭМ тут никак не помощник...

css обнулите! хотя бы так *{margin:0;padding:0;} и обтекаемый элемент должен ставиться впереди того контента, который его должен обтекать (независимо справа или слева)! Т.е. в Вашем случае <aside> поставить выше <article> (иначе к правому-то краю он прижмётся, но обтекать его будет нечему - контент из <article> уже будет выведен на страницу). Ну и обнулить css...

Я думаю: 1. Любой фанатизм и перегибы в одну сторону - плохо. 2. Любой идей надо "переболеть". Тогда из этого можно сделать выводы и вынести для себя полезные приёмы. Т.е. убедиться на собственном опыте в полезности/бесполезности каких-то приёмах. Вспомни себя в отношении тех же списков, емов Короче нормально всё Здравое зерно в БЭМе есть и если кому-то удобно им пользоваться, почему нет. Не спорю, подруга. Полностью с тобой согласен. Но ты понимаешь, в чём дело, я ж ведь не со зла докапываюсь, я же ведь сам хочу мудрее стать, а мне всё тычат и тычат свои пункты, ничего не объясняя Я может после НЕфанатиских ответов сам приду к этому БЭМ-у и буду его везде тыкать, но мне не хотят объяснять и всё тут. Просто пока по факту я вижу, что все опытные камрады соглашаются со мной, что на обычных проектах БЭМ то этот особо и не нужен, оказывается, а человек мне другое доказывает, вот я и пытаюсь понять истину Я Вам больше скажу - он и на больших проектах не нужен!

Нафиг-нафиг!.. Три часа убил! IE не поддаётся (из-за марджина дочернего блока background-position смещается...)! Тупо взял картинку бэкграунда, расширил до 1280px и нарисовал бордер прямо на картинке! Всем отписавшимся спасибо!

1500px - лихо однако! Прикиньте - что будет видеть большинство пользователей...

Уф! Сделал... .main{ position:relative; background:transparent url(/background.jpg) no-repeat 50% 0; overflow:hidden; } #header_space1{ position:absolute; top:0; left:0; height:12px; width:50%; padding:4px 30px 4px 0; border-bottom:1px solid #fff; } #header_space2{ position:absolute; top:0; left:50%; height:12px; width:50%; margin-left:140px; padding:4px 0; border-bottom:1px solid #fff; } Ну и повозиться пришлось, я Вам скажу! Всё гадство не из-за "резины" было, а из-за того что бэкграунд центруется (background-position:50% 0;)... И надо было отсчёт позиционирования блоков делать от середины (не сразу дошло). Но теперь новая проблема с IE (со всеми) - для основного контейнера "position:relative" в сочетании с "overflow:hidden" даёт непонятное смещение вправо... Откуда уши растут? может просто хакнуть (через жёстко заданные поля-отступы)?

Блин! Не получается вписать в резину... Пример: <div class="main"> <div class="header"></div> <div class="header_space"></div> </div> <style type="text/css"> .main{ position:relative; margin:0 auto; max-width:1280px; min-width:1000px; min-height:100%; background:transparent url("/background.jpg") no-repeat 50% 0; } .header{ min-width:960px; height:12px; padding:4px 20px; overflow:hidden; } </style> Либо скролл раньше времени (на 1279 уже), либо фикс... Поподробнее... Это как? Картинка перекроет бордер целиком - это жпег почти на всё окно, просто на картинке есть логотип, одна буква которого сильно выступает вверх, вот и хотелось её бордером "обтравить", а не перечеркнуть... P.S. Сложность ещё в том, что шаблоны сквозные - я могу менять только html внутри основного блока, т.е. изменять контент непосредственно после хэдера (стили, понятное дело, могу переопределить для всего...)

Вот для примера: да... надо попробовать! Придумал! Убрать бордер у хэдера и запихнуть через absolute три пустых блока, у тех что по краям поставить бордер... Но надо поиграться с процентами

Есть такая проблема: Хэдер выделен нижним бордером, а бэкграунд с картинкой ложится под него. Хочется разорвать бордер в месте пересечения с картинкой... clip не поможет - блок в нормальном потоке и позиционировать его низя. был вариант поверх бордера налепить кусок скопированый с бэкграунда... Но вёрстка полу-резиновая (1024-1280), проценты точно не обсчитаешь - боюсь будет разъезжаться... Какие нибудь варианты есть?

Ничего не понял! У Вас там: 1 картинка обёрнутая в строчную ссылку 1 список 1 блок вложенный в другой Чего выравнивать-то? Кстати, float работает как надо

Тему бы хоть прочитали!.. <!--[if lte IE 10]> <script type="text/javascript"> alert("Внимание! Ваша программа для просмотра интернетов устарела!"); </script> <![endif]--> Хм.. Что-то я некрофилией занялся...

Кстати, да! Проклятые формы!.. Я когда вижу макет с нестандартными элементами - первый вопрос "элементы формы стандартные или стилизовывать"... Это в свою очередь автоматически означает подключение JS, а то и фреймворков... Плюс куча времени на вырезение этих долбанных чекбоксов и т.п. из макета (обычно дизайнеры не озабочены тем, чтобы выключенные/включенные/неактивные состояния продублировать - приходится самому рисовать, спрайты склеивать... Жуть сколько времени уходит!) Плюс скролл-бары ещё... Как там говорится - если дизайнер не может придумать ничего путного, он начинает издеваться над элементами форм...

Я валяюсь!.. Вот во что превращается идея следовать самым новым веяниям в развитии html/css... 12-ая то откуда? Разработчиков хотите удивить!

Сам без колебаний отвечу - вертикальное выравнивание блоков (да и со строками тоже не всё гладко)... Вроде не какие-то новые "свистелки-перделки", а основы разметки страницы, которые можно было продумать ещё в самых первых спецификациях! Трудно было включить vertical-align: middle; для блоков? Причём альтернативы практически нет! P.S. не, я конечно в курсе и про display-table, отрицательные марджины и top:50%... Ради одного конкретного блока можно и заморочиться, а ну как весь макет такой?.. И с этой проблемой сталкиваюсь постоянно! К тому же эти костыли далеко не всегда срабатывают! display-table только для нормального потока, top:50% только для известной высоты и наоборот для абсолютного позиционирования... Нифига не универсально! P.S. Просто накипело уже!..

Special for you: <ul class="mmenu"> ставим по коду выше middler_l - ему float:right; width:20%; margin-right:..PX .middler_l{margin-right:25%;}

Вот на 1920: вот на 1200: Чтобы меню не улетало - пишу же задайте для middler.l margin-right!

1. Нафиг разные отступы на разных разрешениях? На сколько отсутпы увеличиваются на 20px? 2. margin-right у него будет фиксированный

1) меняйте .bgtop {background: url("../images/bg_top.jpg") no-repeat scroll center(на left) top transparent;} - зачем центровать такую здоровенную картинку? 2) убирайте у .middler_l {float: left; width: 75%;} - это ещё зачем?

Прописывайте абсолютными ссылками

.svg был?

IE6 дочерних селекторов не понимает - это раз. А во-вторых, сегодня у Вас этот div первый потомок, а завтра Вам понадобиться перед ним влепить ещё один блок...

я обычно прохожку по цепочке контекстных селекторов (иногда по 5-6 элементов) до тех пор пока она не станет уникальной... Но это обусловлено спецификой работы - здоровенные сквозные шаблоны в которых БЫСТРО надо изменить стиль. Простонет времени (а порой и возможности) копаться в php-структурах для того, чтобы навесить нужный класс. Вот и приходится лепить "цепочки". Но, имхо (уже поднимал тут подобную тему) это ещё получается и вполне семантично - по подобной цепочке легко видна структура кода (вложенность селекторов)... Т.е. не залезая в html-файл я уже вижу кто родитель, а кто потомок. Если же мне встретится в css класс "cursive_bold", придётся копаться в html-файле (или файербаге каком-нибудь) чтобы отслдеить - на что же навешен этот класс. Опять таки классом удобно менять стиль у группы элементов одновременно. А если нужно поменять только одному элементу? Переназначать ему класс? В небольших шаблонах оправдано - в больших чёрт ногу сломит! Проще перечислять контекстные селекторы через запятую... ID - нужен для JS (а заранее редко когда знаешь понадобиться он потом или нет). Ну и часто возможные косяки с наличием нескольких элементов с одним ID. В принципе идентификаторов стараюсь избегать (но не принципиально)... Но если знаю что вот этот элемент абсолютно точно уникален (например, форма на конкретной странице) - скорее всего повешу ID (да и форме скорее всего понадобиться js)... В целом я бы выбрал форму записи: .layer1 p span{...}. Но только не div.layer1 div - вложенные одноименные элементы-контейнеры имеют свойство плодиться и такая запись зачастую некорректно срабатывает... А вот div .layer1 другое дело...

Да шлепни одним бэкграундом - как сейчас (с уже нарисованными на нём значками соц.сетей). А поверху через абсолютное позиционирование пустые дивы размером со значки - и их сделай ссылками. Нормально, кстати любой GLow ляжет, если грамотно png-24 "сварить"...

<a href="..."><img src="..."></a> - не судьба?

Спс. Я эту тему и имел в виду!