Работа над интенсивом идёт полным ходом. Мы нашли крутых людей в команду и решили еще кучу задач. Но сегодня я подробнее расскажу о работе над программой интенсива.
Много замечаний по вашему коду.
Во-первых, отрицательные отступы. Это плохой прием.
Во-вторых, если вы задаете элементу абсолютное позиционирование, то целесообразнее использовать координаты top, left, чем внешние отступы.
Также обратите внимание, что если у элемента задано абсолютное позиционирование, то он ведет себя как блок, даже если задано другое (инлайн-блок, например).
Это правило здесь лишнее:
.post .end {
display: inline-block;
position: absolute;
margin-left: 247px;
}
Еще будет неплохо, если вы замените много раз повторяющуюся запись margin-left: 75px; на внутренний отступ такой же величины, заданный родителю .post.
Исправленный вариант кода хотелось бы увидеть в этой же теме.
значит, допускаете ещё какие-то ошибки - всегда есть оптимальное решение и именно с такими, кратными 5, отступами
возьмите за правило, что если в задании указана кратность размеров, то нужно добиваться 100% результата с соблюдением этого условия
Вот итог. Вышло 93% без использования отрицательных отступов, с соблюдением кратности. Что не получилось:
Дата не выравнивается без использования другой кратности
ссылки “интенсив,программа” не получается двигать отдельно от иконки. Они получаются на разных уровнях, с “5” и комментами такая же ситуация. Разжуйте, пожалуйста, что я делаю не так.
html,
body {
margin: 0;
padding: 0;
}
У вас блок .post-title - единственный, где не использовано абсолютное позиционирование. Все остальные блоки вырваны из потока. Вчера не обратила внимания на этот факт. Абсолютное позиционирование в этом задании должно быть только для .post-date, .post-type и .icon.
Для выравнивания даты используйте line-height в пикселях.
Не хочу никуда подглядывать к другим, но и голову походу сломаю.
Если убираю абсолютное позиционирование у всего, что вы сказали, то сталкиваюсь с проблемой класса .post-stats
Если делаю ему блок или инлайн блок - то “5” оказывается строкой ниже, чем “интенсив, программа”, если задаю строчный тип, то они выстраиваются в одну строку, но паддинг и маргин влияют и на 1 блок и на 2ой, т.е. “5” постоянно удаляется.
Какую специфичность надо использовать, чтоб победить эту надпись? Они ведь одного класса.
Да. Оно сместится. Но! Ведь и в задании текст смещён по отношению к левой границе контейнера .post! Я, когда сложно совсем, добавляю (временно, само собой) рамки контейнерам, чтобы понимать, что и как соотносится ). Вы делаете padding-left контейнеру .post. В результате всё, что Вы видите изначально в задании, сместится вправо, а слева у Вас освободится поле. Не забудьте задать также .post position: relative; А далее контейнеру кавычек и дате Вы зададите position: absolute; Ведь абсолютно спозиционированные элементы относятся к БЛИЖАЙШЕМУ родителю с relative, коим в данном случае и будет .post. А далее, сделав, чтобы проявились кавычки и дата, зададите им left: 0;! В результате дата и кавычки не будут иметь НИКАКИХ отрицательных отступов, ведь системой отсчёта для них станет верхний левый угол .post!
У меня дата и кавычки и так без отрицательных. Отрицательные придется задать иконкам и .post-stats. В моем случае, предложенное вами дает лишь перемену мест слагаемых.
Я же говорю, если что-то стопорится, добавьте блокам border, чтобы Вы чётко увидели их границы, что как расположено друг относительно друга!! Вы же всегда можете их убрать!! Зато Вы увидите, как они взаимодействуют и придумаете, как их растолкать!! А код - он не прилизанный, жаль, что, когда я сделал его в прошлый раз, он не сохранился при повторном запуске задания (( Поэтому делал прямо сейчас, как только прочитал Ваш вопрос. Можно было бы кое-что сгруппировать, но главную свою задачу он выполнил - Вы поняли, где проблема. Поэтому и я говорил, что нужно задать relative post-stats - ведь это тот контейнер, который содержит и текст, и иконки. Точнее, этих контейнеров 2. А иконкам зададите absolute. В итоге текст Вы сместите padding-left, а в самом начале контейнера, задав иконкам absolute, Вы сможете двигать их отдельно от текста (и они привяжутся именно к post-stats, как ближайшему родителю с relative. У меня, кстати, долго был тот же вопрос, как двигать отдельно иконки и текст. А ещё совет: утро вечера мудреннее. Все мои трудности легче решались утром. )