в хроме вот я и ковырял. Странно, м.б. мой хром кривой)
Спасибо еще раз)
1 лайк
Не могу понять, моя форма визуально выглядит одинаково если сравнить с образцом, имеются небольшие сдвиги по размерам, но шкала прохождения задания замерла на отметке “холодно”. Даже не знаю где дальше ковырять в этом задании. Получается, при одинаковом внешнем виде что то в корне отличается от оригинала???
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
*/@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, сори, форкнул твой форк моего решения 
. Нашел у себя закрывающие инпуты(
Я вижу, что у меня различия, но не могу понять причинно-следственную связь. Просто очень хочется чему то научиться, но это возможно если я смогу проанализировать свои ошибки, а не просто копи-пастить чьи то готовые решения. Но пока не получается разобраться в своих ошибках, зачастую идешь напролом, хотя и понимаешь, что возможно существует более изящное и короткое решение.
Как я понял, в первую очередь нужно разобраться с использованием плейсхолдеров и применению стилей к ним, а затем уже пробовать дальше искать оптимальное решение?
P.S. На работе Икспиха стоит. Сам в шоке)))
Да вообще в парке из 140 машин, 50-60% XP.
Хорошо, если не сложно помогите нубчику после 02.01. 
Это какой-то натуральный апокалипсис в коде!
Буду без преукрас. Все как есть, без обид.
Начнем со стандартных стилей - Зачем вы их изменяли?
Чем Вас не устроило
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;
}
С Новым Годом! хо-хо-хо
P.s. @juwain, Может их вообще скрывать (Первоначальные стили)?
2 лайка
Согласен, я честно попытался хоть как-то выправить этот код, уже почти его дотянул до обязательных 90% и плюнул. Возможно, проще даже было бы заново его переписать, чем тут разобраться, т.к. ошибок и правда много.
Я даже пробовать не стал, ибо неведомые отступы внутри всего, absolute’ы неоправданные - не стоят моих нервов по подборке пикселей. Основная ошибка началась, когда были переопределны стандартные правила.
1 лайк
А вот это неплохая идейка, кстати. Переопределяя базовые стили, можно многие задания, а не только это, выполнить вообще не так, как предполагалось. Я сам в парочке каких-то испытаний поначалу их менял, чтоб мне было проще и полоска прогресса на сотку ушла. Это я к тому, что из-за наличия этих стилей иногда можно догнать до сотки задание, не понимая до конца темы курса и/или особенностей задания, но при этом просто «нарисовав» нужную отсебятину.
Спасибо большое, усвоил уроки и С Новым Годом 
1 лайк
Почти любое испытание вообще можно пройти за 10секунд на 100% используя 1тег 
Тупо вставив в тело бэкграунд с адресом изображения из образца, да? ) А то мне уже приходило в голову что-то похожее. Самый грязнейший чит-код.
З.Ы.: возможно, базовые стили лучше будет не совсем скрывать, а оставить видимыми, просто запретить им редактирование каким-то образом (также запретив их переопределение, в т.ч. переопределение по important). Проблема в том, что где-то они всё-таки нужны для понимания и для решения. А то может возникнуть путаница, если человек их не увидит, непонятки, откуда взялся лишний отступ например или размер, если тот прописан заранее в body. Ну, или хотя бы оставлять базовые стили где-нибудь в комментах или же описании. А то лезти каждый раз в исходный код страницы, если какое-то свойство в css в испытании явно используется — не комильфо.
Возможно @leo прав.
Мне кажется, что запретить какую-то область на редактирование - не так-то и просто.
Было бы неплохо, для начала, везде добавить комментарий: тут заканчиваются базовые стили, настоятельно рекомендуем их не менять =)
p.s Да, img src="…" 
1 лайк
И еще возник вопрос какими, все-таки, способами стараться избегать абсолютное позиционирование?
Простыми, ну в данном примере посмотрите как сделано и подумайте)
А так обычно отступами все сдвигается. Надо думать, что в данной ситуации будет рациональней.
НО Абсолют редко бывает рационален в таких задачах
@elemeNtk0, y меня тоже возник небольшой вопрос про абсолют. В каких вообще ситуациях он реально рационален и его стоит применять? Где это всё-таки имеет смысл? Заглянул снова в курс про абсолют, там написано так:
На практике абсолютное позиционирование часто применяют в декоративных целях, когда нужно аккуратно разместить какие-либо иконки, управляющие элементы или другие «рюшечки».
Судя по этому тексту, так его применения вполне можно избежать всегда или почти всегда, причём без каких-то особо сильных проблем (ИМХО). Т.е. получается, что «absolut’ы не нужны», так? Ведь в absolut’ном большинстве случаев можно вполне обойтись вообще без них. А вот по поводу их применения — я в каком-то из видео услышал, что оно может вызывать проблемы на практике (в видео рассматривались частые ошибки начинающих верстальщиков). Верно ли, что следует стараться вообще его избегать при написании кода в большинстве случаев, т.е. как можно чаще? Лучше обходиться без него?
И ещё. Верно ли, что если уж и использовать для чего-то absolute, то при этом родителю лучше всегда задавать relative, и отсчёт координат вести уже от него, а не от окна браузера?
Да, Вы правы. И абсолюты действительно являются частыми ошибками начинающих.
Я стараюсь его избегать по максимуму. Бывают в дизайне такие элементы, которые, к сожалению, без абсолютов не сделать, например:
- При наведении на строчку - должна плавно выезжать слева полоса высотой = высоте строки и шириной 5пикселей. + там же должна появляться полоса ( сделана она box-shadow) и чтобы ее перекрыть - как раз и пришлось делать абсолютом левую светлую полосу.
- Тут все аналогично стрелка должна быть “поверх” box-shadow
1 лайк
Ясно, спасибо за ответ, мне как-то в голову не приходили такие случаи.