Взломанный котопрофайл (последние две фотографии)

Курсы §16. Наследование и каскадирование
1

Привет всем! Подскажите в чем проблема? Посмотрел, аналогичные темы, но так и не смог понять в чем проблема?

Безымянный.png1250×423 56.7 KB

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

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

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

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

.profile .info .fact {
padding: 10px;
background: white;
}

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

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

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

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

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

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

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

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

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

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

.profile .startle {
background: #e74c3c;
}

2

А почему misHka? По-моему, там написано #miska (от слова “миска”, над которой сидит кот, а не “медведь”)…

2 лайка
3

Джизас, и правда. Исправил и всё нормально получилось на 100%. Видимо, под вечер поплавило) Благодарю!

4

Утро вечера мудреннее:wink: - известно исстари:slight_smile:

5

застрял на кошках. Дальше двигаться не получится.

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

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

.profile {
padding: 5px 10px !important;
}

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

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

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

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

.profile .fact {
padding: 10px;
background: white !important;
}

.profile .fact:nth-child(odd) {
background: #ecf0f1 !important;
}

.fact::after img {
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 .albums {
margin-top: 5px;
}

.albums img, #miska  {
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;
6

cats.png603×818 96.2 KB

7

Это правило должно стилизовать все картинки.

1 лайк
8

так у меня есть такое правило в CSS коде. Но что-то оно не дает эффекта, к моему сожалению.

9

Вам указали, на что обратить внимание! Поработайте с этим правилом. И вообще, пересмотрите сначала все Ваши добавки: в коде слишком много лишнего, что вообще никак не отражается на результате (либо усугубляет имеющуюся ситуацию):slight_smile:

10

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

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

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

.profile {
    padding: 5px 10px !important;
}

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

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

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

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

.profile .fact {
    padding: 10px;
    background: white !important;
}

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

.fact::after img {
    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 .albums {
    margin-top: 5px;
}

.albums img, #miska  {
    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;
}
11

Ваш селектор выбирает только одну картинку, а должен все.

12

вот же ж блин, как всё просто!! Уффф… наконец-то доделал. А то уж думал забросить это занятие и перейти на другие уроки.

13

Алиллуя :pray:

complete.png598×816 97.3 KB

14

Йееееесс! :grinning: