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

Arseny_Boldurev · 13.Май.2017 16:07:12

Долго не мог понять что надо применять margin-top, спасибо.

Teroffski · 17.Май.2017 12:08:20

друзья, я не понимаю. знаю, что было, но вот вам ещё раз по футеру:

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

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;
float: left
}

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

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

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

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

почему холодно, и что вообще пошло не так?(

Ineska · 17.Май.2017 12:30:23

Отступ маловат, потому и “холодно”.

VcPo · 12.Сентябрь.2017 08:56:22

Подскажите, как main-menu передвинуть? Свойства для позиционирования не использовались, а без них main-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;
color: #ffffff;
background-color: #333333
}

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

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

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

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

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

.footer {
width: 410px;
color: #ffffff;
background-color: #333333
}

Ineska · 12.Сентябрь.2017 12:20:43

Здесь не хватает свойства float.

PoSeIdOn · 27.Декабрь.2017 09:25:14

а что мне делать?

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;
float: left;
}

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

Ineska · 27.Декабрь.2017 13:27:27

А что в различиях?

Muhammad · 28.Декабрь.2017 11:50:48

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

}

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

}

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

}

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

}

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

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

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

}

.footer {
clear: both;
background-color: #333;
color: #fff;
margin-top:208px;
margin-bottom:6px;

}

Stepoull · 20.Январь.2018 00:05:32

коди

В условии написано, что неизвестные величины и размеры шрифтов (в том числе) должны быть кратны 10…
я больше двух часов не могла понять почему не совпадает блок About us…откуда там взялся фонтсайз 12рх для эбаут ас ??? Все материалы тут перекопала)) БУДЬТЕ ВНИМАТЕЛЬНЕЕ! =)

Oleg_Shyn · 24.Январь.2018 13:55:38

Добрый день. При использовании свойств, указанных ниже результат 100%

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

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

У меня возник вопрос, если я убираю нижний марджин у .about-us и добавляю верхний марджин у футера, то последний не отодвигается вниз, почему так происходит (ведь он же должен отталкиваться от верхнего блока)?

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

.footer {
clear: both;
color: #ffffff;
background-color: #333333;
margin-top: 20px;
}

AlexSPb · 10.Март.2018 20:22:04

я по точкам его подобрал
.footer {
background-color:#333333;
color: #ffffff;
float: left;
clear: both;
width: 406px;
margin-top: 10px;

Pikser · 13.Март.2018 16:36:51

У меня странний футер
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;
}

.logo,
.contacts,
.footer {
color: #ffffff;
background-color: #333333
}

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

}

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

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

}

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

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

}

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

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

.footer {
clear: both;
margin-top: 208px;
}

neopEnot · 29.Март.2018 12:05:54

объясните, пожалуйста, кто-нибудь!!!
ПОЧЕМУ чтобы отодвинуть футер вниз от левого блока я должен писать маргин-боттом в левом блоке, а не маргин-топ в футере?!?!?!?
где здесь логика?!?!?!

Ineska · 29.Март.2018 12:36:58

Логика в механизме действия свойства float. Подробнее в курсе “Сетки”.

Canavar · 31.Март.2018 13:30:20

Ребят подскажите что не так?

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

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

.logo {
float: left;
width: 230px;
text-align: center;
background-color: #333333;
color: #ffffff;
font-size: 14px;
margin-bottom: 20px;
}

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

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

.about-us h1 {
font-size: 20px;
float: left;
margin-bottom: 5px;
}

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

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

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

}

NiadaSalu · 31.Март.2018 13:50:59

С виду совсем немного поправить надо =)

.logo {
Добавить
font-weight: bold;

.about-us p
Не нужно
float: left;
width: 230px;
margin-bottom: 10px;

.about-us h1
Не нужно
float: left;
margin-bottom: 5px;

.about-us {
Испправить
margin-bottom: 20px;

Canavar · 31.Март.2018 18:05:17

Большое спасибо…это я уже под конец от отчаяния все подряд понаписал