vlasenkov

Спасибо, сделал так, вроде неплохо получилось:

background-image: -webkit-linear-gradient(105deg, #fff 0%, #fff 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 75%, #fff 75%, #fff 100%);

2 minutes ago, Igor Schnaider said:

Да тут несколькими способами можно: через clip-path, градиентами, треугольниками, как вы писали. Или через transform skew попробуйте. Что касается расстояний, для параллакса все равно придется брать с запасом.

Градиентами что-то новенькое. Т/е можно сделать полоски при которой 1 сверху, 1 снизу и посередине прозрачность? Поделитесь пожалуйста ссылкой по реализации

Собственно давно уже бьюсь с этой проблемой и прошу о помощи, т/к решения не нашел. Есть картинка (во вложении), нужно сделать также.

Варианты с просто взять и такую же картинку (с полосами) вставить как фон не подходят, т/к потом нужно будет сделать параллакс эффект + некоторые расстояния получаются не точными до верхних/нижних границ от картинки.

Уже пробовал и поворачивать изображение и треугольники, но ничего не получается, либо слишком не устойчивое.

Прошу помощи, наверняка кто-то сталкивался с такой задачей раньше.

Подписался на извещение об ответах  и ничего не пришло, захожу, а тут столько ответов. Всем спасибо.

А есть ли русское описание?

Правильно ли я понял, что склейкой занимается отдельный js, который надо подключить? В идеале этим же должен заниматься сервер, а не клиентская часть. Или я чего-то не понимаю?

Здравствуйте!

Столкнулся с доработкой чужой верстки и увидел такой момент в html:

    <!-- CSS Theme -->
    <!-- build:css assets/css/main.css -->
    <link rel="stylesheet" type="text/css" href="assets/css/main.css" />
    <!--<link rel="stylesheet/less" type="text/css" href="assets/css/main.less" />
    <script src="assets/js/less.min.js"></script>-->
    <!-- endbuild -->

Подскажите пожалуйста что это за конструкция и что она делает? Поиск по интернету мне ничего не дал, мои догадки, что она сразу формирует css файл из less. Но как это тогда работает и что для этого нужно, было бы полезно знать самому и делать также.

Спасибо.

P.S.
Я не смог вставить этот код кодом, потому что не работает почему-то. Извиняюсь за неудобства.

https://jsfiddle.net/sashadev/jq78dd98/

Спасибо, ваш вариант намного лучше по мне

Использовал скрипт указанный выше, у второго блока при изменении ширины первого уменьшал/увеличивал ширину.

Если кто-то знает какое-то готовое решение, было бы замечательно.

Здравствуйте!

Даже не знаю как назвать тему. В общем ищу скрипт или реализацию того как это сделано на http://jsfiddle.net/

Т/е там есть 4 блока и у каждого можно изменить границу. Я помню что у фреймов так можно сделать, но есть ли что-то с блоками такое же?

Подскажите пожалуйста. Спасибо!

Нашел нечто подобное - http://jqueryui.com/resizable/#synchronous-resize

Но интересует разделение области/слоя/экрана на 2 части граничащих, уменьшая одну - вторая увеличивается и наоборот. Как таблицы в Экселе наверное.

Это лишь догадка, но как минимум - сравните версии jquery из демо и ту, что на вашем сайте.

Это тоже сравнивал, увы никак. И на своем менял версии и на демо, все одно и тоже, на демо работает, у меня только в ФФ, в Хроме - нет.

Здравствуйте!

Появилась проблема. Подлкючаю скрипт для плавающих блоков - fixto.js. Все отлично работает в ФФ, но в Хроме (пока только там) выдает ошибку "Cannot read property 'offsetHeight' of undefined". Причем демо скрипта в Хроме отлично работает. Перебровал уже кучу скриптов других, но ниодин не подходит под мои нужды.

Т/к демо работает, то видимо проблема в моем подключении скрипта или в том как вызываю. Не знаю в общем, правил/переставлял/менял, но ничего не помогает.

Посмотреть можно здесь - http://s16.ru/i/fznda/house.html

Если нужны еще какие-то входные данные, напишите пожалуйста. Буду очень презнателен за помощь, мучаюсь с этим уже 3 день.

Спасибо большое. Опять моя невнимательность.

Здравствуйте!

Возникла такая проблема. Верстал себе как обычно, но при про смотре в Safari под MacOS (именно под МакОС, т/к на Винде в сафари все ок) у меня почему-то пропадают стили (или не знаю как это назвать). Т/е стиль прописан у элемента, но он не отображает его как надо и в отладчике он его не видит. В остальных браузерах все ок.

http://s16.ru/i/gazon/

Начиная с "Типовые решения и цены", стили уже не работают.

Например у "Типовые решения и цены" прописан стиль:

.i-section h1 {	text-transform: uppercase;	text-align: center;	color: #edb730;	font-size: 312.5%;}

Но как видите ни цвет, ни центрирование, ни размер и т/д не такой.

Если кто сталкивался с такой проблемой - помогите пожалуйста, что не так? В первый раз с таким сталкиваюсь.

Проблема в том, что не только у меня так, у друзей такая же ситуация. Более того я заметил, что если обновлять страницу с очисткой кэша, то шрифты не отображаются, иначе все нормально

Здравствуйте!

Возникла следующая проблема. Есть форум - http://blog.springo.com.ua/ на нем в контентной части нестандартный шрифт, который подгружается через Гугл. Проблема в том, что когда переходишь на блог, то все отображается, но если ты перезагрузишь страницу, то текст (где нестандартный шрифт) исчезает (как я понимаю просто не подгружается шрифт). Если же обновить путем нажатия Enter в адресной строке, то все опять замечательно.

Прошу помощи разобраться в этом.

Catherine, понятно спасибо. Я уже думал, что какого-то секрета не знаю

Я просто не понимаю, как правильно верстать такие фоны.

1. Брать целиком верхнюю часть фона (целой картинкой) 1900 шириной (например). Потом брать повторяющуюся середину, тоже шириной 1900 и целиком нижнюю часть фона такой же ширины. Далее использовать background-size: 100%;

2. Можно еще разделить макет на три основных колонки, слева и справа колонка повторяющегося фона.

В общем хотел спросить совета как вы сами верстаете такие фоны, чтобы еще и резиновость была. И что для этого должно быть учтено в макете? Может быть вообще такие фоны резиново сверстать нельзя?

Здравствуйте!

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

Пример макета ниже. Буду очень благодарен, если подскажете как верстать резиново такие фоны.

https://st.fl.ru/projects/upload/201401/f_73452cd2e47e535f.jpg

Спасибо!

Нужен именно ресайз или вы делаете адаптивную верстку. Может быть тогда подключать разные фоны под разные разрешения монитора, в пределах разумного конечно?

Можно сделать ее фоном.

Дело в том, что вам надо менять сам HTML (шаблон).

Когда вы переходите в раздел "Материалы" (например), то в меню "Материалы" остаются той же ссылкой, поэтому она не меняется. Стилями тут не обойтись. Нужно менять шаблон, т.е. при переходе в какой-либо раздел, у ссылки ведующий на этот раздел менять стиль (или убирать ссылку с раздела в меню). Это делается или через PHP или через их язык в самом шаблоне.

Как-то так.

Проблему в корне я так и не решил, просто для этой страницы переместил футер и поставил его после табов, вроде заработало. Если кто-то подскажет в чем же все-таки проблема, буду очень благодарен опыт все-таки.

Посмотрите, все работает - http://jsfiddle.net/Sk7a3/

А сейчас в чем проблема, он же итак по середине экрана, даже когда экран уменьшается?

Можно сделать так:

HTML:

<ul>
	 <li><img..... /> Привет</li>
	 <li><img..... /> Привет</li>
	 <li><img..... /> Привет</li>
	 <li><img..... /> Привет</li>
</ul>

CSS:

ul { list-style: none; }
ul li { width: 200px; height: 160px; margin: 10; float: left; }

Здравствуйте.

Не могу никак решить проблему с футером на этой странице - http://hunt.su/product/brjuki-deerhunter-selous-safari-3604-024/ в IE7 он поднимается вверх. В общем почему-то слой wrapper не видит внутри себя других блоков, поэтому футер и поднимается. Обычно я боролся с этим добавляя в конец clear: both, но почему-то не помогает. Пытался еще overflow: hidden добавить wrapper, но это тоже не решает проблемы. Причем проблема только на этой странице, на других, где нет ТАБов, все хорошо, может в них проблема.

Заранее всем спасибо.