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

varden · 31.Март.2015 23:56:56

задание прошёл.
Но, так и не удалось полностью спозиционировать
.login-form input[type=“checkbox”]{margin:0px 9px 5px 3px;}

html, body{
    margin:0;
    padding:0;
}
body{
    width:450px;
    height:300px;
    padding-top:20px;
    padding-left:35px;
    font-size:16px;
    font-family:"Tahoma", sans-serif;
    line-height:1.3;
    background:#34495e;
}
.login-form,
.login-form input[type="text"],
.login-form input[type="password"],
.login-form input[type="submit"]{
    display:block;
    position:relative;
    font-weight:bold;
    font-size:12px;
    font-family:"Tahoma", sans-serif;
    text-transform:uppercase;
    background-color:#ffffff;
}
.login-form input[type="checkbox"]{
    margin:0px 9px 5px 3px;
}
.login-form{
    width:300px;
    padding:20px 40px 30px 40px;
    }
.login-form .title{
    display:block;
    font-size:20px;
    margin:0 0 15px 0;
    }
.login-form input[type="text"],
.login-form input[type="password"]{
    width:240px;
    border:2px solid black;
    padding:10px 40px 10px 15px;
    text-transform:none;
}
.login-form input[type="text"]{
    background:url('/assets/ifmo/icon-user.png')  no-repeat;
    background-position:270px 10px;
    margin-bottom:10px;
    background-color:#f9f6f3;
}
.login-form input[type="password"]{
    background:url('/assets/ifmo/icon-lock.png')  no-repeat;
    background-position:270px 10px;
    margin-bottom:15px;
    background-color:#f9f6f3;
}
.login-form input[type="submit"]{
    width:300px;
    padding:15px;
    margin-top:15px;
    color:#ffffff;
    background-color:#000000;
    border:none;
}
.login-form a{
    color:#000000;
    float:right;
}

Raynor812 · 14.Апрель.2015 09:30:00

Не проходится, ссылку “я забыл пароль” перекидывает на следующую строку, причем только в окне проверки.
код тут: http://cssdeck.com/labs/urwg3n3n

elemeNtk0 · 21.Апрель.2015 14:39:27

@Raynor812, Первое, что стоит сразу же исправить:
text-transform:none !important;
Правильно будет text-transform:capitalize; =)

Замечание:
«id» для стилизации использовать неправильно! Замените все id на классы.

Ошибка:
Вы задаёте инлнайн элементам display: inline-block, но не учитываете отступы между инлайн-блочными элементами.
Совет — воспользуйтесь плавающими блоками (float).

Raynor812 · 22.Апрель.2015 11:38:39

Спасибо, 100% добился, но все равно получилось методом подгона магрин/паддингов:
.login-form input[type=“checkbox”]{
float:left;
margin-right:9px;
}
.login-form a{
color:#000000;
float:right;
}
.login-form input[type=“submit”]{
width:300px;
padding:13px 0px;
background:#000000;
margin-top:15px;
margin-bottom:22px;
color:#ffffff;
}

LOCTAR · 26.Июнь.2015 07:36:12

Как верно подобрать цвет текста внутри полей? (какой-то серенький.) кода нету на него

juwain · 26.Июнь.2015 08:32:54

Смотрите в комментариях в CSS. Там указан в частности цвет фона полей.

LOCTAR · 27.Июнь.2015 08:25:16

Это я заметил, и поставил цвет фона полей тот который требуется. Но там же ещё есть и цвет у текста внутри поля, который отличается от фона
Этот цвет и не указан. Вот хотелось бы его код, если не затруднит

juwain · 27.Июнь.2015 08:56:54

Это placeholder-ы у поле ввода. Цвет их явно в задании не указывается и берётся системный. То есть просто указывайте placeholder у полей и цвет совпадёт.

punk_russian · 27.Октябрь.2015 13:49:44

Всем доброго времени суток!
Пол-дня ломаю себе голову над этим испытанием. Загвоздка в следующем, я не понимаю что за магия с отступами между полями “логин” и “пароль”, задаю маргин 10px, но если верить проверке, то отступ должен быть пикселей 8… При этом заголовок и поле логин расположены четко, как в образце, все остальное съехало на эти 2 пикселя. Код прилагаю. И еще почему-то иконка в поле “пароль” расположена не по центру, а в поле “логин” по центру, хотя в обоих случаях в background прописал center.

punk_russian · 28.Октябрь.2015 07:28:01

Загадку с иконками я вроде понял. Проверка проходит если выставлять у обоих иконок координату Y 10px, т.е. по замыслу разрабов иконки должны быть на одном уровне со строкой (padding в поле ввода у нас также 10px), а не по центру поля, как я в начале подумал. Просто видимо высота у иконок разная, раз для одной иконки проверка проходит как для center, так и для отступа 10px, а для другой проходит только для 10px.
P.S. отступ между полями “логин” и “пароль” до сих пор взрывает мне мозг…

Andrew_S · 29.Октябрь.2015 14:15:30

Вам надо эти селекторы сделать блочными
.login-form input[type=“text”],
.login-form input[type=“password”]

https://jsfiddle.net/b3cacyfu/

Treefolk · 09.Март.2016 00:50:36

К хорошему быстро привыкаешь… Поэтому когда я понимаю, что ничего не понимаю, я беру не уточку, а пишу на форум : -?

Так вот.
Есть такое несоответствие.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Испытание 1: красивая форма</title>
        <meta charset="utf-8">
    </head>
    <body>
        <form class="login-form" action="/auth" method="post">
            <h2>Вход в кабинет</h2>
                <br>
                    <input type="text" placeholder="Логин">
                <br>
                    <input type="password" placeholder="Пароль">
                <br>
                    <input type="checkbox">
                <a>Я забыл пароль</a>
                <span>Запомните меня</span>
                <br>
                    <input type="submit" value="Войти">
        </form>
    </body>
</html>

CSS:

html, body{
margin:0;
padding:0;
}
body{
width:450px;
height:300px;
padding-top:20px;
font-size:16px;
font-family:“Tahoma”, sans-serif;
line-height:1.3;
background:#34495e;
}
.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;
}
.login-form input[type=“checkbox”]{
vertical-align:middle;
margin-right:5px;
}

.login-form {
margin: 0 auto;
width: 300px;
min-height: 260px;
padding: 5px 40px 10px 40px;
background-color: #FFFFFF;
line-height: 20px;
}

h2 {
font-size: 20px;
margin-bottom: 0;
}

.login-form input[type=“text”], .login-form input[type=“password”] {
width: 280px;
height: 25px;
margin-bottom: 10px;
border: 2px solid #000000;
padding: 5px 0px 5px 15px;
}

.login-form input[type=“text”] {
background: #f9f6f3 url(/assets/ifmo/icon-user.png) no-repeat;
background-position: 270px 10px ;
}

.login-form input[type=“password”] {
background: #f9f6f3 url(/assets/ifmo/icon-lock.png) no-repeat;
background-position: 270px 10px;
margin-bottom: 15px;
}

.login-form input[type=“submit”] {
margin-top: 15px;
padding: 10px;
text-align: center;
width: 300px;
height: 45px;
background-color: #000000;
border: 2px solid #000000;
color: white;
}

span {
text-align: left
}

.login-form a {
text-decoration: underline;
float: right;
}

Ineska · 09.Март.2016 07:50:03

Да, я заметила. Зато очень легко следить за вашим прогрессом.
В этот раз вы рано сдались. Сначала исправьте все ошибки (несоответствия) с условием задания. Прописано во вкладочке “Теория”. Обратите внимание на пункт, где упоминается отсутствие высоты при создании размеров текстовых полей и кнопок.
Еще одна подсказка. Посмотрите внимательно на участок формы с “галочкой” и на код ваш. В идеале, при нажатии на “Запомнить меня” поле чекбокса должно активизироваться. У вас не будет. Почему? Потому что описание поля с самим полем никак не связано. Вы забыли про label.
Также обратите внимание на порядок следования элементов в коде. Ссылка идет после чекбокса, тогда и float: right; не понадобится.

DrakD · 17.Март.2016 17:14:44

Здравствуйте. Извините что вновь обращаюсь… но я сегодня весь день решаю промежуточные и заключительные испытания.

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

<!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" placeholder="Логин"><div class="login"></div></input><br>
            <input type="password" placeholder="Пароль"><div class="pass"></div></input><br>
            <input type="checkbox">Запомните меня</input>
            <a href="#">Я забыл пароль<a><br>
            <input type="submit" value="войти"></input>
        </form>
    </body>
</html>

Я выравниваю их по милиметру, уже забив на “кратность” но у меня все равно не получается сделать один в один

html, body{
    margin:0;
    padding:0;
}
body{
    width:450px;
    height:300px;
    padding-top:20px;
    font-size:16px;
    font-family:"Tahoma", sans-serif;
    line-height:1.3;
    background:#34495e;
}
h1 {
    padding: 0;
    font-size: 20px;
    margin-top: 15px;
    margin-left: 2px;
}

form > a {
    color: black;   
}
.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: white;
}
.login-form input[type="checkbox"]{
    vertical-align:middle;
    margin-right:5px;
}
/*
Цвет кнопки:
#000000
Фон формы:
#ffffff
*/
form {
    height: 262px;
    margin: 0px 35px;
    padding: 5px 38px;    
}
.login-form input[type="text"],
.login-form input[type="password"] {
    border: 2px solid black;
    padding: 9px 145px 10px 15px;
    background-color: #f9f6f3;
    margin-bottom: 10px;
}

.login-form input[type="submit"] {
    border: 0px solid black;
    padding: 16px 128px;
    color: white;
    background: black;
    margin-top: 5px;
}

.login-form input[type="checkbox"] {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 6px;
}
.login-form a {
    margin-left: 50px;
}
.login {
    position: absolute;
    top: 93px;
    right: 83px;
    width: 20px;
    height: 20px;
    background: url("/assets/ifmo/icon-user.png") no-repeat 0 0;
}
.pass {
    position: absolute;
    top: 143px;
    right: 83px;
    width: 20px;
    height: 20px;
    background: url("/assets/ifmo/icon-lock.png") no-repeat 0 0;
}

Подскажите что-ли, как я могу начать их выравнивать под другому. Другой подход к этому испытанию, а то у меня уже никаких мыслей на этот счет нет…

Ineska · 17.Март.2016 18:41:21

Иконки лучше ставить на место с помощью background-position, а не с помощью position:absolute;
При создании размеров полей не запрещается использовать свойство width, тогда внутренние отступы не будут такими гигантскими.

Treefolk · 27.Март.2016 18:27:59

Закончив болеть и задвинув дела вернулся к обучению. Переписал код заново, кое-что пригладил, причесал и… добился 100%. Но, таки пришлось нарушить условие про кратность в двух местах.

Вот CSS:

html, body{
margin:0;
padding:0;
}
body{
width:450px;
height:300px;
padding-top:20px;
font-size:16px;
font-family:“Tahoma”, sans-serif;
line-height:1.3;
background:#34495e;
}
.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;
}
.login-form input[type=“checkbox”]{
vertical-align:middle;
margin-right:5px;
}

form {
margin: -20px 35px 0;
background-color: #FFFFFF;
width: 340px;
padding-left:40px;
}

h3 {
padding-top: 20px;
margin-bottom: 5px;
font-size: 20px;
}

.login-form input[type=“text”],
.login-form input[type=“password”] {

border: 2px solid black;
padding: 10px 15px;
width: 265px;

}

.login-form input[type=“text”] {
background: #f9f6f3 url("/assets/ifmo/icon-user.png") no-repeat 270px 10px;
margin-top: 10px;
}

.login-form input[type=“password”] {
background: #f9f6f3 url("/assets/ifmo/icon-lock.png") no-repeat 270px 10px;
margin-top: 8px;
margin-bottom: 15px;
}

a {
text-decoration: underline;
float:right;
margin-right: 40px;
}

.login-form input[type=“submit”]{
margin-top: 15px;
background-color: #000000;
color: white;
padding: 15px 0 15px;
width: 300px;
border: 0 solid black;
margin-bottom: 32px;
}

Ineska · 27.Март.2016 18:54:47

Что-то не дает ваш код у меня 100%… HTML-код может поменяли?

Treefolk · 27.Март.2016 18:56:53

    <!DOCTYPE html>
<html>
    <head>
        <title>Испытание 1: красивая форма</title>
        <meta charset="utf-8">
    </head>
    <body>
        <form class="login-form" action="/auth" method="post">
            <h3>Вход в кабинет</h3>
            <input type="text" placeholder="Логин">
            <br>
            <input type="password" placeholder="Пароль">
            <br>
            <input type="checkbox" id="remember_me"> <label for="remember_me">Запомните меня</label>
            <a>Я забыл пароль</a>
            <br>
            <input type="submit" value="войти">
        </form>
    </body>
</html>`

`Пожалуйста.

Ineska · 27.Март.2016 19:30:01

Можно добиться кратности пяти. Заголовок и поля сделать блочными. Из HTML-кода убрать все <br>, а расстояния между элементами делать с помощью margin.
В конце, правда, небольшая проблема с высотой самой формы, но умельцы в комментариях пишут, что можно добавить рамку снизу. Действительно работает.

Agrippina · 29.Март.2016 09:57:15

Помогите понять, что у меня происходит.
Вот HTML-код

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

    </form>

И выходит вот такая картинка (это мой электронный адрес )

Причем, если вместо placeholder писать value, а вместо type=“password” - type=“text”, то все выходит нормально. Я бы оставила, но тогда не смогу поставить иконку на поле пароля.
Браузер Хром. Что за чертовщина?