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

vic4884 · 23.Июнь.2017 14:23:34

я не нашел способа , как увеличить вес значению из-за заданных параметров в атирибутах через style <h2 **style="margin-top:-50px;padding:0**;">Альбомы</h2>. Поэтому воспользовался !important. Может быть мое упущение, и я чего то пропустил.

Ineska · 23.Июнь.2017 14:26:15

Вы всё правильно сделали. Просто хотелось проверить, насколько вы понимаете то, что делаете.

vic4884 · 23.Июнь.2017 14:27:12

это нормально =) иногда делаю методом тыка, если не понимаю, как ни странно потом доходит и делаю нормально

vic4884 · 23.Июнь.2017 15:03:05

а то что выше таблицы, в подсчетах ошибок нет?

Ineska · 23.Июнь.2017 15:15:13

Ошибок нет.

vic4884 · 23.Июнь.2017 18:15:25

Спасибо, из-за своей не внимательности приходится просить перепроверять)

Astralysterious · 01.Июль.2017 17:12:13

Здравствуйте. Зачем нужно это правило?

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

И без него все ок. Удалял - все равно 100% и верстка не меняется.

CSS

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

.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;
    border-radius: 4px;
}

#info-title {
    background: #34495e;
}

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

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

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

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

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

.albums {
    margin-top: 5px;
}

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

#miska {
    margin-right: 5px;
}

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

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Испытание: взломанный котопрофайл</title>
        <meta charset="utf-8">
        <style>
        /* Будешь знать, как сувать лапы, куда не надо,
           шерстяной неудачник! */

            #info-title,
            .profile .button {
                background: #4dfe15;
            }

            .profile div.fact {
                background: #ff00dc;
            }

            .profile .fact div {
                color: #02f801;
            }

            .photo span {
                margin: 0;
                height: 20px;
                text-align: right;
            }

            #miska {
                margin-right: 50px;
            }
        </style>
    </head>
    <body>
        <div class="profile">
            <div class="photo">
                <img src="/assets/course66/cat_walk.png" alt="">
                <span class="button stroke">Погладить</span>
                <span class="button feed">Накормить</span>
                <span class="button startle">Напугать</span>
            </div>
            <div class="info">
                <h2 id="info-title">Общая информация</h2>
                <div class="fact">
                    <div class="title">Имя</div>
                    <div class="value">Феликс</div>
                </div>
                <div class="fact">
                    <div class="title">Позывные</div>
                    <div class="value">Кто в тапки нассал?</div>
                </div>
                <div class="fact">
                    <div class="title">Вероисповедание</div>
                    <div class="value">Верю в холодильник</div>
                </div>
                <div class="fact">
                    <div class="title">Политические</div>
                    <div class="value">Продам все за еду</div>
                </div>
                <h2 style="margin-top:-50px;padding:0;">Альбомы</h2>
                <div class="albums">
                    <img src="/assets/course66/cat_drink.png" alt="">
                    <img id="miska" src="/assets/course66/cat_hungry.png" alt="">
                    <img src="/assets/course66/cat_sing.png" alt="">
                    <img src="/assets/course66/cat_pirate.png" alt="">
                </div>
            </div>
        </div>
    </body>
</html>

Ineska · 01.Июль.2017 18:35:40

Это псевдораспорка. Необходимый элемент при верстке на флоатах. Подробнее о ней будет в курсе “Сетки”.

Evgeny_Lipadat · 02.Июль.2017 20:44:30

Возможно немного кривой код, и есть лишние элементы, но просто было лень чистить.
Решение 100%

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;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e;
border-radius: 4px;
}

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

.info .fact:nth-child(n) {
padding: 10px;
background: white;
}

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

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

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

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

.albums img #miska {
margin-top: 5px !important;

}

.albums img {
float: left !important;
margin-right: 5px !important;
display: inline;
margin-top: 5px;
}

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

.profile .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 · 03.Июль.2017 06:41:05

По условию задания вы не можете дописывать свои правила. Такое количество !important тоже не приветствуется.

Marat_Nauruzov · 08.Октябрь.2017 04:59:31

долго мучился:)
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-title, .info h2 {
margin: 0 !important;
padding: 10px !important;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e;
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: 5px;
}

#miska, .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;
}
.profile .stroke {
background: #3498db;
}

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

.profile .startle {
background: #e74c3c;
}

Насколько сей код написан правильно?)

Egor_Tkachev · 25.Октябрь.2017 13:49:09

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

Пошел последовательно. просто читал стиль заданный в HTML и менял приоритет в CSS. оказалось все просто. главное внимательно прочитать код.

Kate744 · 26.Октябрь.2017 19:59:41

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

Ниже будет мой код, а пока вопрос:
Пожалуйста, обьясните, почему

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

НЕ работает без #miska? Фото с миской уже стояло вторым ровно, как надо.
Моя задача была подтянуть 3-ю и 4-ю фото, но помогла только подсказка с #-ом с форума, и я совсем не понимаю действия данного кода:((

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 !important;
color:#fff;
border-radius:4px;
}
.fact{
padding:10px;
background:white !important;
}
.fact:nth-child(odd){
background:#ecf0f1 !important;
}
.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;
}
.albums{
margin-top:5px;
}

.albums img, #miska{
float:left;
margin-right:5px;
}
.albums img:last-child{
margin-right:0;
}
.profile .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;
}

Dmitry_Koltsov · 27.Октябрь.2017 15:30:21

В начале кода написано, где коты напакостили. Было:

#miska {
    margin-right: 50px;
}

Это означает, что отступ от этой самой картинки справа будет 50px. То есть, чтобы подтянуть остальные изображение, нужно избавиться от этого отступа и сделать его таким же, как и у остальных.

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

Тут как раз Вы и переопределили этот отступ с 50px на 5px, и остальные картинки (3 и 4) сдвинулись ближе ко второй.
Надеюсь, что понятно объяснил)

grox · 30.Ноябрь.2017 22:33:26

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

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

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

.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 #miska, .albums img {
float: left;
margin-right: 5px;
}

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

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

ida4ne · 01.Декабрь.2017 19:22:37

Почему то не объяснили, что селекторы можно через запятую перечислять и свойства сразу к нескольким селекторам применяется. Без этого никак не сделать. Или все-таки возможно?

Kate744 · 02.Декабрь.2017 18:51:33

Тоже не знала, что так можно.
Помогла только подсказка.

Ineska · 02.Декабрь.2017 19:03:31

На самом деле пример записи селекторов через запятую, если быть внимательным, можно увидеть уже в курсе “Знакомство с формами”.
В первом испытании встречается правило:

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

GlebPilipenko · 21.Январь.2018 21:06:17

Очень достойное задание, сидел корпел, кипел, НО сделал, УРА!!!
Всем кто будет проходит, совет:

внимательно читайте задание
!!!смотрите html код!!!

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

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

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

.fact::after {
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 {
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;
}

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

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

.profile .startle {
background: #e74c3c;
}

#miska:nth-child(2) {
margin-right: 5px !important;
}

h2 {
padding: 10px 10px !important;
}

wayne1865 · 22.Январь.2018 09:52:37

100% проверка, 2 !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;
}

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

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

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

div.info 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: 5px;
}

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

img+#miska {
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;
}

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

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

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