1 испытание (Красивая форма)

Курсы Завершающие испытания
1

Тадам!
Перфекционизм не поддается моим стараниям при соблюдении всех правил кратности 5. :frowning:

Ссылка на мое решение
Нашел еще 1 парадокс. Когда у h1 задан margin-bottom:15px; То первый инпут, почему-то выше, чем должен быть, Но когда задаю margin-top:15px для этого самого инпута (что идет сразу после h1) - все становится на места. Кто может объяснить такое неравенство 15 пикселей? :smile:

И подскажите, пожалуйста, что же я сделал не так, что у меня разница в 2х пикселях в длине инпутов “Логин” и “Пароль” )

2

Попробовал убрать у инпутов “Логин”, “Пароль” длину - 100% и box-sizing:border-box;
Выставил железно (с вычетом внутренних отступов) 265, посчитал, получил 299 пикселей (260+ 15+15 +2 +2). Как так-то? Кнопки сошлись. а вот со второй иконкой оказывается еще беда с позиционированием, неужели они тоже сделаны position:absolute ? =(
хотелось бы - background-position: 270px center :unamused:, но не работает(

3

Форкнул твоё решение и немного подправил http://cssdeck.com/labs/gqsabbzm.

1 лайк
4

Спасибо :smile: , понял про background-position, понял про инпуты, но так и не понял, почему же - почему, такая магия, в первом посте про Margin от h1 написал.
И не понял еще откуда появился в background цвет #f9f6f3? )

5

Хм, в каком браузере такая тема с марджинами получается? Попробовал в хроме, вроде одинаковые отступы выходят и если нижний у h1, и если верхний у инпута.

Цвет указан в комментарии:
Цвет фона полей: #f9f6f3

6

в хроме вот я и ковырял. Странно, м.б. мой хром кривой)
Спасибо еще раз)

1 лайк
7

Не могу понять, моя форма визуально выглядит одинаково если сравнить с образцом, имеются небольшие сдвиги по размерам, но шкала прохождения задания замерла на отметке “холодно”. Даже не знаю где дальше ковырять в этом задании. Получается, при одинаковом внешнем виде что то в корне отличается от оригинала???

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Испытание 1: красивая форма</title>
        <meta charset="utf-8">
    </head>
    <body>
        <form class="login-form" action="/auth" method="post">
            <h1>Вход в кабинет</h1>
            <input type="text" name="login" placeholder="Логин"><br>
            <div class="icon1"></div>
            <input type="password" name="password" placeholder="Пароль" class="2"><br>
            <div class="icon2"></div>
            <input type="checkbox"> Запомните меня <a href=url(/auth)>
            Я ЗАБЫЛ ПАРОЛЬ<a><br>
            
            <input type="submit" value="ВОЙТИ">
            
        </form>
    </body>
</html>

CSS:

html, body{
    margin:0;
    padding:0;
    
}
body{
    width:380px;
    height:300px;
    padding-top:5px;
    font-size:16px;
    font-family:"Tahoma", sans-serif;
    line-height:1.3;
    background:#34495e;
    margin-left:35px;
    
    
}
h1{
    padding-top:20px;
    font-size:20px;
}
  
.login-form,
.login-form input[type="text"],
.login-form input[type="password"],
.login-form input[type="submit"]{
    font-weight:bold;
    font-size:12px;
    font-family:"Tahoma", sans-serif;
    text-transform:uppercase;
    background-color:#ffffff;
    padding-left:35px;
    margin-bottom:10px;
    border:none;
    
}
.login-form input[type="checkbox"]{
    
    margin-right:5px;
    margin-bottom:20px;
   
}
.login-form input[type="submit"]{
    color:#ffffff;
    background-color:#000000;
    width:300px;
    height:40px;
    margin-bottom:30px;
}
.login-form input[type="text"],
.login-form input[type="password"]{
    width:280px;
    height:35px;
    border:2px solid #000000;
}
a{
    margin-left:35px;
    color:#000000;
}
.login-form input[placeholder]{
    text-transform:none;
    padding-left:15px;
}
.login-form input[value]{
    padding-left:0px;
}

.icon1{
    width:15px;
    height:15px;
    background: url(/assets/ifmo/icon-user.png);
    position:absolute;
    left:345px;
    top:90px;
 
}
.icon2{
    width:15px;
    height:17px;
    background: url(/assets/ifmo/icon-lock.png);
    position:absolute;
    left:345px;
    top:140px;
 
}


/*
Адреса иконок:
/assets/ifmo/icon-user.png
/assets/ifmo/icon-lock.png
Цвет фона полей:
#f9f6f3
Цвет кнопки:
#000000
Фон формы:
#ffffff
*/
8

@Alexxoid, XP? о_0

А если по делу - посмотрите первый пост.
Чуток подскажу - не стоит использовать столько дивов лишних в верстке. Br злоупотреблять тоже не стоит.
И вот момент

.login-form input[placeholder]{
text-transform:none;
padding-left:15px;
}
.login-form input[value]{
padding-left:0px;
}

Не стоит прям так жестоко привязывать стили к плейсхолдерам, да к инпутам, содержащим value.
Проще эти педдинги задать для инпутов с аттрибутом type.
Кстати, у вас очень много ошибок, на еще один полный разбор полетов меня не хватит.

Вот (не эталонное, но правильное) решение

p.s. @juwain, сори, форкнул твой форк моего решения :smile:. Нашел у себя закрывающие инпуты(

9

Я вижу, что у меня различия, но не могу понять причинно-следственную связь. Просто очень хочется чему то научиться, но это возможно если я смогу проанализировать свои ошибки, а не просто копи-пастить чьи то готовые решения. Но пока не получается разобраться в своих ошибках, зачастую идешь напролом, хотя и понимаешь, что возможно существует более изящное и короткое решение.
Как я понял, в первую очередь нужно разобраться с использованием плейсхолдеров и применению стилей к ним, а затем уже пробовать дальше искать оптимальное решение?

10

P.S. На работе Икспиха стоит. Сам в шоке)))
Да вообще в парке из 140 машин, 50-60% XP.

11

Сочувствую.
Я бы объяснил подробно, как тут, но не раньше 2.01.2015 :slight_smile:

12

Хорошо, если не сложно помогите нубчику после 02.01. :smile:

13

Это какой-то натуральный апокалипсис в коде!
Буду без преукрас. Все как есть, без обид.

Начнем со стандартных стилей - Зачем вы их изменяли?
Чем Вас не устроило

body{
    width:450px; /* 380px */
    height:300px; /* 300px*/
    padding-top:20px; /* 5px */
    font-size:16px;
    font-family:"Tahoma", sans-serif;
    line-height:1.3;
    background:#34495e;
    /* margin-left:35px; */
}

В комментариях записан Ваш код. У меня глаза на лоб вылезли, когда я увидел такую муть.
Нет, и еще раз нет изменениям уже написанного кода. Вам проще нажать на кнопку “сбросить код”.
Однако мы не любим простых путей.

!Запомните : Никогда не меняйте базовые стили, которые в начале испытания были прописаны!

Для H1 не надо ни каких отступов делать, даже наоборот, необходимо переопределить (обнулить) стандартные внешние отступы.
Получится так

h1 {font-size:20px; margin:0}

Опять же, не стоило менять стандартные свойства, особенно, когда они для нескольких селекторов прописаны одновременно.
Зачем Вы это ДОписали?

.login-form,
.login-form input[type="text"],
.login-form input[type="password"],
.login-form input[type="submit"] {
    background-color:#ffffff;
    padding-left:35px;
    margin-bottom:10px;
    border:none;
}

Еще и убрали свойство vertical-align: middle у .login-form input[type=“checkbox”].
26 Строчек, Они неприкасаемые!!!
Свои правила стоит добавлять ниже.
Пусть Вы переопределите, но начальные менять не стоит.

Дальше поговорим о HTML.
ааааааа , что это за запись такая?

 <a href=url(/auth)>Я ЗАБЫЛ ПАРОЛЬ<a>

Пройдите еще раз, пожалуйста, этот курс.

Я удалил сразу же дивы с классами icon1 и icon2, и все стили, что к ним применялись. Почему? Да все просто: 2 лишних пустых дива в верстке, а зачем - непонятно. Никаких absolute для иконок, позиционируя их непонятно от чего (методом подбора). Лучше всего постараться сделать их бекграундами для самих инпутов, уж если это не получится, то на крайний случай на помощь придут псевдоэлементы (но это крайняя мера, к которой не стоит прибегать в таких задачах).

У инпута увидел class=“2”, первый прокол - имя класса цифрой, ай-яй-яй. Второй - класс нигде не используется.
То что Вы инпутам задаете имена, это хорошая практика. Главное не забывайте, что они должны быть тоже уникальными, как и ID.

В Итоге получаем HTML код:

<form class="login-form" action="/auth" method="post">
   <h1>Вход в кабинет</h1>
   <input type="text" name="login" placeholder="Логин">
   <input type="password" name="password" placeholder="Пароль" >
   <a href="#">Я забыл пароль</a>
   <input type="checkbox"> <span>Запомните меня</span> 
   <input type="submit" value="ВОЙТИ">
</form>

Я обернул “Запомните меня” в тег span, чтобы не оставлять “пустых слов” в верстке.
Для начала зададим стили для всей формы. И сразу же для h1.

.login-form {
    width:300px;
    margin: 0 auto;
    background: #fff;
    padding: 20px 40px 30px;
}
h1 {font-size:20px; margin:0}

Наша форма уже приобретает адекватный вид.
Мы задали ей белый фон, отступы: сверху 20, справа 40, снизу 30, слева 40.
И отцентрировали ее внешними отступами, Так же не забыли про ширину. А то такая запись margin’а не будет работать.

Перейдем к оформлению полей ввода:
Сначала добавим отступ у первого инпута, следующего сразу за h1. Потом пропишем общие стили для наших двух полей ввода.
И следом для логина и пароля отдельно.

h1 + input {margin-top:15px;}
.login-form input[type="text"],
.login-form input[type="password"] {
    text-transform:capitalize;
    display:block;
    width:240px;
    padding:10px 40px 10px 15px;
    margin-bottom:10px;
    border:2px solid black;
}
.login-form input[type="text"] {    
    background: #f9f6f3 url(http://htmlacademy.ru/assets/ifmo/icon-user.png) no-repeat 270px 10px;
}
.login-form input[type="password"] {
    background:#f9f6f3 url(http://htmlacademy.ru/assets/ifmo/icon-lock.png) no-repeat 270px 10px;
    margin-bottom:15px;
}

Что мы сделали: переопределили наследуемое свойство text-transform, задали общие размеры для полей ввода. Железно указали их ширину и внутренние отступы.
Так же я добавил правый внутренний отступ 40, чтобы текст не наезжал на иконку при введении длинного логина и пароля. Дальше была простая математика для высчитывания позиции иконок. И нижний отступ до чекбокса.

Задаем для ссылки черный цвет (ибо по-умолчанию он синий), и выравниваем ее по правому краю формы:

.login-form a {float:right; color:#000;}

И последний штрих для кнопки, тут Вы очень намудрили в своем коде. поэтому держите правильный:

.login-form input[type="submit"] {
    width:100%;
    background: #000;
    color: #fff;    
    border:none;
    margin-top:15px;
    padding:15px;
}

С Новым Годом! хо-хо-хо :smile:

P.s. @juwain, Может их вообще скрывать (Первоначальные стили)?

2 лайка
14

Согласен, я честно попытался хоть как-то выправить этот код, уже почти его дотянул до обязательных 90% и плюнул. Возможно, проще даже было бы заново его переписать, чем тут разобраться, т.к. ошибок и правда много.

15

Я даже пробовать не стал, ибо неведомые отступы внутри всего, absolute’ы неоправданные - не стоят моих нервов по подборке пикселей. Основная ошибка началась, когда были переопределны стандартные правила.

1 лайк
16

А вот это неплохая идейка, кстати. Переопределяя базовые стили, можно многие задания, а не только это, выполнить вообще не так, как предполагалось. Я сам в парочке каких-то испытаний поначалу их менял, чтоб мне было проще и полоска прогресса на сотку ушла. Это я к тому, что из-за наличия этих стилей иногда можно догнать до сотки задание, не понимая до конца темы курса и/или особенностей задания, но при этом просто «нарисовав» нужную отсебятину.

17

Спасибо большое, усвоил уроки :smile: и С Новым Годом :grinning:

1 лайк
18

Почти любое испытание вообще можно пройти за 10секунд на 100% используя 1тег :blush:

19

Тупо вставив в тело бэкграунд с адресом изображения из образца, да? ) А то мне уже приходило в голову что-то похожее. Самый грязнейший чит-код.
З.Ы.: возможно, базовые стили лучше будет не совсем скрывать, а оставить видимыми, просто запретить им редактирование каким-то образом (также запретив их переопределение, в т.ч. переопределение по important). Проблема в том, что где-то они всё-таки нужны для понимания и для решения. А то может возникнуть путаница, если человек их не увидит, непонятки, откуда взялся лишний отступ например или размер, если тот прописан заранее в body. Ну, или хотя бы оставлять базовые стили где-нибудь в комментах или же описании. А то лезти каждый раз в исходный код страницы, если какое-то свойство в css в испытании явно используется — не комильфо.

20

Возможно @leo прав.
Мне кажется, что запретить какую-то область на редактирование - не так-то и просто.
Было бы неплохо, для начала, везде добавить комментарий: тут заканчиваются базовые стили, настоятельно рекомендуем их не менять =)

p.s Да, img src="…" :smiley:

1 лайк