18/18

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

Затупил на последнем задании. не могу понять, как решить проблему с фотографиями и вернуть цвет в строчках “имя” и “вероисповедание”

html, body{
    margin:0;
    padding:0;
}
body{
    font-family:Tahoma, Arial, sans-serif ;
    font-size:12px;
    width:550px;
    height:300px;
}
.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 {
    margin:0 !important;
    padding:10px !important;
    font-size:12px;
    font-weight:normal;
    background:#34495e;
    color:#fff ;
    border-radius:4px ;
}
.fact {
    padding:10px;
    background:white;
}
div .fact:nth-child(odd) {
    background:#ecf0f1;
}
.fact:after {
    content:"";
    clear:both;
    display:table;
}
.info .fact .title{
   float:left;
   width:120px;
   text-align:right;
   color:#7f8c8d;
}
.info .fact .value {
   margin-left:140px;
   color:#34495e;
}
.albums {
    margin-top:5px;    
}
.albums img {
    float:left;
    margin-right:5px;
}
.albums img:last-child {
    margin-right:0;
}
div .button {
    display:block;
    height:30px;
    margin:5px 0;
    text-align:center;
    line-height:30px;
    color:#fff;
    border-radius:4px;
}
.button .stroke {
    background:#3498db;
}
.button .feed {
    background:#2ecc71;
}
.button .startle{
    background:#e74c3c;
}
2

Если совсем просто, то добавить в код:

.fact:nth-child(2n) { background: white !important; }
#miska { margin-right: 5px !important; }
3

Получилось 100 % , но долго пришлось править марджин , так как правая часть никак не хотела сходиться учитываю значения свойств по умолчанию

html, body{
    margin:0;
    padding:0;
}
body{
    font-family:Tahoma, Arial, sans-serif;
    font-size:12px;
    width:550px;
    height:300px;
}
.profile .photo{
    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-top:5px;
}
#info-title, .info h2{
    padding:10px !important;
    margin:0 !important;
    font-size:12px;
    font-weight:normal;
    background:#34495e;
    color:#fff;
    border-radius:4px;
}
.profile .info .fact{
    padding:10px;
    background:white;
}
.profile .info .fact:nth-child(odd){
    background:#ecf0f1;
}
.profile .info .fact:after{
    content:"";
    clear:both;
    display:table;
}
.info .fact .title{
   float:left;
   width:120px;
   text-align:right;
   color:#7f8c8d;
}
.info .fact .value{
   margin-left:140px;
   color:#34495e;
}
.profile .info .albums{
    margin-top:5px;    
}
.info .albums img{
    float:left;
    margin-right:5px;
}
#miska{
    margin-right:5px !important;
}
.info .albums img:last-child{
    margin-right:0;
}
.photo .button{
    display:block;
    height:30px;
    margin:5px 0;
    text-align:center;
    line-height:30px;
    color:#fff;
    border-radius:4px;
}
.photo .stroke{
    background:#3498db;
  
}
.photo .feed{
    background:#2ecc71;
}
.photo .startle{
    background:#e74c3c;
}
6

Такой вот ещё вариантик. 100% и 9 «!important»

html, body{
    margin:0;
    padding:0;
}
body{
    font-family:Tahoma, Arial, sans-serif;
    font-size:12px;
    width:550px;
    height:300px;
}
.profile{
    padding:5px 10px;
}
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{
    margin:0 !important;
    padding:10px !important;
    font-size:12px;
    font-weight:normal;
    background:#34495e !important;
    color:#fff;
    border-radius:4px;
}
.fact{
    padding:10px;
    background:white !important;
}
.info .fact:nth-child(odd){
    background:#ecf0f1 !important;
}
.fact:after{
    content:"";
    clear:both;
    display:table;
}
.fact .title{
   float:left;
   width:120px;
   text-align:right;
   color:#7f8c8d !important;
}
.fact .value{
   margin-left:140px;
   color:#34495e !important; 
}
.albums img{
    margin-top:5px;    
}
.albums img{
    float:left;
    margin-right:5px !important;
}
.albums img:last-child{
    margin-right:0 !important;
}
.photo .button{
    display:block;
    height:30px;
    margin:5px 0;
    text-align:center;
    line-height:30px;
    color:#fff;
    border-radius:4px;
}
.button.stroke{
    background:#3498db;
}
.button.feed{
    background:#2ecc71;
}
.button.startle{
    background:#e74c3c;
}
7

В чём проблема не пойму, последнюю картинку на место не ставит и всё тут.

html, body{
    margin:0;
    padding:0;
}
body{
    font-family:Tahoma, Arial, sans-serif;
    font-size:12px;
    width:550px;
    height:300px;
}
.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{
    margin:0 !important;
    padding:10px !important;
    font-size:12px;
    font-weight:normal;
    background:#34495e;
    color:#fff;
    border-radius:4px;
}
.profile .info .fact{
    padding:10px;
    background:white;
}
.profile .fact:nth-child(odd){
    background:#ecf0f1;
}
.fact:after{
    content:"";
    clear:both;
    display:table;
}
.info .fact .title{
   float:left;
   width:120px;
   text-align:right;
   color:#7f8c8d;
}
.info .fact .value{
   margin-left:140px;
   color:#34495e;
}
.info .albums{
    margin-top:5px;    
}
.info .albums img{
    float:left;
    margin-right:5px !important;
}
#miska{
    margin-right:5px !important;}
.albums img:last-child{
    margin-right:5px;
}
.photo .button{
    display:block;
    height:30px;
    margin:5px 0;
    text-align:center;
    line-height:30px;
    color:#fff;
    border-radius:4px;
}
.photo .stroke{
    background:#3498db;
}
.photo .feed{
    background:#2ecc71;
}
.photo .startle{
    background:#e74c3c;
}
#info-title{background:#34495e !important;}
8

Как вариант — обнулить margin для последней картикни.

9 
html, body{
    margin:0;
    padding:0;
}
body{
    font-family:Tahoma, Arial, sans-serif;
    font-size:12px;
    width:550px;
    height:300px;
}
.profile{
    padding:5px 10px;
}
.profile .photo 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-title{
    margin:0;
    padding:10px;
    font-size:12px;
    font-weight:normal;
    background:#34495e;
    color:#fff;
    border-radius:4px;
}
.profile div.fact{
    padding:10px;
    background:white;
}
div.fact:nth-child(odd){
    background:#ecf0f1;
}
.fact:after{
    content:"";
    clear:both;
    display:table;
}
div .fact .title{
   float:left;
   width:120px;
   text-align:right;
   color:#7f8c8d;
}
div .fact .value{
   margin-left:140px;
   color:#34495e;
}
.profile .info .albums{
    margin-top:5px;    
}
.info .albums img{
    float:left;
    margin-right:5px;
}

#miska{
    margin-right:5px !important;
}
.info .albums img:last-child{
    margin-right:0;
}
.profile .photo span.button{
    display:block;
    height:30px;
    margin:5px 0;
    text-align:center;
    line-height:30px;
    color:#fff;
    border-radius:4px;
}
.stroke{
    background:#3498db!important;
}
.feed{
    background:#2ecc71!important;
}
.startle{
    background:#e74c3c!important;
}

Друзья, подскажите! уже не вижу, где допустила ошибки. Альбомы не на своем месте. Как исправить?

11

Помогите пожалуйста, не могу справиться с альбомами…
`html,
body {
margin: 0;
padding: 0;
}

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

.profile .fact div {
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 {
margin: 0;
padding: 10px;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e !important;
border-radius: 4px;
}

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

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

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

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

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

.albums {
margin-top: 5 px;
}

.albums img {
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;
}

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

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

div .photo .startle {
background: #e74c3c;
}`

12

Это задание часто разбирается на форуме.
Воспользуйтесь поиском.
Например, эти темы посмотрите:
Испытание: взломанный котопрофайл [18/18]
Помогите с испытанием

1 лайк
13

Спасибо большое!

1 лайк
14

помогите, я уже не знаю в чем дело, все испробовала((( картинки вроде правильно показывает, но мне не считает, при сравнении показывает вообще бред

Снимок экрана 2016-02-22 в 16.43.40.png1440×900 415 KB

15

Лучше пришлите код, так понятнее будет…

16

Помогите выполнить задание!

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

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

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

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

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

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

.albums {
margin-top: 5px;
}

.albums img {
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;
}
.button.stroke {
background: #3498db;
}

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

.button.startle {
background: #e74c3c;

17

Задание часто разбирается на форуме. Посмотрите по темам.

1 лайк
18

.albums{
margin-top: 5px;
}

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

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

Вопрос: почему в селекторе по ID после .albums img, нужно ставить запятую???

19

А что вы хотели поставить, пробел или вообще без пробела?

1 лайк
20

Подскажите, пожалуйста, где этот злосчастный отступ не перебит?!) Перебить хочу сам, просто где он?)
Спасибо!

Без названия.jpg1160×864 504 KB
Без названия2.jpg1154×854 490 KB 

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

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

.profile .photo {
    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 {
    margin: 0 !important;
    padding: 10px !important;
    font-weight: normal;
    font-size: 12px;
    color: #ffffff;
    background: #34495e !important;
    border-radius: 4px;
}

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

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

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

.albums img {
    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;
}
21

последнее задание. вроде норм, но пишет что не совпадает.

2 лайка
22

Точно, спасибо!