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

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

123.jpg1280×1024 230 KB

CSS:
Не пойму что не так , уже 2ой день убиваюсь

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

.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: 10px;
background :#ffffff ;
color : #333333 ;

}

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

.contacts {
float: right;
width: 110px;
text-align: left ;
background : #333333 ;
color : #ffffff ;
font-style : italic ;
text-align : left ;
padding-right : 30px ;
margin-bottom : 10px ;
height: 20px;

}

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

}

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

}

.about-us p {
font-size: 12px;
}
.main-menu {
width: 50px;
float: right ;
padding-right : 90px ;
margin-bottom : 10px ;
}

.footer {
background : #333333 ;
color : #ffffff ;
padding-right : 40px ;
clear: both;

}

2

Вкладка “Различия” есть. Посмотрите, что не нравится системе.

3

Так вот именно ей не нравится рамка “контактов” , то что цифра 55 перенеслась на 2ую строку в вкладке “результат” , я ее уже и так и сяк крутил , все равно “55” переносится на 2ую строку.

4

Возможно из-за отступа справа 30px, попробуйте убрать.

5

не помогло. везде какое-то смещение идет :frowning:
Боже нашел в чем ошибка была. но все равно выполнено на 95%.
в общем нужно было удалить строку “margin-bottom” :smiley: я как всегда.

6

Скажите пожалуйста, в чем разница между margin-bottom в .about-us и margin-top в .footer? Когда менял margin в .footer изменений не происходило и код не принимался, пока не изменил margin в .about-us.

7

Обычно разницы нет. Но в случае с флоатами есть разница. Для футера свойство float не задано, поэтому его поведение в потоке документа отличается. Футер “не видит” плавающего блока сверху, и margin не работает.
Подробнее об этом будет в курсе “Сетки”.