Знакомство с CSS / Испытание: макет-прототип [15/15]

В этом правиле прописаны общие стили для блоков. Обратите внимание, какой фоновый цвет. Зачем вы ниже переопределяете на белый?
Футер не съезжает у вас, он просто недоехал) Отступ между верхним блоком и футером нужен побольше.

С цветом разобрался, спасибо, но с футером не получается, на margin-top не реагирует никак

внесите изменения сюда:

Отступ между двумя элементами - это отступ сверху для одного или отступ снизу для другого, помните об этом.

Да спасибо, вписал ) Но ругается на шрифты в about-us, хотя при наложении никаких сдвигов нет

.about-us {
width: 230px;
margin-bottom: 20px;
color: #333;
float: left;
font-size: 10px;
}

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

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

Все, разобрался, проблема была в цвете, всем спасибо

Прошу вас, помогите!!

Контактный телефон вообще ни на что не реагирует, код на него вроде написан правильно,а он ни в какую

на все, что у вас прописано в коде (в той его части, что видна на скрине), номер телефона среагировал.
что именно вам не нравится?

Это только один из скринов, он не реагирует на высоту, не размещается по центру. Чего таить, даже подставляла чужие коды (у людей все впорядке), и ничегошеньки не менялось

покажите код, где он [quote=“KateByr, post:28, topic:5199, full:true”]
не реагирует на высоту, не размещается по центру.
[/quote]

Попробовала padding-top и вроде опустился😂

Но все-равно проверка не проходит. Вот весь код:
body {
width: 450px;
margin: 0;
padding: 10px;
font-family: Arial, sans-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: white;
font-weight: bold;
}
.contacts{
float: right;
width: 153px;
height:28px;
text-align: center;
background-color: #333333;
color: white;
font-style: italic;
outline:2px solid lightgray;
padding-top:10px;
}

.about-us {
width: 252px;
height:168px;
float: left;
margin-bottom: 20px;
outline:2px solid lightgray;
padding-left:20px;
text-align:left;
}

.about-us h1 {
font-size: 15pt;
font-weight:600;
padding-top:10px;
}

.about-us p {
font-size: 11px;
float: left;
padding-right:20px
}

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

.footer {
clear: both;
margin-bottom: 10px;
background-color: #333333;
color: white;

}

откуда - и зачем - взялся аутлайн?

и почему цвет фона именно #333333?

Потому что если его не будет, то и не будет серых рамок. А цвет же в условии сказан такой…или нет?

В правиле отсутствует запятая после .contacts.

1 лайк

у вас есть изначально вот такой кусок кода:.logo, .contacts .about-us, .main-menu, .footer { padding: 10px 20px 10px 20px; background-color: #f5f5f5; border: 2px solid #cccccc; }

в котором уже прописаны и рамки, и отступы, и правильный цвет фона. зачем вы потом все эти пораметры переопределяете?

Вот эти параметры я не трогала, но без аутфита их все равно не было. Рамок не будет у телефона и у нашей компании

если запятая после .contacts пропала - значит, трогали

СПАСИБО! Из-за одной запятой теперь все ровно

Здравствуйте. Помогите разобраться

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

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

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

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

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

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

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

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

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

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

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

Проверяйте фоновый цвет у блоков.