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

H1ghContrast · 21.Январь.2017 22:03:57

Сижу сижу, не могу понять в чём дело. Выручайте

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

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

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

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

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

.about-us h1 {
    float: left;
    font-size: 15pt;
    
}

.about-us p {
    font-size: 12px;
    width: 230px;
    float: left;
    margin-bottom: 10px;
    margin-top: 0px;
    
}

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

.footer {
    background-color: #333;
    color: #fff;
    float: left;    
    width: 100%;
}

MkNIce · 21.Январь.2017 22:36:26

Ну во первых

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

Во вторых

.about-us {
width: 230px;
float: left;
margin-bottom: 20px;
padding-bottom: 20px; - это лишнее убери

}
В третих

.about-us p {
font-size: 12px;
width: 230px;
float: left; - лишнее 
margin-bottom: 10px; - лишнее 
margin-top: 0px; - лишнее

}

Если учтёшь то что я написал, думаю должно всё быть хорошо.

JohnnyJO · 02.Февраль.2017 11:59:56

Для футера используйте font-weight

arver · 03.Февраль.2017 05:03:05

100-900, bold, bolder, lighter, normal ни одно значение не подходит…

JohnnyJO · 03.Февраль.2017 07:01:36

Покажите вкладку “различия”.
У вас лишний паддинг в .about-us.
Ненужные флоты в h1 и р.
В р вообще оставить только фонт-сайз.
В футере не нужно фонт-вейт, мой косяк, извините. Ширину в футуре тоже можно убрать.

Oleg_Kosmachev · 10.Февраль.2017 07:40:14

Вроде бы всё правильно сделал, но блок .mail-menu “прилип к низу” и не идет наверх. Почему?

/* Общие стили для документа и блоков, менять не надо */

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: #ffffff;
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;
}

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

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

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

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

Oleg_Kosmachev · 10.Февраль.2017 07:47:12

вот скрин:

Ineska · 10.Февраль.2017 08:03:10

Блоку “О нас” не задали свойство float.

Oleg_Kosmachev · 10.Февраль.2017 08:10:39

ну блин, точно ))) Весь вечер вчера потерял на поиск ошибки. Спасибо. Наконец-то прошел это задание.

Oksamba · 12.Февраль.2017 18:24:42

Объясните пожалуйста. Почему
.about-us {
width: 230px;
margin-bottom: 20px;
float: left;

задаешь ширину без padding - одна ширина.
задаешь padding, тогда ширина меняется!
как этим пользоваться, если эти величины друг друга меняют?

Ineska · 12.Февраль.2017 18:53:41

Внутренние отступы увеличивают ширину содержимого. Подробнее будет в курсе “Блочная модель документа”.

Lucia · 20.Март.2017 07:04:21

Добрый день!
Подскажите, пожалуйста, как исправить footer?

Dmitrij_Perejro · 20.Март.2017 07:17:39

А объясните мне, нет не просто удалите, а объясните - зачем вы футере дает флоат лефт?

Tala · 20.Март.2017 07:54:38

у вас для .footer прописано width: 90%? как вы их (эти проценты) высчитывали?

Lucia · 20.Март.2017 08:15:54

На глаз подбирала, как и остальные %

Lucia · 20.Март.2017 08:19:13

Потому что без флоата у меня блок оказывался между about-us и main-menu.

Tala · 20.Март.2017 08:19:51

вот глаз вас и подвел. убирайте флоат (флоаты нужны, когда элементы нужно распределить по нескольким колонкам, а футер у нас один и соседей у него нет) и ширину - и будет вам стопроцентное счастье

Tala · 20.Март.2017 08:22:32

покажите весь код

Lucia · 20.Март.2017 08:27:28

Я, вероятно, clear еще не прописала у футера, поэтому уезжало.
В любом случае, надо доучить теорию.
Сейчас все получилось - 100%. Спасибо большое!

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

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

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

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

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

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

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

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

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

Zhardim · 27.Март.2017 13:41:59

Почему-то съезжает футер, хотя clear и float прописаны, а еще ругается на цвет колонок, хотя в “Теории” кроме белого и темно-серого никакой другой не дается. Что с этим делать?
(скрины и код прикрепил)

/* Общие стили для документа и блоков, менять не надо */

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: #333;
    border: 2px solid #cccccc;
    color: #fff;
}

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

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

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

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

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

.about-us h1 {
    
}

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

.main-menu {
    width: 110px;
    background-color: #fff;
    float: right;
    
}

.footer {
    clear: both;
}