Успешность 100%, но тем не менее, может ли кто-нибудь указать на “идеологические” ошибки в коде? CSS код сопровождается моими комментариями в некоторых местах, которые мне не понятны. Буду рад получить на них ваши комментарии. Спасибо.
Давайте будем разбираться.
border-top: 1px solid #34495e; /* Пришлось задать границу, чтобы использовать margin-top в .header, оптимально? */
В целом оптимально, но из-за рамки вам пришлось уменьшить отступ сверху на 1px. Было бы лучше в данном случае воспользоваться другим методом, когда вы заменяете margin-top у дочернего элемента на padding-top у родителя.
margin-left: auto; /* Оптимальное место для марджинов? */
margin-right: auto; /*В родительском .menu корректно не работало */
Auto на своем месте. В родительском не работает, потому что там не прописана ширина. А если ширина не прописана, то блок по умолчанию тянется на всю ширину своего родителя (в данном случае body). А это значит, что для автоматического отступа места уже нет.
margin-left: 50px; /* Почему не работает auto? */
Причина та же - не прописана ширина блока, относительно которой будут рассчитаны автоматические отступы.
/margin-bottom: 10px; Пришлось перенести в .promo1/2 т.к при отступе вылезает белый фон, а должен тёмный. Почему?/
Высота блока .promo-container определяется высотой содержимого ( то есть высотой вложенных .promo1 и ,promo2. Чтобы продолжить фон нужно было написать padding-bottom. Также вы можете написать padding-bottom для .header_container.
.main_container {
/* Никакие марджины не работают! Я в замешетельстве т.к. контейнер аналог .header_container, где все работает. Я даже добавил родителя .main_main_container в котором не нуждался, чтобы ситуация была аналогична. Гррр… */
}
И не сработают, потому что в html название класса у элемента другое:
<div class="main_contaiter clearfix">
.footer_container {
margin-top: 10px; /* В тему? */
Вполне в тему. Но мне, например, ближе подход, когда отступы расставляются сверху вниз. То есть, у меня это был бы margin-bottom у main_container.
Не используйте фиксированные высоты для сеточных блоков. Лучше замените на min-height.
Чтобы не писать много раз автоматические отступы, создайте отдельное правило для центровщика.
Пример кода можете посмотреть по ссылке.
1 лайк