renovations

2015-03-07 19:26:10 +03:00 · 2015-03-07 19:26:10 +03:00 · 6ac9e3a500
commit 6ac9e3a500
parent dceccedb58
182 changed files with 275 additions and 324 deletions
--- a/8-css-for-js/11-margin/1-failing-margins/solution.md
+++ b/8-css-for-js/11-margin/1-failing-margins/solution.md
@ -0,0 +1,5 @@
+Ошибка заключается в том, что `margin` при задании в процентах высчитавается *относительно ширины*. Так написано [в стандарте](http://www.w3.org/TR/CSS2/box.html#margin-properties).
+
+При этом не важно, какой отступ: левый, правый. верхний или нижний. Все они в процентах отсчитываются от ширины. Из-за этого и ошибка.
+
+Ситуацию можно исправить, например, заданием `margin-top/margin-bottom` в пикселях, если это возможно или, в качестве альтернативы, использовать другие средства, в частности, `position` или `padding-top/padding-bottom` на родителе.
--- a/8-css-for-js/11-margin/1-failing-margins/task.md
+++ b/8-css-for-js/11-margin/1-failing-margins/task.md
@ -0,0 +1,43 @@
+# Нерабочие margin?
+
+[importance 3]
+
+В примере ниже находится блок `.block` фиксированной высоты, а в нём -- прямоугольник `.spacer`.
+
+При помощи `margin-left: 20%` и `margin-right: 20%`, прямоугольник центрирован в родителе по горизонтали. Это работает.
+
+Далее делается попытка при помощи свойств `height: 80%`, `margin-top: 10%` и  `margin-bottom: 10%` расположить прямоугольник в центре по вертикали, чтобы сам элемент занимал `80%` высоты родителя, а сверху и снизу был одинаковый отступ.
+
+Однако, как видите, это не получается. Почему? Как поправить?
+
+```html
+<!--+ autorun run -->
+  
+<style>
+  .block {
+    height: 150px;
+
+    border: 1px solid #CCC;
+    background: #eee;
+  }
+
+  .spacer {
+    margin-left: 20%;
+    margin-right: 20%;
+
+*!*   
+    height: 80%;
+    margin-top: 10%;
+    margin-bottom: 10%;
+*/!*
+
+    border: 1px solid black;
+    background: #FFF;
+  }
+</style>
+ 
+<div class="block">
+  <div class="spacer"></div>
+</div>
+```
+
--- a/8-css-for-js/11-margin/2-position-text-into-input/solution.md
+++ b/8-css-for-js/11-margin/2-position-text-into-input/solution.md
@ -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]
--- a/8-css-for-js/11-margin/2-position-text-into-input/solution.view/index.html
+++ b/8-css-for-js/11-margin/2-position-text-into-input/solution.view/index.html
@ -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>
--- a/8-css-for-js/11-margin/2-position-text-into-input/source.view/index.html
+++ b/8-css-for-js/11-margin/2-position-text-into-input/source.view/index.html
@ -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>
--- a/8-css-for-js/11-margin/2-position-text-into-input/task.md
+++ b/8-css-for-js/11-margin/2-position-text-into-input/task.md
@ -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` с подсказкой не должно быть лишних отступов, блоки до и после продолжают идти в обычном потоке.
--- a/8-css-for-js/11-margin/article.md
+++ b/8-css-for-js/11-margin/article.md
@ -0,0 +1,170 @@
+# Свойство "margin" 
+
+Свойство `margin` задаёт отступы вокруг элемента. У него есть несколько особенностей, которые мы здесь рассмотрим.
+[cut]
+## Объединение отступов
+
+Вертикальные отступы поглощают друг друга, горизонтальные -- нет.
+
+Например, вот документ с вертикальными и горизонтальными отступами:
+
+```html
+<!--+ autorun height=100 -->
+<body style="background: #aef">
+  <p style="*!*margin:20px;*/!* background:white">
+   
+    <span style="*!*margin:20px;*/!* background:orange">Горизонтальный 20px</span>
+    ← 40px →
+    <span style="*!*margin:20px;*/!* background:orange">20px Отступ </span>
+
+  </p>
+  <p style="*!*margin:15px;*/!* background:white">Вертикальный 20px</p>
+</body>
+```
+
+Расстояние по горизонтали между элементами `SPAN` равно `40px`, так как горизонтальные отступы по `20px` сложились.
+
+А вот по вертикали расстояние от `SPAN` до `P` равно `20px`: из двух вертикальных отступов выбирается больший `max(20px, 15px) = 20px` и применяется. 
+
+## Отрицательные margin-top/left
+
+Отрицательные значения `margin-top/margin-left` смещают элемент со своего обычного места.
+
+В CSS есть другой способ добиться похожего эффекта -- а именно, `position:relative`. Но между ними есть одно принципиальное различие.
+
+**При сдвиге через `margin` соседние элементы занимают освободившееся пространство, в отличие от `position: relative`, при котором элемент визуально сдвигается, но место, где он был, остается "занятым".**
+
+То есть, элемент продолжает полноценно участвовать в потоке.
+
+## Пример: вынос заголовка
+
+Например, есть документ с информационными блоками:
+
+```html
+<!--+ autorun height=400 -->
+<style>
+  div {
+    border: 1px solid blue;
+    margin: 2em;
+    font: .8em/1.25 Arial, sans-serif;
+  }
+  h2 { 
+    background: #aef;
+    margin: 0 0 0.8em 0;
+  }
+</style>
+
+<div>
+  <h2>Общие положения</h2>
+
+  <p>Настоящие Правила дорожного движения устанавливают единый порядок дорожного движения на всей территории Российской Федерации. Другие нормативные акты, касающиеся дорожного движения, должны основываться на требованиях Правил и не противоречить им.</p>
+</div>
+
+<div>
+  <h2>Общие обязанности водителей</h2>
+
+  <p>Водитель механического транспортного средства обязан иметь при себе и по требованию сотрудников милиции передавать им для проверки:</p>
+  <ul>
+  <li>водительское удостоверение на право управления транспортным средством соответствующей категории;</li>
+  <li>...и так далее...</li>
+  </ul>
+</div>
+```
+
+**Использование отрицательного `margin-top` позволяет вынести заголовки над блоком**.
+
+```css
+/* вверх чуть больше, чем на высоту строки (1.25em) */
+h2 {
+  margin-top: -1.3em;
+}
+```
+
+Результат:
+[iframe src="h2-margin-top" height=330 border=1 link]
+
+А вот, что бы было при использовании `position`:
+
+```css
+h2 {
+  position: relative;
+  top: -1.3em;
+}
+```
+
+Результат:
+[iframe src="h2-margin-top-position" height=330 border=1 link]
+
+**При использовании `position`, в отличие от `margin`, на месте заголовков, внутри блоков, осталось пустое пространство.**
+
+## Пример: вынос отчерка
+
+Организуем информацию чуть по-другому. Пусть после каждого заголовка будет отчерк:
+
+```html
+<div>
+  <h2>Заголовок</h2>
+  <hr>
+
+  <p>Текст Текст Текст.</p>
+</div>
+```
+
+Пример документа с такими отчерками:
+
+[iframe src="hr-margin-left-src" height=320 border=1 link]
+
+Для красоты мы хотим, чтобы отчерк `HR` начинался левее, чем основной текст. Отрицательный `margin-left` нам поможет:
+
+```css
+hr.margin { margin-left: -2em; }
+
+/* для сравнения */
+hr.position { position: relative; left: -2em; }
+```
+
+Результат:
+[iframe src="hr-margin-left" height=320 border=1 link]
+
+Обратите внимание на разницу между методами сдвига!
+<ul>
+<li>`hr.margin` сначала сдвинулся, а потом нарисовался до конца блока.</li>
+<li>`hr.position` сначала нарисовался, а потом сдвинулся -- в результате справа осталось пустое пространство.</li>
+</ul>
+
+Уже отсюда видно, что отрицательные `margin` -- исключительно полезное средство позиционирования!
+
+## Отрицательные margin-right/bottom
+
+Отрицательные `margin-right/bottom` ведут себя по-другому, чем `margin-left/top`. Они не сдвигают элемент, а "укорачивают" его.
+
+То есть, хотя сам размер блока не уменьшается, но следующий элемент будет думать, что он меньше на указанное в `margin-right/bottom` значение.
+
+Например, в примере ниже вторая строка налезает на первую:
+
+```html
+<!--+ autorun height=80 -->
+<div style="border: 1px solid blue; *!*margin-bottom: -0.5em*/!*">
+  Первый
+</div>
+
+<div style="border: 1px solid red">
+  Второй div думает, что высота первого на 0.5em меньше
+</div>
+```
+
+Это используют, в частности для красивых вносок, с приданием иллюзии глубины.
+
+Например:
+
+[iframe src="negative-margin-bottom" border=1 height=200 link="Посмотреть в отдельном окне" edit]
+
+## Итого
+
+<ul>
+<li>Отрицательные `margin-left/top` сдвигают элемент влево-вверх. Остальные элементы это учитывают, в отличие от сдвига через `position`.</li>
+<li>Отрицательные `margin-right/bottom` заставляют другие элементы думать, что блок меньше по размеру справа-внизу, чем он на самом деле.</li>
+<li>
+
+Отличная статья на тему отрицательных `margin`: [The Definitive Guide to Using Negative Margins](http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/)
+
--- a/8-css-for-js/11-margin/h2-margin-top-position.view/index.html
+++ b/8-css-for-js/11-margin/h2-margin-top-position.view/index.html
@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+  div {
+    border: 1px solid blue;
+    margin: 2em;
+    font: .8em/1.25 Arial, sans-serif;
+  }
+
+  h2 {
+    margin: 0 0 0.8em 0;
+    background: #aef;
+
+    position: relative;
+    top: -1.3em;
+  }
+  </style>
+</head>
+<body>
+
+<div>
+  <h2>Общие положения</h2>
+
+  <p>Настоящие Правила дорожного движения устанавливают единый порядок дорожного движения на всей территории Российской Федерации. Другие нормативные акты, касающиеся дорожного движения, должны основываться на требованиях Правил и не противоречить им.</p>
+</div>
+
+<div>
+  <h2>Общие обязанности водителей</h2>
+
+  <p>Водитель механического транспортного средства обязан иметь при себе и по требованию сотрудников милиции передавать им для проверки:</p>
+  <ul>
+  <li>водительское удостоверение на право управления транспортным средством соответствующей категории;</li>
+  <li>...и так далее...</li>
+  </ul>
+</div>
+
+
+</body>
+</html>
--- a/8-css-for-js/11-margin/h2-margin-top.view/index.html
+++ b/8-css-for-js/11-margin/h2-margin-top.view/index.html
@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+  div {
+    border: 1px solid blue;
+    margin: 2em;
+    font: .8em/1.25 Arial, sans-serif;
+  }
+
+  h2 {
+    margin: 0 0 0.8em 0;
+    background: #aef;
+
+    margin-top: -1.3em; /* или изменить margin выше */
+  }
+  </style>
+</head>
+<body>
+
+<div>
+  <h2>Общие положения</h2>
+
+  <p>Настоящие Правила дорожного движения устанавливают единый порядок дорожного движения на всей территории Российской Федерации. Другие нормативные акты, касающиеся дорожного движения, должны основываться на требованиях Правил и не противоречить им.</p>
+</div>
+
+<div>
+  <h2>Общие обязанности водителей</h2>
+
+  <p>Водитель механического транспортного средства обязан иметь при себе и по требованию сотрудников милиции передавать им для проверки:</p>
+  <ul>
+  <li>водительское удостоверение на право управления транспортным средством соответствующей категории;</li>
+  <li>...и так далее...</li>
+  </ul>
+</div>
+
+
+</body>
+</html>
--- a/8-css-for-js/11-margin/hr-margin-left-src.view/index.html
+++ b/8-css-for-js/11-margin/hr-margin-left-src.view/index.html
@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    div {
+      margin: 2em;
+      font: .8em/1.25 Arial, sans-serif;
+    }
+
+    h2 { margin-bottom: 0; }
+  </style>
+</head>
+<body>
+
+
+<div>
+
+  <h2>Общие положения</h2>
+  <hr class="margin">
+
+  <p>Настоящие Правила дорожного движения устанавливают единый порядок дорожного движения на всей территории Российской Федерации. Другие нормативные акты, касающиеся дорожного движения, должны основываться на требованиях Правил и не противоречить им.</p>
+</div>
+
+<div>
+  <h2>Общие обязанности водителей</h2>
+  <hr class="position">
+
+  <p>Водитель механического транспортного средства обязан иметь при себе и по требованию сотрудников милиции передавать им для проверки:</p>
+  <ul>
+  <li>водительское удостоверение на право управления транспортным средством соответствующей категории;</li>
+  <li>...и так далее...</li>
+  </ul>
+</div>
+
+
+</body>
+</html>
--- a/8-css-for-js/11-margin/hr-margin-left.view/index.html
+++ b/8-css-for-js/11-margin/hr-margin-left.view/index.html
@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    div {
+      margin: 2em;
+      font: .8em/1.25 Arial, sans-serif;
+    }
+
+    h2 { margin-bottom: 0; }
+    hr.margin { margin-left: -2em; }
+    hr.position { position: relative; left: -2em; }
+  </style>
+</head>
+<body>
+
+
+<div>
+
+  <h2>Общие положения (hr.margin)</h2>
+  <hr class="margin">
+
+  <p>Настоящие Правила дорожного движения устанавливают единый порядок дорожного движения на всей территории Российской Федерации. Другие нормативные акты, касающиеся дорожного движения, должны основываться на требованиях Правил и не противоречить им.</p>
+</div>
+
+<div>
+  <h2>Общие обязанности водителей (hr.position)</h2>
+  <hr class="position">
+
+  <p>Водитель механического транспортного средства обязан иметь при себе и по требованию сотрудников милиции передавать им для проверки:</p>
+  <ul>
+  <li>водительское удостоверение на право управления транспортным средством соответствующей категории;</li>
+  <li>...и так далее...</li>
+  </ul>
+</div>
+
+
+</body>
+</html>
--- a/8-css-for-js/11-margin/negative-margin-bottom.view/index.html
+++ b/8-css-for-js/11-margin/negative-margin-bottom.view/index.html
@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    .content {
+      background: #aef;
+      padding: 1em 2em 2em 2em;
+
+      margin-bottom: -1em;
+    }
+
+    .comment {
+      margin: 0 1em;
+      padding: .2em;
+      text-align: center;
+      background: black;
+      color: white;
+    }
+  </style>
+</head>
+<body>
+<div>У DIV'а с холодильниками стоит margin-bottom: -1em</div>
+
+<div class="content">
+  Наши холодильники - самые лучшие холодильники в мире!
+  Наши холодильники - самые лучшие холодильники в мире!
+  Наши холодильники - самые лучшие холодильники в мире!
+  Наши холодильники - самые лучшие холодильники в мире!
+</div>
+
+<span class="comment">
+  Так считают: 5 человек
+</span>
+
+<span class="comment">
+  Оставьте <u>свой</u> отзыв!
+</span>
+
+</body>
+</html>