И еще возник вопрос какими, все-таки, способами стараться избегать абсолютное позиционирование?
Простыми, ну в данном примере посмотрите как сделано и подумайте)
А так обычно отступами все сдвигается. Надо думать, что в данной ситуации будет рациональней.
НО Абсолют редко бывает рационален в таких задачах
@elemeNtk0, y меня тоже возник небольшой вопрос про абсолют. В каких вообще ситуациях он реально рационален и его стоит применять? Где это всё-таки имеет смысл? Заглянул снова в курс про абсолют, там написано так:
На практике абсолютное позиционирование часто применяют в декоративных целях, когда нужно аккуратно разместить какие-либо иконки, управляющие элементы или другие «рюшечки».
Судя по этому тексту, так его применения вполне можно избежать всегда или почти всегда, причём без каких-то особо сильных проблем (ИМХО). Т.е. получается, что «absolut’ы не нужны», так? Ведь в absolut’ном большинстве случаев можно вполне обойтись вообще без них. А вот по поводу их применения — я в каком-то из видео услышал, что оно может вызывать проблемы на практике (в видео рассматривались частые ошибки начинающих верстальщиков). Верно ли, что следует стараться вообще его избегать при написании кода в большинстве случаев, т.е. как можно чаще? Лучше обходиться без него?
И ещё. Верно ли, что если уж и использовать для чего-то absolute, то при этом родителю лучше всегда задавать relative, и отсчёт координат вести уже от него, а не от окна браузера?
Да, Вы правы. И абсолюты действительно являются частыми ошибками начинающих.
Я стараюсь его избегать по максимуму. Бывают в дизайне такие элементы, которые, к сожалению, без абсолютов не сделать, например:
- При наведении на строчку - должна плавно выезжать слева полоса высотой = высоте строки и шириной 5пикселей. + там же должна появляться полоса ( сделана она box-shadow) и чтобы ее перекрыть - как раз и пришлось делать абсолютом левую светлую полосу.
- Тут все аналогично стрелка должна быть “поверх” box-shadow
1 лайк
Ясно, спасибо за ответ, мне как-то в голову не приходили такие случаи.
Мне тоже =)
Не все сразу 
1 лайк
Подскажите, кто понимает, зачем паролю задан uppercase по умолчанию?
А походу незачем )
А как тогда сделать так, чтобы слово ПАРОЛЬ не писалось с заглавных букв? Просто удалить его из css-кода или как лучше сделать?
Я дезинформировал Вас слегка.
Заглянул в задание и понял, что это специально на проверку приобретенных знаний.
Вам всего-лишь надо показать, что вы умете переопределять стили, если я правильно понял смысл)
Просто укажите для инпутов с типами [text] и [password] text-transform:capitalize
А я так понял, это для того, чтобы сразу было видно, что не выполнен пункт задания:
• подсказки в полях созданы с помощью атрибута placeholder, стилизовать его не надо;
так что дописал у инпутов логина и пароля в HTML коде placeholder=“Логин” и placeholder=“Пароль” соответственно, и получил желаемое (плюс сразу подкрашенное ).
Гуд, я, видимо упустил этот момент 
Здравствуйте!
У меня возникли следующие трудности при прохождении задания: в мини-браузере результат кода визуально совпадает с образцом, но в окошке ниже во вкладке “Результат” картинка сильно отличается от образца, видны ошибки, и шкала соответствия то на “холодно”, то на “теплее”, но не больше.
Я использовала сайт CSS desk для того, чтобы понять, ошибается ли мини-браузер, но там результат моего кода тоже выглядит вполне пристойно: http://www.cssdesk.com/2VrCH
Таким образом, в мини-браузере и в CSS desk все нормально, а во вкладке “Результат” и по шкале соответствия какое-то безобразие 
Вот так выглядят результаты в мини-браузере и вкладке “Результат”:
То что показывает результат и есть правильное отображение.
Какой у вас браузер? раз такое решение показывает такую картинку в минибраузере
Спасибо за ответ!
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;
}Бросать НЕ стоит =)
Сейчас все разъясню.
- Вместо
spanнадо использовать заголовокh1. -
.login-form .title{ margin:0 0 15px; }. Вместо.login-form .title{ padding:0 0 15px 0;}. Вы должны «отталкивать» элемент нижний внешним отступом, а не внутренним расширять заголовок. - Для
input[type="text"]иinput[type="password"]Вы задаете ширину241px, ставим240px.
P.s. Временно надо отойти. Как появится время, допишу решение.
Спасибо за отклик elemeNtk0.
Сейчас у меня показывает так:
- сперва я использовал h1, но у меня тогда заголовок не совпадал.
- про padding and margin, даже не заметил
- input[type=“text”] и input[type=“password”], поставил 241 потому как border 2x2=4 и вышло 245 и плюс padding:10px 40px 10px 15px; выходило 241+4+40+15=300 если сделать 240, то станет 299?