Первое испытание [8/23] 100% (Оцените код пожалуйста)


#1
/* Базовые стили, изменять не нужно */

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

body {
width: 540px;
min-height: 290px;
padding-top: 20px;
padding-left: 20px;
font-size: 14px;
line-height: 1.5;
font-family: Arial, sans-serif;
color: white;
background-color: #3a78a1;
background-image: url("/assets/course9/grid.png");
background-repeat: repeat;
background-position: -80px -80px;
}

.block {
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
}

.block1 {
width: 196px;
height: 31px;
padding: 0 0 5px;
}

.block2 {
width: 56px;
height: 36px;
padding: 10px 40px;
margin: 20px 120px;
}

.block3 {
border: 12px solid;
width: 166px;
height: 26px;
padding: 5px 5px;
margin: 0 20px;
}


#2

Хм… мой код отличается от Вашего. Ваш и мой результат на 100%

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

body {
    width: 540px;
    min-height: 290px;
    padding-top: 20px;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.5;
    font-family: Arial, sans-serif;
    color: white;
    background-color: #3a78a1;
    background-image: url("/assets/course9/grid.png");
    background-repeat: repeat;
    background-position: -80px -80px;
}

.block {
    background: rgba(0, 255, 255, 0.2);
    border: 2px solid white;
}

.block1 {
    width: 196px;
    height: 36px;
    margin-bottom: 20px;
}

.block2 {
    width: 96px;    
    padding-left: 40px;
    padding-top: 10px;
    padding-bottom: 25px;
    margin-left: 120px;    
}

.block3 {
    border: 12px solid white;    
    width: 171px;
    height: 11px;
    padding-bottom: 20px;
    margin-top: 20px;
    margin-left: 20px;
    padding-left: 5px;
    padding-top: 5px;
}

#3

Я понял нашу ошибка, это использование height его не должно быть в коде. Переписал без него и многие не кратные 5ти значения ушли и результат по прежнему 100%.


#4

Почему не должно быть height? а как вы высоту задавали? через padding?

код на 100%
/* Базовые стили, изменять не нужно */
html,
body {
margin: 0;
padding: 0;
}

body {
width: 540px;
min-height: 290px;
padding-top: 20px;
padding-left: 20px;
font-size: 14px;
line-height: 1.5;
font-family: Arial, sans-serif;
color: white;
background-color: #3a78a1;
background-image: url("/assets/course9/grid.png");
background-repeat: repeat;
background-position: -80px -80px;
}

.block {
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
}

.block1 {
width: 196px;
height: 36px;
margin-bottom: 20px;
}

.block2 {
width: 96px;
height: 46px;
margin: 0 0 20px 120px;
padding: 10px 0 0 40px;
}

.block3 {
width: 171px;
height: 31px;
margin-left: 20px;
border-width: 12px;
padding: 5px 0 0 5px;
}


#5

Мой вариант:

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

body {
width: 540px;
min-height: 290px;
padding-top: 20px;
padding-left: 20px;
font-size: 14px;
line-height: 1.5;
font-family: Arial, sans-serif;
color: white;
background-color: #3a78a1;
background-image: url("/assets/course9/grid.png");
background-repeat: repeat;
background-position: -80px -80px;
}

.block {
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
}
.block1 {
width: 196px;
height: 36px;
margin-bottom: 20px;
}
.block2 {
width:96px;
padding:10px 0px 25px 40px;
margin-left:120px;
margin-bottom: 20px;
}
.block3 {
width:171px;
border: solid white 12px;
padding: 5px 0px 10px 5px;
margin-left: 20px;

}

#7

Сначала сделала на 97%.
Блоки идеально стояли, а вот надписи - нет.
У кого было так же - padding в помощь. :space_invader:
Сейчас 100%

.block1 {
width: 196px;
height: 36px;
}
.block2 {
width: 96px;
padding: 10px 0px 0px 40px;
height: 46px;
margin: 20px 120px
}
.block3 {
width: 171px;
height: 31px;
padding: 5px 0 0 5px;
border: solid 12px;
margin: 20px


#8

Мой вариант такой. Тоже намучилась с попиксельным подбором значений для 100% =___=
/* Базовые стили, изменять не нужно */
html,
body {
margin: 0;
padding: 0;
}

body {
width: 540px;
min-height: 290px;
padding-top: 20px;
padding-left: 20px;
font-size: 14px;
line-height: 1.5;
font-family: Arial, sans-serif;
color: white;
background-color: #3a78a1;
background-image: url("/assets/course9/grid.png");
background-repeat: repeat;
background-position: -80px -80px;
}

.block {
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
}

.block1 {
width: 196px;
height: 36px;
}

.block2 {
width: 56px;
height: 36px;
margin: 20px 0px 0px 120px;
padding: 10px 40px;
}

.block3 {
width: 166px;
height: 26px;
margin: 20px;
border: solid 12px;
padding: 5px;
}


#9

Вот мой вариант, 100%.

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

body {
width: 540px;
min-height: 290px;
padding-top: 20px;
padding-left: 20px;
font-size: 14px;
line-height: 1.5;
font-family: Arial, sans-serif;
color: white;
background-color: #3a78a1;
background-image: url("/assets/course9/grid.png");
background-repeat: repeat;
background-position: -80px -80px;
}

.block {
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
}

.block1 {
width: 196px;
height: 36px;
}

.block2 {
margin-left: 120px;
margin-top: 20px;
padding: 10px 40px;
width: 56px;
height: 36px;
}

.block3 {
border: 12px solid;
margin-top: 20px;
margin-left: 20px;
padding: 5px 5px;
width: 166px;
height: 26px;
}


#10

Привет, друзья!
Своим тоже поделюсь. 100%
Хотелось бы узнать от школьных гуру CSS, какие приёмы лучше использовать, чтобы код был легче и чище? Является ли в современной вёрстке “не модным” использовать отдельно padding/margin-left(right, top, bottom) или это не имеет существенного значения?

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

body {
width: 540px;
min-height: 290px;
padding-top: 20px;
padding-left: 20px;
font-size: 14px;
line-height: 1.5;
font-family: Arial, sans-serif;
color: white;
background-color: #3a78a1;
background-image: url("/assets/course9/grid.png");
background-repeat: repeat;
background-position: -80px -80px;
}

.block {
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
}

.block1 {
width: 196px;
height: 36px;
}

.block2 {
width: 96px;
height: 46px;
margin: 20px 120px;
padding-top: 10px;
padding-left: 40px;
}

.block3 {
width: 170px;
height: 30px;
margin: 20px;
border: 12px solid white;
padding: 1px;
padding-top: 5px;
padding-left: 5px;
}


#11

Мне кажется логичнее:

.block2 {
    width: 56px;
    height: 36px;
    margin: 20px 120px;
    padding: 10px 40px;
}

Т.е. внутри блока всё выравнивается равномерно…


#12

То есть вместо паддинг-топ и паддинг-лефт просто прописать эти значения в одной строчке


#13

На Ваше усмотрение. Это же Ваш код.
В данном случае я для себя решил так, - в другом случае, возможно будет другое решение…


#14

У меня вчера был глюк (как оказалось) в этом задании. Голову ломал полдня. Результат сравнил на 76 процентов из-за размеров фона в body. Т.к. в моем решении фоновая картинка занимала все свободное пространство окна, а в образце она на треть Уже. В итоге на следующий день когда перезашел в задачу все было норм… Работал в FireFox