Ответы пользователя по тегу HTML
  • Как можно конвертировать Exel в HTML таблицу?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    К сожалению, без парсинга средствами php, таблицу excel нельзя сконвертить в html.

    НО! Есть замечательная программа Adobe DreamVeawer, которая умеет это делать. Там есть 2 режима (Код и Дизайн). Если скопировать таблицу в Excel (Ctrl+C) и вставить в окно "Дизайн" (Ctrl+V), то в окне "Код" увидите заветный код. Правда, код будет грязный (будут лишние атрибуты вроде width="", height="", style="", class="") - но их также можно быстро почистить с помощью Regex-замены (она вроде тоже есть в DW)
    Ответ написан
    Комментировать
  • Почему медиазапрос не работает?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    используйте условие в медиа не min-width, а max-width.
    min-width - срабатывает, когда ваша ширина больше чем указанное значение.
    а max-width - это максимальная ширина, при которой будет срабатывать данное правило. т.е если ширина меньше этого значения - правило срабатывает. Если ширина превышает это значение, то ничего не происходит!
    Ответ написан
  • Как сверстать header с картинкой и выезжающим меню?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    зайдите на html5up.com - там можно бесплатно скачать адаптивные шаблоны, некоторые из них как раз такие, как вам нужны - первая картинка тянется на всю высоту окна браузера, меню фиксируется и выдвигается слева и т.д.

    вообще, нужно достаточно хорошо разбираться в теории html, css, js, чтобы верстать такие вещи самостоятельно.
    Не знаете основ? - тратите зря время, пытаясь перепрыгнуть огромный теоретический пласт и перейти сразу к практике. Ничего не получится.
    Ответ написан
    1 комментарий
  • Как лучше создавать offline html-отчеты с графиками?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    нужно смотреть в сторону svg-графики (или canvas). это векторная графика, которая внедряется непосредственно в html-код или в отдельный файл, который подключается в html и выводится непосредственно в теле html-страницы.
    svg легко программируется (по координатам точек), можно создавать очень интересные и сложные инфографические штуки. И все это с минимальными (потому что векторными) размерами файлов.
    есть даже библиотеки, которые имеют API специально для составления графиков и диаграмм. к сожалению, не могу вспомнить ссылок и названий, гугл в помощь.
    Ответ написан
    Комментировать
  • Как сделать 2 div display: inline-block; width: 50%?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    дело в том, что display: inline-block; добавляет после каждого такого блока пробел 3-4px (в зависимости от браузера).
    есть 2 решения:
    1. использовать правило margin-right: -3px - этот отрицательный отступ компенсирует те 3 пикселя, которые появляются. НО! В разных масштабах и в разных браузерах изначальный отступ в 3px может выглядеть шире/уже на пару пикселей и в итоге получим либо наезды блоков друг на друга, либо тот же самый перенос
    2. этот способ наиболее удобный. просто между блоками удалить все пробелы и переносы строк. т.е. закончился предыдущий div, и сразу же после закрывающего тега нужно вставлять следующий открывающий.


    правильно: </div><div> - в этом случае отступов не будет
    не правильно: </div> <div> - даже один символ отступа или переноса строки нарушит "хрупкое равновесие"
    Ответ написан
    6 комментариев
  • На каком cms реализовать такую социальную сеть с группами?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    drupal, joomla,
    вообще, в любой, но каждый нужно допиливать.
    для drupal'а когда-то натыкался на сборку Швабрашвабр (давно дело было) - разработчики допилили стандартный функционал до полноценной соц. сети (типа хабрахабра)
    Ответ написан
    Комментировать
  • Правильно ли оптимизирован код сайта?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    Ваш сайт визуально адаптирован под мобильные устройства. Главные недочеты кроются в том, что сайт одностраничный и при загрузке сразу подкачивает огромное количество огромных, насильно масштабированных, картинок. Сделайте что-нибудь с загрузкой картинок (например, не загружайте их сразу, а подгружайте при запросе), и переразмерьте их - основная часть критических ошибок указывает на неоптимизированные картинки.
    Ответ написан
    Комментировать
  • Какое написание class/id селекторов более правильное?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    Гуглите БЭМ.

    Вообще, это личное дело каждого кодера.

    Я лично считаю, что лучше использовать подчеркивание для определения единого блока, а тире - для разделения блоков. Например, когда нужно быстро скопировать class или id, мы обычно дважды кликаем по нему в редакторе. Смотрим на реакцию:

    class="klikni_po_mne_dvazhdy"
    class="klikni-po-mne-dvazhdy"


    Очевидно, что первым вариантом управлять удобнее.

    Далее, если имеем вложенность, то отделяем все внутренние элементы с помощью тире, например:
    class="video_player---buttons---play_button"
    Ну тут я нарочно использовал 3 тире подряд, чтобы было нагляднее видно разделение вложенности (про вложенность гуглите БЭМ).
    Ответ написан
    Комментировать
  • Как называется такой принцип верстки?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    если уж совсем быть точным, то
    Адаптивная верстка с использованием параллакс-эффектов.
    Адаптивность - это подстраиваемость под любые разрешения. Бывает резиновой и ступенчатой (или пороговой)
    Параллакс-эффекты - любые эффекты, которые позволяют изменить принцип стандартной прокрутки страницы. Хотя вообще параллакс - это немного другое, но в случае с сайтами, особенно в последнее время, термин используется для любых манипуляций при прокрутке страницы.
    Ответ написан
  • Какая cms интернет-магазина подойдет?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    Любую cms нужно допиливать под данный функционал. Подключать платежные системы и т.п.
    А cms подойдёт любая - главное, чтобы для неё были модули платежных систем.
    Ответ написан
    Комментировать
  • Фиксированное меню и якорь?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    1. якорь сделай не на <p>, а создай прямо перед ним <a name="news" class="anchor"></a> - это будет якорем. важно, ничего не размещать внутри этой ссылки.
    2. для ссылок .anchor создаем стили:
    .anchor {
    margin-top: -100px;
    display: inline-block;
    position: relative;
    height: 1px;
    width: 1px;
    }

    где 100px нужно заменить на высоту вашей фиксированной шапки. таким образом якорь будет физически находиться на 100px (или сколько там у вас) выше, чем он должен быть.
    Ответ написан
    3 комментария
  • Как сделать вывод другого html кода в popup для мобильных устройств?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    Лучше всего используйте device.js matthewhudson.me/projects/device.js

    Подключите файл device.js на своей странице и скрипт сам определит, что это за устройство (мобильный, планшет или пк, а также поможет узнать ориентацию и систему устройства.
    А дальше просто добавьте скрипт с условием вроде:
    if (device.mobile()) {
      //показать сообщение
    } else {
      //ничего не показывать или показать что-нибудь другое
    }
    Ответ написан
    Комментировать
  • Как уменьшить ширину такого блока?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    Это глюк вашего слайдера. Он, видимо, рассчитывает ширину холдера (ul) для превьюшек на основе их ширины, но чего-то не учитывает. Например, не учитывает рамки вокруг фотографий. К тому же, я там в настройках вроде увидел опцию, которая отвечает за ширину превьюшек - если она есть, то попробуйте поменять её.
    А самый простой и быстрый вариант - задать !important свойство в дефолтных стилях: joxi.ru/8AnNnVBsngKxAO - я на скриншоте указал 500px, а вообще советую сделать 100% !important.
    Ответ написан
    Комментировать
  • Что за атрибут у тега input?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    этот атрибут придумал разработчик. да, это нарушает чистоту кода, но если DOCTYPE у страницы - XHTML или HTML5, то создание своих собственных атрибутов для тегов вполне допустимо.
    Скорее всего разработчик добавил этот вспомогательный атрибут, чтобы передать скрипту какие-то свойства данного инпута. Судя по названию атрибута, на странице используется Виртуальная клавиатура - это окошко, которое всплывает при фокусировке в этом поле. В этом окошке набор всех буков - если, например, человек с ограниченными возможностями или не имеет клавиатуры с кириллицей.
    Ответ написан
    Комментировать
  • Как сделать подсветку синтаксиса языка разметки html в самописном редакторе?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    ну в textarea вообще подсветку не сделаешь.
    все современные WYSIWYG-редакторы сделаны по принципу подмены обычной textarea блоком, в котором можно вставлять разметку (т.е. обычный div) и при фокусе в этом блоке скрипт фокусируется и в textarea. Таким образом, набирая символы, мы их набираем по сути в скрытой textarea и они же дублируются в div, который видим. Ну а в div'е уже можно выделять текст, обводить его любыми span, в том числе теми, которые задают цвет.
    Ответ написан
  • Как начать показ блока при скролле?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    $("#slide01").css("display", "none");
    $(window).scroll(function(){
       if ($("body").scrollTop() > 0) { //если страница прокручена
         $("#slide01").fadeIn(2000); //выводим блок
       } else {//иначе
         $("#slide01").fadeOut(2000); //прячем блок
       }
    });
    Ответ написан
    2 комментария
  • Как в обратном порядке заполнить HTML форму из GET параметров?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    все переменные, которые присутствуют в адресной строке, страница получает в общей переменной $_GET.
    Например, если в URL есть ?question=123&answer=456, то смело в инпутах вписывайте
    <input type="text" name="question" value="<?=$_GET['question'];?>">
    <input type="text" name="answer" value="<?=$_GET['answer'];?>">
    Ответ написан
    2 комментария
  • Веб-студия, помощь?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    Здесь работодателя не найдёшь, товарищ! Здесь сидят фрилансеры. Так что твоё завуалированное "резюме" с мыслью "а вдруг кто-нибудь увидит?!" не проканает.
    Ответ написан
    Комментировать
  • Как скачать шаблон с wix.com?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    Можно скачать страницу со всем подключенным содержимым в Google Chrome следующим образом:
    0. Сохраняем исходный код страницы, корректируем пути во всех <link> и <script>, прописывая свои значения, например, для стилей папку css/, для скриптов js/ и т.д.
    1. Включаем Инструменты разработчика F12
    2. Переходим во вкладку "Network", перезагружаем страницу (f5). Видим все файлы, которые вызываются при загрузке страницы. Сохраняем всё необходимое ручками (щелкаем по заголовкам правой кнопкой, сохраняем в необходимые папки) - все картинки, скрипты, файлы стилей, шрифты и т.д.

    Если css или js файлы закомпрессованы, есть онлайн-сервисы, позволяющие декомпрессировать css и js код - пробейте в гугле "css decompressor", "js decompressor"

    Этот вариант немного муторный, но очень действенный по сравнению со стандартным "Сохранить как", т.к. можно проконтролировать подгрузку всех картинок, которые вызываются через файлы стилей, а также исключить ненужные скрипты и др. файлы.
    Ответ написан
    Комментировать
  • Почему Веб мастер постоянно негодует когда сажает на joomla страницы на Bootstrap?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    Использовать бутстрап для рядовых проектов (даже интернет-магазинов), всё равно, что пытаться добраться до ближайшего магазина за углом, используя скоростную машину или самолет.
    Все эти примочки, которыми напичкан бутстрап никогда не пригодятся на 99,5% сайтов.
    Например, бутстрап обязывает использовать дополнительные зарезервированные классы, которые, казалось бы, ускоряют верстку, но на самом деле, мешают другому человеку (не знакомому с бутстрапом) и заставляют изрядно попотеть, чтобы разобраться во всех этих классах.
    95% дизайн макетов не рисуются по сетке, оптимизированной под верстку с бутстрапом. Половина из этих макетов вообще рисуется безо всяких сеток. Тут всплывает еще один момент - получается, мы пытаемся запихнуть бутстрап в макеты, которые рисовались совсем без рассчета на бутстрап. Большинство дизайнеров вообще знает ничего о бутстрапах. Хорошо, если они умеют грамотно использовать сетки.
    Могу перечислять причины недовольства веб-мастера еще очень долго, т.к. сам являюсь противником использования бутстрапа в обычных сайтах. Бутстрап создан для разработки интерфейсов - для них и нужно его применять.

    Вывод один: не использовать бутстрап, работая в команде с людьми, которые не работают с бутстрапом. Он раздражает всех, кто не читал документацию по нему. Да и тех, кто прочел документацию и решил, что использовать бутстрап - это извращение - тоже достаточно большое количество.
    Ответ написан
    Комментировать