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

И еще возник вопрос какими, все-таки, способами стараться избегать абсолютное позиционирование?

Простыми, ну в данном примере посмотрите как сделано и подумайте)
А так обычно отступами все сдвигается. Надо думать, что в данной ситуации будет рациональней.
НО Абсолют редко бывает рационален в таких задачах

@elemeNtk0, y меня тоже возник небольшой вопрос про абсолют. В каких вообще ситуациях он реально рационален и его стоит применять? Где это всё-таки имеет смысл? Заглянул снова в курс про абсолют, там написано так:

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

Судя по этому тексту, так его применения вполне можно избежать всегда или почти всегда, причём без каких-то особо сильных проблем (ИМХО). Т.е. получается, что «absolut’ы не нужны», так? Ведь в absolut’ном большинстве случаев можно вполне обойтись вообще без них. А вот по поводу их применения — я в каком-то из видео услышал, что оно может вызывать проблемы на практике (в видео рассматривались частые ошибки начинающих верстальщиков). Верно ли, что следует стараться вообще его избегать при написании кода в большинстве случаев, т.е. как можно чаще? Лучше обходиться без него?
И ещё. Верно ли, что если уж и использовать для чего-то absolute, то при этом родителю лучше всегда задавать relative, и отсчёт координат вести уже от него, а не от окна браузера?

Да, Вы правы. И абсолюты действительно являются частыми ошибками начинающих.
Я стараюсь его избегать по максимуму. Бывают в дизайне такие элементы, которые, к сожалению, без абсолютов не сделать, например:

  1. При наведении на строчку - должна плавно выезжать слева полоса высотой = высоте строки и шириной 5пикселей. + там же должна появляться полоса ( сделана она box-shadow) и чтобы ее перекрыть - как раз и пришлось делать абсолютом левую светлую полосу.
  2. Тут все аналогично стрелка должна быть “поверх” box-shadow
1 лайк

Ясно, спасибо за ответ, мне как-то в голову не приходили такие случаи.

Мне тоже =)
Не все сразу :wink:

1 лайк

Подскажите, кто понимает, зачем паролю задан uppercase по умолчанию?

А походу незачем )

А как тогда сделать так, чтобы слово ПАРОЛЬ не писалось с заглавных букв? Просто удалить его из css-кода или как лучше сделать?

Я дезинформировал Вас слегка.
Заглянул в задание и понял, что это специально на проверку приобретенных знаний.
Вам всего-лишь надо показать, что вы умете переопределять стили, если я правильно понял смысл)
Просто укажите для инпутов с типами [text] и [password] text-transform:capitalize

А я так понял, это для того, чтобы сразу было видно, что не выполнен пункт задания:

• подсказки в полях созданы с помощью атрибута placeholder, стилизовать его не надо;

так что дописал у инпутов логина и пароля в HTML коде placeholder=“Логин” и placeholder=“Пароль” соответственно, и получил желаемое (плюс сразу подкрашенное ).

Гуд, я, видимо упустил этот момент :blush:

Здравствуйте!

У меня возникли следующие трудности при прохождении задания: в мини-браузере результат кода визуально совпадает с образцом, но в окошке ниже во вкладке “Результат” картинка сильно отличается от образца, видны ошибки, и шкала соответствия то на “холодно”, то на “теплее”, но не больше.
Я использовала сайт CSS desk для того, чтобы понять, ошибается ли мини-браузер, но там результат моего кода тоже выглядит вполне пристойно: http://www.cssdesk.com/2VrCH

Таким образом, в мини-браузере и в CSS desk все нормально, а во вкладке “Результат” и по шкале соответствия какое-то безобразие :slight_smile:

Вот так выглядят результаты в мини-браузере и вкладке “Результат”:

То что показывает результат и есть правильное отображение.
Какой у вас браузер? раз такое решение показывает такую картинку в минибраузере

Спасибо за ответ!
Firefox у меня браузер.
А Вам видно косячное решение везде, или тоже только во вкладке “Результат”?

Установила Chrome, посмотрела. Видимо, больше похоже на правду, но разница между мини-браузером и “Результатом” все равно очень видна.

Я, конечно, не спорю, что код не блестящий, но пирям-таки теряюсь, как его править, если не вижу текущего состояния. о_О

Ну явные ошибки — использование br и огромный padding справа у инпутов.
А так. Посмотрите мое решение (подправленное @juwain’ом), должно расставить всё на свои места.
Если будет непонятно — пишите, разъясню. А так в начале темы у меня есть подробнейший пост на эту тему.

Ребята, что у меня в коде не так?
Уже никакого желания нет продолжать мазохизм!
Mac OS / Chrome Version 41.0.2272.104 (64-bit)

<body>
    <form class="login-form" action="/auth" method="post">
        <span class="title">Вход в кабинет</span>
        <input type="text" placeholder="Логин">
        <input type="password" placeholder="Пароль">
        <label><input type="checkbox" name="remember">Запомните меня</label>
        <a href="#">Я забыл пароль</a>
        <input type="submit" value="Войти">
    </form>
</body>
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:0 5px 0 0px;
}
.login-form{
    width:300px;
    padding:20px 40px 30px 40px;
    }
.login-form .title{
    display:block;
    font-size:20px;
    padding:0 0 15px 0;
    }
.login-form input[type="text"],
.login-form input[type="password"]{
    width:241px;
    border:2px solid black;
    padding:10px 40px 10px 15px;
    margin-bottom:10px;
    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;
}

Бросать НЕ стоит =)
Сейчас все разъясню.

  1. Вместо span надо использовать заголовок h1.
  2. .login-form .title{ margin:0 0 15px; }. Вместо .login-form .title{ padding:0 0 15px 0;}. Вы должны «отталкивать» элемент нижний внешним отступом, а не внутренним расширять заголовок.
  3. Для input[type="text"] и input[type="password"] Вы задаете ширину 241px, ставим 240px.

P.s. Временно надо отойти. Как появится время, допишу решение.

Спасибо за отклик elemeNtk0.

Сейчас у меня показывает так:

  • сперва я использовал h1, но у меня тогда заголовок не совпадал.
  • про padding and margin, даже не заметил :smile:
  • input[type=“text”] и input[type=“password”], поставил 241 потому как border 2x2=4 и вышло 245 и плюс padding:10px 40px 10px 15px; выходило 241+4+40+15=300 если сделать 240, то станет 299?