Помогите увидеть ошибки [27/32]

http://www.cssdesk.com/qTXfS

Успешность 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 лайк