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


#1

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

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

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

#2

Ну во первых

.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; - лишнее 

}

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


#3

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


#4

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


#5

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


#6

Вроде бы всё правильно сделал, но блок .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;
}


#7

вот скрин:


#8

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


#9

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


#10

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

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


#11

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


#12

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


#13

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


#14

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


#15

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


#16

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


#17

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


#18

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


#19

Я, вероятно, 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;
}


#20

Почему-то съезжает футер, хотя 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;
}