15/15

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

Заинтересовал вот такой момент. Решил переспросить, может я что-то не так понял.
Перед началом, в подсказке испытания “Испытание: макет-прототип 15/15” курса “Знакомство с CSS” указано: “Значения отступов, ширины блоков, а также неизвестных размеров шрифта кратны 10,”, но что-бы завершить испытание на 100% нужно для свойства width в селекторе footer указать значение 406px. Почему так?

2

Видела я ваш вопрос. Не отвечала, потому что не знаю. Тоже использовала значение в 406px.
Возможно, результата можно добиться, задавая ширину блоков в относительных единицах измерения (в процентах), но я не пробовала.
Еще можно почитать на форуме старые сообщения по этой теме. Может кто-то уже задавал подобный вопрос раньше.

3

.footer {
padding: 10px 20px 10px 20px;
border: 2px solid #cccccc;
background-color: #333333;
color: #ffffff;
clear: both;
}
Значения кратны 10

1 лайк
4

Действительно) Как я не подумала… Внутренние отступы ведь увеличивают размер блока.

6

Подскажите пожалуйста, вроде по результату при наложении схожи, а пройти задание не могу…
` /* Общие стили для документа и блоков, менять не надо */

body {
width: 450px;
margin: 0;
padding: 10px;
font-family: Arial, sens-serif;
font-size: 14px;
}

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

/* Собственные стили блоков */

.header {
min-height: 40px;
margin-bottom: 20px;
}

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

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

.about-us {
width: 230px;
margin-bottom: 10px;
float: left;
height: 150px;
}

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

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

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

.footer {
clear: both;
background-color: #333333;
color: #ffffff;
margin-top: 215px;
}`

7

Высота блока “О нас” - 145px, отступ между футером и блоком лучше задать как отступ снизу для блока, размером 20px.
Обращайте внимание на вкладку “Различия”, там всегда видно, что и где не так.

1 лайк
8

Спасибо большое…:slight_smile:

1 лайк
9

вот так вот получилось 100%
body {
width: 450px;
margin: 0;
padding: 10px;
font-family: Arial, sens-serif;
font-size: 14px;
}

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

/* Собственные стили блоков */

.header {
min-height: 40px;
margin-bottom: 20px;
}

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

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

.about-us {
width: 230px;
margin-bottom:20px;
float: left;

}

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

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

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

.footer {
clear: both;
background-color: #333333;
color: #ffffff;
margin-top: 205px;
}

10

Зачем так много?

11

не понял? а сколько должно быть? вроде курс закончено на 100%

12

Вы логически рассудите, где между блоками там расстояние в 205px?

13

.logo { font-size: 14px;} / * в body уже определён */

.about-us h1 {font-weight: bold} /* по умолчанию жирный*/

.footer {margin-top: 205px;} /* вообще не нужен, потому, что в .about-us { margin-bottom:20px;} */

14

Не могу понять, что нужно исправить.:thinking: Подскажите, пожалуйста.

/* Общие стили для документа и блоков, менять не надо */
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;
  
  background-color: #f5f5f5;
  border: 2px solid #cccccc;
}

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

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

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

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

.about-us p {
  font-size: 12px;
  /*font-weight: bold;*/
}
.about-us {
  float: left;
  margin-right: none;
  width: 230px;
  height: 140px;
  margin-bottom: 20px;  
}
.main-menu {
  float: right;
  width: 110px;
  margin-right: none;
}

.footer {
  background-color: #333333;
  color: #ffffff;
  clear: both;
}

%D0%91%D0%B5%D0%B7%20%D0%BD%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F
Без названия.png1382×973 70 KB

15

Уберите высоту у блока .about-us.

1 лайк
16

Благодарю, за оперативный ответ! Всё получилось.