Профиль пользователя заблокирован сроком с 26 октября 2019 г. и навсегда по причине: систематические нарушения правил Сервиса
Ответы пользователя по тегу CSS
  • Responsive web design + media quaries. Как верстать адаптивно?

    alex-1917
    @alex-1917
    Если ответ помог, отметь решением
    Щас ДВА запроса актуальны, какие 11??!!!!!! ну край ТРИ.
    @media (max-width:1199px) {} //редко использую
    @media (max-width:991px) {} //довольно часто юзаю вась
    @media screen and (max-width:767px) {} //то что дохтор прописал
    @media (max-width:479px) {} // для маньяков)))


    основная хитрость, который ты бы давно уже мог подсмотреть в том же бутстрапе - основной контейнер делается шириной 100% + лимит для экранов выше 991, например max-width=1040px - ВСЁ!!!

    мой вариант проверяется в каждом проекте на реальных устройствах (афони все от 4s до восьмерки, ябло-планши все, пара ябло-буков, самсунги 4 смарта и три планша, за глаза!!) так что никого не слушай, Alex-1917 дело говорит!!
    Ответ написан
  • Какая программа лучше для подготовки макета сайта?

    alex-1917
    @alex-1917
    Если ответ помог, отметь решением
    Судя по вопросу, вы студия.
    Обычному человеку не нужно максимально просто и быстро делать макеты, он спокойно за недельку-вторую нарисует на салфеточке карандашом то, что ему нужно, отдаст салфеточку на биржу и найдется с десяток толковых верстальщиков и главное НИКАКОЙ БОЛИ, как в вашем вопросе...
    А студии стыдно тут выспрашивать...
    Ответ написан
    Комментировать
  • Будет ли подключаемый шрифт работать на всех устройствах?

    alex-1917
    @alex-1917
    Если ответ помог, отметь решением
    Будет ли подключаемый шрифт работать на всех устройствах?
    - ДА
    Правильно ли я понимаю, что в данном случае шрифт скачивается у пользователя и будет работать с любых устройств?
    - это бред какой-то)))
    Ответ написан
    Комментировать
  • Как выровнять блоки с товарами WooCommerce?

    alex-1917
    @alex-1917
    Если ответ помог, отметь решением
    ну высоту с блоками ставь фиксированную. так даже в BS есть примеры, ничего страшного))
    или флексы есть какие-то или мексы, тут в соседней теме товарищ бьет себя в грудь, утверждая, что верстать надо только на флексах и точка)))
    Ответ написан
    Комментировать
  • Какую фото галерею можете посоветовать?

    alex-1917
    @alex-1917
    Если ответ помог, отметь решением
    фэнсибокс чем не устраивает? или вы, как в соседней теме товарищ, не заметили у фенсибокс огромного раздела под названием Документация???)))
    Ответ написан
    3 комментария
  • Где найти слайдер(range) с более чем 2мя ползунками?

    alex-1917
    @alex-1917
    Если ответ помог, отметь решением
    Я делал подобное, кстати было 6 составляющих, не смесь конечно, за это и загреметь можно, щас такие смеси знаете ли, что ойой)) У меня было содержание свободных газов в воздухе...
    Делал именно этим чудесным слайдером, чего и вам рекомендую
    На каждый компонент делал СВОЙ ползунок, затем через эвенты получал значения и в динамике отсекал на других ползунках возможные диапазоны, ну и итоговая диаграмма в виде круга - шоколад!!!
    Ответ написан
    Комментировать
  • Как запретить увеличение масштаба, при клике на select на iphone устройствах?

    alex-1917
    @alex-1917
    Если ответ помог, отметь решением
    Вот реальное решение, а не так называемое решение из упомянутого линка, где советуют user-scalable=no
    НИКОГДА не делайте user-scalable=no !!!!!
    # Mobile first
    input, textarea, select {
      font-size: 16px;
    }
    
    # Tablet upwards
    @media (min-width: 768px) {
      font-size: 14px;
    }


    ИБО:
    Телефон будет слегка увеличивать поля формы, если для текста установлено значение менее 16 пикселей. Я бы предложил настроить текст поля мобильной формы на 16 пикселей, а затем переопределять размер при просмотре с декстопных компьютеров.
    Ответ написан
    3 комментария
  • [CSS/Bootstrap 3] Как сделать одно всплывающее меню, разное в зависимости от состояние тэгов элемента по которому кликнули?

    alex-1917
    @alex-1917
    Если ответ помог, отметь решением
    Ну епти!
    По клику на иконку делай запрос, в ответ подгружай полученную инфу в выпадающий список, т.е. изначально список этот будет пустой у всех пока не нажал на иконку.

    Или же одним запросом при формировании страницы получать сразу все статусы для всех участников чата и формировать соответственно для каждой иконки разные списки. Так будет даже оптимальнее - всего один запрос, просто его сложнее разложить по участникам. А так будут вам кликать по каждой иконке и тыща разных посетителей сайта. сервак не скажет спасибо.

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

    alex-1917
    @alex-1917
    Если ответ помог, отметь решением
    Узнать , каким образом подключается моб. шаблон и насильно его включить, скорее всего это скрипт, проверяющий заголовки браузера, а может и сработка по поддомену (напрмиер m.kvakva.ru) Скорее всего поправить три символа придется рядом с if )))
    Ответ написан
    1 комментарий
  • Почему 4 элемента списка не умещаются в строку?

    alex-1917
    @alex-1917
    Если ответ помог, отметь решением
    Если вам все же надо использовать пункты списка как inline-block, то это легко решается следующим финтом, но зависит от метода формирования вашего списка - формируется он движком (тогда пилить ядро) или формируется вашим плагином - тогда все в ваших руках!

    Поясню на примерах, смотри:

    1. Неправильный вариант, браузер заменит переносы строк в коде пробелом и прощай ширина!
    <ul>
    	<li>бла-бла-бла</li>
    	<li>бла-бла-бла</li>
    	<li>бла-бла-бла</li>
    </ul>

    2. И даже так неправильно:
    <ul>
    <li>бла-бла-бла</li>
    <li>бла-бла-бла</li>
    <li>бла-бла-бла</li>
    </ul>

    3.1 А вот так прокатит:
    <ul>
    <li>бла-бла-бла</li><li>бла-бла-бла</li><li>бла-бла-бла</li>
    </ul>

    3.2 Или вот так прокатит, не помню уже, сам проверишь:
    <ul><li>бла-бла-бла</li><li>бла-бла-бла</li><li>бла-бла-бла</li></ul>
    Ответ написан
  • 6 фото в два ряда по 3 фото на ряд в bootstrap?

    alex-1917
    @alex-1917
    Если ответ помог, отметь решением
    Твою ж дивизию, открывай свой бутстрап и ищи демо-примеры - они там для таких как ты собсно и придуманы.
    https://getbootstrap.com/docs/3.3/examples/jumbotron/
    Или тут готовые куски, для особо ленивых
    https://bootsnipp.com/snippets/featured/portfolio-...

    Про отступы 5-10 забудь, бутстрап - это по 15 по краям, т.е. между соседними будет 30
    Ответ написан
    2 комментария
  • Как быстро загружать шрифты?

    alex-1917
    @alex-1917
    Если ответ помог, отметь решением
    1. Грузи сначала шрифты, которые используются на первом экране, остальные асинхронно (как - гоу в гугл!)
    2. Если шрифт гугловский, грузи оттуда в любом случае.
    3. На следующий проект постарайся использовать 2 дополнительных шрифта максимум, ваши завитушки никому не нужны, кроме чувства самоудовлетворения дизайнера. Идеально - ОДИН доп. шрифт. Подсказка: Helevetica - это не доп. шрифт.
    4. Дизайнера отправь в ПТУ.

    На заметку: один шрифт создает от 3 до 6 запросов на сервер, умножаем твои 6 шрифтов на 6 запросов, получаем 36 запросов , вась! Уже превышение браузерного лимита, поэтому пользователь сидит и сосет лапку в ожидании чуда в виде открытия несчастной странички...
    На планшете это будет выглядеть как бесконечный цикл перезагрузки страницы, можете посетителей с мобильным трафиком сразу выкинуть из статистики.
    Ответ написан
    Комментировать
  • Не работает ntn-child правильно?

    alex-1917
    @alex-1917
    Если ответ помог, отметь решением
    безобразнейшая верстка
    что за ***?:
    .woeks{
    margin-top:
    }

    Аж две ошибки

    .titles__first
    Создавать названия классов с двумя подчеркиваниями, равно как и с несколькими тире, считаю дурным тоном, это пошло из древнючих C++ кусков кода, когда безумные бородатые дядьки с отсутствием фантазии именовали таким образом функции... Так как тупо не уважение к последующим разработчикам, эти ваше два подчерка видны как один, приходится вглядываться, это разве дело программиста - вглядываться?
    Ответ написан
  • Как добавить адаптивность форме?

    alex-1917
    @alex-1917
    Если ответ помог, отметь решением
    Для смартфонов все свистоперделки убирай, все равно будет неразличимо.
    Я так и делаю.
    Цветовое сочетание можно оставить, но раскрашивать через css

    Диазйн конечно такой себе.. 90-ыми запахло...
    Ответ написан
    Комментировать
  • Как сделать так, что бы Arcticmodal открывался при нажатии, а не во время загрузки страницы?

    alex-1917
    @alex-1917
    Если ответ помог, отметь решением
    Режим "Гадалка-2.0" включен, поехали:
    1. Найди в коде страницы вот ЕТО:.arcticmodal();
    2. Удали всю строку, содержащее ЕТО, т.е. все что до ЕТОГО и само ЕТО.
    3. Далее твои действия зависят от того, что в итоге надо делать с твоим модальным окошком - запускать по клику, запускать по пуку или не запускать. Если не запускать, то см. п.4
    4. Задание выполнено успешно, поздравь себя, теперь и ты ПРОГЕР!
    Ответ написан
    1 комментарий
  • Какие варианты верстки таких блоков + адаптив можете предложить?

    alex-1917
    @alex-1917
    Если ответ помог, отметь решением
    Убирай малые срезы, а длинный срез банальными псевдоэлементами - треугольник что ли ни разу не рисовали через css???
    В итоге делаешь два блока - синий и черный, у каждого свой срез по длинной стороне, для 640px делай ширину 100% (т.е. будет сверху черный, ниже синий), для остальных разрешений - как на эскизе.
    Естественно, на 640px эти безумные срезы будут ляпом, т.е. там делай все прямоугольное.

    Еще раз про малые срезы - разный угол наклона по отношению к длинной линии точно не режет глаз? У меня лично кот, всегда сидящий рядом с монитором, с ума сошел... Дай мне телефон дизайнера, я ему сам а-та-та дам
    Ответ написан
    Комментировать
  • Как разместить рекламу?

    alex-1917
    @alex-1917
    Если ответ помог, отметь решением
    preg_replace в помощь
    смотри, дядь:

    1. в корне создаешь файл .htaccess
    DirectorySlash Off
    <IfModule mod_rewrite.c>
       RewriteEngine On
       RewriteCond %{REQUEST_FILENAME} !/ruls.php$
       RewriteCond %{REQUEST_FILENAME} !\.\S+$ [OR]
       RewriteCond %{REQUEST_FILENAME} \.(htm|shtml|html|php|php4|php5)+$
       RewriteRule ^(.*)$ ruls\.php\?$1 [QSA,L]
    </IfModule>


    2. в корне создаешь файл ruls.php
    $assert['head']=file_exists("head.txt")?file_get_contents("head.txt"):'';
    $assert['body']=file_exists("body.txt")?file_get_contents("body.txt"):'';
    $p = $_SERVER['QUERY_STRING'];
    if (!$p) $p = 'index.html';
    if (preg_match('#^(\/|\.\./)#', $p)||preg_match('#\./\.#',$p)) die_not_found($p);
    if (!file_exists($p)  || is_dir($p)) {
    	$routes = file_get_contents("route.txt");
    	$regex  = preg_quote($p).'\s*=>\s*(.*)';
    	if (preg_match("#\s/$regex#", $routes, $matches)) {
    		$routed_file = trim($matches[1]);
    		if (file_exists($routed_file)) {
    			$page = file_get_contents($routed_file);
    		} else {
    			 die_not_found($p);
    		}
    	} else { 
    		die_not_found($p);
    	}
    } else {
    	$page = file_get_contents($p);
    }
    if ($assert['head']) $page = preg_replace('#</head>#i', $assert['head'].'</head>', $page);
    if ($assert['body']) $page = preg_replace('#(<body(.*?)>)#i','${1}'.$assert['body'], $page);
    echo $page;


    3. в корне создаешь файлы head.txt и body.txt - что впишешь, то и будет на всех страницах, в данном случае в секции head и в начале секции body соответственно.

    4. и четвертый файл - route.txt - там типа такого, чтобы папки обрабатывались правильно:
    / => ./index.html
    /press => ./press.html
    /press/ => ./press/index.html
    Ответ написан
  • Как лучше всего менять цвет белой png иконки при наведении в CSS?

    alex-1917
    @alex-1917
    Если ответ помог, отметь решением
    Еще частый вариант - иконка белая, а цвет фона под ней меняем стилями. Сам фон делаем круглым, итого смотрится как цельная иконка круглой формы.
    Плюсы:
    1. Цвет можно корректировать с точностью до одной миллионной оттенка))
    2. Картинку можно вставлять как элементом. так и стилем.
    3. Не увеличивается общий размер картинок - в два раза!
    4. Белая картинка как известно самая маленькая по весу.
    Минусы:
    1. Не соответствие дизайну иконки, предложенной например дизайнером (гнать такого дизайнера!!)) )

    Приложен скрин:
    59f8904d2e8d4074635807.png
    Ответ написан
    Комментировать
  • Кнопки + / - общая сумма не работает?

    alex-1917
    @alex-1917
    Если ответ помог, отметь решением
    Ты где-то натырил коду, а натырил не весь!!))
    То, что натырено - это только логика для кнопок - прибавить-убавить. Подсчета суммы нет!
    И то что натырено можно написать не 20 строками, а ДВУМЯ!

    Вот глянь, так надо? - lmap.ru/toster/bs3/plus-minus.php
    Ответ написан
  • Как реализовать это в вёрстке?

    alex-1917
    @alex-1917
    Если ответ помог, отметь решением
    Перефразируй свой вопрос и получишь как минимум половину ответа)))
    Как сделать высоту картинки равной высоте текста.
    Т.е. меняем высоту картинки в зависимости от размеров блока, в котором она находится.
    В css это так height:auto;
    А размеры блока этого будут стартовать от высоты текста.
    Ответ написан
    Комментировать