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


#21

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


#22

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


#23

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


#24

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


#25

Да спасибо, вписал ) Но ругается на шрифты в 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;

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


#26

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

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


#27

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


#28

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


#29

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


#30

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


#31

Но все-равно проверка не проходит. Вот весь код:
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;

}


#32

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

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


#33

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


#34

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


#35

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

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


#36

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


#37

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


#38

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


#39

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

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;
}


#40

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