jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

renovations

Browse source
This commit is contained in:
Ilya Kantor 2015-03-07 19:26:10 +03:00
parent dceccedb58
commit 6ac9e3a500
182 changed files with 275 additions and 324 deletions
Download patch file Download diff file Expand all files Collapse all files

30
8-css-for-js/11-margin/2-position-text-into-input/solution.md Normal file
View file

@ -0,0 +1,30 @@
# Подсказка
Надвиньте элемент с текстом на `INPUT` при помощи отрицательного `margin`.
# Решение
Надвинем текст на `INPUT` при помощи отрицательного `margin-top`. Поднять следует на одну строку, т.е. на `1.25em`, можно для красоты чуть больше -- `1.3em`:
Также нам понадобится обнулить "родной" `margin` у `INPUT`, чтобы не сбивал вычисления.
```html
<!--+ run -->
<style>
input {
*!*margin: 0;*/!*
width: 12em;
}
#placeholder {
color: red;
*!*
margin: -1.3em 0 0 0.2em;
*/!*
}
</style>
<input type="password" id="input">
<div id="placeholder">Скажи пароль, друг</div>
```
[edit src="solution"]Полный код решения[/edit]

27
8-css-for-js/11-margin/2-position-text-into-input/solution.view/index.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
input {
margin: 0;
width: 12em;
}
#placeholder {
color: red;
margin: -1.3em 0 0 0.2em;
}
</style>
</head>
<body>
<div>Добро пожаловать</div>
<input type="password" id="input">
<div id="placeholder">Скажи пароль, друг</div>
<div>.. и заходи</div>
</body>
</html>

17
8-css-for-js/11-margin/2-position-text-into-input/source.view/index.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div>Добро пожаловать</div>
<input type="password" id="input">
<div id="placeholder">Скажи пароль, друг</div>
<div>.. и заходи</div>
</body>
</html>

15
8-css-for-js/11-margin/2-position-text-into-input/task.md Normal file
View file

@ -0,0 +1,15 @@
# Расположить текст внутри INPUT
[importance 5]
Создайте `<input type="password">` с цветной подсказкой внутри (должен правильно выглядеть, не обязан работать):
[iframe src="solution" height=90 border="1"]
В дальнейшем мы сможем при помощи JavaScript сделать, чтобы текст при клике пропадал. Получится красивая подсказка.
P.S. Обратите внимание: `type="password"`! То есть, просто `value` использовать нельзя, будут звёздочки. Кроме того, подсказка, которую вы реализуете, может быть как угодно стилизована.
P.P.S. Вокруг `INPUT` с подсказкой не должно быть лишних отступов, блоки до и после продолжают идти в обычном потоке.