Испытание: взломанный котопрофайл [18/18]

Terrible · 29.Ноябрь.2016 22:38:08

Подскажите пожалуйста. Если можно, просто подсказать в каком направлении копать. А то битый час пытаюсь комбинировать и как-то не получается(
Гори в АДу Феликс!

Проблема с его фотками(Феликса) ну и собственно с заголовком. Фотки вот у меня почему-то не стот ровно. Вижу у h2 style и понимаю, что надо использовать !important;, но никак не могу его применить правильно. Вот код:
html,
body {
margin: 0;
padding: 0;
}

body {
width: 550px;
height: 300px;
font-size: 12px;
font-family: Tahoma, Arial, sans-serif;
}

.profile {
padding: 5px 10px;
}

img {
display: block;
padding: 10px;
border: 2px solid #34495e;
border-radius: 8px;
}

.profile .photo {
float: left;
width: 152px;
}

.info{
float: left;
width: 368px;
margin-left: 10px;
}
#info-title,
h2{
margin: 0;
padding: 10px;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e;
border-radius: 4px;
}

.fact div{
padding: 10px;
background: white;
}

.fact:nth-child(odd) div{
background: #ecf0f1;
}

.albums div {
content: “”;
display: table;
clear: both;
}

.info .fact .title{
float: left;
width: 120px;
text-align: right;
color: #7f8c8d;
}

.info .fact .value{
margin-left: 140px;
color: #34495e;
}

.albums img {
margin-top: 5px;
}

.albums img {
float: left;
margin-right: 5px;
}

.albums img:last-child {
margin-right: 0;
}

.photo .button {
display: block;
height: 30px;
margin: 5px 0;
line-height: 30px;
text-align: center;
color: #ffffff;
border-radius: 4px;
}

.photo .stroke {
background: #3498db;
}

.photo .feed {
background: #2ecc71;
}

.photo .startle {
background: #e74c3c;
}

Мне так кажется что вот два основных блока, с которыми надо сейчас работать:
.info{
float: left;
width: 368px;
margin-left: 10px;

и вот этот,
#info-title,
h2{
margin: 0;
padding: 10px;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e;
border-radius: 4px;
}

Сил уже нет, помогайте, точнее намекайте)

Ineska · 30.Ноябрь.2016 05:00:59

Подскажите 18/18 §16. Наследование и каскадирование

Не могу понять зачем нужны стили внутри html ...? смог сделать только кнопки: покормить, погладить, напугать, не совсем понимаю как делать задание можете сделать один элемент и подробно рассказать что произошло, что позволило сделать работу более ближе к Образцу? Не понимаю может я настолько туп, но я выполнил все задания в этой главе, а в испытании вообще не понимаю. https://htmlacademy.ru/courses/66/run/18 Вот что удалось сделать .photo .stroke { background: #3498db; } .photo .feed { ba…

Terrible · 30.Ноябрь.2016 08:22:50

Если не сложно, объясните, пожалуйста, почему так получилось, что картинки не все выравнены по bottomу, а “Альбомы” куда-то уехало?

Хочу понять просто причину, а то на рандом подбирать смысла особого нет.

Tala · 30.Ноябрь.2016 09:14:51

А картинки не выровнены, потому что они по ширине в одну строку не влазят (ведь ширина будет складывается из ширины картинки и отступа между картинками) Поэтому, надо проверять, какие правила сейчас описывают отступы - может у какой-то картинки отступ надо будет и обнулить

Terrible · 30.Ноябрь.2016 11:49:54

Видимо надо повысить приоритет вот этого правила
.albums img:last-child {
margin-right: 0;
}
Но никак не получается, повышал как мог, не видит он этого правила. Дошло до такого вот дерева.
.profile .info .albums img:last-child {
margin-right: 0;
}

Tala · 30.Ноябрь.2016 12:15:58

все верно, но есть способ ещё усилить селектор - см. Наследование и каскадирование / Битва за курочку. Запрещённый приём [13/18]

Terrible · 30.Ноябрь.2016 12:48:30

Я и этот способ пробовал, но безуспешно(

.profile .info .albums img:last-child {
margin-right: 0 !important;
}

Так же ничего не изменилось. Ранее нигде больше не использовал этот прием. Что-то я совсем запутался.

Terrible · 30.Ноябрь.2016 12:49:42

html,
body {
margin: 0;
padding: 0;
}

body {
width: 550px;
height: 300px;
font-size: 12px;
font-family: Tahoma, Arial, sans-serif;
}

.profile {
padding: 5px 10px;
}

img {
display: block;
padding: 10px;
border: 2px solid #34495e;
border-radius: 8px;
}

.profile .photo {
float: left;
width: 152px;
}

.info{
float: left;
width: 368px;
margin-left: 10px;
}
#info-title, h2{
margin: 0;
padding: 10px;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e;
border-radius: 4px;
}

.fact div{
padding: 10px;
background: white;
}

.fact:nth-child(odd) div{
background: #ecf0f1;
}

{
content: “”;
display: table;
clear: both;
}

.info .fact .title{
float: left;
width: 120px;
text-align: right;
color: #7f8c8d;
}

.info .fact .value{
margin-left: 140px;
color: #34495e;
}

.profile .info .albums img {
margin-top: 5px;
}

.albums img{
float: left;
margin-right: 5px;
}

.profile .info .albums img:last-child {
margin-right: 0 !important;
}

.photo .button {
display: block;
height: 30px;
margin: 5px 0;
line-height: 30px;
text-align: center;
color: #ffffff;
border-radius: 4px;
}

.photo .stroke {
background: #3498db;
}

.photo .feed {
background: #2ecc71;
}

.photo .startle {
background: #e74c3c;
}

Ineska · 30.Ноябрь.2016 12:53:43

Почитайте тему по ссылке выше, по крайней мере заголовок “Альбомы” на место поставите, а может предложенное объяснение натолкнёт на мысль по поводу уехавшей картинки.

Terrible · 30.Ноябрь.2016 14:22:22

Скоро крыша поедет, полдня уже с котейками вожусь. Получилось у меня сдвинуть Альбомы и поставить как надо.

Я там добавил одно правило, иначе я не знаю как можно тут решить задачу и теперь никак не могу поставить котанов всех на места свои, точнее они стоят в правильном порядке, но ориентация не та, по вертикале.
Что-то мне подсказывает, что надо тут задавать правило
.fact::after {
content: “”;
display: table;
clear: both;
но я как только не извращался, он не реагирует вообще(

html,
body {
margin: 0;
padding: 0;
}

body {
width: 550px;
height: 300px;
font-size: 12px;
font-family: Tahoma, Arial, sans-serif;
}

.profile {
padding: 5px 10px;
}

.profile img {
display: block;
padding: 10px;
border: 2px solid #34495e;
border-radius: 8px;
}

.photo {
float: left;
width: 152px;
}

.info {
float: left;
width: 368px;
margin-left: 10px;
}

h2,
#info-title {
margin: 0 !important;
padding: 10px !important;
font-weight: normal;
font-size: 12px;
color: #ffffff !important;
background: #34495e;
border-radius: 4px;
}

.fact div{
padding: 10px;
background: white;
}

.fact:nth-child(odd) div{
background: #ecf0f1;
}

.fact::after {
content: “”;
display: table;
clear: both;
}

.info .fact .title {
float: left;
width: 120px;
text-align: right;
color: #7f8c8d;
}

div.fact .value {
margin-left: 140px;
color: #34495e;
}

.albums img {
margin-top: 5px;
}

}
.profile .info .albums img {
float: left;
margin-right: 5px;
}

.albums img:last-child {
margin-right: 0;
}

.photo .button {
display: block;
height: 30px;
margin: 5px 0;
line-height: 30px;
text-align: center;
color: #ffffff;
border-radius: 4px;
}

.photo .stroke {
background: #3498db;
}

.photo .feed {
background: #2ecc71;
}

.photo .startle{
background: #e74c3c;
}
#miska {
margin-right: 5px ;
}

Ineska · 30.Ноябрь.2016 18:08:51

#miska надо добавить в это правило, через запятую.

Terrible · 30.Ноябрь.2016 18:40:45

Увы и ах, не работает(
Видимо не хватает приоритетности или я что-то там вообще намудрил с кодом.

Tala · 30.Ноябрь.2016 18:46:49

добавьте в это правило !important чтобы повысить приоритетность.
а затем !important в следующее, чтобы сохранить нулевой маргин справа у последней картинки.

Terrible · 30.Ноябрь.2016 19:20:57

Ineska · 01.Декабрь.2016 06:21:10

Последний вариант кода текстом, пожалуйста.

Terrible · 01.Декабрь.2016 07:07:25

html,
body {
margin: 0;
padding: 0;
}

body {
width: 550px;
height: 300px;
font-size: 12px;
font-family: Tahoma, Arial, sans-serif;
}

.profile {
padding: 5px 10px;
}

.profile img {
display: block;
padding: 10px;
border: 2px solid #34495e;
border-radius: 8px;
}

.photo {
float: left;
width: 152px;
}

.info {
float: left;
width: 368px;
margin-left: 10px;
}

h2,
#info-title {
margin: 0 !important;
padding: 10px !important;
font-weight: normal;
font-size: 12px;
color: #ffffff !important;
background: #34495e;
border-radius: 4px;
}

.fact div{
padding: 10px;
background: white;
}

.fact:nth-child(odd) div{
background: #ecf0f1;
}

.fact::after {
content: “”;
display: table;
clear: both;
}

.info .fact .title {
float: left;
width: 120px;
text-align: right;
color: #7f8c8d;
}

div.fact .value {
margin-left: 140px;
color: #34495e;
}

.albums img {
margin-top: 5px;
}

}
.profile .info .albums img {
float: left;
margin-right: 5px;
}

.albums img:last-child {
margin-right: 0;
}

.photo .button {
display: block;
height: 30px;
margin: 5px 0;
line-height: 30px;
text-align: center;
color: #ffffff;
border-radius: 4px;
}

.photo .stroke {
background: #3498db;
}

.photo .feed {
background: #2ecc71;
}

.photo .startle{
background: #e74c3c;
}
#miska {
margin-right: 5px ;
}html,
body {
margin: 0;
padding: 0;
}

body {
width: 550px;
height: 300px;
font-size: 12px;
font-family: Tahoma, Arial, sans-serif;
}

.profile {
padding: 5px 10px;
}

.profile img {
display: block;
padding: 10px;
border: 2px solid #34495e;
border-radius: 8px;
}

.photo {
float: left;
width: 152px;
}

.info {
float: left;
width: 368px;
margin-left: 10px;
}

h2,
#info-title {
margin: 0 !important;
padding: 10px !important;
font-weight: normal;
font-size: 12px;
color: #ffffff !important;
background: #34495e;
border-radius: 4px;
}

.fact div{
padding: 10px;
background: white;
}

.fact:nth-child(odd) div{
background: #ecf0f1;
}

.fact::after {
content: “”;
display: table;
clear: both;
}

.info .fact .title {
float: left;
width: 120px;
text-align: right;
color: #7f8c8d;
}

div.fact .value {
margin-left: 140px;
color: #34495e;
}

.albums img {
margin-top: 5px;
}

}
#miska,
.profile .info .albums img {
float: left #miska;
margin-right: 5px #miska;
}

.albums img:last-child {
margin-right: 0 #miska;
}

.photo .button {
display: block;
height: 30px;
margin: 5px 0;
line-height: 30px;
text-align: center;
color: #ffffff;
border-radius: 4px;
}

.photo .stroke {
background: #3498db;
}

.photo .feed {
background: #2ecc71;
}

.photo .startle{
background: #e74c3c;
}
#miska {
margin-right: 5px ;
}

Ineska · 01.Декабрь.2016 08:16:33

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

Terrible · 01.Декабрь.2016 08:39:09

Видимо да, стоит отдохнуть. Просто когда хотел сделать скрин, код уже был сброшен и пришлось оперативно вставлять, ошибся, но до этого вставлял правильно и не получалось. Вот…

Там только добавилась ошибка с заголовком

Ineska · 01.Декабрь.2016 08:42:16

Скобка лишняя закрывающая, выше той области, что выделили.

Terrible · 01.Декабрь.2016 08:52:56

Убрал скобку, все встало на свои места, но цвет шапки все равно был кислотный, пришлось читерить и btckground-color ее тоже через !important задавать.

Спасибо большое за помощь, можно закрывать тему!