Ответы пользователя по тегу HTML
  • Как сделать так, чтобы из двух input'ов с типом radio можно было отметить только один?

    @Spaceoddity
    <input type="radio" name="name" disabled>
    Ответ написан
    Комментировать
  • Почему slick работает неправильно?

    @Spaceoddity
    Вкратце, основная проблема со всеми этими слайдерами в том, что им для корректного расчёта размеров/количества слайдов надо заранее (до инициализации слайдера, т.е. до построения слайдером собственной разметки) "знать" размеры, разметку и количество контента.
    Грубо говоря, если у контента стоит display:none, то слайдер посчитает что это контент нулевой ширины и соответствующим образом сгенерит слайды с содержимым нулевой ширины.
    Путей обхода этого много и зависит от конкретного слайдера. Где-то надо реинициализацию сделать, где-то пересчитать размеры (проблема, кстати, актуальна и для адаптива), где-то не надо использовать display:none или динамическую генерацию контента после инициализации слайдера.
    Ответ написан
    Комментировать
  • Как сделать, чтобы блок не выходил за пределы контейнера?

    @Spaceoddity
    Если вкратце, то метода обычно такая:
    У вас контентная часть шириной 1200px. Вы там как-то управляете этим контентом (центрируете, растягиваете на всю ширину). Но дело в том, что блок с фиксированным позиционированием свои координаты и размеры (если они явно указаны) рассчитывает от размера вьюпорта (экрана). Вам нужно продублировать разметку контентной части для фиксированного блока. Т.е. сделать "фиксированную обёртку" и уже внутри неё подобным образом (как и .wrapper) разметить контент. Например:
    .wrapper{
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
    }
    .fixed{
      position: fixed;
      width: 100%;
      top: 0;
      left: 0;
    }
    .fixed-content{
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
    }
    Ответ написан
    1 комментарий
  • Как сделать такую же анимацию появления текста как на сайте tagion.org?

    @Spaceoddity
    https://nanto.bitbucket.io/ - моя реализация на чистом css
    если надо - могу скинуть код всех анимаций, но с ними довольно муторно разбираться. ну или подсказать направление в котором вам стоит покопаться - ключевое слово steps в css-свойстве "animation-timing-function"
    Ответ написан
    1 комментарий
  • Отступы между img в классе. Как сделать?

    @Spaceoddity
    .services{
        overflow: hidden;
    }
    .services .services_img {
        position: relative;
        float: left;
        height: 100px;
    
        margin-right: 50px;
    }
    .services .services_img:last-child{
        margin-right:0;
    }

    но это неактуальный в наше время костыль. лучше:
    .services {
        position: relative;
        height: 100px;
    
        dispaly:flex;
        flex-flow: row wrap;
    
    /* следующие два свойства как раз настраивают нужное вам отображение по горизонтали и вертикали соответственно */
        justify-content: space-between;
        align-items: flex-start;
    }
    Ответ написан
    Комментировать
  • Как выровнять объекты?

    @Spaceoddity
    Ну флексбоксы и гриды вам и без меня посоветуют. Я лишь отмечу - приучайтесь читать код, а не бездумно копипастить его. У вас, в таком коротком коде, у селектора .content почему-то дублируются правила. Не говоря уже о дублировании правил и свойств в блоке медиазапросов. Пользуйтесь одним из фундаментов CSS - каскадом. Если вы прописали свойства какому-то селектору, а потом в блоке медиазапросов что-то дописали или изменили , то все описанные ранее свойства для этого селектора так же будут применены (если они не переопределены с большей специфичностью - определение блока медиазапросов по дефолту повышает специфичность всех вложенных селекторов).

    Конкретно на ваш вопрос, ответ:
    media only screen and (max-width: 1216px) {
    
    .content{
    text-align: center;
    
    position: relative;
    margin: 0 auto;
    }
    
    .content_block {
    text-align: left;
    
    position: relative;
    max-width: 1200px;
    width: 295px;
    height: 200px;
    border: solid 1px;
    display: inline-block;
    padding-bottom: 50px;
    margin: 0 auto;
    margin-top: 40px;
    
    background-color: #FFE475;
    }
    //...
    Ответ написан
    3 комментария
  • Отступ между колонками или привязка к блоку?

    @Spaceoddity
    Абсолютное позиционирование или бэкграунд.
    Вообще надо ещё на адаптив смотреть и уже в комплексе решать.
    Но конкретно тут в пользу бэкграунда говорит:
    1. Картинка явно декоративная, а не контентная. Я всегда стараюсь придерживаться именно этой семантический парадигмы - если графика оформительская, то она задаётся через css (через в html только в очень сложных случаях), если контентная - то через html (чтобы потом можно было легко поменять её через админку) и заодно прописываю ограничения (выравнивание, обрезку, растягивание и т.п.) для контента - чтобы при замене картинки на любую другую ничего не сломалось.
    2. Картинка не выровнена по сетке.
    3. Позиционирование безопаснее. Если вы сделаете эту секцию через флексбоксы (или гриды, или columns), а потом в адаптиве окажется что картинка должна заходить под текст - вам придётся перекраивать весь лэйаут. С бэкграундом вам надо будет просто прописать другие числа позиционирования.
    Ответ написан
    1 комментарий
  • Как присвоить значение переменной в зависимости от выбранного пункта?

    @Spaceoddity
    Вы ставите обработчики клика на кнопки (функция highlightTab). В этой функции вы навешиваете класс. Ну вот и добавьте сюда любые изменения вашей переменной. Можете в кнопках через data-атрибуты его прописать и считывать при клике. Можете соответствие классов переменным сделать. Вариантов много. Самое главное - вам нужно событие по которому вы будет менять переменную. Это событие у вас - клик. Так что в обработчике клика и производите любые нужные вам манипуляции.

    Как-то так:
    <button type="button" class="btn focus-btn active" data-timer-val="5">Focus</button>
    <button type="button" class="btn short-break-btn" data-timer-val="25">Short Break</button>
    <button type="button" class="btn long-break-btn" data-timer-val="45">Long Break</button>

    let startingMinutes = document.querySelector(".btn.active").dataset.timerVal;
    //...
    function highlightTab(event) {
        for (i = 0; i < buttons.length; i++) {
            buttons[i].className = buttons[i].className.replace(' active', '');
        }
    
        event.currentTarget.className += ' active';
        startingMinutes = event.currentTarget.dataset.timerVal;
    }
    Ответ написан
    3 комментария
  • Как сделать карточку CSS c вырезом по бокам?

    @Spaceoddity
    В теории можно, но возни много. Всё "рисование на css" сводится к разделению фигур на более простые составляющие, реализуемые через css. Вот вам пару вариантов реализации (справа и слева):
    62038294e2bf9242084708.jpeg
    И да, бордер при этом можно будет реализовать (в крайнем случае через перекрытие элементов).

    UPD: Проще всего, кстати, построить эту фигуру по вертикали: прямоугольник с закругленными верхними углами, две узких равнобедренных трапеции, прямоугольник с закругленными нижними углами:
    6203853354c86920812377.png
    Ответ написан
    1 комментарий
  • Как сверстать email письмо?

    @Spaceoddity
    В теории, таблицы для вёрстки рассылок нужны чтобы контент по строкам рассовать, в столбик блоки и без помощи выстроятся.
    Т.е. "механизм" прост - для каждой вложенной строки делаете ячейку, в ней таблицу, и в ней уже выстраиваете ячейки горизонтально.
    <table>
    	<tr>
    		<td>
    			<table>
    				<tr>
    					<td>Ячейка 1</td>
    				</tr>
    			</table>
    		</td>
    		<td>
    			<table>
    				<tr>
    					<td>Ячейка 2-1-1</td>
    					<td>Ячейка 2-1-2</td>
    				</tr><!-- здесь таблицу можно закрыть и открыть новую, поскольку строка закончилась, а можно продолжить добавлять строки в эту таблицу -->
    				<tr>
    					<td>Ячейка 2-2-1</td>
    					<td>Ячейка 2-2-2</td>
    				</tr>
    			</table>
    		</td>
    	</tr>
    </table>
    Ответ написан
    Комментировать
  • Реально ли сделать такую таблицу и как?

    @Spaceoddity
    Не надо писать готовое решение. Надо просто натолкнуть автора на правильную работу с таблицами:
    Продолжите все линии в вашей таблице до границ само таблицы. Это будет сетка вашей таблицы, т.е. даст вам необходимое кол-во рядов и столбцов. С этими данными строите таблицу. А зоны объединения рядов и столбцов делаете с помощью colspan и rowspan. На grid суть точно такая же.
    P.S. Я тут вижу 7 столбцов и 4 ряда. С этими данными и стройте таблицу.
    Ответ написан
    Комментировать
  • Как указать путь к файлу в data-audio и JS?

    @Spaceoddity
    Ссылки на файлы надо указывать в html-коде. Т.е. данные будет хранить html-код.
    В js-файле объект player.source (на который вы указали стрелочкой на скрине) хранит данные о "треке запускаемом по умолчанию" (насколько я понял из коммента в коде).
    А чуть ниже этого объекта как раз функция, которая по клику берёт значение data-audio из html-кода и запускает воспроизведение файла.
    Если путаница с путями файлов, попробуйте законсолить вывод data-audio в веб-инспекторе:
    let audiourl = $(this).attr('data-audio');
    console.log(audiourl);
    player.source = {
    Ответ написан
    Комментировать
  • Как сверстать блок такого формата (без фреймворков)?

    @Spaceoddity
    И в чём тут проблема?))
    Представьте себе таблицу 3x3 c размером ячеек 25% 50% 25%. Как именно вы её будете реализовывать (table, блоки, флексбоксы, грид) - на ваш вкус.
    Ответ написан
    Комментировать
  • Стратегия разбиения верстки на блоки?

    @Spaceoddity
    "Не стоит плодить сущности без нужды" (с) У. Оккам
    Разбивайте блоки по логическим и семантическим признакам. Т.е. просто задумайтесь - как ВАМ БУДЕТ УДОБНЕЕ потом работать.
    Кнопки - окей. Выносите для них общие стили. А позиционирование делайте контекстным селектором от родителя. Либо навешивайте отдельный класс (именно для позиционирования).
    Тут ещё такой момент, что вы заранее не можете знать насколько общие стили будут иметь эти "переиспользуемые блоки" (ну серьёзно, у меня уже просто люто бомбит от этого БЭМа, переиспользуются в основном как раз элементы, но по "семантике БЭМа" - это, мать их за ногу, блоки)))
    Например, вы вынесли весь декоратив в общий стиль. А для модификации оставили позиционирование. А зватра вам дизайнер даёт практически идентичную кнопку, но другой высоты. Вы её можете контекстом снова поправить. А послезавтра снова другая высота. И в итоге получается что выносить надо как раз стиль для поздних кнопок, а вот первую делать "модифицируемой".
    Так что я бы просто набирал стили as is. А уж потом, при желании, можно и рефакторинг сделать - и объединить, вынести какие-то отдельные стили.
    Ответ написан
    Комментировать
  • Как сверстать таблицу Pixel Perfect?

    @Spaceoddity
    https://chrome.google.com/webstore/detail/perfectp...
    Лепите макет поверх страницы и в веб-инспекторе подгоняете размеры. Измерять линейкой для pixelperfect не лучший вариант - как минимум, рендеринг шрифтов будет разный (и междустрочное).
    Ответ написан
    Комментировать
  • Почему не работает стиль для заголовков?

    @Spaceoddity
    h1, h2, h3, h4, h5, h6, h7{
     font-size:24px !important;
     margin:0 !important;
    }

    заголовок и так блочный элемент
    Ответ написан
    Комментировать