Знакомство с CSS / Испытание: макет-прототип, блок “main-menu”

Курсы §7. [Архив] Знакомство с CSS
1


Добрый день. Никак не могу поставить блок “main-menu” туда, куда нужно. Выше футера не поднимается. Подскажите, в чем причина?
%D1%81%D0%BA%D1%80%D0%B8%D0%BD3
скрин3.jpg1367×784 157 KB 

/* Общие стили для документа и блоков, менять не надо */
body {
  width: 450px;
  margin: 0;
  padding: 10px;
  font-size: 14px;
  font-family: "Arial", sans-serif;
}

.logo,
.contacts,
.about-us,
.main-menu,
.footer {
  padding: 10px 20px 10px 20px;
  border: 2px solid #cccccc;
}

/* Собственные стили блоков */
.header {
  min-height: 40px;
  margin-bottom: 20px;
 }

.logo {
  float: left;
  background-color: #333333;
  text-align: center;
  color: #ffffff;
  font-weight: bold;
  width: 230px;
}

.contacts {
  font-style: italic;
  float: right;
  width: 110px;
  background-color: #333333;
  color: #ffffff;
  text-align: center;
}

.about-us {
  background-color: #f5f5f5;
  margin-bottom: 20px;
  width: 230px;
}

.about-us h1 {
  font-size: 20px;
}

.about-us p {
  font-size: 12px;
}

.main-menu {
  float: right;
  width: 110px;
  }

.footer {
  background-color: #333333;
  text-align: left;
  color: #ffffff;
  height: 16px;
  width: 406px;
  margin-top: 11px;
  
}
2

О, уже почти все получилось! Но все же непонятно, почему 99%? Визуально не отличается.
Если кому-то интересно, пришлось добавить в блок .about-us свойство float: left; , а в .footer - clear: both; , который, кстати, в курсе до этого нигде не упоминался.

%D1%81%D0%BA%D1%80%D0%B8%D0%BD%204
скрин 4.jpg1372×789 156 KB 

/* Общие стили для документа и блоков, менять не надо */
body {
  width: 450px;
  margin: 0;
  padding: 10px;
  font-size: 14px;
  font-family: "Arial", sans-serif;
}

.logo,
.contacts,
.about-us,
.main-menu,
.footer
{
  padding: 10px 20px 10px 20px;
  border: 2px solid #cccccc;
}

/* Собственные стили блоков */
.header {
  min-height: 40px;
  margin-bottom: 20px;
 }

.logo {
  float: left;
  background-color: #333333;
  text-align: center;
  color: #ffffff;
  font-weight: bold;
  width: 230px;
}

.contacts {
  font-style: italic;
  float: right;
  width: 110px;
  background-color: #333333;
  color: #ffffff;
  text-align: center;
}

.about-us {
  background-color: #f5f5f5;
  margin-bottom: 20px;
  width: 230px;
  float: left;
}

.about-us h1 {
  font-size: 20px;
}

.about-us p {
  font-size: 12px;
}

.main-menu {
  float: right;
  width: 110px;
  }

.footer {
  background-color: #333333;
  text-align: left;
  color: #ffffff;
  height: 16px;
  width: 406px;
  margin-top: 11px;
  clear: both;
  }
3

Все, разобралась, ура! 100%! background-color: #f5f5f5; в .main-menu надо.

%D1%81%D0%BA%D1%80%D0%B8%D0%BD%205
скрин 5.jpg1375×720 135 KB

1 лайк
4

background-color: #f5f5f5; можно перенести из .about-us и .main-menu в:

.logo,
.contacts,
.about-us,
.main-menu,
.footer
{
  padding: 10px 20px 10px 20px;
  border: 2px solid #cccccc;
}
5

А зачем? Такой background применяется только к .about-us и .main-menu. Зачем его применять к остальным классам?

6

Остальные селекторы перезаписывают цвет.

Можно было поступить иначе – для всех блоков определить background-color: #333;,
а перекрасить в #f5f5f5; .about-us и .main-menu.

Чем меньше повторяющихся свойств – тем лучше.

7

Не проще ли определить background-color: #333; для трех блоков, а background-color: #f5f5f5; для двух, предварительно сгруппировав их? Чтобы не пришлось перекрашивать и не запутаться, какой бэкграунд в итоге “играет”.

8

Когда кода мало, как здесь – конечно же проще.
Но, в реальных проектах может быть иначе.