Igor Schnaider

link

vertical-align :-)

По-моему, начинать с Фленагана не очень :-)

http://codepen.io/anon/pen/LGOvNY

хе-хе Может, опечатка. В оригинальном варианте (на английском) посмотрите. А вообще, по-моему книжка отстой полный. Зачем вы ее вообще читаете? :-)

То есть, например, прописали линк на стили <link rel="stylesheet" href="styles/main.css"/> и он создает 'styles/main.css'. После обновления настройки на hotkeys слетели, и я не помню как она называется и найти не могу.

Еще раз, контекст позиционирование установлен на UL. Значит, псевдоэлемент располагается по z-оси относительно него, поэтому он никак не может быть под фоном списка. Чтобы сделать, как вы хотите, нужно убрать этот контекст от UL. То есть, уберите z-index с UL, а для псевдоэлемента поставьте отрицательное значение z-index.

Например, так.

Не дословно: Поэтому когда меняете размеры body, на фон канваса это ведь никак повлиять не может.

Там ведь так сказано: А какие размеры вы поставите на body - тут вообще не имеет никакого значения.

...и фон от body становится по всему вьюпорту. Вы об этом?

Покажите вашу верстку.

link

Это не баг, такое поведение определяет спецификация.

Можно изменить размеры в Illustrator: Параметры документа → Редактировать монтажные области. Но если вы уберете аттрибуты width и height, то SVG заполнит контейнер сам.

Не уверен, но может из-за кавычек?

Вам ведь никто не запрещает пользоваться собственными стилями. Используйте несколько классов на элементе, например: .row.form-group .row - стандартные стили bootstrap, а с помощью .form-group дополните своими стилями.

Тогда уж через data-атрибуты.

<style> a:visited {color: #FF0000;} a:hover {color: #FFA500; } </style> В SVG нет атрибута color. Есть fill. То есть нужно так: a:hover text { fill: #FFA500; }

На CSS можно сделать с помощью column. Не очень конечно, но как вариант :-) Ну и скриптами, типа Masonry и подобными.

Обрезаются, потому что выходят за края viewBox'а. Добавьте в CSS страницы, увидите где границы: object { outline: 1px solid; }

Используйте флаг global (g).

.menu > li:hover > ul { position: absolute; /* ранее определено */ z-index: 1; display: block;}Это значит, что ul создает контекст форматирования и псевдоэлемент позиционируется по z-оси уже относительно него. UPD: По второму вопросу. Это определено порядком отрисовки. Позиционированные потомки с z-index: auto или 0 будут выше, чем текст. Но ниже, если z-index меньше 0. То есть, можно так написать: .menu ul::before { /* ... */ z-index: -1; } Тогда фон будет перекрывать его.

Ну, вообще вы просто по символам строки 'url(colors)' проходитесь. Нужно как-то так: slider.style.backgroundImage = 'url(' + colors[i++ % colors.length] + ')'; Но поскольку у вас там все вперемешку, и цвета, и картинки, может лучше массив по-другому собрать: var colors = ['url(http://i.dailymail.co.uk/i/pix/2005/12/merkelL091205_450x200.jpg)', 'green', 'blue', 'gray', 'orange'];( /* ... */ slider.style.background = colors[i++ % colors.length];

setTimeout("slide1.style.zIndex=2;", 3000) (где 2 кавычки или одинарные поставить, или убрать, или экранировать нужно).