ultrbi4

Я думаю автор спрашивает про такого типа реализацию

davidwalsh.name/responsive-design

Я бы подгружал каждый слайдер при открытии таба с помощью ajax. В слайдере может быть много картинок, а если человек не откроет этот таб, то и картинки и всю инфу для него грузить не нужно.

background-blend-mode: luminosity;
background:
    url("../img/bg-header.png") center top repeat-x,
    linear-gradient(top, #459fcc 0%, #efecec 570px);
background:
     url("../img/bg-header.png") center top repeat-x,
     -webkit-linear-gradient(top, #459fcc 0%, #efecec 570px);
background:
     url("../img/bg-header.png") center top repeat-x,
     -moz-linear-gradient(top, #459fcc 0%, #efecec 570px);

Количество знаков:
$('#site').val().length >= 4

Если символ в строке:
$('#site').val().indexOf(".")

ymapsapi.ya.ru/replies.xml?item_no=1946

Псевдоэлементы в помощь

Я бы сделал так.

1) transform: translateY(300px) translateX(300px) rotate (45dg), для слоя фона, если нужна относительное позиционирование, то через absolute.
2) Ширину и высоту этого слоя нужно сделать больше в два раза чем поле документа (например) width: 500px height: 500px
3) а потом по ховеру менять translateY(0) translateX(0)

Если иконки на белом фоне можно использовать filter: grayscale(), если нет, то нужно использовать canvas

#page_down
{ 
 margin-top: -200px (высота футера)
}

#page
{ 
 padding-bottom: 200px (отступ у контента, чтобы он не наезжал на футер)
}

Нужно гибко подходить к каждому проекту и исходить из его специфики. Если не пользоваться готовыми методологиями, то я обычно просматриваю прототипы и дизайн проекта и делю на смысловые блоки, они становятся фундаментом для систематизации CSS, это решает проблемы "пересечения свойств" и дает возможность разбить css используя определенную логику.

Вы сами ответили на свой вопрос в видео, исправьте на значение, которое Вы меняете в devtools.

Есть еще одно решение, но в ниже 9 ie не работает

.box {
	display:block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

#minibox {
	position: relative; 
	overflow:hidden;
	width:160px;
	height:160px;
}

Меню центрируется, просто у Вас указана ширина в 1000px, а количество элементов списка не набирается на эту ширину и они выравниваются по левому краю и тут возникает "оптический обман" ).

Решений несколько:

1) Стилизовать .main-menu (указав, например, ему фон)
2) Выровнять элементы списка относительно родителя

.main-menu{
    width: 1000px;
    list-style: none;
    padding: 0;
    font-size: 24px;
    margin: 0 auto;
    text-align: center;
}
.main-menu li{
    display: inline-block;
    margin: 0;
    padding: 0;
}

3) Либо подогнать ширину .main-menu под сумму width всех элементов списка.

Я делаю обычно так - область с контентом оборачиваю в div и делаю нужный padding-left